/* Suprevo CMS — section LAYOUT (structural scaffolding).
 *
 * Enqueued as its OWN handle `suprevo-sections-layout`, separate from the decorative
 * `suprevo-sections`. A theme can dequeue the SKIN to own its brand while KEEPING this — the
 * multi-item ARRANGEMENT grids the default section templates need to lay out (column counts,
 * splits, responsive collapse). No colour, type or surface here. The section WRAPPER
 * (.sv-section / .sv-container / spacing / bg presets) is the theme's canvas and stays in the
 * decorative sheet, so a theme keeps owning it. Consumes only --sv-* layout tokens.
 *
 * Rule of thumb: the grid/flex CONTAINER of items lives here; the item's + wrapper's skin
 * lives in sections.css. */

/* Button row */
.sv-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.sv-actions--center { justify-content: center; }

/* Hero */
.sv-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .sv-hero { grid-template-columns: 1fr; } }

/* Features grid */
.sv-grid { display: grid; gap: 1.25rem; }
.sv-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .sv-grid--3 { grid-template-columns: 1fr; } }

/* Media + text split */
.sv-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sv-split--flip .sv-split__text { order: 2; }
@media (max-width: 860px) { .sv-split { grid-template-columns: 1fr; } .sv-split--flip .sv-split__text { order: 0; } }

/* Features "split" variant — cards stack in one half, image fills the other. Reuses
   .sv-split (double-class so it beats a theme's single-class .sv-split centring). The
   image stretches to the stacked cards' height; on mobile .sv-split already collapses. */
.sv-split.sv-features--split { align-items: stretch; }
.sv-split__stack { display: grid; gap: 1.25rem; align-content: start; }
.sv-features--split .sv-split__figure { display: flex; height: 100%; }
.sv-features--split .sv-split__media { height: 100%; object-fit: cover; }
.sv-features--split .sv-split__placeholder { flex: 1; aspect-ratio: auto; min-height: 20rem; }

/* Columns — closed layout enum; track sizing lives here, never in the data. Mirrors
   suprevo_column_layouts(); a theme adds a split via the filter + a .sv-cols--{slug} class. */
.sv-cols { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
.sv-cols--full    { grid-template-columns: 1fr; }
.sv-cols--1-1     { grid-template-columns: 1fr 1fr; }
.sv-cols--2-1     { grid-template-columns: 2fr 1fr; }
.sv-cols--1-2     { grid-template-columns: 1fr 2fr; }
.sv-cols--1-1-1   { grid-template-columns: repeat(3, 1fr); }
.sv-cols--1-1-1-1 { grid-template-columns: repeat(4, 1fr); }
.sv-col { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
/* Mobile collapse — after the variants so source order wins at equal specificity. */
@media (max-width: 860px) { .sv-cols { grid-template-columns: 1fr; } }

/* Stats grid — auto-fit so 2–4 read evenly. */
.sv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin: 0; }
/* Stats beside an image (`layout: media`): the figures now share half the width, where
   auto-fit would squeeze three 11rem tracks in and leave a lone orphan on row two. Two
   across reads as a deliberate pair. Below the .sv-split collapse the section is full
   width again, so the ordinary auto-fit behaviour is restored. */
.sv-stats--split .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }
/* The heading now sits INSIDE the text column, so the section-head defaults meant for a
   full-width band no longer apply: its reading-width cap is already the column, and its
   generous bottom margin was sized to separate two stacked bands, not two stacked blocks.
   Two classes deep on purpose — it must beat a theme's own single-class .sv-section__head. */
.sv-stats--split .sv-section__head { max-width: none; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 860px) {
	.sv-stats--split .sv-stats { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

/* Accordion list */
.sv-accordion { max-width: 46rem; display: grid; gap: .75rem; }

/* Logo wall row */
.sv-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.sv-logo { flex: 0 0 auto; }

/* Collection / archive results — the two card ARRANGEMENTS (skin in sections.css).
   `cards`: auto-fill so 2–4 across read evenly and a short list never stretches into
   half-page tiles. `list`: a stacked feed whose cards go media-beside-text once there's
   room (the card's media + body wrappers are the two grid tracks). */
.sv-collection--cards { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.sv-collection--list { display: grid; gap: 1.25rem; }
@media (min-width: 700px) {
	.sv-collection--list .sv-collection__card { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: stretch; }
}

/* Pagination row (archives + the paginated collection). */
.sv-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* Banner strip */
.sv-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.sv-banner__action { flex: 0 0 auto; }
@media (max-width: 600px) { .sv-banner { flex-direction: column; align-items: flex-start; } }

/* Guaranteed container for sections rendered by the engine's OWN default template
 * (`sv-section--engine-tpl`) or the generic field fallback (`sv-section--fallback`).
 * The section WRAPPER's .sv-container lives in the DEQUEUEABLE sections-wrapper.css, so a
 * theme that dequeues it to own full-bleed layout would otherwise leave engine-templated
 * sections (columns, banner, logo_wall, collection, …) edge-to-edge with clipped text.
 * This re-supplies width + rhythm for JUST those, in the ALWAYS-ON layer. It never touches
 * a theme's own templated sections (they carry neither marker), so intentional full-bleed
 * stays intact. Retune via the --sv-container token or override in the theme. */
.sv-section--engine-tpl > .sv-container,
.sv-section--fallback   > .sv-container {
	width: 100%;
	max-width: var(--sv-container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.sv-section--engine-tpl.sv-pad-sm, .sv-section--fallback.sv-pad-sm { padding-block: clamp(2rem, 4vw, 3rem); }
.sv-section--engine-tpl.sv-pad-md, .sv-section--fallback.sv-pad-md { padding-block: clamp(3rem, 6vw, 5rem); }
.sv-section--engine-tpl.sv-pad-lg, .sv-section--fallback.sv-pad-lg { padding-block: clamp(4rem, 9vw, 7.5rem); }