/* ================================================
   AMOTZ — FORMAT  "בלי מפגשים חיים, בלי לוח זמנים"  (Figma 566:10344)
   ================================================
   band      1440x650 · #0C0C0C · padding 100/60
   card      1320x450 · radius 24 · photo background · padding 32
   scrim     650x450 over the RIGHT half, #0C0C0C fading out to the left
   headline  Polin Bold 46/1.2 · tracking 1 · white · two authored lines
   list      380px · Polin Medium 16/1.2 white · 20px gold check per row
   ================================================ */

.az-format {
	display: flex;
	justify-content: center;
	padding: 100px var(--az-edge);
	background-color: var(--az-ink);
}

.az-format__card {
	position: relative;
	display: flex;
	align-items: center;
	/* The design's `justify-end` puts the copy at the RIGHT of the card on its LTR canvas.
	   Under dir="rtl" flex-END is the left, so this is flex-start. Same inversion as the hero. */
	justify-content: flex-start;
	gap: 50px;
	width: 100%;
	max-width: 1320px;
	min-height: 450px;
	padding: 32px;
	overflow: hidden;
	border-radius: 24px;
	background-color: var(--az-ink);
}

.az-section .az-format__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The design scales the photo to 195.53% of the card height and pulls it up 22.4%, which
	   centres the visible window at (22.4 + 50) / 195.53 = 37%. */
	object-position: 50% 37%;
	pointer-events: none;
}

/* ------------------------------------------------
   THE SCRIM  (566:10346)
   ------------------------------------------------
   In Figma this is a 450x650 block carrying a ~180° gradient (#0C0C0C at 19.269% fading to
   transparent at 102.18%), rotated -90° AND flipped on Y, sitting in a 650x450 box pinned to
   the card's right half.

   Composing those two transforms turns the ramp's dark end toward the RIGHT — which is where
   the copy sits and what the exported frame shows. So it is written directly as a horizontal
   gradient, for the same reason as the hero's: the rotated-and-flipped version is visually
   identical and impossible to reason about later.

   `to left` means the gradient PROGRESSES leftward, so its 0% stop is at the right edge. */
.az-format__scrim {
	position: absolute;
	top: 0;
	/* Physical `right` — the scrim belongs to the photograph's composition, not to the
	   reading direction. */
	right: 0;
	z-index: 1;
	width: 650px;
	max-width: 100%;
	height: 100%;
	background-image: linear-gradient(
		to left,
		var(--az-ink) 19.269%,
		rgba(0, 0, 0, 0) 102.18%
	);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	pointer-events: none;
}

.az-format__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	width: 490px;
	max-width: 100%;
	text-align: right;
}

.az-format__title {
	font-size: 46px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	color: #FFFFFF;
}

/* The design breaks the headline into two explicit text nodes, so each authored line renders
   as its own block rather than folding wherever the measure happens to fall. */
.az-format__title span {
	display: block;
}

.az-format__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 0;
	width: 380px;
	max-width: 100%;
	list-style: none;
}

/* Check badge FIRST in the markup so dir="rtl" places it on the right, at the start of the
   Hebrew line — in the Figma tree it is second because the canvas is LTR. */
.az-format__item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: #FFFFFF;
}

.az-format__check {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background-color: #D4A843;
	border-radius: 50%;
	/* The tick is `stroke="currentColor"` in the file, so its colour is set here. */
	color: #15130F;
}

.az-format__check svg {
	display: block;
	width: 9px;
	height: 9px;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.az-format {
		padding: 72px 32px;
	}

	.az-format__scrim {
		width: 70%;
	}
}

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

	.az-format__card {
		padding: 28px 20px;
		min-height: 0;
	}

	/* At full width the copy sits over the whole photograph, so the scrim has to cover it all
	   — a right-hand ramp would leave the last words of each line on bare image. */
	.az-format__scrim {
		width: 100%;
		background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0.55) 0%, var(--az-ink) 85%);
	}

	.az-format__copy,
	.az-format__list {
		width: 100%;
	}

	/* `white-space: nowrap` in the design holds each bullet on one line; at 16px these need
	   about 300px and do not get it on a phone. Released to wrap, with the check pinned to the
	   first line rather than vertically centred against two. */
	.az-format__item {
		align-items: flex-start;
	}

	.az-format__check {
		margin-top: 2px;
	}

	/* See the !important note in amotz-announcement-bar.css. */
	.az-format__title {
		font-size: clamp(26px, 6.5vw, 34px) !important;
		letter-spacing: 0 !important;
	}
}