/* ================================================
   AMOTZ — HOME HERO  (Figma 538:3478 → "New Hero")
   ================================================
   band     1440x850 · photo background · padding 0/60 · column, gap 150
   scrim    850x850 square, flush RIGHT, gradient transparent → #0C0C0C
   panel    639x200 gold, flush RIGHT, radius 16px on the LEFT corners, top 291
   nav      1320x90 row · space-between · brand | links | CTA pill
   copy     695 wide · eyebrow 16 · headline 90/1.2 · sub 30
   ================================================

   THIS IS A SEPARATE WIDGET FROM THE COURSE-PAGE HERO, ON PURPOSE.
   The V2 hero (566:9806) is a sales header: brand lockup, video card, trust line, one buy
   button. This one is a SITE header: it carries the primary navigation for the whole site.
   Sharing one widget would mean every control on the course hero grows a "…but not on the
   home page" condition, which is how a widget becomes unmaintainable. They share the token
   sheet and the gold gradient; they share nothing else. */

.az-hhero {
	position: relative;
	display: flex;
	flex-direction: column;
	/* RTL: flex-start is the RIGHT edge, which is where the design puts the copy column.
	   Transcribing the Figma value (`flex-end`) would push it to the left — the canvas-is-LTR
	   trap documented at length in amotz.css. */
	align-items: flex-start;
	gap: 150px;
	min-height: 850px;
	padding: 0 var(--az-edge);
	background-color: var(--az-ink);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	/* `isolation` in the design. It keeps the scrim's stacking context local so the z-indexes
	   below cannot escape and fight with the announcement bar above. */
	isolation: isolate;
	overflow: hidden;
}

/* ------------------------------------------------
   THE SCRIM
   ------------------------------------------------
   Figma draws an 850x850 square with a 180.24deg gradient and then applies
   `transform: matrix(0, 1, 1, 0, 0, 0)`. That matrix maps (x,y) → (y,x): a transpose, which
   on a SQUARE element is just the gradient turned 90 degrees. So rather than ship a transform
   whose only job is to rotate a gradient, the gradient is declared in its final direction —
   transparent at the left edge, solid ink at the right, which is what darkens the ground
   under the right-aligned Hebrew.

   The stops (4.64% / 87.54%) are the design's, unrounded. */
.az-hhero__scrim {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 850px;
	max-width: 70%;
	height: 100%;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 4.64%, #0C0C0C 87.54%);
	pointer-events: none;
}

/* ------------------------------------------------
   THE GOLD PANEL  (639x200, left 801 → flush to the 1440 right edge)
   ------------------------------------------------
   Rounded on the LEFT corners only (`16px 0px 0px 16px`), i.e. the two corners that are not
   against the viewport edge. Physical corners, not logical — under RTL the logical properties
   would flip these to the wrong side and the rounding would vanish off-screen. */
.az-hhero__panel {
	position: absolute;
	top: 291px;
	right: 0;
	z-index: 1;
	width: 639px;
	max-width: 45%;
	height: 200px;
	background-image: var(--az-gradient-gold);
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	pointer-events: none;
}

/* ------------------------------------------------
   NAV ROW
   ------------------------------------------------ */
.az-hhero__nav {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 180px;
	align-self: stretch;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 20px 0;
	min-height: 90px;
}

/* Brand lockup — logo FIRST in source so it lands on the right under RTL, matching the
   canvas where it is the rightmost element of the row. */
.az-hhero__brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7.42px;
	color: inherit;
	text-decoration: none;
}

.az-section .az-hhero__brand-logo {
	display: block;
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.az-hhero__brand-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right, the design's `flex-end` on an LTR canvas */
}

.az-hhero__brand-name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: right;
	color: var(--az-on-ink);
}

.az-hhero__brand-tag {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.185507px;
	text-align: right;
	color: var(--az-on-ink);
}

