/* ================================================
   AMOTZ — HERO  (Figma 566:9809)
   ================================================
   band      1440x850 · padding 32/60 · background photo, cover
   scrim     850x850 anchored to the RIGHT edge, transparent -> #0C0C0C
   card      604px · #FBF8F0 · radius 100/16/100/16 · shadow 0 8 12 rgba(0,0,0,.25)
   eyebrow   Polin Bold 26/1.4 · rgba(0,0,0,.75)
   headline  Polin Bold 52/1.2 · tracking -1.8 · #152114
   body      Polin Medium 18/1.4 · #4A4236 · two paragraphs, 12px apart
   brand     absolute top 32 / LEFT 60 — physical, it sits over the photo
   ================================================ */

.az-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	/* THE DESIGN SAYS `items-end`, AND flex-start IS THE CORRECT TRANSLATION.
	   Figma's canvas is LTR, so its `align-items: flex-end` puts the card against the RIGHT
	   edge. This section is dir="rtl", where the inline axis is reversed and flex-END is the
	   LEFT. flex-start is what keeps the card on the right, where the design has it.
	   This is the canvas-is-LTR trap from amotz.css, in its most literal form. */
	align-items: flex-start;
	min-height: 850px;
	/* TOP PADDING CLEARS THE OVERLAPPING HEADER. The header template sits over the hero via a
	   -90px bottom margin, and the hero used to have its own brand lockup filling that band. With
	   the lockup removed the card rode up underneath the nav, so the 90px is reserved here
	   instead: 32px of design padding + the 90px the header occupies. */
	padding: 122px var(--az-edge) 32px;
	overflow: hidden;
	background-color: var(--az-ink);
}

/* The photograph. A child element rather than a background-image on .az-hero so the widget
   can swap it through an Elementor media control without regenerating a background shorthand,
   and so the scrim below can sit between it and the content. */
.az-section .az-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The design nudges the photo slightly out of frame (left -6.46%, top -5.35%, scaled to
	   ~110.5%) to place the subject. object-position reproduces the framing without the
	   oversize box, and survives a different photo being dropped in later. */
	object-position: 44% 50%;
	pointer-events: none;
}

/* ------------------------------------------------
   THE SCRIM  (566:9810)
   ------------------------------------------------
   In Figma this is an 850x850 square pinned to the right edge and vertically centred,
   carrying a ~180deg gradient (transparent 4.64% -> rgb(12,12,12) 87.55%) and a 3px
   backdrop blur — then rotated 90deg AND flipped on Y.

   Rotating a top-to-bottom ramp by 90deg and flipping it resolves, on this node, to a
   LEFT-to-RIGHT ramp: clear where the photograph is, solid dark at the right edge under the
   card. That is what the exported frame shows, and it is what is written here directly.

   It is expressed as a plain horizontal gradient rather than as a rotated, flipped square
   because the two are visually identical here and the transform version cannot be reasoned
   about by the next person to open this file. If the design's square is ever resized so it
   no longer spans the full height, revisit this. */
.az-hero__scrim {
	position: absolute;
	top: 0;
	/* Physical `right`, deliberately. The scrim is tied to the photograph's composition —
	   the subject is on the left, the dark end belongs on the right — not to reading
	   direction. An inset-inline-end here would flip it with the text and ruin the photo. */
	right: 0;
	z-index: 1;
	width: 850px;
	max-width: 100%;
	height: 100%;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 4.64%,
		var(--az-ink) 87.55%
	);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	pointer-events: none;
}

/* ------------------------------------------------
   BRAND LOCKUP  (566:9835)
   ------------------------------------------------ */
.az-hero__brand {
	position: absolute;
	top: 32px;
	/* Physical left: it sits over the photograph's dark side, not at the reading start. */
	left: 60px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 7.42px;
}

/* The two lines are right-aligned to each other. The design says `items-end`, which is the
   right edge on Figma's LTR canvas — under dir="rtl" flex-END is the LEFT, so this must be
   flex-start. Same inversion as the card itself. */
.az-hero__brand-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: right;
	color: #FFFFFF;
	white-space: nowrap;
}

.az-hero__brand-name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.az-hero__brand-tag {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.1855px;
}

.az-section .az-hero__brand-logo {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	object-fit: cover;
}

/* ------------------------------------------------
   THE CARD  (566:9811)
   ------------------------------------------------ */
