/* ==========================================================================
   Zeest v2 — grid.css: the layout grid under everything.
   A 12-column grid (gutter 24px desktop / 20px tablet / 16px mobile, from
   the 8pt scale), the fluid container, and the ONE section rhythm.
   Breakpoints exist only here and in the component sheets, and only at
   1199px / 767px (plus 479px for grid columns alone).
   ========================================================================== */

:root{
	--pad:clamp(48px,5vw,120px);  /* desktop side padding — keeps growing on wide screens */
	--padm:20px;                  /* mobile side padding (used by inset cards on mobile) */
	--secy:48px;                  /* standard section padding, top and bottom */
	--gutter:24px;                /* base grid gutter */
}
@media (max-width:1199px){
	:root{--pad:32px;--secy:40px;--gutter:20px}
}
@media (max-width:767px){
	:root{--pad:20px;--secy:32px;--gutter:16px}
}

/* Container: fluid full width — bands span the viewport, content breathes
   inside the side padding. No boxed max-width anywhere. */
.z-wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* Section rhythm (spec §2.4): every section owns its full padding, top AND
   bottom; no section borrows a gap from its neighbour, and no modifier
   zeroes one side. Two stacked sections always meet at 96/80/64px. */
.z-section{padding:var(--secy) 0}

/* The 12-column grid */
.z-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.z-span-2{grid-column:span 2}
.z-span-3{grid-column:span 3}
.z-span-4{grid-column:span 4}
.z-span-6{grid-column:span 6}
.z-span-12{grid-column:span 12}
.z-span-full{grid-column:1/-1}

/* --- Category tiles: 4 across → 2 → 1, composed from the grid --- */
/* v2.4 reconciliation: .z-cats and .z-cards2 ARE 12-column grids in
   their own right (their children carry span rules below) — the
   display:grid + template declaration lives here so the components
   work without a separate .z-grid wrapper class. */
.z-cats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.z-cats .z-tile{grid-column:span 3}
@media (max-width:1199px){
	.z-cats{gap:20px}
	.z-cats .z-tile{grid-column:span 6}
}
@media (max-width:767px){
	.z-cats{gap:16px}
	.z-cats .z-tile{grid-column:span 12}
}

/* --- Story + fabric cards: two halves from the grid --- */
.z-cards2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.z-cards2 .z-tcard{grid-column:span 6}
@media (max-width:1199px){.z-cards2{gap:20px}}
@media (max-width:767px){
	.z-cards2{gap:16px}
	.z-cards2 .z-tcard{grid-column:span 12}
}

/* --- Values strip: planned for exactly 5 items at every tier --- */
.z-values{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media (max-width:1199px){
	.z-values{grid-template-columns:repeat(6,1fr);gap:20px}
	.z-values .z-value{grid-column:span 2}
	.z-values .z-value:nth-child(4),
	.z-values .z-value:nth-child(5){grid-column:span 3} /* centred pair — no orphan row */
}
@media (max-width:767px){
	.z-values{grid-template-columns:repeat(2,1fr);gap:16px}
	.z-values .z-value{grid-column:auto}
	.z-values .z-value:nth-child(4){grid-column:auto}
	.z-values .z-value:last-child{grid-column:1/-1} /* last card spans — no orphan row */
}

/* --- Journal post grid: 3 → 2 → 1 --- */
.z-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
@media (max-width:1199px){.z-post-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (max-width:767px){.z-post-grid{grid-template-columns:1fr;gap:16px}}