/* ================================================
   AMOTZ — VIDEO PROOF  (Figma 566:9984)
   ================================================
   band      1440x1029 · #F6F4EE · padding 100/60
   bursts    two 895x945.856 sun shapes, same artwork, two tints
   headline  Polin Bold 54/1.2 · tracking -1.8 · #152114 · centred, two lines
   intro     Polin Medium 18/1.5 · #4A4540 · centred · 806px
   cards     2 x 600px, 16px apart · radius 16 · 3:2
   badge     rgba(21,19,15,.65) · radius 4 · Polin Medium 12/18 · #F5F2EA
   play      60px · #DDA833 · 32px glyph in #15130F
   caption   #15130F · radius 8 · padding 20/24 · Polin Medium 16/1.2 · #F5F2EA
   CTA       50px pill, the shared gold foil, Polin Semibold 14/20 white
   ================================================ */

.az-proof {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px var(--az-edge);
	overflow: hidden; /* the bursts hang well past both edges */
	background-color: var(--az-cream);
}

/* ------------------------------------------------
   THE BURSTS  (566:9985, 566:9993)
   ------------------------------------------------
   ONE SVG, SHIPPED ONCE, USED TWICE. The two nodes export as separate files but their path
   data is identical to within a thousandth of a unit — the only real difference is the fill,
   #E9E5DD against #EDE9DF. So the file carries `fill="currentColor"` and each instance sets
   its own `color`, instead of shipping 5 KB of the same curve twice.

   POSITIONED AGAINST THE DESIGN FRAME, NOT THE VIEWPORT. The design places these at fixed
   pixel offsets inside a 1440px comp. Anchoring them to the band's own left edge would slide
   them outward on every screen wider than 1440 and pull them off the composition, so each is
   offset from the band's CENTRE by (design x - 720).

     burst A   x 968  ->  calc(50% + 248px)
     burst B   see below

   Burst B's numbers are derived rather than read off. In Figma it sits inside the content
   column (566:9987) at left -969, top -331, in a 1270.89x1253.286 box, and the artwork inside
   that box is rotated 120.83deg and flipped on Y about the box's centre. The column itself is
   centred: 60px gutter + (1320 - 1216) / 2 = 112px from the band's left edge, 100px down.

     box in band coords      left  112 - 969 = -857      top  100 - 331 = -231
     box centre              -857 + 635.4  = -221.6      -231 + 626.6  = 395.6
     artwork (895x945.856)   left  -221.6 - 447.5 = -669.1   top  395.6 - 472.9 = -77.3
     against the centre      calc(50% - 720px - 669.1px) = calc(50% - 1389.1px)

   Placing the artwork directly at its own computed centre means one element instead of a
   wrapper box plus a rotated child, and no reliance on the content column's height. */
.az-proof__burst {
	position: absolute;
	z-index: 0;
	width: 895px;
	height: 945.856px;
	pointer-events: none;
}

.az-proof__burst svg {
	display: block;
	width: 100%;
	height: 100%;
}

.az-proof__burst--a {
	top: 10px;
	left: calc(50% + 248px);
	color: #E9E5DD;
}

.az-proof__burst--b {
	top: -77.3px;
	left: calc(50% - 1389.1px);
	color: #EDE9DF;
	/* Tailwind composes translate -> rotate -> skew -> scale, so the rotation is applied
	   before the flip. Written in that order here to match. */
	transform: rotate(120.83deg) scaleY(-1);
}

.az-proof__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	width: 100%;
	max-width: 1216px; /* two 600px cards + the 16px gap */
}

/* ------------------------------------------------
   HEAD
   ------------------------------------------------ */
.az-proof__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 806px; /* the design's measure for the copy */
}

.az-proof__title {
	font-size: 54px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #152114;
	text-align: center;
}

/* The design breaks the headline explicitly — "אל תאמינו לי." then "תראו בעצמכם." are two
   separate text nodes, not one string that happens to wrap. Each authored line renders as its
   own block so the break survives at any width, rather than being at the mercy of the measure. */
.az-proof__title-line {
	display: block;
}

.az-proof__intro,
.az-proof__outro {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: #4A4540;
	text-align: center;
}

/* ------------------------------------------------
   CARDS
   ------------------------------------------------ */
.az-proof__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	width: 100%;
}

/* The design builds this card out of a flex column with 120px and 91px gaps, which lands the
   badge at the top, the play button dead centre and the caption at the bottom of a ~400px box.
   Those three positions ARE the intent, so they are expressed directly — a fixed ratio with
   three absolutely positioned children.

   Written as the design's gaps instead, a caption that wraps to two lines would push the play
   button off centre, and every breakpoint would need all three numbers re-derived. */
.az-proof__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 600 / 400;
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background-color: var(--az-ink);
	text-decoration: none;
}

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

