/* =============================================================
 * VI Layout System
 * styles/layout.css
 * =============================================================
 *
 * The structural layer. Sits between tokens and components.
 * Controls how sections, containers, grids, and stacks
 * arrange content on the page.
 *
 * MENTAL MODEL:
 *   vi-section       ← full-width horizontal band (bg color, vertical padding)
 *     vi-container   ← max-width centered wrapper (horizontal gutters)
 *       vi-grid      ← column structure (CSS Grid)
 *         vi-card    ← component lives here
 *
 * NEVER put layout responsibilities on a component.
 * NEVER put component styles on a layout class.
 * Each layer has one job.
 *
 * USAGE PATTERN:
 *   <section class="vi-section vi-section--subtle">
 *     <div class="vi-container">
 *       <div class="vi-grid vi-grid--3">
 *         <article class="vi-card vi-card--raised">...</article>
 *         <article class="vi-card vi-card--raised">...</article>
 *         <article class="vi-card vi-card--raised">...</article>
 *       </div>
 *     </div>
 *   </section>
 *
 * WORDPRESS:   Apply directly to PHP template markup
 * SVELTE:      Apply directly to component markup — no wrapper needed
 * ============================================================= */


/* =============================================================
 * SECTION
 * Full-width horizontal bands. Controls vertical rhythm and
 * background color of page sections.
 *
 * Always use <section>, <header>, <footer>, or <div> —
 * not <article> (that's for components).
 *
 * VARIANTS:   vi-section--white | vi-section--subtle |
 *             vi-section--dark | vi-section--brand
 * SIZES:      vi-section--sm | vi-section--md (default) | vi-section--lg
 * ============================================================= */

.vi-section {
  width:          100%;
  padding-top:    var(--spacing-layout-section-md);
  padding-bottom: var(--spacing-layout-section-md);
}

/* ── Size variants ── */
.vi-section--sm {
  padding-top:    var(--spacing-layout-section-sm);
  padding-bottom: var(--spacing-layout-section-sm);
}

.vi-section--lg {
  padding-top:    var(--spacing-layout-section-lg);
  padding-bottom: var(--spacing-layout-section-lg);
}

/* ── No padding (when the section holds a full-bleed image) ── */
.vi-section--flush {
  padding-top:    0;
  padding-bottom: 0;
}

/* ── Background variants ── */
.vi-section--white {
  background-color: var(--color-background-default);
}

.vi-section--subtle {
  background-color: var(--color-background-subtle);
}

.vi-section--dark {
  background-color: var(--color-background-inverse);
  color:            var(--color-text-inverse);
}

/* On dark sections, secondary text should still be legible */
.vi-section--dark .vi-card__text,
.vi-section--dark .vi-card__eyebrow {
  color: var(--color-text-inverse-secondary);
}

.vi-section--brand {
  background-color: var(--color-interactive-default);
  color:            var(--color-text-on-brand);
}

.vi-section--brand .vi-card__text,
.vi-section--brand .vi-card__eyebrow {
  color: var(--color-text-on-brand-secondary);
}


/* =============================================================
 * CONTAINER
 * Max-width centered wrapper. Always lives inside a vi-section.
 * Provides horizontal gutters and constrains content width.
 *
 * VARIANTS:   vi-container--narrow | vi-container--wide
 * ============================================================= */

.vi-container {
  width:         100%;
  max-width:     var(--sizing-container-max);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--spacing-layout-container);
  padding-right: var(--spacing-layout-container);
}

/* Wider gutters on tablet and above */
@media (min-width: 768px) {
  .vi-container {
    padding-left:  var(--spacing-layout-container-md);
    padding-right: var(--spacing-layout-container-md);
  }
}

/* ── Narrow: blog posts, article body, centered text blocks ── */
.vi-container--narrow {
  max-width: var(--sizing-container-narrow);
}

