/* ==========================================================================
   Section: Bento feature grid + reusable section header
   Figma: Home EN 4081:33203 — exact values from the node (50/58 title,
   160/128 Kufi numeral, 30/36 ExtraBold card headings, p36 r12 cards).
   RTL: logical properties throughout.
   ========================================================================== */

/* ---- Reusable section header (divider + eyebrow / title / sub) ---------- */
.mada-sechead {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);                         /* 20 */
	inline-size: 100%;
}
.mada-sechead__eyebrow {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-4);                         /* 12 */
	font-weight: var(--fw-bold);
	font-size: 10px;
	line-height: 15px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-primary);
}
.mada-sechead__line {
	inline-size: 40px;
	block-size: 1px;
	background-color: var(--color-primary);
}
.mada-sechead__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-section);                             /* Figma: 50/58 */
	line-height: var(--lh-section);
	letter-spacing: var(--ls-none);
	color: #071214;                              /* Figma: color/gray/black */
}
/* Round-3, Home annotation frame (4716:9621): the section subtitle is labelled
   "Subtitle 16px" beside the mobile frame and "Subtitle 18px" beside tablet
   and desktop. --fs-lg is exactly that pair (16 → 18 at 640), where the build
   was using --fs-md (14 → 16). Line height follows with --lh-md (24 → 28). */
.mada-sechead__sub {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: var(--lh-md);
	color: #003D62;                              /* Figma: shade/blue/800 */
}

@media (max-width: 639px) {
	.mada-sechead__title { font-size: var(--fs-section); line-height: var(--lh-section); }
}

/* ---- Bento section ---- */
.mada-bento {
	background-color: #F5F5F6;                   /* Figma: color/gray/white */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);              /* 112 */
}
.mada-bento__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-15);                        /* 64 */
}

.mada-bento__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-11);                        /* 40 */
}
.mada-bento__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-11);
	flex: 1 1 0;
	min-inline-size: 0;
}
.mada-bento__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-11);
}

.mada-bento__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);                         /* 8 */
	align-items: flex-start;
	padding: var(--space-10);                    /* 36 */
	border-radius: var(--radius-xl);             /* 12 */
	overflow: hidden;
}

.mada-bento__card--navy {
	background-color: var(--color-vault-navy);   /* #002D4E */
	color: var(--color-text-on-dark);
	min-inline-size: 0;
	/* flex set in the ≥1024 row layout; basis 0 + overflow:hidden would
	   collapse the card when the grid stacks on mobile */
}
.mada-bento__push { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.mada-bento__big {
	margin: 0;
	/* Was a Kufi numeral (0%); now the word Zero / صفر — follows the
	   language's own font (Poppins EN / Kufi AR), per the July revision. */
	font-weight: var(--fw-bold);
	/* S22: "make zero 96px" on desktop, 72px on tablet and mobile. Authored
	   mobile-first — 72 is the base, the desktop band steps up to 96 below.
	   (Was 160px EN / 120px AR, the Round 1 values.) */
	font-size: 72px;
	line-height: 1.1;
	color: var(--color-liquid-mint);
	white-space: nowrap;
}

@media (min-width: 1025px) {
	.mada-bento__big,
	[dir="rtl"] .mada-bento__big { font-size: 96px; line-height: 1.1; }
}
/* Round 1 p14 (AR desktop): Kufi renders taller than Poppins, so "صفر" sat on
   "فوائد". S22 now fixes the size for both languages, so only the breathing
   room below the word is still language-specific. */
[dir="rtl"] .mada-bento__big {
	margin-block-end: var(--space-4);            /* 12 */
}

/* Client feedback p21 (mobile): smaller "Zero" everywhere below 640, and for
   500–639 a compact 2-up bento — navy full-width, then the teal card beside a
   column of mint (Safe & Trusted) over ice (100% Local), exactly as the mock.
   Logical order keeps the teal at inline-start in both languages. */
/* PDF vs Figma conflict — SETTLED by Mada (Aug 2026): 72px on mobile.
   The Home annotation frame (4716:9621) labels the mobile frame "Make zero
   60px", but the round-3 deck asks for 72px at 639-320 and the client
   confirmed the deck is correct. So mobile and tablet share 72 and only
   desktop steps up to 96 — the annotation is the stale one here.
   Do NOT "correct" this back to 60 from the design file. */
@media (max-width: 639px) {
	.mada-bento__big,
	[dir="rtl"] .mada-bento__big { font-size: 72px; line-height: 1.1; margin-block-end: 0; }
}
@media (min-width: 500px) and (max-width: 639px) {
	.mada-bento__col { flex-direction: row; align-items: stretch; }
	.mada-bento__col > .mada-bento__card--teal { flex: 1 1 0; min-inline-size: 0; }
	.mada-bento__row { flex-direction: column-reverse; flex: 1 1 0; min-inline-size: 0; }
	.mada-bento__card--mint { min-block-size: 140px; }
}

/* Client feedback p18 (tablet 640–1024): smaller "Zero" BESIDE a column of
   the Interest heading with its description underneath. */
@media (min-width: 640px) and (max-width: 1024px) {
	.mada-bento__push {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: var(--space-6);              /* 20 */
		row-gap: var(--space-2);
		align-items: center;
	}
	.mada-bento__big,
	[dir="rtl"] .mada-bento__big { font-size: 72px; line-height: 1; margin-block-end: 0; grid-row: 1 / 3; }
	/* Round-3 (Home, p.11): "revisit the responsive layout. The text appears
	   shifted to the left. both languages."
	   This rule places the heading in column 2 of the NAVY card's __push grid,
	   beside the big "Zero". It was unscoped, so it also hit the teal / ice /
	   mint headings — which are direct children of a COLUMN flex card, where
	   `align-self: end` aligns on the cross (horizontal) axis and shoved the
	   heading to the cross-end: left in RTL, right in LTR. That is exactly the
	   "both languages" symptom. Scoped to the grid it was written for; the
	   sibling --desc rule below was already scoped this way. */
	.mada-bento__push .mada-bento__heading { padding-block-start: 0; grid-column: 2; align-self: end; }
	.mada-bento__card--navy .mada-bento__desc { grid-column: 2; align-self: start; }
}
.mada-bento__heading {
	margin: 0;
	font-weight: 800;                            /* Figma: ExtraBold */
	font-size: 30px;
	line-height: 36px;
	color: #F5F5F6;
	padding-block-start: var(--space-5);         /* 16 */
}
.mada-bento__heading--pad { padding-block-start: var(--space-11); /* 40 */ }
.mada-bento__desc {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 20px;
	color: rgba(245, 245, 246, 0.65);
	max-inline-size: 46ch;
}
/* Client feedback p4: keep "…no surprises." on one line at desktop — the
   46ch cap was orphaning the last word; the navy card is wide enough. */
.mada-bento__card--navy .mada-bento__desc { max-inline-size: none; }

.mada-bento__card--teal {
	background-color: var(--color-primary);      /* #00B2AF */
	color: var(--color-text-on-dark);
}
.mada-bento__card--teal .mada-bento__desc {
	color: rgba(245, 245, 246, 0.75);
	padding-block-end: var(--space-5);           /* 16 */
}
.mada-bento__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	background-color: rgba(245, 245, 246, 0.1);
	border-radius: var(--radius-full);
	padding-block: 6px;
	padding-inline: var(--space-4);              /* 12 */
}
.mada-bento__chip-val {
	font-family: "JetBrains Mono", monospace;    /* per Figma */
	font-size: var(--fs-xs);
	line-height: 16px;
	color: #F5F5F6;
}
.mada-bento__chip-dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--radius-full);
	background-color: var(--color-liquid-mint);
}

