/* ==========================================================================
   Section: Category pills ("Latest Partner Stores")
   Figma: Home EN 4081:33788 — exact node values (h138 ice cards r40,
   Elevation Light/2 shadow, 60/57 ExtraBold heading, #888F93 sub).
   RTL: arrow mirrored via .mada-icon--directional.
   ========================================================================== */

.mada-categories {
	background-color: var(--color-bg);
	padding-block: var(--pad-section-top) var(--pad-section-bottom);              /* 112 */
}

.mada-categories__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-categories__title {
	margin: 0;
	font-weight: 800;
	font-size: var(--fs-section);                             /* Figma: 60/57 */
	line-height: var(--lh-section);
	color: var(--color-vault-navy);
}
.mada-categories__sub {
	margin: 0;
	font-size: var(--fs-xl);                     /* 18 */
	line-height: 28px;
	color: var(--color-neutral-500);             /* #888F93 */
}

.mada-categories__row {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));   /* see the ladder below */
	gap: var(--space-9) var(--space-5);          /* Figma: row 32, column 16 */
}

.mada-categories__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Figma draws 138 flat, with every label on one line. That holds at the
	   desktop card width (208px of inner room vs a 198px worst-case label), but
	   round-4's longer names — "Home, Furniture & Decor", "Beauty & Personal
	   Care" — wrap once the grid steps down to 4 or 2 columns, and a hard height
	   would spill them out of the card. min- keeps the drawn height wherever the
	   design's assumption holds and lets the card grow where it doesn't; grid
	   stretch keeps a row's cards equal either way. */
	min-block-size: 138px;
	background-color: var(--color-ice-credit);   /* #D3EFFF */
	border: var(--border-width-thin) solid rgba(0, 45, 78, 0.1);
	border-radius: var(--radius-5xl);            /* 40 */
	padding-block: 25px;
	padding-inline: 17px;
	box-shadow: 0 1.443px 4.329px 0 rgba(0, 14, 11, 0.1), 0 1.443px 2.886px 0 rgba(0, 14, 11, 0.06); /* Elevation Light/2 */
	text-decoration: none;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

/* Pills are links into the Merchant Catalog (pre-filtered by category). Keep
   the card look identical; add a subtle lift on hover, never an underline. */
a.mada-categories__card:hover,
a.mada-categories__card:focus-visible {
	text-decoration: none;
	border-color: rgba(0, 45, 78, 0.25);
	box-shadow: 0 8px 18px rgba(0, 14, 11, 0.12);
	transform: translateY(-2px);
}

.mada-categories__label {
	font-weight: var(--fw-semibold);
	font-size: 16px;
	line-height: 24px;
	color: #071214;
}

/* Client feedback p7: the arrow is TOP-aligned with the category icon
   (Figma places it at y≈29 beside the 24px icon at y=25), not bottom. */
.mada-categories__arrow {
	position: absolute;
	inset-block-start: 29px;
	inset-inline-end: 19px;
}

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

/* Column ladder. Round-4 took the set from 9 pills to 12 (Figma 4760:67301),
   which changes both ends of this:

   - The desktop step is now SIX, not five — the supplied grid is 6 × 241.33 in
     a 1528 row, i.e. two clean rows of six. It starts at 1440 because that is
     where --ui-scale kicks in (§3.6.1) and the container reaches its 1536 cap;
     six columns in the ~988px container available at 1152 would squeeze
     "Beauty & Personal Care" to about 138px. 12 divides evenly by 2/3/4/6, so
     every step below still fills its last row.
   - Tracks are minmax(0, 1fr) rather than a fixed 240px. The fixed value was
     never guarded against the container: at 1025 the four 240px columns wanted
     1008px inside a 897px container and pushed the page into horizontal
     scroll. 1fr can't overflow, and at the 1536 desktop container it resolves
     to 242.67 — the design's 241.33 measured against its own 1528 row. */
/* MADA-2859. The ladder used to skip two of the design's six steps: it began at
   TWO columns (Figma draws ONE below 500) and jumped 4 -> 6 with no FIVE, which
   is the "not consistently 5 per row" report. Counted off the EN Home frames:

       M320 M393 M394 M499  ->  1        D1200 D1201          ->  4
       M500 M639 T640       ->  2        D1439 D1440 D1720    ->  5
       T1024 D1025          ->  3        D1920                ->  6

   Each media query is the FRAME WIDTH itself — client-confirmed 17 Sept 2026,
   and deliberately NOT pre-multiplied by --ui-scale the way the four
   breakpoints in tokens.css are. Two reasons: it is the mapping QA checks (open
   a 1440 window, expect the 1440 frame), and it happens to reproduce the
   design's ON-SCREEN card size closely, because the container this sits in is
   already ~1/0.8 wider in layout px than the frame it corresponds to. Measured
   cell, layout px x 0.8 = screen px, against the frame's own 1:1 cell:

       vw 1024 -> 309.3 vs 309.3 exact     vw 640 -> 280 vs 280 exact
       vw 1025 -> 290.5 vs 288.3           vw 500 -> 226 vs 226 exact
       vw 1200 -> 245.9 vs 256             vw 499 -> 467 vs 467 exact
       vw 1920 -> 245.4 vs 241.3

   ONE frame is excluded as a design inconsistency: **D1719 draws 6** while
   D1439/D1440/D1720 all draw 5, so a window widened past 1719 would LOSE a
   column and regain it at 1720+. Its grid is 1591 wide where D1720's is 1336 —
   the two frames were drawn with different margins. Three frames outvote one,
   so 5 runs 1439-1919. Raise it with Mada if they want 1719 honoured.

   Tracks stay minmax(0, 1fr) so they can never overflow the container (a fixed
   240px once pushed the 1025 layout into horizontal scroll). 12 divides by
   1/2/3/4/6, so only the 5-column step leaves a short last row — as drawn. */
@media (min-width: 500px) {
	.mada-categories__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.mada-categories__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.mada-categories__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1439px) {
	.mada-categories__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
	.mada-categories__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}