/* ── Wide: full-bleed content, large image galleries ── */
.vi-container--wide {
  max-width: var(--sizing-container-wide);
}

/* ── Full: edge-to-edge, no max-width constraint ── */
.vi-container--full {
  max-width: none;
}


/* =============================================================
 * SECTION HEADER
 * Centered text block used to introduce a section —
 * eyebrow label, heading, and subtext.
 * Optional — not every section needs a header.
 *
 * USAGE:
 *   <div class="vi-section-header">
 *     <span class="vi-badge vi-badge--brand">What We Do</span>
 *     <h2 class="vi-section-header__title">Our Services</h2>
 *     <p class="vi-section-header__text">Supporting copy here.</p>
 *   </div>
 * ============================================================= */

.vi-section-header {
  text-align:    center;
  max-width:     var(--sizing-content-narrow);
  margin-left:   auto;
  margin-right:  auto;
  margin-bottom: var(--spacing-layout-stack-lg);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--spacing-layout-stack-sm);
}

.vi-section-header__title {
  font-size:      var(--typography-heading-h2-size);
  font-weight:    var(--typography-heading-h2-weight);
  line-height:    var(--typography-heading-h2-lineheight);
  letter-spacing: var(--typography-heading-h2-letterspacing);
  color:          var(--color-text-primary);
  margin:         0;
}

/* Inherit color on dark/brand sections */
.vi-section--dark  .vi-section-header__title,
.vi-section--brand .vi-section-header__title {
  color: inherit;
}

.vi-section-header__text {
  font-size:   var(--typography-body-lg-size);
  line-height: var(--typography-body-lg-lineheight);
  color:       var(--color-text-secondary);
  margin:      0;
  max-width:   52ch; /* reading measure — intentional literal, like breakpoints */
}

.vi-section--dark  .vi-section-header__text,
.vi-section--brand .vi-section-header__text {
  color: var(--color-text-on-brand-secondary);
}

/* ── Left-aligned variant (for content-heavy sections) ── */
.vi-section-header--left {
  text-align:  left;
  align-items: flex-start;
  margin-left: 0;
}


/* =============================================================
 * GRID
 * CSS Grid-based column layout. Always lives inside vi-container.
 * Collapses to a single column on mobile by default.
 *
 * EQUAL COLUMNS:    vi-grid--2 | vi-grid--3 | vi-grid--4
 * ASYMMETRIC:       vi-grid--2-1 | vi-grid--1-2 | vi-grid--3-2
 * AUTO:             vi-grid--auto (browser decides column count)
 * GAP VARIANTS:     vi-grid--gap-sm | vi-grid--gap-lg
 * ============================================================= */

.vi-grid {
  display: grid;
  gap:     var(--spacing-layout-gap);
}

/* ── Gap variants ── */
.vi-grid--gap-sm { gap: var(--spacing-layout-gap-sm); }
.vi-grid--gap-lg { gap: var(--spacing-layout-gap-lg); }

/* ── Equal columns ── */
.vi-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vi-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vi-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Asymmetric splits ── */
/* Content + sidebar: 66% / 33% */
.vi-grid--2-1 { grid-template-columns: 2fr 1fr; }

/* Sidebar + content: 33% / 66% */
.vi-grid--1-2 { grid-template-columns: 1fr 2fr; }

/* 60% / 40% — good for feature sections with image */
.vi-grid--3-2 { grid-template-columns: 3fr 2fr; }

/* 40% / 60% — reverse of above */
.vi-grid--2-3 { grid-template-columns: 2fr 3fr; }

/* ── Auto-fill: browser fills columns at the sizing.grid.min-column width ── */
/* Great for card grids — no breakpoints needed */
.vi-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(var(--sizing-grid-min-column), 1fr));
}

/* ── Centered: single narrow column, centered on page ── */
.vi-grid--center {
  grid-template-columns: minmax(0, var(--sizing-content-narrow));
  justify-content: center;
}


/* ── Responsive collapse ── */