.az-hero__card {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	/* flex-START, for the same reason as everything else in this file: the design's `items-end`
	   is the right edge on an LTR canvas, and RTL reverses it. */
	align-items: flex-start;
	gap: 53px;
	width: 604px;
	max-width: 100%;
	padding: 32px 24px;
	overflow: hidden;
	background-color: #FBF8F0;
	/* PHYSICAL corners, matching the canvas: the two 100px corners are on the card's top-left
	   and bottom-right. Logical properties would swap them under dir="rtl" and the card would
	   come out mirrored. */
	border-top-left-radius: 100px;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 100px;
	border-bottom-left-radius: 16px;
	box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
}

/* The cream flourish behind the copy (566:9815) — a 620x684 vector, rotated -86.43deg and
   hung off the card's top-left. Decorative only, hence aria-hidden in the markup and
   pointer-events:none here. `overflow: hidden` on the card is what crops it. */
.az-hero__flourish {
	position: absolute;
	top: -58px;
	left: -115px;
	z-index: 0;
	width: 721.372px;
	height: 661.343px;
	transform: rotate(-86.43deg);
	pointer-events: none;
	user-select: none;
}

.az-hero__body,
.az-hero__foot {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* ------------------------------------------------
   COPY
   ------------------------------------------------ */
.az-hero__eyebrow {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.75);
	text-align: right;
}

.az-hero__title {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #152114;
	text-align: right;
}

.az-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: #4A4236;
	text-align: right;
}

/* ------------------------------------------------
   FOOT — video thumb + CTA column  (566:9820)
   ------------------------------------------------ */
.az-hero__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Video thumbnail, 200x200 (566:9821). A <button> rather than a div: it is the play control,
   so it must be focusable and announce itself. */
.az-hero__video {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	padding: 0;
	overflow: hidden;
	background-color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

/* No video URL set — the thumbnail is just a picture, so it must not advertise itself as a
   control. Rendered as a div rather than an anchor, and the play badge is omitted entirely. */
.az-hero__video--static {
	cursor: default;
}

.az-section .az-hero__video-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.az-hero__play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.az-hero__video:hover .az-hero__play,
.az-hero__video:focus-visible .az-hero__play {
	background-color: rgba(255, 255, 255, 0.5);
}

.az-hero__play svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* The button, fine print and author row are RIGHT-aligned inside this 330px column. The
   design's `items-end` is the right edge on its LTR canvas; under dir="rtl" that is
   flex-start. Getting this wrong pushed the whole column's contents to the left. */
.az-hero__cta-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 330px;
	max-width: 100%;
}

/* The CTA pill (566:9827). Its fill is a gold-FOIL PHOTOGRAPH in the design, not a gradient
   — sampling the 4000x2500 source showed it varying on both axes, so unlike the announcement
   bar it cannot be reduced to colour stops. It ships as a 660x100 WebP (1 KB) instead of the
   8.4 MB original. */
.az-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 14px 28px;
	border-radius: 1000px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.az-hero__cta:hover,
.az-hero__cta:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: #FFFFFF;
}

.az-hero__fineprint {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.16px;
	color: #8C8578;
	text-align: right;
	white-space: nowrap;
}

/* Author row (566:9830). In the design the avatar is the RIGHTMOST item and the text sits to
   its left. Under dir="rtl" a plain `flex-direction: row` already fills right-to-left, so
   the avatar is written FIRST in the markup and lands on the right with no `row-reverse`. */
