/* ================================================
   AMOTZ — TRACKS  "אז איפה מתחילים?"  (Figma 538:3478)
   ================================================
   band     1440x840 · photo background · padding 80/60 · column, gap 40
   card     1320x600 · DNA-helix photo · radius 16 · padding 70/32/32 · gap 65
   scrim    1320x433 pinned to the card's BOTTOM · transparent → #0C0C0C
   head     432 wide · title 54/56 tracking -1.144 · sub 16/24
   tracks   1256x290 · three 334px columns separated by two 264px hairlines
   ================================================ */

.az-tracks {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 80px var(--az-edge);
	background-color: var(--az-cream);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* ------------------------------------------------
   THE CARD
   ------------------------------------------------
   `justify-content: space-between` with a fixed 600px height is what pins the head to the top
   and the three tracks to the bottom of the photograph. The 65px gap only takes effect if the
   content is tall enough to need it, which is the design's intent — the helix artwork is meant
   to show through the middle. */
.az-tracks__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 65px;
	width: 100%;
	max-width: 1320px;
	min-height: 600px;
	padding: 70px 32px 32px;
	background-color: var(--az-ink);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 16px;
	/* Keeps the scrim's stacking context local so its z-index cannot escape the card. */
	isolation: isolate;
	overflow: hidden;
}

/* Pinned to the BOTTOM, not full-bleed: the design only darkens the lower 433px of the 600px
   card, which is what keeps the helix visible up top while the three tracks stay readable. */
.az-tracks__scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: 433px;
	background-image: linear-gradient(180.22deg, rgba(12, 12, 12, 0) 18.57%, #0C0C0C 102.19%);
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	pointer-events: none;
}

.az-tracks__head {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 432px;
	text-align: center;
}

.az-tracks__title {
	margin: 0;
	font-size: 54px;
	font-weight: 700;
	line-height: 56px;
	letter-spacing: -1.144px;
	color: var(--az-on-ink);
}

.az-tracks__sub {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
	color: var(--az-on-ink);
}

/* ------------------------------------------------
   THE THREE TRACKS
   ------------------------------------------------ */
.az-tracks__row {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	width: 100%;
	max-width: 1256px;
}

/* THE DIVIDER IS 1px WIDE, NOT 264px — a deliberate departure from the exported CSS.
   Figma exports it as `width: 264px; height: 0; border: 1px solid #FFF; transform: rotate(90deg)`.
   A transform does not change layout, so taken literally each divider would occupy 264px of
   horizontal space: 3x334 + 2x264 + 4 gaps is 1770px inside a 1256px row, and the columns
   would collapse. The rotation is Figma's way of drawing a vertical rule; the honest
   translation is a 1px-wide, 264px-tall element, which also makes the arithmetic land —
   3x334 + 2x1 = 1004, leaving 252px across four gaps, i.e. the design's 60px. */
.az-tracks__rule {
	flex: none;
	align-self: center;
	width: 1px;
	height: 264px;
	background-color: #FFFFFF;
}

.az-tracks__item {
	display: flex;
	flex-direction: column;
	/* RTL start = right, matching the design's right-aligned Hebrew. */
	align-items: flex-start;
	gap: 32px;
	width: 334px;
	flex: 0 1 334px;
}

.az-tracks__label {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
	min-height: 36px;
}

/* The design's glyph is a Manrope "◎" at 24px. It is set as its own element so the label text
   can keep Polin — mixing the families inside one run would make the bullet inherit Polin,
   which has no such glyph and would render a tofu box. */
.az-tracks__mark {
	font-family: 'Manrope', var(--az-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 36px;
	color: var(--az-on-ink);
}

.az-tracks__no {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--az-on-ink);
}

.az-tracks__quote {
	margin: 0;
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.2px;
	text-align: right;
	color: #ECC55A;
}

.az-tracks__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.az-tracks__names {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.az-tracks__kicker {
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: right;
	color: var(--az-on-ink);
}

.az-tracks__course {
	width: 100%;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-align: right;
	color: var(--az-on-ink);
}

/* ------------------------------------------------
   THE BUTTON
   ------------------------------------------------
   Two treatments in the design: white with ink text on tracks 02 and 03, gold with white text
   on track 01 — the one a Hebrew reader meets first. The variant is a per-item control rather
   than an nth-child rule so re-ordering the repeater cannot silently move the emphasis. */
.az-tracks__cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 10px 24px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.az-tracks__cta--light {
	background-color: #FFFFFF;
	color: var(--az-ink);
}

.az-tracks__cta--gold {
	background-image: var(--az-gradient-gold);
	color: var(--az-on-gold);
}

.az-tracks__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: currentColor;
}

.az-tracks__cta-icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   Three 334px columns need 1004px before gaps, so they give out just under 1200. The hairlines
   are the first thing to go — a horizontal rule between stacked cards reads as a separator
   between sections rather than between peers, which is the opposite of what it means here. */
@media (max-width: 1200px) {
	.az-tracks__row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 40px;
	}

	.az-tracks__rule {
		display: none;
	}

	.az-tracks__item {
		flex: 0 1 300px;
		width: auto;
		min-width: 260px;
	}
}

@media (max-width: 900px) {
	.az-tracks {
		padding: 48px 16px;
	}

	.az-tracks__card {
		gap: 40px;
		min-height: 0;
		padding: 40px 20px 24px;
	}

	.az-tracks__title {
		font-size: 34px;
		line-height: 1.1;
		letter-spacing: -0.6px;
	}

	.az-tracks__row {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.az-tracks__item {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}

	/* Full-bleed at phone width, or the tracks sit on the raw photograph and the gold quotes
	   lose contrast against the bright parts of the helix. */
	.az-tracks__scrim {
		height: 100%;
		background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0.35) 0%, #0C0C0C 60%);
		border-radius: 16px;
	}
}

/* ------------------------------------------------
   THE ALL-COURSES BUTTON  (below the card, y732)
   ------------------------------------------------
   Gold, and the only gold button in the section — the three in-card buttons are all white.
   This was missed on the first pass because Figma's CSS export gives no way to tell an
   in-card button from one that follows the card; reading the file directly put it at y732,
   clear of the 600px card, centred rather than stretched. */
.az-tracks__all {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 40px;
	padding: 10px 24px;
	background-image: var(--az-gradient-gold);
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: var(--az-on-gold);
	text-decoration: none;
}