/* ================================================
   AMOTZ V4 — TESTIMONIALS  "מה אומרים מי שכבר שמעו?"  (Figma 538:3478 §4)
   ================================================
   band   1440x699 · #E3E3E3 · column · gap 60 · cross CENTER · padding 100/60
   title  54/65 · tracking -1.8 · centred · #152114
   cards  four 318x374 · r16 · padding 24/16 · gap 16 between
   fills  #0C0C0C · #ECC55A · #FCFCF7 · #FFFFFF  (right to left under RTL)
   quote  36/500 glyph · body 16/24 · name 14/600 · role 12/500 — all right-aligned
   ================================================

   FOUR DIFFERENT CARD COLOURS, and they are not decoration: the dark card and the gold card
   are the two the design leads with (rightmost under RTL, i.e. read first). So the fill is a
   per-item control, not an nth-child rule — reordering the repeater must not silently move
   the emphasis onto a different quote. */

.azh-quotes {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	padding: 100px var(--az-edge);
	background-color: #E3E3E3;
	overflow: hidden;
}

.azh-quotes__title {
	margin: 0;
	width: 100%;
	max-width: 1320px;
	font-size: 54px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: -1.8px;
	text-align: center;
	color: #152114;
}

.azh-quotes__row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	gap: 16px;
	width: 100%;
	max-width: 1320px;
}

/* 318 x 4 + 16 x 3 = 1320 exactly, so the row fills the content column with nothing to spare.
   `flex: 1 1 318px` rather than a hard width: the four cards then share any rounding evenly
   instead of the last one overflowing. */
.azh-quotes__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 10px;
	flex: 1 1 318px;
	min-width: 0;
	min-height: 374px;
	padding: 24px 16px;
	border-radius: 16px;
}

.azh-quotes__card--ink   { background-color: #0C0C0C; }
.azh-quotes__card--gold  { background-color: #ECC55A; }
.azh-quotes__card--cream { background-color: #FCFCF7; }
.azh-quotes__card--white { background-color: #FFFFFF; }

/* The opening quotation mark is its own 36px element in the file, not part of the body copy —
   which is what lets it take a different colour from the text beneath it. */
.azh-quotes__mark {
	font-size: 36px;
	font-weight: 500;
	line-height: 36px;
	text-align: right;
	width: 100%;
}

.azh-quotes__body {
	margin: 0;
	width: 100%;
	/* Pushes the name/role pair to the bottom of the card regardless of quote length, so the
	   four attributions line up across the row. */
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: right;
}

.azh-quotes__name {
	width: 100%;
	font-size: 14px;
	font-weight: 600;
	line-height: 17px;
	text-align: right;
}

.azh-quotes__role {
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
	text-align: right;
}

/* Per-card colour. Set on the card so every child inherits, with the mark and role overridden
   where the design gives them their own accent. */
.azh-quotes__card--ink   .azh-quotes__body,
.azh-quotes__card--ink   .azh-quotes__name  { color: #FCFCF7; }
.azh-quotes__card--ink   .azh-quotes__mark,
.azh-quotes__card--ink   .azh-quotes__role  { color: #ECC55A; }

.azh-quotes__card--gold  .azh-quotes__body,
.azh-quotes__card--gold  .azh-quotes__name,
.azh-quotes__card--gold  .azh-quotes__role  { color: #152114; }
.azh-quotes__card--gold  .azh-quotes__mark  { color: #0C0C0C; }

.azh-quotes__card--cream .azh-quotes__body,
.azh-quotes__card--cream .azh-quotes__name,
.azh-quotes__card--white .azh-quotes__body,
.azh-quotes__card--white .azh-quotes__name  { color: #152114; }
.azh-quotes__card--cream .azh-quotes__mark,
.azh-quotes__card--cream .azh-quotes__role,
.azh-quotes__card--white .azh-quotes__mark,
.azh-quotes__card--white .azh-quotes__role  { color: #C88D35; }

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   Four 318px cards need 1320px before gutters, so they give out immediately below the design
   width. Two-up next, then stacked — never a horizontal scroller, which would hide half the
   social proof on the screen where it matters most. */
@media (max-width: 1200px) {
	.azh-quotes__row {
		flex-wrap: wrap;
	}

	.azh-quotes__card {
		flex: 1 1 calc(50% - 8px);
		min-height: 0;
	}
}

@media (max-width: 900px) {
	.azh-quotes {
		gap: 32px;
		padding: 56px 20px;
	}

	.azh-quotes__title {
		font-size: 32px;
		line-height: 1.15;
		letter-spacing: -0.6px;
	}

	.azh-quotes__card {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------
   BACKGROUND DECORATION  (node 512:2847)
   ------------------------------------------------
   A cluster of ~13 #FAFAFA leaf shapes, 1028x799, rotated 58.97deg, bleeding off the top-left
   of the band. Exported as ONE svg rather than thirteen — it is 17KB, it scales, and thirteen
   separate files would be thirteen things to keep in sync.

   I left this out of the first build on the grounds that near-white on #E3E3E3 would be
   invisible. It is not: it is the section's whole texture, and without it the band is a flat
   grey rectangle. `pointer-events: none` so it never intercepts a click on a card. */
.azh-quotes {
	position: relative;
	isolation: isolate;
}

.azh-quotes__decor {
	position: absolute;
	top: -33px;
	/* The file places it from the LEFT edge of the frame — a physical offset, not a logical
	   one, so it must not flip under RTL. */
	left: 223px;
	z-index: 0;
	width: 1028px;
	height: 799px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

.azh-quotes__title,
.azh-quotes__row {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------
   ATTRIBUTION ROW  (50px avatar + name/role)
   ------------------------------------------------
   The avatar is FIRST in source so it lands on the right under RTL, which is where the file
   puts it — flush to the card's content edge (avatar right edge 362 = card 378 minus the 16px
   padding). */
.azh-quotes__foot {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.az-section .azh-quotes__avatar {
	display: block;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.azh-quotes__who {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

@media (max-width: 900px) {
	.azh-quotes__decor { display: none; }
}