.mada-bento__card--ice {
	background-color: var(--color-ice-credit);   /* #D3EFFF */
	color: var(--color-vault-navy);
	min-inline-size: 0;
}
.mada-bento__local {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: 40px;                             /* Figma: 40/64 */
	line-height: 64px;
	color: var(--color-vault-navy);
}
.mada-bento__card--ice .mada-bento__desc { color: rgba(0, 45, 78, 0.65); }

.mada-bento__card--mint {
	background-color: var(--color-liquid-mint);  /* #56E3D6 */
	color: var(--color-vault-navy);
}
/* Figma 4081:33299 — the pattern is a fixed 569×319 artwork rotated 180deg and
   pinned at -13/-30 from the card's top-left; it is NOT scaled to the card, so
   `cover` would shrink the motifs. Pinned to the physical top-left in both
   directions (it is a decorative texture, not a directional element). */
.mada-bento__card--mint::before {
	content: "";
	position: absolute;
	top: -30px;
	left: -13px;
	inline-size: 569px;
	block-size: 319px;
	background-image: url("../../images/pattern-safe-trusted.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: rotate(180deg);
	pointer-events: none;
}
.mada-bento__card--mint > * { position: relative; }
.mada-bento__trusted {
	margin: 0;
	font-weight: var(--fw-semibold);
	/* Figma 4081:33358 is 24px/32 — that is --fs-2xl at desktop, NOT --fs-3xl
	   (the scale is mobile-first: 3xl is 24 on mobile but 30 from 1200up).
	   At 30px the label overflowed the 177px text box and was clipped. */
	font-size: var(--fs-2xl);
	line-height: 32px;
	color: var(--color-vault-navy);
}

/* ---- Tablet+ : two-column bento ----
   Figma D1440 (container 1312, gap 40): the two top-level columns are equal
   (636 / 636); inside the right column the mint card is a fixed 249 and the
   ice card takes the remainder (347). Sizing the mint card by its content
   made the columns uneven and squeezed "100% Local" onto two lines. */
@media (min-width: 1025px) {
	.mada-bento__grid { flex-direction: row; align-items: stretch; }
	.mada-bento__row { flex-direction: row; align-items: stretch; }
	/* Explicit halves: `flex: 1 1 0` left the navy card wider than the right
	   column (672/600 measured at 1440), so pin both to an exact half minus
	   half the 40px gap. */
	.mada-bento__card--navy { flex: 0 0 calc(50% - 20px); min-inline-size: 0; }
	.mada-bento__col        { flex: 0 0 calc(50% - 20px); min-inline-size: 0; }
	.mada-bento__card--ice  { flex: 1 1 0; min-inline-size: 0; }
	.mada-bento__card--mint { flex: 0 0 249px; }
}