/* ================================================
   AMOTZ — COURSES  "כל הקורסים"  (Figma 538:3478)
   ================================================
   band    1440x1431 · #0C0C0C · padding 90/60 · column, gap 50
   glow    two 1416x232 gold ellipses, alpha .7, blur 100 — at y 390 and y 950
   head    502 wide · title 54/56 · sub 16/24 #ECC55A
   row 1   1320x505 · two cards, gap 16
   row 2   1320x525 · three cards, gap 16
   card    photo 270 tall (radius 32 top) + #1D1D1D body (radius 32 bottom)
   ================================================ */

.az-courses {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding: 90px var(--az-edge);
	background-color: var(--az-ink);
	isolation: isolate;
	overflow: hidden;
}

/* ------------------------------------------------
   THE TWO GLOWS
   ------------------------------------------------
   1416x232 at 70% alpha under a 100px blur. Shipped as CSS rather than as an exported PNG:
   the shape is a plain ellipse and a blurred bitmap this large would cost more than the whole
   rest of the page. `border-radius: 50%` plus `filter: blur()` reproduces it exactly.

   `pointer-events: none` matters — a blurred element still captures clicks over its full box,
   and 1416x232 of invisible glow sitting over the cards would eat every button press. */
.az-courses__glow {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	width: 1416px;
	max-width: 120%;
	height: 232px;
	background-color: rgba(242, 179, 81, 0.7);
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
}

.az-courses__glow--1 { top: 390px; }
.az-courses__glow--2 { top: 950px; }

/* ------------------------------------------------
   HEAD
   ------------------------------------------------ */
.az-courses__head {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 502px;
	text-align: center;
}

.az-courses__titlerow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.az-section .az-courses__flourish {
	display: block;
	width: 29.24px;
	height: 50px;
	object-fit: contain;
}

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

.az-courses__sub {
	margin: 0;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
	color: #ECC55A;
}

/* ------------------------------------------------
   ROWS
   ------------------------------------------------
   Two rows with different card counts, both 1320 wide with a 16px gap. The cards carry
   `flex: 1` rather than the design's literal 652px / 429.33px, so a row of two and a row of
   three both fill the column exactly — which is what those two oddly-specific numbers are:
   (1320 - 16) / 2 and (1320 - 32) / 3. Hard-coding them would break the moment the client
   adds or removes a card. */
.az-courses__row {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	max-width: 1320px;
}

.az-courses__card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
}

/* Photo half — the tag sits at the top, on the RTL start edge (right). */
.az-courses__photo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-height: 270px;
	padding: 16px;
	background-color: #2A2A2A;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 32px 32px 0 0;
}

.az-courses__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background-color: rgba(14, 17, 6, 0.72);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 500;
	line-height: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #ECC55A;
}

/* Body half. */
.az-courses__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	flex: 1 1 auto;
	padding: 16px;
	background-color: #1D1D1D;
	border-radius: 0 0 32px 32px;
}

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

.az-courses__name {
	margin: 0;
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
	color: #FCFCF7;
}

.az-courses__desc {
	margin: 0;
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
	color: rgba(252, 252, 247, 0.58);
}

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

/* Price FIRST in source so it lands on the right under RTL, matching the canvas where it is
   the rightmost of the pair. The design's 86px gap is a fixed distance between two items
   pushed to one end, not a spread — so `flex-start` (right, under RTL) plus the gap, rather
   than `space-between`, which would pin the lesson count to the far left edge. */
.az-courses__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 86px;
	width: 100%;
}

.az-courses__price {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-align: right;
	white-space: nowrap;
	color: #ECC55A;
}

.az-courses__lessons {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	text-align: right;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.38);
}

.az-courses__cta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	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;
}

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

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

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1100px) {
	.az-courses__row {
		flex-wrap: wrap;
	}

	/* Two per row at tablet width regardless of which row a card came from — three 429px cards
	   at this width leave no room for the 18px title without it wrapping to four lines. */
	.az-courses__card {
		flex: 1 1 calc(50% - 8px);
		min-width: 280px;
	}
}

@media (max-width: 900px) {
	.az-courses {
		gap: 32px;
		padding: 56px 16px;
	}

	.az-courses__title {
		font-size: 34px;
		line-height: 1.1;
		white-space: normal;
	}

	.az-courses__titlerow {
		gap: 12px;
	}

	.az-courses__card {
		flex: 1 1 100%;
	}

	.az-courses__photo {
		min-height: 200px;
	}

	/* Drawn 1416px wide for a 1440 band; at phone width they wash the whole section orange. */
	.az-courses__glow {
		display: none;
	}

	.az-courses__meta {
		gap: 24px;
		justify-content: space-between;
	}
}

/* ------------------------------------------------
   GRID LAYOUT  (the all-courses listing page)
   ------------------------------------------------
   The featured layout above is a promo: two wide cards, the rest below, each row a scrolling
   rail. A listing page wants the opposite — every course visible, none featured, no paging. So
   this is a plain wrapping grid with no rail behaviour at all.

   auto-fit + minmax lets the row count follow the viewport instead of being hard-coded, so five
   courses sit three-up on a desktop and stack on a phone without a breakpoint for each count. */
.az-section .az-courses__grid {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	width: 100%;
	max-width: 1320px;
}

/* The card sizes itself in the featured rows; in the grid the track owns the width. */
.az-section .az-courses__grid > * {
	width: 100%;
	min-width: 0;
}