.az-hero__author {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.az-section .az-hero__author-avatar {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.az-hero__author-text {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-align: right;
}

.az-hero__author-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: #15130F;
}

.az-hero__author-credentials {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: #8C8578;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   The design has no tablet or phone frame, so these breakpoints are inferred from where the
   desktop composition actually breaks, not transcribed.

   Three things drive them:
     1. the 604px card plus 60px gutters needs 724px before it starts squeezing
     2. the foot row (200px thumb + 24px gap + 330px column = 554px) outgrows the card's
        556px content box almost immediately, so it stacks early
     3. the 52px headline at tracking -1.8 cannot ride down to a phone — Hebrew does not
        hyphenate and these are long unbreakable words */
@media (max-width: 1100px) {
	.az-hero {
		min-height: 0;
		padding: 24px;
		/* Below this width the photo has no room to read as a composition beside the card, so
		   the card centres over it instead of hugging the right edge. */
		align-items: center;
	}

	.az-hero__scrim {
		/* Full width once the card is centred — a right-anchored 850px ramp would leave the
		   left of the card sitting on bare photo and the text would lose contrast. */
		width: 100%;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, var(--az-ink) 90%);
	}

	.az-hero__brand {
		position: static;
		align-self: flex-start;
		margin-bottom: 24px;
	}
}

@media (max-width: 768px) {
	.az-hero__card {
		padding: 28px 20px;
		gap: 32px;
		/* The 100px corners are most of a 320px-wide card. Scaled down so the card still
		   reads as the design's shape rather than as a lozenge. */
		border-top-left-radius: 56px;
		border-bottom-right-radius: 56px;
	}

	/* See the !important note in amotz-announcement-bar.css — same mechanism. Elementor bakes
	   this widget's typography defaults into the PAGE stylesheet at (0,3,0) with no media
	   query, and it loads after this file, so an unweighted rule here can never win. Scope is
	   one media query. Remove these if a mobile size is ever set in the Elementor UI. */
	.az-hero__title {
		font-size: clamp(28px, 7.5vw, 38px) !important;
		letter-spacing: -0.03em !important;
	}

	.az-hero__eyebrow {
		font-size: clamp(17px, 4.4vw, 22px) !important;
	}

	.az-hero__copy {
		font-size: 16px !important;
	}

	.az-hero__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.az-hero__video {
		width: 100%;
		height: 180px;
	}

	.az-hero__cta-col {
		width: 100%;
		align-items: stretch;
	}

	.az-hero__cta {
		width: 100%;
	}

	/* `white-space: nowrap` holds this on one line at 12px, which needs 300px it does not have
	   on a 360px phone once the card's padding is removed. Released to wrap. */
	.az-hero__fineprint {
		white-space: normal;
		text-align: center;
	}
}

/* ------------------------------------------------
   ELEMENTOR VIDEO INSIDE THE HERO FRAME
   ------------------------------------------------
   Same arrangement as the lesson cards: the player is Elementor's Video widget, everything around
   it is ours. The old markup opened Elementor's lightbox, which depends on a site-wide setting
   that was off — so the play button did nothing.

   The still is painted on the frame rather than handed to Elementor, because its image-overlay
   control renders through attachment helpers that need a media-library ID, and these stills ship
   inside the plugin with no ID. */
.az-hero__video--player {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #0C0C0C;
	overflow: hidden;
}

.az-section .az-hero__player {
	position: absolute;
	inset: 0;
	z-index: 0;
	line-height: 0;
}

.az-section .az-hero__player .elementor-widget-video,
.az-section .az-hero__player .elementor-widget-container,
.az-section .az-hero__player .elementor-wrapper {
	height: 100%;
	margin: 0;
	padding: 0;
}

.az-section .az-hero__player .elementor-wrapper iframe,
.az-section .az-hero__player .elementor-wrapper video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Elementor's overlay is the click target — stretched over the whole frame so a click anywhere on
   the still plays, which is what a viewer expects. */
.az-section .az-hero__video--player .elementor-custom-embed-image-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	cursor: pointer;
}

.az-section .az-hero__video--player .elementor-custom-embed-play {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	opacity: 1 !important;
	background: transparent !important;
}

/* Elementor's own play glyph is hidden; the design's badge is the only mark, and it is inert so
   the click passes through to the button beneath. */
.az-section .az-hero__video--player .elementor-custom-embed-play i,
.az-section .az-hero__video--player .elementor-custom-embed-play svg {
	display: none !important;
}

.az-hero__video--player .az-hero__play {
	z-index: 3;
	pointer-events: none;
}

/* ------------------------------------------------
   THE PLAYER COVERS THE SQUARE FRAME
   ------------------------------------------------
   The hero frame is 200x200. The video is 16:9. Elementor sizes its player by aspect ratio, so
   inside a square it letterboxed and the frame's white background showed as bands above and below
   the picture.

   The old <img> avoided this with `object-fit: cover`, which does not apply to an iframe. The
   equivalent is to make the iframe wider than the frame and centre it, so the sides crop instead:
   16/9 = 177.78% of the frame's height.

   The white background also goes — the still is painted on the frame, so anything showing through
   should be the photograph, never a bare panel. */
.az-hero__video--player {
	background-color: transparent;
}

.az-section .az-hero__video--player .elementor-wrapper {
	position: absolute;
	inset: 0;
	height: 100%;
	padding: 0 !important;
	overflow: hidden;
}

.az-section .az-hero__video--player .elementor-wrapper iframe,
.az-section .az-hero__video--player .elementor-wrapper video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78%;
	height: 100%;
	transform: translate(-50%, -50%);
}

/* The poster overlay has to crop the same way, or the still jumps the moment play is pressed. */
.az-section .az-hero__video--player .elementor-custom-embed-image-overlay {
	background-size: cover;
	background-position: center;
}

/* Elementor's overlay <img> is the still, and it renders at its own ratio. In a 200x200 frame that
   leaves the frame showing around it — the white band. Nothing sized it, because Elementor expects
   the overlay to define the box rather than sit inside a fixed one. */
.az-section .az-hero__video--player .elementor-custom-embed-image-overlay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}