/* ================================================
   AMOTZ — STORY PANEL  (Figma 566:9876)
   ================================================
   band      1440x900 · #F6F4EE · padding 100/60
   card      1320x700 · #EBC55B · padding 32 · gap 50 · radius 24 except TOP-RIGHT 100
   swirl     2444x1878 vector, #FFE3B2 at 60%, hung well outside the card and clipped
   photo     600x636 · radius 8 except TOP-RIGHT 100
   headline  Polin Bold 52/1.2 · #472D00
   body      Polin Medium 16/1.4 · #472D00
   callout   Polin Bold 24/1.2 · tracking 1 · #472D00, with a 46px rule at its start
   ================================================ */

.az-story {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px var(--az-edge);
	background-color: var(--az-cream);
}

.az-story__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 50px;
	width: 100%;
	max-width: 1320px; /* the design's content column — 600 + 50 + 606 + 2x32 lands exactly here */
	padding: 32px;
	overflow: hidden; /* what crops the swirl */
	background-color: var(--az-yellow);
	/* PHYSICAL corners. The single 100px corner is the card's TOP-RIGHT on the canvas and it
	   echoes the photo's own top-right — they are a pair, and a logical property would move
	   one of them and not the other under dir="rtl". */
	border-radius: 24px;
	border-top-right-radius: 100px;
}

/* THE PHOTO IS ON THE LEFT AND THE COPY IS ON THE RIGHT, and the markup is written
   copy-first to achieve that. Under dir="rtl" a plain flex row fills right-to-left, so the
   FIRST child lands on the right. Writing the photo first — the order it appears in the
   Figma tree, where the canvas is LTR — would put it on the wrong side.

   Copy-first is also the correct reading order for a screen reader: the prose is the content,
   the photograph is atmosphere. */
.az-story__card--photo-right {
	flex-direction: row-reverse;
}

/* The decorative swirl (566:9878). Hung far outside the card on every edge — the design's
   own insets, which is why the card needs overflow:hidden — so only a slice of the curve
   crosses the panel. Purely decorative. */
.az-story__swirl {
	position: absolute;
	/* top / right / bottom / left, straight from the design node. */
	inset: -41.49% -35.4% -126.76% -49.75%;
	z-index: 0;
	width: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	pointer-events: none;
}

.az-story__photo,
.az-story__copy {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------
   PHOTO  (566:9880)
   ------------------------------------------------ */
.az-story__photo {
	position: relative;
	flex-shrink: 0;
	width: 600px;
	height: 636px;
	overflow: hidden;
	border-radius: 8px;
	border-top-right-radius: 100px;
}

.az-section .az-story__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The source is a 4096x2296 LANDSCAPE photograph dropped into a 600x636 PORTRAIT box, so
	   almost two thirds of it is cropped away and where the crop sits is the whole composition.

	   The design scales it to 189.1% of the box width and offsets it left by 77.75%, which
	   puts the visible window at 466.5px..1066.5px of an 1134.6px-wide scaled image — centre
	   67.6%. That is where this number comes from; it is not a guess, and it is exposed as a
	   control because a different photograph will want a different one. */
	object-position: 68% 50%;
}

/* ------------------------------------------------
   COPY  (566:9881)
   ------------------------------------------------ */
.az-story__copy {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	min-height: 636px; /* matches the photo, so the card is square-shouldered at 1320 */
	text-align: right;
}

.az-story__title {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--az-brown);
}

.az-story__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--az-brown);
}

/* ------------------------------------------------
   CALLOUT  (566:9886)
   ------------------------------------------------
   A 46px rule and the bold line, 16px apart.

   THE RULE IS FIRST IN THE MARKUP so that dir="rtl" puts it on the physical right, which is
   where the design has it — and which, in Hebrew, is the START of the line. It reads as an
   accent bar opening the sentence, not as a trailing mark.

   In Figma the rule is a 46x2 horizontal line rotated 90deg inside a zero-width box. There is
   no asset for it here: a 2px-wide, 46px-tall block with rounded ends is the same thing
   without the file, the transform, or the reasoning about what a rotated zero-width flex item
   does at other viewport widths. */
.az-story__callout {
	display: flex;
	align-items: center;
	gap: 16px;
}

.az-story__rule {
	flex-shrink: 0;
	width: 2px;
	height: 46px;
	background-color: var(--az-brown);
	border-radius: 1px; /* the design's stroke-linecap="round" */
}

.az-story__callout-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	color: var(--az-brown);
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   The card is 1320px of fixed content — a 600px photo beside a 606px column — so it has no
   slack at all below 1440. The photo gives first (it is the only part that can shrink without
   the type reflowing badly), then the two stack.

   Inferred, not transcribed: the design file has no tablet or phone frame. */
@media (max-width: 1200px) {
	.az-story {
		padding: 72px 32px;
	}

	.az-story__card {
		gap: 32px;
	}

	.az-story__photo {
		/* Was a fixed 600. Now it takes 45% of the row and keeps the design's 0.94 aspect via
		   the height below, so the two columns shrink together instead of the photo pinning
		   the card open. */
		width: 45%;
		height: auto;
		aspect-ratio: 600 / 636;
	}

	.az-story__copy {
		min-height: 0;
	}
}

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

	.az-story__card,
	.az-story__card--photo-right {
		/* Both orderings collapse to the same stack. Copy first, photo second — the prose is
		   the content and it should not be pushed below a 400px image on a phone. */
		flex-direction: column;
		gap: 28px;
		padding: 24px;
		border-top-right-radius: 56px;
	}

	.az-story__photo {
		width: 100%;
		aspect-ratio: 16 / 10; /* a portrait crop is wrong once it spans the full width */
		border-top-right-radius: 40px;
	}

	.az-story__copy {
		width: 100%;
	}

	/* See the !important note in amotz-announcement-bar.css. Elementor bakes this widget's
	   typography defaults into the PAGE stylesheet at (0,3,0) with no media query, loaded
	   after this file, so an unweighted rule here can never win. Scope is one media query. */
	.az-story__title {
		font-size: clamp(28px, 6.5vw, 38px) !important;
	}

	.az-story__callout-text {
		font-size: clamp(18px, 4.4vw, 21px) !important;
		letter-spacing: 0.5px !important;
	}
}