/* Physical `right`, not inset-inline-end. The badge belongs to the photograph's top-right
   corner — the design's `items-end` on an LTR canvas — and it stays there whichever way the
   text runs. */
.az-proof__badge {
	position: absolute;
	top: 24px;
	right: 16px;
	z-index: 2;
	padding: 4px 10px;
	background-color: rgba(21, 19, 15, 0.65);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: #F5F2EA;
	white-space: nowrap;
}

.az-proof__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background-color: #DDA833;
	border-radius: 50%;
	/* The glyph is `fill="currentColor"` in the file, so the colour lives here. */
	color: #15130F;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.az-proof__play svg {
	display: block;
	width: 32px;
	height: 32px;
	/* The triangle's own bounding box is left-heavy; a couple of pixels of optical correction
	   keeps it centred in the disc rather than sitting visibly left of centre. */
	margin-left: 3px;
}

/* `.az-section` prefix so the hover state OUTRANKS the widget's own Play Button colour control.
   That control writes `{{WRAPPER}} .az-proof__play { background-color: … }` into the page
   stylesheet at (0,3,0) — the same specificity this rule had — and Elementor's sheet loads
   later, so the hover colour never took effect. The prefix takes it to (0,4,0). */
.az-section .az-proof__card:hover .az-proof__play,
.az-section .az-proof__card:focus-visible .az-proof__play {
	transform: translate(-50%, -50%) scale(1.08);
	background-color: #E9B846;
}

.az-proof__caption {
	position: absolute;
	right: 16px;
	bottom: 20px;
	left: 16px;
	z-index: 2;
	padding: 20px 24px;
	background-color: #15130F;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: #F5F2EA;
	text-align: right;
}

/* ------------------------------------------------
   FOOT
   ------------------------------------------------ */
.az-proof__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}

/* Same pill as the hero's, and deliberately the same asset — see the changelog for 1.6.0.
   The rules are repeated rather than shared because the two sections are meant to be
   independently editable; a shared `.az-cta` would mean a change to one silently moved the
   other, which is exactly what the one-widget-per-section split exists to prevent. */
.az-proof__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-proof__cta:hover,
.az-proof__cta:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: #FFFFFF;
}

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

	.az-proof__inner {
		gap: 48px;
	}

	/* The bursts are placed for a 1440px comp. Below that they crowd the cards rather than
	   sitting behind them, and there is no smaller composition in the file to fall back on. */
	.az-proof__burst {
		display: none;
	}
}

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

	.az-proof__cards {
		grid-template-columns: 1fr;
	}

	/* Full-width now, so the caption has far less room. A 3:2 card leaves the play button and
	   the caption almost touching on a narrow screen. */
	.az-proof__card {
		aspect-ratio: 16 / 11;
	}

	.az-proof__caption {
		padding: 14px 16px;
		font-size: 14px;
	}

	.az-proof__cta {
		width: 100%;
		white-space: normal;
	}

	/* 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. */
	.az-proof__title {
		font-size: clamp(28px, 7vw, 38px) !important;
		letter-spacing: -0.03em !important;
	}

	.az-proof__intro,
	.az-proof__outro {
		font-size: 16px !important;
	}
}

/* ------------------------------------------------
   ELEMENTOR VIDEO INSIDE THE CARD
   ------------------------------------------------
   The player is Elementor's own Video widget now, not a link to a lightbox. It brings its own
   wrapper and its own aspect-ratio box, so the card has to stop imposing the sizing it used when
   it held a plain <img> — otherwise the two fight and the frame collapses.

   The card keeps everything Elementor does not draw: the r24 frame, the duration pill, the
   caption bar. */
.az-section .az-proof__player {
	position: relative;
	z-index: 1;
	width: 100%;
	line-height: 0; /* kills the inline-block gap under the iframe */
}

/* Elementor wraps the player in .elementor-widget-container > .elementor-wrapper. Neither should
   add spacing of its own inside a card that is already the right size. */
.az-section .az-proof__player .elementor-widget-video,
.az-section .az-proof__player .elementor-widget-container,
.az-section .az-proof__player .elementor-wrapper {
	margin: 0;
	padding: 0;
}

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

/* Elementor's image overlay is the poster. It has to fill the frame the same way the old <img>
   did, or the still letterboxes inside the card. */
.az-section .az-proof__player .elementor-custom-embed-image-overlay {
	display: block;
	background-size: cover;
	background-position: center;
}

.az-section .az-proof__player .elementor-custom-embed-image-overlay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A card holding a player must not clip it, and must not sit above it. */
.az-proof__card--player {
	overflow: hidden;
}

