/* ================================================
   AMOTZ — CURRICULUM  (Figma 566:10019)
   ================================================
   band      1440x989 · #0C0C0C · padding 100/60 · gap 24
   glow      795x535 gold ellipse behind the row
   headline  Polin Bold 54/1.2 · tracking -1.8 · white
   cards     5 x 430px, 16px apart · still 281px + body
   badge     40x40 · #F6F4EE · radius 12 · Polin Black 18/28 · #472D00
   title     Polin Semibold 20/1.2 · #EBC55B
   body      Polin Medium 14/1.4 · white
   bullets   rgba(246,244,238,.06) on rgba(246,244,238,.1) · radius 16 · 12/1.4 · 5px dot
   nav       2 x 44px round buttons
   ================================================ */

.az-curriculum {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 100px 0;
	overflow: hidden;
	background-color: var(--az-ink);
}

.az-curriculum__glow {
	position: absolute;
	top: 128px; /* the design's 28px inside a column that starts 100px down */
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	width: 1195px;
	max-width: 100%;
	height: 935px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	pointer-events: none;
}

.az-curriculum__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 90px;
	width: 100%;
}

.az-curriculum__title {
	padding: 0 var(--az-edge);
	font-size: 54px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #FFFFFF;
	text-align: center;
}

/* ------------------------------------------------
   THE TRACK
   ------------------------------------------------
   A real scroll container, not a transformed strip. It pages natively with touch, trackpad,
   shift-wheel and keyboard before any JavaScript runs, and the browser resolves RTL by
   itself — which a transform-based carousel has to reimplement and usually gets backwards,
   because scrollLeft goes NEGATIVE in a right-to-left container.

   The 60px inline padding is the design's gutter. It is padding on the track rather than on
   the band so the first card starts at the gutter but the row can still scroll edge to edge
   underneath it. */
.az-carousel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px; /* the design's gap between the row and its buttons */
	width: 100%;
}

.az-carousel__track {
	display: flex;
	width: 100%;
	gap: 16px;
	padding: 0 var(--az-edge);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* SCROLL-PADDING IS NOT A DUPLICATE OF PADDING — both are needed, and leaving this out is
	   what made the first card sit flush against the right edge while the nav buttons kept
	   their 60px gutter.

	   `scroll-snap-align: start` aligns an item to the SNAPPORT, and the snapport defaults to
	   the scrollport — the element's PADDING BOX. So the snap lands the card against the border
	   edge and effectively cancels the 60px padding at every snap position, including the
	   resting one. `scroll-padding` insets the snapport itself, so the card comes to rest on
	   the same line the gutter is on.

	   Keep this in step with `padding` at every breakpoint below. */
	scroll-padding-inline: var(--az-edge);
	scrollbar-width: none; /* the design has no scrollbar; the buttons are the affordance */
	-ms-overflow-style: none;
	/* Vertical breathing room so a focus ring on a card is not clipped by the scroll box. */
	padding-block: 4px;
}

.az-carousel__track::-webkit-scrollbar {
	display: none;
}

.az-carousel__item {
	flex: 0 0 430px;
	scroll-snap-align: start;
	max-width: 88vw; /* on a phone, show a sliver of the next card so the row reads as scrollable */
}

/* Nothing to page — the JS adds this class when the content fits. Two dead buttons under the
   row are worse than no buttons.

   THE RESEARCH NAV IS DELIBERATELY NOT LISTED HERE. It used to be, and that was a bug: that
   nav sits INSIDE its card and is one of three items a `space-between` distributes, so hiding
   it silently changed the card's internal spacing. Here and in the bonus section the buttons
   are a separate row below the track, so hiding them just removes a row. */
.az-carousel--static .az-curriculum__nav {
	display: none;
}

/* ------------------------------------------------
   CARD
   ------------------------------------------------ */
.az-curriculum__card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* The still, with the number badge at its BOTTOM-RIGHT — the design's `items-end justify-end`
   on an LTR canvas. Absolutely positioned rather than flex-aligned so the inversion under
   dir="rtl" cannot move it: this corner belongs to the photograph, not to the reading order. */
.az-curriculum__still {
	position: relative;
	height: 281px;
	overflow: hidden;
	border-radius: 16px 16px 0 0;
	background-color: #1D1D1D;
}

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

.az-curriculum__badge {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--az-cream);
	border-radius: 12px;
	font-size: 18px;
	font-weight: 900; /* Polin Black */
	line-height: 28px;
	color: var(--az-brown);
}

.az-curriculum__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	background-color: #121212;
	border: 1px solid rgba(246, 244, 238, 0.1);
	border-top: 0;
	border-radius: 0 0 16px 16px;
	text-align: right;
}

.az-curriculum__card-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--az-yellow);
}

.az-curriculum__card-desc {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #FFFFFF;
}

