/* ================================================
   AMOTZ V4 — STORY  "למה בכלל התחלתי עם זה?"  (Figma 538:3478 §5)
   ================================================
   band     1440x789 · botanical photo · padding 90/60
   portrait 529x609 @ 136,90 · radius 55
   title    54/65 · right · #152114
   quote    611x112 · #ECC55A · r16 · padding 20 · text 16/24 #152114
   body     16/24 · right · #1C3A13
   cta      162x50 gold pill · 14/600
   ================================================

   TWO COLUMNS, NOT ABSOLUTE POSITIONS. The file draws the portrait at x136 and the copy at
   x693 — but those are coordinates in a fixed 1440 frame, and transcribing them would pin the
   layout to one width. The relationship they encode is a two-column split inside the 1320
   content column: portrait on the LEFT, copy on the RIGHT, which under RTL is simply the
   reading order reversed. Flex reproduces that at any width. */

.azh-story {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 789px;
	padding: 90px var(--az-edge);
	background-color: var(--az-cream);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.azh-story__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 28px;
	width: 100%;
	max-width: 1320px;
}

/* COPY FIRST in source so it renders on the RIGHT under RTL — the file puts it at x693 against
   the portrait at x136. */
.azh-story__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 24px;
	flex: 1 1 611px;
	min-width: 0;
}

.azh-story__title {
	margin: 0;
	width: 100%;
	font-size: 54px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: -1.8px;
	text-align: right;
	color: #152114;
}

/* The pull-quote: a gold block the width of the copy column, not an inline style on the text.
   In the file it is its own 611x112 frame with 20px padding all round. */
.azh-story__quote {
	margin: 0;
	width: 100%;
	padding: 20px;
	background-color: #ECC55A;
	border-radius: 16px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: right;
	color: #152114;
}

.azh-story__body {
	margin: 0;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: right;
	color: #1C3A13;
}

.azh-story__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 14px 28px;
	background-image: var(--az-gradient-gold);
	/* The file says r33554400 — Figma's way of writing "fully round". */
	border-radius: 1000px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--az-on-gold);
}

.azh-story__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
}

.azh-story__cta-icon svg { display: block; width: 15px; height: 15px; }

/* 55px radius on a 529x609 portrait — a soft rectangle, not a pill. `aspect-ratio` keeps that
   proportion as the column narrows instead of letting the image squash. */
.azh-story__figure {
	flex: 0 1 529px;
	min-width: 0;
}

.az-section .azh-story__portrait {
	display: block;
	width: 100%;
	aspect-ratio: 529 / 609;
	object-fit: cover;
	border-radius: 55px;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   A 611px copy column and a 529px portrait need 1168px before the gap, so the two-up layout
   gives out just under the design width. Stacked, the copy leads — it carries the heading, and
   a portrait with no context above it is just a photograph of a stranger. */
@media (max-width: 1150px) {
	.azh-story {
		min-height: 0;
		padding: 64px var(--az-edge);
	}

	.azh-story__inner {
		flex-direction: column;
		gap: 32px;
	}

	.azh-story__copy,
	.azh-story__figure {
		flex: 1 1 auto;
		width: 100%;
	}

	.azh-story__figure {
		max-width: 529px;
	}
}

@media (max-width: 900px) {
	.azh-story {
		padding: 48px 20px;
	}

	.azh-story__title {
		font-size: 32px;
		line-height: 1.15;
		letter-spacing: -0.6px;
	}

	.az-section .azh-story__portrait {
		border-radius: 32px;
	}
}