/* ================================================
   AMOTZ V4 — HERO  (Figma 538:3478 → "New Hero")
   ================================================
   band    1440x850 · photo · column · gap 150 · padding 0/60
   scrim   850x850 flush RIGHT · transparent -> #0C0C0C
   panel   639x200 gold flush RIGHT · radius 16 on the LEFT corners · top 291
   copy    695 wide · eyebrow 16 · headline 90/108 · sub 30
   cta     189x50 gold pill · label THEN icon
   ================================================

   BUILT FROM SCRATCH, PREFIX `azh-`, SHARING NOTHING WITH `az-hhero`.
   The previous hero was written from Figma's "Copy as code" CSS, which names each text layer
   after its content and truncates that name at 50 characters — so every long Hebrew string
   arrived as truncated English. It also transcribed the navigation row into the hero because
   the frame draws it there. Both faults are structural, so this is a new file rather than a
   patch, and the two do not share a single class name.

   THERE IS NO NAVIGATION HERE, DELIBERATELY. Brand, links and the nav CTA belong to
   `amotz_header` in theme-builder template 381, applied site-wide. Building them here is what
   put two navigation rows on the page. */

.azh-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Figma's cross-axis MAX = right on its LTR canvas. Under dir="rtl" that is flex-START.
	   Transcribing `flex-end` puts the whole copy column on the wrong side — the single most
	   repeated bug in this project. */
	align-items: flex-start;
	min-height: 850px;
	padding: 0 var(--az-edge);
	background-color: #0C0C0C;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	/* Keeps the scrim and panel z-indexes local so they cannot fight anything above. */
	isolation: isolate;
	overflow: hidden;
}

/* ------------------------------------------------
   SCRIM  (node 512:3358)
   ------------------------------------------------
   Figma draws an 850x850 square whose gradient handles run VERTICALLY in the node's own space
   — (0.5, 0.044) to (0.5, 1.024) — and then applies `transform: matrix(0, 1, 1, 0, 0, 0)`.
   That matrix maps (x,y) -> (y,x): a transpose, which on a square turns the vertical gradient
   horizontal. So the visual result is transparent at the LEFT edge and solid ink at the RIGHT,
   which is what darkens the ground under the right-aligned Hebrew.

   Shipped in its final direction rather than as a rotated element: a transform whose only job
   is to turn a gradient is a thing to resolve at build time, not to carry into production. */
.azh-hero__scrim {
	position: absolute;
	inset-block: 0;
	right: 0;
	z-index: 0;
	/* PROPORTIONAL, NOT A FIXED 850px.
	   850 of a 1440 band is 59%. Pinning it to 850px meant that on any narrower viewport the
	   scrim covered a LARGER share of the width — and the same gradient stretched over more
	   distance reaches full ink later, so the middle stayed light and the photograph showed
	   straight through behind the headline. Against the reference it read washed out.
	   As a percentage the falloff keeps the design's proportions at every width. */
	width: 59%;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 4.64%, #0C0C0C 87.54%);
	pointer-events: none;
}

/* ------------------------------------------------
   GOLD PANEL  (node 512:3359 — 639x200 at x801,y291)
   ------------------------------------------------
   x801 + 639 = 1440, so it is flush to the right edge. `rectangleCornerRadii [16,0,0,16]` =
   top-left and bottom-left only — the two corners NOT against the viewport edge.

   PHYSICAL properties, not logical: `border-start-start-radius` and friends flip under RTL,
   which would round the corners that are off-screen and leave the visible ones square. */
.azh-hero__panel {
	position: absolute;
	top: 291px;
	/* ANCHORED TO THE CONTENT COLUMN, NOT THE VIEWPORT.
	   `right: 0` pinned this to the window edge while the headline stays inside the 1320px
	   column. At exactly 1440 those differ by the 60px gutter, which is what the file shows —
	   so it looked right. On anything wider `--az-edge` grows and the panel slid further and
	   further right, away from the text it is supposed to sit behind.
	   Holding it 60px past the column edge keeps the design's relationship at every width;
	   max() stops it going negative below 1440, where --az-edge is already 60. */
	right: max(0px, calc(var(--az-edge) - 60px));
	z-index: 1;
	width: 639px;
	/* NO max-width clamp. 639 of a 1440 band is 44%, and a 46% cap looks harmless at 1440 but
	   shrinks the panel faster than the design does at every width below it — which is why it
	   read too narrow against the reference. The panel is a fixed 639 in the file; let it be
	   639 and let overflow:hidden on the section deal with very small viewports, where the
	   media query below removes it anyway. */
	height: 200px;
	/* REVERSED. `--az-gradient-gold` runs bright-to-dark LEFT-to-right — it was built for the
	   announcement bar, whose bright end is on the canvas left. This panel is the other way
	   round: in the design it is brightest against the RIGHT edge and fades out towards the
	   headline, which is what lets white text stay readable over it. Using the token as-is put
	   the bright end under the text and the dark end against the edge — the gold looked wrong
	   in exactly the place it matters. Same stops, opposite direction. */
	background-image: var(--az-gradient-gold);
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	pointer-events: none;
}

