/* ==========================================================================
   FORCE PR — 04 LAYOUT
   Containers, sections, grid, stack.

   This layer replaces the legacy responsive model wholesale. The audit found
   six banded breakpoints (min-width AND max-width on every rule), 344
   per-column responsive padding values, and a 12-column float grid. None of
   that is reproduced here.

   The rule: components size themselves from their CONTAINER, not the
   viewport. Only page-level structure looks at the viewport at all.
   ========================================================================== */

@layer force.layout {

  /* ======================================================================
     CONTAINERS
     ====================================================================== */

  .force-container,
  .force-container--wide,
  .force-container--narrow,
  .force-container--text {
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--force-gutter-page);
  }

  .force-container          { max-inline-size: var(--force-container); }        /* 1300px — the existing site width */
  .force-container--wide    { max-inline-size: var(--force-container-wide); }   /* 1600px — galleries, image bands */
  .force-container--narrow  { max-inline-size: var(--force-container-narrow); } /*  860px — forms, focused copy */
  .force-container--text    { max-inline-size: var(--force-container-text); }   /*   68ch — long-form article body */

  /* Full-bleed: escape the current container without position tricks. */
  .force-container--full {
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Break a single child out of a constrained parent to full viewport width. */
  .force-bleed {
    inline-size: 100vw;
    margin-inline-start: 50%;
    transform: translateX(-50%);
    max-inline-size: none;
  }


  /* ======================================================================
     SECTIONS
     Vertical rhythm lives here, not in spacer blocks.
     ====================================================================== */

  .force-section {
    position: relative;
    padding-block: var(--force-space-section);
  }

  .force-section--lg   { padding-block: var(--force-space-section-lg); }
  .force-section--xl   { padding-block: var(--force-space-section-xl); }
  .force-section--flush{ padding-block: 0; }
  .force-section--tight{ padding-block: var(--force-space-8); }

  /* Trim the leading/trailing gap when sections butt against each other. */
  .force-section--no-top    { padding-block-start: 0; }
  .force-section--no-bottom { padding-block-end: 0; }

  /* Surface variants */
  .force-section--sunken   { background-color: var(--force-bg-sunken); }
  .force-section--elevated { background-color: var(--force-bg-elevated); }

  .force-section--gradient {
    background-image: var(--force-gradient-ink);
  }

  /* Hairline divider between adjacent same-colour sections. */
  .force-section--ruled::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    background: var(--force-gradient-rule);
    opacity: 0.3;
  }


  /* ======================================================================
     STACK — vertical flow
     `.force-stack > * + *` is the single mechanism for vertical spacing
     between siblings. It replaces 128 vc_empty_space blocks.
     ====================================================================== */

  .force-stack           { --force-stack-gap: var(--force-space-5); }
  .force-stack--xs       { --force-stack-gap: var(--force-space-2); }
  .force-stack--sm       { --force-stack-gap: var(--force-space-3); }
  .force-stack--lg       { --force-stack-gap: var(--force-space-7); }
  .force-stack--xl       { --force-stack-gap: var(--force-space-9); }

  .force-stack > * + * { margin-block-start: var(--force-stack-gap); }


  /* ======================================================================
     CLUSTER — horizontal grouping that wraps (button rows, tag lists, meta)
     ====================================================================== */

  .force-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--force-space-4);
  }

  .force-cluster--sm     { gap: var(--force-space-2); }
  .force-cluster--lg     { gap: var(--force-space-6); }
  .force-cluster--between{ justify-content: space-between; }
  .force-cluster--center { justify-content: center; }
  .force-cluster--end    { justify-content: flex-end; }


  /* ======================================================================
     GRID — intrinsically responsive, zero breakpoints
     `auto-fit` + `minmax` means the column count follows available width.
     Set --force-grid-min to control the breaking point per instance.
     ====================================================================== */

  .force-grid {
    --force-grid-min: 18rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--force-grid-min), 100%), 1fr));
    gap: var(--force-gutter);
  }

  .force-grid--narrow { --force-grid-min: 13rem; }  /* logo walls, small tiles */
  .force-grid--wide   { --force-grid-min: 24rem; }  /* feature cards */
  .force-grid--gap-sm { gap: var(--force-space-4); }
  .force-grid--gap-lg { gap: var(--force-space-8); }

  /* Fixed-count grids, for the rare case where the count is the design.
     These DO collapse at a breakpoint, because "2 up" genuinely has no
     intrinsic answer at 320px. */
  .force-grid--2,
  .force-grid--3,
  .force-grid--4 {
    grid-template-columns: 1fr;
  }

  @media (width >= 48rem) {
    .force-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .force-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .force-grid--4 { grid-template-columns: repeat(2, 1fr); }
  }

  @media (width >= 64rem) {
    .force-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .force-grid--4 { grid-template-columns: repeat(4, 1fr); }
  }

  /* Asymmetric editorial split — heading left, body right. */
  .force-split {
    display: grid;
    gap: var(--force-gutter);
    grid-template-columns: 1fr;
  }

  @media (width >= 62rem) {
    .force-split            { grid-template-columns: 5fr 7fr; }
    .force-split--even      { grid-template-columns: 1fr 1fr; }
    .force-split--reverse   { grid-template-columns: 7fr 5fr; }
    .force-split--sticky > :first-child {
      position: sticky;
      inset-block-start: var(--force-space-9);
      align-self: start;
    }
  }

  /* Span helpers for children of .force-grid */
  .force-span-2 { grid-column: span 2; }
  .force-span-3 { grid-column: span 3; }
  .force-span-full { grid-column: 1 / -1; }


  /* ======================================================================
     CONTAINER QUERIES
     Anything marked .force-cq becomes a query container, so its children
     adapt to the space they were GIVEN rather than to the window. This is
     what lets one card component sit in a 4-up grid, a sidebar and a
     full-width hero without three sets of viewport media queries.
     ====================================================================== */

  .force-cq {
    container-type: inline-size;
    container-name: force;
  }

  /* Components query `force` — see 05-components.css. */


  /* ======================================================================
     ASPECT RATIOS — for media frames
     ====================================================================== */

  .force-ratio-square  { aspect-ratio: 1 / 1; }
  .force-ratio-4-3     { aspect-ratio: 4 / 3; }
  .force-ratio-3-2     { aspect-ratio: 3 / 2; }
  .force-ratio-16-9    { aspect-ratio: 16 / 9; }
  .force-ratio-portrait{ aspect-ratio: 3 / 4; }
  .force-ratio-wide    { aspect-ratio: 21 / 9; }


  /* ======================================================================
     AMBIENT LIGHT
     The blurred background light behind heroes and CTA bands. Purely
     decorative: aria-hidden, pointer-events none, sits behind content, and
     counts against the two-glow-per-viewport budget.
     ====================================================================== */

  .force-ambient {
    position: absolute;
    z-index: var(--force-z-below);
    pointer-events: none;
    inline-size: min(60rem, 90vw);
    aspect-ratio: 1;
    background-image: var(--force-gradient-glow-accent);
    filter: blur(20px);
    opacity: 0.9;
  }

  .force-ambient--mint { background-image: var(--force-gradient-glow-mint); }
  .force-ambient--sm   { inline-size: min(32rem, 70vw); }
  .force-ambient--tl   { inset-block-start: -20%; inset-inline-start: -10%; }
  .force-ambient--tr   { inset-block-start: -20%; inset-inline-end:  -10%; }
  .force-ambient--br   { inset-block-end:   -20%; inset-inline-end:  -10%; }
  .force-ambient--bl   { inset-block-end:   -20%; inset-inline-start:-10%; }

  /* A section containing ambient light must clip it. */
  .force-section:has(.force-ambient) { overflow: clip; }
}