/* 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; }

/* 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; }

/* 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; } }