/* ================================================
   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 {
		/* Same override as the mobile block below — the saved 90px applies here too. */
		font-size: 68px !important;
		line-height: 1.15 !important;
	}

	/* THE GOLD PANEL GOES, BECAUSE THIS IS THE BREAKPOINT THAT BREAKS IT.
	   The panel is drawn at a fixed `top: 291px` with a fixed 200px height, sized in the file to
	   sit behind the headline's second line at 1440. The rule above shrinks the headline from
	   90px to 68px, so from here down the text moves up while the panel stays where it is:

	     1280   panel 337-537, headline 321-537, subline 553   — correct
	     1200   panel 337-537, headline 321-477, subline 493   — subline inside the panel
	     1024   panel 337-537, headline 161-317               — panel misses the headline entirely

	   Chasing it with a per-breakpoint top and height would need a new pair of numbers at every
	   width the headline changes size, and would be wrong again the first time the copy is edited
	   to a different number of lines. The panel is decoration behind one line of text; where it
	   can no longer be behind that line, it should not be drawn. It already disappears below
	   900px for the same reason. */
	.azh-hero__panel {
		display: none;
	}
}

@media (max-width: 900px) {
	.azh-hero {
		min-height: 0;
		padding: 0 20px;
		/* NO background-position OVERRIDE HERE.
		   It was 6% center, worked out for the old photograph so his face landed mid-screen. The
		   client has since replaced the hero image, and that figure framed the new one on its top
		   edge — the hero rendered almost entirely black. The page's own setting decides the
		   position now, which is what lets the client change the picture without needing me. */
	}

	.azh-hero__copy {
		max-width: 100%;
		/* 56 is the gap the design leaves below the header; the extra 90 is the header itself,
		   which now overlaps the hero on mobile as it always did on desktop. Without it the
		   eyebrow started at the same y as the nav row and the two printed over each other. */
		/* !important because page 394 has a SAVED value for this control (240/80/56), and
		   Elementor prints saved settings as page CSS, which outranks a plugin stylesheet. The 56
		   it saved was correct while the header took its own space on mobile; the header now
		   overlaps by 90 as it always did on desktop, so the clearance has to grow with it. */
		/* 146 cleared the header; the client asked for the copy lower still so it sits on his
		   shoulders rather than across his face. 210 = the 90px header + 120 of photograph. */
		padding-top: 210px !important;
		padding-bottom: 56px;
		/* Room between the eyebrow, the headline and the subline. */
		gap: 28px;
	}

	/* The button gets more air above it than the lines of text get between themselves —
	   at a flat 40px gap the subline and the button read as one block. */
	.azh-hero__cta {
		margin-top: 16px;
	}

	.azh-hero__title {
		/* !important because page 394 saved this widget's typography ONCE, with no responsive
		   variants — font-size:90px, line-height:108px, at every width. Elementor prints saved
		   settings as page CSS with no media query, so it outranked this and a 90px headline was
		   filling a 390px screen. min-height and padding on the same widget DO have mobile values
		   saved; only the typography was left global. */
		font-size: 34px !important;
		line-height: 1.2 !important;
		letter-spacing: -0.6px !important;
	}

	.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%;
		/* TONED DOWN, at the client's request. It reached solid #0C0C0C by 88% and the whole lower
		   half of the hero read as a flat black panel rather than a darkened photograph. It now tops
		   out at 0.82, so the room behind him stays visible through the text. The top stop drops to
		   0.08 so his face is barely touched. */
		background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0.08) 0%, rgba(12, 12, 12, 0.62) 55%, rgba(12, 12, 12, 0.82) 100%);
	}

	.azh-hero__panel {
		display: none;
	}
}

/* ---- mobile hero: the copy sits at the foot of the photograph -------------------------------
   The client asked for everything lower, smaller and pinned down.

   PINNED WITH A MIN-HEIGHT, NOT MORE PADDING. Padding pushed the copy down by making the section
   taller, so the text stayed the same distance from the top and the hero just grew. Giving the
   section a height and pushing the copy to its end anchors the block to the bottom of the frame
   instead — his face keeps the space above it whatever the text does.

   78vh rather than a pixel figure: the hero should end near the fold on any phone, and a fixed
   height would over- or undershoot across the range from a small iPhone to a large Android.

   These override the earlier mobile rules further up this file, which is why the values are
   repeated rather than edited in place — the block above is what the header clearance work
   settled on, and keeping the two separate makes it obvious which change did what. */
@media (max-width: 900px) {
	.azh-hero {
		/* !important because the page has a saved min-height of 0 for mobile, printed as Elementor
		   page CSS at higher specificity — without it the section collapses to the height of the
		   text and there is nothing to pin the copy against. */
		min-height: 78vh !important;
		justify-content: flex-end;
	}

	.azh-hero__copy {
		/* The auto margin does the pushing now. */
		margin-top: auto;
		padding-top: 0 !important;
		padding-bottom: 40px;
		gap: 18px;
	}

	.azh-hero__title {
		font-size: 30px !important;
		line-height: 1.15 !important;
	}

	.azh-hero__sub {
		font-size: 17px;
		line-height: 1.35;
	}

	.azh-hero__eyebrow {
		font-size: 12px;
		letter-spacing: 0.8px;
	}

	.azh-hero__cta {
		margin-top: 8px;
	}
}