/* Flip the gold so the bright end sits against the RIGHT edge instead of under the headline.
   Which way round this belongs was genuinely hard to read off the design, and it got reversed
   once in each direction — so it is a control now rather than a constant, decided by whoever
   can see the two side by side. */
.azh-hero__panel--flip {
	background-image: linear-gradient(
		to left,
		var(--az-gold-1) 0%,  var(--az-gold-2) 10%, var(--az-gold-3) 20%,
		var(--az-gold-4) 30%, var(--az-gold-5) 40%, var(--az-gold-6) 50%,
		var(--az-gold-6) 60%, var(--az-gold-7) 70%, var(--az-gold-8) 80%,
		var(--az-gold-9) 90%, var(--az-gold-10) 100%
	);
}

/* ------------------------------------------------
   COPY COLUMN  (695 wide at x685 -> flush to x1380 = 1440 - 60)
   ------------------------------------------------
   The file puts this at y240, which is the 90px nav row plus the 150px gap after it. The nav
   row now lives in the header template ABOVE this section and takes its own space there, so
   only the 150px gap belongs to the hero. Reserving the full 240 would count the row twice. */
.azh-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 70px;
	width: 100%;
	max-width: 695px;
	padding-top: 150px;
	padding-bottom: 90px;
}

.azh-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.azh-hero__eyebrow {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	letter-spacing: 1.54px;
	/* Hebrew has no case, so this only affects any Latin in the string. Kept because the file
	   declares it. */
	text-transform: uppercase;
	text-align: right;
	color: #ECC55A;
}

.azh-hero__title {
	width: 100%;
	margin: 0;
	font-size: 90px;
	font-weight: 700;
	line-height: 108px; /* the file's exact value, not a ratio */
	letter-spacing: -1.8px;
	text-align: right;
	color: #FCFCF7;
}

.azh-hero__sub {
	width: 100%;
	margin: 0;
	font-size: 30px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: -0.5px;
	text-align: right;
	color: #FCFCF7;
}

/* ------------------------------------------------
   CTA  (189x50 at x1191 — icon x1219, label x1242)
   ------------------------------------------------
   The icon sits to the LEFT of the label in the file. Under dir="rtl" the first child renders
   RIGHTMOST, so the markup puts the LABEL first. Icon-first mirrors the button — shipped wrong
   once already. */
.azh-hero__cta {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 14px 28px;
	background-image: var(--az-gradient-gold);
	border-radius: 1000px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--az-on-gold);
}

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

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

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   90px type and a 695px column are what give out first. The scrim is the subtle one: it is
   drawn for a wide band, and at phone width an 850px column starting at the right covers the
   whole photograph, so the hero turns into a flat dark rectangle with the subject invisible.
   Below 900 it becomes a bottom-up gradient instead, which keeps the face visible and still
   puts dark ground under the text. */
@media (max-width: 1200px) {
	.azh-hero__title {
		font-size: 68px;
		line-height: 1.15;
	}
}

@media (max-width: 900px) {
	.azh-hero {
		min-height: 0;
		padding: 0 20px;
	}

	.azh-hero__copy {
		max-width: 100%;
		padding-top: 56px;
		padding-bottom: 56px;
		gap: 40px;
	}

	.azh-hero__title {
		font-size: 40px;
		line-height: 1.15;
		letter-spacing: -0.8px;
	}

	.azh-hero__sub {
		font-size: 20px;
		line-height: 1.3;
	}

	.azh-hero__eyebrow {
		font-size: 13px;
		letter-spacing: 1px;
	}

	.azh-hero__scrim {
		width: 100%;
		max-width: 100%;
		background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0.15) 0%, #0C0C0C 88%);
	}

	.azh-hero__panel {
		display: none;
	}
}