/* ================================================
   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;
	}

	/* NOTHING ELSE HERE. The height reductions were briefly in this block, which meant they also
	   applied at tablet widths where two or three cards still stand side by side — and there the
	   original proportions are correct. They live in the 640px block instead, with the rest of
	   the phone-only changes. */


	.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;
	}
}

/* 767, NOT 640.
   The rules in here are correct exactly when ONE card fills the screen — that is the condition
   that makes clipping the description and pinning the bullets to the top sensible, because there
   is no neighbouring card to line up against. A 430px card with max-width 88vw stops sharing the
   row at 767px, so that is where the line belongs.

   It was 640, chosen arbitrarily. Everything from 641 to 767 — a large phone, or any phone turned
   landscape — fell in the gap and got the full desktop card: 755px tall with a 217px hole through
   the middle of it. */
@media (max-width: 767px) {
	.az-curriculum {
		padding: 56px 0;
	}

	/* THE BULLETS STOP BEING PUSHED TO THE BOTTOM.
	   `margin-top: auto` aligns the bullet box to the foot of the card so that cards standing
	   side by side share one line for it, however long each description runs. One card per screen
	   has nothing to line up with, and the auto margin resolved to 267px of empty card — a lesson
	   stood 795px tall with a hole through the middle. Phone only: at every width where two or
	   more cards are visible the alignment is doing its job. */
	.az-curriculum__bullets {
		margin-top: 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;
	}

	/* 160, not 210: this block comes after the 1024 one and was quietly winning, so the
	   reduction set there never applied. The still carries no information beyond the badge —
	   it is the cheapest height to give back on a phone. */
	.az-curriculum__still {
		height: 160px;
	}

	/* THE TALLEST LESSON SETS EVERY CARD.
	   Carousel items stretch to the tallest, so one long description made all seven cards 795px.
	   Three lines is enough to say what the lesson covers; the full text is not lost, the card is
	   simply not sized around its longest paragraph. */
	.az-curriculum__card-desc {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* The bullet list is the other thing sizing every card off one lesson: most have two, one
	   has five, and the carousel stretches all seven to fit that one. Clipped to two here for the
	   same reason the description is clipped to three lines — the card is a summary on a phone,
	   not the full lesson. */
	.az-curriculum__bullet:nth-child(n+3) {
		display: none;
	}
}

/* ---- one long lesson must not size every card ----------------------------------------------
   Carousel items stretch to the tallest, so the biggest lesson decides the height of all of them
   and every shorter card gets the difference as empty space above its bullet box.

   On the nutrition course, lesson 7 carries a four-line description AND five bullets, while the
   other six have two lines and two bullets. The result was a 702px card with a 217px hole in six
   of the seven. The other course pages do not show this because their lessons are uniform —
   slow-ageing's worst gap is 29px, what-to-eat's is 49px.

   THE CAPS MATCH WHAT THE DESIGN ALREADY ASSUMES. Figma fixes the bullet box at 113px or 135px,
   which is two or three bullets, and draws a two-line description. So this is not a new rule
   imposed on the content — it is the design's own range, enforced when a lesson exceeds it.

   Nothing is lost: the full lesson content lives on the course itself, and this card is a summary.
   Only lesson 7 on one page is affected today; every other lesson on the site is already inside
   these bounds and renders exactly as before. */
@media (min-width: 768px) {
	/* THE TITLE IS ONE LINE.
	   Every lesson title on the site fits one line except nutrition lesson 7, whose two lines add
	   24px to that card and therefore to all seven. */
	.az-curriculum__card-title {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* AND ONE LINE PER BULLET.
	   Same story: three bullets that each wrap to two lines make a 134px box where the rest of the
	   site has 72-100px. These are one-line summaries everywhere else; this holds the outlier to
	   the same shape rather than letting it size every card on the page. */
	.az-curriculum__bullet span:last-child {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.az-curriculum__card-desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.az-curriculum__bullet:nth-child(n+4) {
		display: none;
	}
}