/* ------------------------------------------------
   BULLETS
   ------------------------------------------------
   The design fixes this box at 113px or 135px depending on the card. Those heights are just
   the content of each one, so they are not carried — a fixed height would clip a longer
   bullet and leave a hole under a shorter one. `margin-top: auto` pins the box to the foot of
   the card instead, which is what the fixed heights were achieving. */
.az-curriculum__bullets {
	display: flex;
	margin-top: auto;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	background-color: rgba(246, 244, 238, 0.06);
	border: 1px solid rgba(246, 244, 238, 0.1);
	border-radius: 16px;
}

/* The dot is FIRST in the markup so dir="rtl" puts it on the right, where the design has it —
   at the start of the line in Hebrew. In the Figma tree it is the second child because the
   canvas is LTR. */
.az-curriculum__bullet {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: #FFFFFF;
}

.az-curriculum__dot {
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	background-color: #DDA833;
	border-radius: 50%;
}

/* ------------------------------------------------
   NAV
   ------------------------------------------------
   In the design both buttons are wrapped in a 180° rotation with a Y flip — a horizontal
   mirror. Rather than carry that transform, ONE chevron ships pointing right and each button
   rotates it, which is the same picture with nothing to unpick later.

   Under dir="rtl" "previous" is the button on the RIGHT, so it is first in the markup. */
/* The buttons sit at the band's RIGHT edge, not centred. The design's outer column is
   `items-end`, which is the right edge on its LTR canvas; under dir="rtl" that is flex-START.
   The 60px offset is the band's own gutter — `margin-inline-start` resolves to margin-right
   here, which is what holds them off the right edge. */
.az-curriculum__nav {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 16px;
	align-items: center;
	align-self: flex-start;
	margin-inline-start: var(--az-edge);
}

.az-curriculum__nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.az-curriculum__nav button:disabled {
	/* The FILL stays at full strength. The design draws both buttons solid, and dimming a
	   white disc to 35% on a #0C0C0C band reads as GREY rather than as disabled — which is
	   what it looked like on the live page. Only the chevron fades now, so the button keeps
	   the colour the design specifies and the affordance is still honest. */
	cursor: default;
}

.az-curriculum__nav button:disabled svg {
	opacity: 0.45;
}

.az-curriculum__nav button:not(:disabled):hover {
	filter: brightness(1.1);
}

.az-curriculum__nav svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* WHICH FILL GOES ON WHICH BUTTON — worked out from the design's transforms, not guessed.
   Figma wraps BOTH buttons in `rotate(180deg) scaleY(-1)`, a horizontal mirror, so the glyphs
   end up pointing the opposite way to their source paths:

       gold button  source chevron points RIGHT -> renders pointing LEFT   -> sits on the LEFT
       white button source chevron points LEFT  -> renders pointing RIGHT  -> sits on the RIGHT

   In RTL that is also the correct semantics: the RIGHT-pointing button scrolls back toward the
   first card, the LEFT-pointing one advances. So `prev` is the WHITE button and `next` is the
   GOLD one — the reverse of the first build, which had the fills on the wrong buttons and put
   the gold one on the right.

   `prev` is first in the markup, and under dir="rtl" the first child renders rightmost. */
.az-curriculum__nav .az-curriculum__prev {
	background-color: #FFFFFF;
	border: 1px solid var(--az-rule);
	/* The design strokes this glyph with a #CEAF83 -> #795D36 gradient. A gradient stroke
	   cannot travel through `currentColor`, so it takes the midpoint of those two stops. */
	color: #A28660;
}

.az-curriculum__nav .az-curriculum__next {
	background-image: linear-gradient(to right, #CEAF83, #795D36);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #FFFFFF;
}

/* The shipped chevron points right; the advancing button needs it pointing left. */
.az-curriculum__nav .az-curriculum__next svg {
	transform: rotate(180deg);
}

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

	.az-curriculum__inner {
		gap: 48px;
	}

	.az-carousel__track {
		padding-inline: 32px;
		scroll-padding-inline: 32px;
	}

	.az-curriculum__nav {
		margin-inline-start: 32px;
	}

	.az-curriculum__title {
		padding: 0 32px;
	}
}

@media (max-width: 640px) {
	.az-curriculum {
		padding: 56px 0;
	}

	.az-carousel__track {
		padding-inline: 20px;
		scroll-padding-inline: 20px;
	}

	/* Centred on a phone: right-pinned controls under a full-bleed scroller read as stray. */
	.az-curriculum__nav {
		align-self: center;
		margin-inline-start: 0;
	}

	.az-curriculum__title {
		padding: 0 20px;
		/* See the !important note in amotz-announcement-bar.css. */
		font-size: clamp(28px, 7vw, 38px) !important;
		letter-spacing: -0.03em !important;
	}

	.az-curriculum__still {
		height: 210px;
	}
}