/* ============================================================
   FLIBBR — clientele.css
   ============================================================
   Source-of-truth: locked canonical mockups
     - flibbr-design-mockup-final-clientele-grid-home-consulting.html
       (Compact layout — Home + Consulting)
     - flibbr-design-mockup-final-clientele-grid-about.html
       (Generous layout — About)
     Both locked FINAL 17 May 2026 in session v216.

   Layout: shared base + two layout variants via the
   .clientele-grid-compact / .clientele-grid-generous class.

   Treatment: monochrome by default (grayscale filter),
   brand-colour on hover.

   Roster: open-ended via ACF repeater. Canon fallback in
   template renders 16 ghost placeholders if repeater empty.

   Enqueued on: home, about, consulting (conditional, via
   functions.php).

   @since v0.5.169 / Ship 8
   @updated v0.5.171 / Ship 10 — cell height replaced with 2.5:1 aspect-ratio
   ============================================================ */

/* ---------- Base section + container ---------- */
.clientele-grid {
	padding-block: var(--s-9);
	border-bottom: 1px solid var(--rule-soft);
}
.clientele-grid .container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* ---------- Section header (kicker + h2) ---------- */
.clientele-grid .section-header {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--s-7);
	align-items: baseline;
	margin-bottom: var(--s-7);
	padding-top: var(--s-3);
	border-top: 1px solid var(--ink);
}
.clientele-grid .section-header .label {
	font-family: var(--sans);
	font-weight: 600;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-quiet);
}
.clientele-grid .section-header .name {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.012em;
	color: var(--ink);
	margin: 0;
}
.clientele-grid .section-header .name em {
	font-style: italic;
}
@media (max-width: 720px) {
	.clientele-grid .section-header {
		grid-template-columns: 1fr;
		gap: var(--s-3);
		margin-bottom: var(--s-6);
	}
}

/* ---------- Individual mark ---------- */
/* Real logos (from ACF) → <img> with grayscale filter, brand-colour on hover.
   Ghost placeholders (canon fallback) → <span> with text, identical hover. */
.clientele-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--paper-warm);
	border: 1px solid var(--rule);
	color: var(--ink-quiet);
	font-family: var(--sans);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-align: center;
	line-height: 1.2;
	padding: var(--s-2) var(--s-3);
	transition: filter 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	text-decoration: none;
}
.clientele-mark img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	transition: filter 0.2s ease;
}
.clientele-mark:hover {
	background: var(--paper);
	border-color: var(--ink-quiet);
	color: var(--ink);
}
.clientele-mark:hover img {
	filter: grayscale(0);
}

/* Anchor variant (when logo_link is set) — strip default a styling */
a.clientele-mark {
	color: var(--ink-quiet);
}
a.clientele-mark:hover {
	color: var(--ink);
}

/* ---------- Layout variant: COMPACT (Home + Consulting) ---------- */
/* 5-col desktop, 3-col tablet, 2-col mobile.
   Cells at 2.5:1 aspect — sized to render real logos at meaningful scale.
   At desktop (1280 container, 48px gutter), cells compute to ~224 × 90 px
   with ~200 × 74 px inner logo box after padding. */
/* v0.5.234 — per-page customisation.
   The 720px max-width cap from v0.5.233 was too restrictive: on Home
   (no TOC reservation) it left a large empty zone to the right of the
   roster grid; on Consulting/About the grid's right edge no longer
   matched the right edge of sibling sections above.

   New approach: cell grid spans the FULL container inner width — the
   TOC right-padding reservation on Consulting/About (via
   .page-toc-host > section > .container in page-chassis.css) already
   pulls the container's right edge inboard of the floating TOC, so the
   grid automatically clears it. On Home there is no TOC, so the grid
   extends to the full container right edge — matching the rule lines
   on the sections above.

   Column count is customised per page to keep cell size roughly
   uniform across surfaces:
   - Home (wider inner width, no TOC): 6 cols
   - Consulting + About (TOC-reserved inner width): 5 cols (base)

   v0.5.235 — Safari grid-overflow fix. All `1fr` track definitions
   replaced with `minmax(0, 1fr)`. Without minmax(0,...), WebKit/Safari
   sizes each 1fr track from the container width WITHOUT first
   subtracting the gap allowance, causing the row to overflow by
   (gap × (cols-1)). Diagnosed at v0.5.234: at 1710px viewport on Home,
   the 6-col row was overflowing its container by 113.8px (= 5 × 16px
   gap × 19px/cell extra width — Safari computed 1fr = 1184/6 = 197.3,
   Chrome computed 1fr = (1184 - 80)/6 = 184). minmax(0, 1fr) forces
   tracks to shrink below intrinsic content size if needed, which
   yields consistent gap-aware sizing across Chrome, Safari, Firefox. */
.clientele-grid-compact .clientele-cells {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s-3) var(--s-4);
}
body.home .clientele-grid-compact .clientele-cells {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.clientele-grid-compact .clientele-mark {
	aspect-ratio: 2.5 / 1;
	height: auto;
	font-size: 11px;
}
@media (max-width: 720px) {
	.clientele-grid-compact .clientele-cells {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 520px) {
	.clientele-grid-compact .clientele-cells {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Layout variant: GENEROUS (DEPRECATED v0.5.233) ----------
   v0.5.233: About switched from generous → compact to resolve TOC
   overlap. Rules retained for one ship as safety net; flagged for
   removal in the next ship. No PHP currently passes 'clientele-grid-generous'
   as layout_class — both page-consulting.php and page-about.php pass
   'clientele-grid-compact'.
   v0.5.235: tracks updated to minmax(0, 1fr) for Safari-safety in case
   the variant is ever re-invoked. */
.clientele-grid-generous .clientele-cells {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-6) var(--s-7);
}
.clientele-grid-generous .clientele-mark {
	aspect-ratio: 2.5 / 1;
	height: auto;
	font-size: 13px;
}
@media (max-width: 720px) {
	.clientele-grid-generous .clientele-cells {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-5);
	}
}
@media (max-width: 520px) {
	.clientele-grid-generous .clientele-cells {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}