/* ================================================
   AMOTZ V4 — THE LAB  "המעבדה"  (Figma 538:3478 §7)
   ================================================
   band  1440x1501 · #FCFCF7 · column · gap 60 · padding 38/60/100/60
   head  title 54/65 centred · sub 16/24 centred · then a right-aligned grid label 24/500

   THREE GRIDS, ONE GEOMETRY. Every card is 429 wide with a 16px gutter — 429x3 + 16x2 = 1319,
   i.e. the 1320 content column. Only the card's interior changes:

     articles  429x404   200 image (r 32/32/0/0) + 204 body, padding 16
     podcasts  429x76    single #FFFFFF block, r16, padding 16
     videos    429x302   200 image (r 32/32/0/0) + 102 body, padding 24

   So the row and the column arithmetic are shared and only the card bodies differ. Three
   separate widgets would have triplicated the grid maths for no gain.
   ================================================ */

.azh-lab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	padding: 38px var(--az-edge) 100px;
	background-color: #FCFCF7;
}

.azh-lab__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 1320px;
	text-align: center;
}

.azh-lab__title {
	margin: 0;
	font-size: 54px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: -1.144px;
	color: #0C0C0C;
}

.azh-lab__sub {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #C88D35;
}

/* Each grid is introduced by its own right-aligned label — מאמרים מעמיקים, מהפודקאסטים,
   מיוטיוב. `align-items: flex-start` is RTL start, i.e. the right. */
.azh-lab__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	max-width: 1320px;
}

.azh-lab__label {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
	color: #C88D35;
}

/* THE SHARED ROW. Cards are `flex: 1 1 429px` rather than a hard width so three of them share
   any rounding evenly instead of the last overflowing the column. */
.azh-lab__row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
	width: 100%;
}

.azh-lab__card {
	display: flex;
	flex-direction: column;
	flex: 1 1 429px;
	min-width: 0;
	background-color: #FFFFFF;
	border-radius: 32px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

/* The podcast card has no image, so it is a single rounded block rather than a split one. */
.azh-lab__card--flat {
	border-radius: 16px;
}

/* ------------------------------------------------
   IMAGE HALF
   ------------------------------------------------
   Rounded on the TOP corners only — the body below carries the bottom pair, and together they
   read as one card. Physical corners: logical ones would flip under RTL and round the wrong
   edge. */
.azh-lab__media {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 200px;
	padding: 16px;
	background-color: #E8E4DA;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
}

/* Tag pill on the articles, duration on the videos — same position, same treatment. */
.azh-lab__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	/* The file gives this a FILL and a STROKE: #0E1106 with a 1px #D3FA99 outline. The first
	   build used a translucent black with no border, which lost the green edge entirely. */
	background-color: #0E1106;
	border: 1px solid #D3FA99;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 500;
	line-height: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #D3FA99;
}

.azh-lab__tag--time {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #FFFFFF;
}

/* ------------------------------------------------
   BODY HALF
   ------------------------------------------------ */
.azh-lab__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex: 1 1 auto;
	padding: 16px;
}

/* The video cards use 24px padding against the articles' 16 — the file's own values. */
.azh-lab__body--roomy {
	padding: 24px;
}

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

.azh-lab__desc {
	margin: 0;
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
	color: #0B1A07;
}

/* Foot row: the gold button and the read-time sit at opposite ends. Button FIRST in source so
   it lands on the right under RTL, matching the file (button x1222 vs meta x966 on the
   rightmost card). */
.azh-lab__foot {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.azh-lab__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	background-image: var(--az-gradient-gold);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--az-on-gold);
}

.azh-lab__meta {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
	white-space: nowrap;
	color: #0B1A07;
}

/* The podcast card is title + meta only, stacked, no image and no button. */
.azh-lab__flatbody {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: 100%;
	padding: 16px;
}

.azh-lab__flatname {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: right;
	color: #0B1A07;
}

.azh-lab__flatmeta {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
	color: #C88D35;
}

/* ------------------------------------------------
   CAROUSEL DOTS
   ------------------------------------------------
   Four 13px dots under EACH of the three grids — y687, y924 and y1388 in the file. #6B6B6B
   with the last one #0C0C0C, i.e. the active page is the RIGHTMOST under RTL, which is where
   a Hebrew reader starts.

   Rendered as static markup, not a working carousel: the design shows the control, and three
   rows of three cards do not paginate at desktop width. Wiring real paging would be inventing
   behaviour the file does not specify. */
.azh-lab__dots {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	margin-top: 8px;
}

.azh-lab__dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: #6B6B6B;
}

.azh-lab__dot--on {
	background-color: #0C0C0C;
}

.azh-lab__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
}

.azh-lab__cta-icon svg { display: block; width: 15px; height: 15px; }

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   Three 429px cards need 1319px, so they give out immediately below the design width. Two-up,
   then stacked. The grid maths is shared, so all three rows behave identically. */
@media (max-width: 1150px) {
	.azh-lab__card {
		flex: 1 1 calc(50% - 8px);
	}
}

@media (max-width: 780px) {
	.azh-lab {
		gap: 40px;
		padding: 32px 20px 56px;
	}

	.azh-lab__title {
		font-size: 34px;
		line-height: 1.15;
	}

	.azh-lab__row {
		flex-direction: column;
	}

	.azh-lab__card {
		flex: 1 1 auto;
	}
}