/* Tablet: 4-col becomes 2-col, 3-col becomes 2-col */
@media (max-width: 1024px) {
  .vi-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .vi-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: everything becomes 1 column */
@media (max-width: 768px) {
  .vi-grid--2,
  .vi-grid--3,
  .vi-grid--4,
  .vi-grid--2-1,
  .vi-grid--1-2,
  .vi-grid--3-2,
  .vi-grid--2-3 {
    grid-template-columns: 1fr;
  }
}


/* =============================================================
 * STACK
 * Vertical rhythm between sibling elements.
 * Adds top margin to every child after the first.
 *
 * Use when you need consistent spacing between stacked
 * elements inside a column — headings, paragraphs, buttons.
 *
 * SIZES:   vi-stack--sm | vi-stack--md (default) | vi-stack--lg
 *
 * USAGE:
 *   <div class="vi-stack">
 *     <h2>Heading</h2>
 *     <p>Paragraph</p>
 *     <button class="vi-btn vi-btn--primary">CTA</button>
 *   </div>
 * ============================================================= */

.vi-stack > * + * {
  margin-top: var(--spacing-layout-stack-md);
}

.vi-stack--sm > * + * {
  margin-top: var(--spacing-layout-stack-sm);
}

.vi-stack--lg > * + * {
  margin-top: var(--spacing-layout-stack-lg);
}


/* =============================================================
 * DIVIDER
 * Horizontal rule for separating sections or content areas.
 *
 * USAGE:   <hr class="vi-divider">
 *          <hr class="vi-divider vi-divider--subtle">
 * ============================================================= */

.vi-divider {
  border:        none;
  border-top:    var(--border-width-thin) solid var(--color-border-default);
  margin-top:    var(--spacing-layout-stack-md);
  margin-bottom: var(--spacing-layout-stack-md);
}

.vi-divider--subtle {
  border-top-color: var(--color-border-default);
  opacity: 0.5;
}

.vi-divider--strong {
  border-top: var(--border-width-medium) solid var(--color-border-strong);
}


/* =============================================================
 * FLEX ROW
 * Simple horizontal row for aligning items in a line.
 * Use for button groups, inline badge + text combos, etc.
 * For page-level columns, always use vi-grid instead.
 *
 * VARIANTS:  vi-row--center | vi-row--between | vi-row--end
 * WRAP:      vi-row--wrap (allows items to wrap to next line)
 * ============================================================= */

.vi-row {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-component-gap-md);
}

.vi-row--wrap    { flex-wrap: wrap; }
.vi-row--center  { justify-content: center; }
.vi-row--between { justify-content: space-between; }
.vi-row--end     { justify-content: flex-end; }
.vi-row--top     { align-items: flex-start; }
.vi-row--stretch { align-items: stretch; }

/* ── Gap variants ── */
.vi-row--gap-sm { gap: var(--spacing-component-gap-sm); }
.vi-row--gap-lg { gap: var(--spacing-component-gap-lg); }


/* =============================================================
 * ASPECT RATIO BOXES
 * Used for media containers that need a fixed ratio.
 * The image or video inside fills the box via object-fit.
 *
 * RATIOS:  vi-ratio--16-9 | vi-ratio--4-3 | vi-ratio--1-1 | vi-ratio--3-4
 *
 * USAGE:
 *   <div class="vi-ratio vi-ratio--16-9">
 *     <img src="..." alt="...">
 *   </div>
 * ============================================================= */

.vi-ratio {
  position: relative;
  width:    100%;
  overflow: hidden;
}

.vi-ratio > * {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  object-fit: cover;
}

.vi-ratio--16-9  { padding-top: 56.25%; }
.vi-ratio--4-3   { padding-top: 75%; }
.vi-ratio--1-1   { padding-top: 100%; }
.vi-ratio--3-4   { padding-top: 133.33%; }
.vi-ratio--21-9  { padding-top: 42.86%; }