/* The dark pill holding the six links. */
.az-hhero__links {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding: 12px 32px;
	background-color: #252525;
	border-radius: 100px;
}

.az-hhero__link {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	color: var(--az-on-ink);
	/* The design's own value. It is not a hover state — every link carries it at rest. */
	opacity: 0.82;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.az-hhero__link:hover,
.az-hhero__link:focus-visible {
	opacity: 1;
}

/* Gold CTA pill at the far end of the nav row. */
.az-hhero__navcta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 20px;
	min-height: 44px;
	background-image: var(--az-gradient-gold);
	border-radius: 1000px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	color: var(--az-on-gold);
	text-decoration: none;
}

/* ------------------------------------------------
   COPY COLUMN
   ------------------------------------------------ */
.az-hhero__copy {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 70px;
	width: 100%;
	max-width: 695px;
	margin-right: 0;
}

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

.az-hhero__eyebrow {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1.54px;
	text-transform: uppercase;
	text-align: right;
	color: #ECC55A;
}

.az-hhero__title {
	width: 100%;
	margin: 0;
	font-size: 90px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.8px;
	text-align: right;
	color: #FCFCF7;
}

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

.az-hhero__cta {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	min-height: 50px;
	background-image: var(--az-gradient-gold);
	border-radius: 1000px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	color: var(--az-on-gold);
	text-decoration: none;
}

.az-hhero__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	color: var(--az-on-gold);
}

.az-hhero__cta-icon svg {
	display: block;
	width: 15px;
	height: 15px;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   The 90px headline and the 472px nav pill are the two things that break first. The nav
   collapses to a wrapped row rather than a hamburger: six short Hebrew words wrap to two
   tidy lines, and a burger menu is a behaviour the design does not specify — inventing one
   here would be a guess baked into the plugin. */
@media (max-width: 1200px) {
	.az-hhero__nav {
		gap: 32px;
	}

	.az-hhero__title {
		font-size: 68px;
	}
}

@media (max-width: 900px) {
	.az-hhero {
		gap: 64px;
		padding: 0 24px;
		min-height: 0;
	}

	.az-hhero__nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		padding: 24px 0;
	}

	.az-hhero__links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		padding: 12px 20px;
	}

	.az-hhero__copy {
		max-width: 100%;
		padding-bottom: 64px;
	}

	.az-hhero__title {
		font-size: 44px;
		letter-spacing: -0.8px;
	}

	.az-hhero__sub {
		font-size: 20px;
	}

	/* Drawn for a 1440 band; at phone width it covers the whole photo and the hero turns into
	   a flat dark rectangle. */
	.az-hhero__scrim {
		width: 100%;
		max-width: 100%;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, #0C0C0C 92%);
	}

	.az-hhero__panel {
		display: none;
	}
}

@media (max-width: 480px) {
	.az-hhero__title {
		font-size: 34px;
	}

	.az-hhero__eyebrow {
		font-size: 13px;
		letter-spacing: 1px;
	}
}

/* ------------------------------------------------
   NAV ROW HIDDEN  (the normal case now)
   ------------------------------------------------
   The site header is a theme-builder template, so the hero no longer draws its own nav. That
   removes two things the copy's position depended on: the 90px row and the 150px gap after it.
   Left alone the headline rides to the very top of the photograph and sits under the overlaid
   site header.

   The file puts the copy column at y240 — which is exactly 90 + 150. So when the row is absent
   the same 240px is restored as padding, and the hero reads identically whether the nav is
   drawn by this widget or by the header template above it. */
.az-hhero__copy:first-child {
	/* 150px, not 240. The file puts the copy 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 gap belongs to the hero. Reserving the full 240 would add the
	   row height twice. */
	padding-top: 150px;
}

@media (max-width: 900px) {
	.az-hhero__copy:first-child {
		/* The header stops overlaying at this width (see amotz-header.css) and takes its own
		   space, so the hero does not need to reserve any. */
		padding-top: 48px;
	}
}