/* The duration pill and caption bar stay above the player.

   ONLY z-index HERE. An earlier version also set `position: relative`, which overrode the
   `position: absolute` these already carry — so both dropped out of their corners and stacked in
   normal flow underneath the video. Raising the stacking order is the only thing that needed
   saying; their placement was already correct. */
.az-proof__card--player .az-proof__badge,
.az-proof__card--player .az-proof__caption {
	z-index: 2;
}

/* The player must not create a stacking context that traps the pill and caption behind it. */
.az-proof__card--player .az-proof__player {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* With the player absolutely filling the card, the card needs its own height back — it used to
   get it from the <img> it contained. */
.az-proof__card--player {
	position: relative;
	aspect-ratio: 16 / 9;
}

.az-section .az-proof__card--player .elementor-widget-video,
.az-section .az-proof__card--player .elementor-widget-container,
.az-section .az-proof__card--player .elementor-wrapper,
.az-section .az-proof__card--player .elementor-open-inline {
	height: 100%;
}

/* The still lives on the frame — see the widget for why it is not handed to Elementor. */
.az-section .az-proof__card--player .az-proof__player {
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #0C0C0C;
}

/* Elementor's overlay sits on top of that still and must not hide it. It keeps the play button;
   the picture comes from the frame behind. */
.az-section .az-proof__player .elementor-custom-embed-image-overlay {
	background-color: transparent;
}

.az-section .az-proof__player .elementor-custom-embed-image-overlay::before {
	/* Elementor paints a scrim here on some versions — keep it subtle rather than a flat black
	   sheet over the photograph. */
	background-color: rgba(12, 12, 12, 0.18);
}

/* An empty overlay <img> would otherwise render as a broken-image box over the still. */
.az-section .az-proof__player .elementor-custom-embed-image-overlay img:not([src]),
.az-section .az-proof__player .elementor-custom-embed-image-overlay img[src=""] {
	display: none;
}

/* ------------------------------------------------
   ELEMENTOR'S OVERLAY MUST FILL THE CARD
   ------------------------------------------------
   Measured on the live page: the overlay came out `600x0`, `position: static`. Elementor's play
   button is absolutely positioned INSIDE that overlay, so with a zero-height box to centre against
   it landed 100px left of centre and near the top instead of the middle of the card.

   The overlay is normally sized by the poster <img> it contains. Ours is empty — the still is
   painted on the frame instead, because Elementor's overlay needs a media-library ID these plugin
   files do not have — so nothing gave it height. Pinning it to the card restores the box Elementor
   expects, and its play button centres itself. */
.az-section .az-proof__card--player .elementor-custom-embed-image-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* With the overlay a flex centre, the button no longer needs absolute placement of its own — that
   was what put it off-centre in the first place. */
.az-section .az-proof__card--player .elementor-custom-embed-play {
	position: static;
	transform: none;
	margin: 0;
}

/* ------------------------------------------------
   FINAL PLACEMENT — stop negotiating with Elementor's internals
   ------------------------------------------------
   Measured live: the overlay filled the card correctly and the button was vertically centred but
   pinned at x=0. Elementor's own rules for that button vary by version, and each override I made
   only moved the argument along. So the button is placed outright — centred on the card, not on
   whatever box Elementor hands it.

   The poster is set on the CARD rather than the inner player div. The inline style was reaching
   the page but computing to `none` on that element; the card is the box that actually has the
   card's dimensions, so painting it there removes the ambiguity. */
.az-proof__card--player {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #0C0C0C;
}

.az-section .az-proof__card--player .elementor-custom-embed-play {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
}

/* ------------------------------------------------
   THE PLAY MARK IS OURS, THE CLICK IS ELEMENTOR'S
   ------------------------------------------------
   Elementor's Video widget renders its own play button — a thin white ring — which is not the
   solid badge the design draws. Both were appearing, so its glyph is hidden while the button
   itself stays: that element is what starts the video, and removing it would make the card dead
   again. Our badge sits on top, purely as the visual. */
.az-section .az-proof__card--player .elementor-custom-embed-play i,
.az-section .az-proof__card--player .elementor-custom-embed-play svg,
.az-section .az-proof__card--player .elementor-custom-embed-play .eicon-play {
	display: none !important;
}

/* Elementor's button becomes an invisible hit area covering the whole card, so a click anywhere
   on the still starts the video — which is what a viewer expects from a video card. */
.az-section .az-proof__card--player .elementor-custom-embed-play {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	opacity: 1 !important;
	background: transparent !important;
	cursor: pointer;
}

/* Our badge is decoration only — the click passes through to Elementor's button beneath it. */
.az-proof__card--player .az-proof__play {
	z-index: 3;
	pointer-events: none;
}

/* Same as the hero: the overlay image must fill the card, not sit at its own ratio inside it. */
.az-section .az-proof__card--player .elementor-custom-embed-image-overlay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}