/* ==========================================================================
 * WattWisely — containers, sections, grids
 * ========================================================================== */

@layer layout {

  /* -- Container ---------------------------------------------------------- */

  .container {
    width: 100%;
    max-width: calc(var(--ww-container) + var(--ww-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--ww-gutter);
  }

  .container--narrow { max-width: calc(var(--ww-container-narrow) + var(--ww-gutter) * 2); }

  /* -- Section ------------------------------------------------------------ */

  .section { padding-block: var(--ww-section-y); }

  .section--tight { padding-block: calc(var(--ww-section-y) * 0.6); }

  /* The last section in <main> sits directly on the footer. The closing CTA
     band and the footer share the ink background, so full section padding plus
     the footer's own top padding reads as one tall empty block. */
  main > .section:last-child { padding-block-end: calc(var(--ww-section-y) * 0.6); }

  .section--surface { background: var(--ww-surface); }

  /* Dark sections carry the brand through the whole page rather than only
     appearing in accents. Text colours flip wholesale. */
  .section--ink {
    background: var(--ww-ink);
    color: color-mix(in srgb, var(--ww-white) 80%, transparent);
  }

  .section--ink :is(h1, h2, h3, h4, h5, h6) { color: var(--ww-white); }
  .section--ink a:not(.btn) { color: var(--ww-teal-300); }
  .section--ink a:not(.btn):hover { color: var(--ww-teal-200); }
  .section--ink strong { color: var(--ww-white); }
  .section--ink .eyebrow { color: var(--ww-teal-300); }

  /* -- Section header ----------------------------------------------------- */

  .section-head {
    max-width: 46rem;
    margin-bottom: var(--ww-space-9);
  }

  .section-head--center {
    margin-inline: auto;
    text-align: center;
  }

  .section-head > * + * { margin-top: var(--ww-space-4); }

  .section-head p { font-size: var(--ww-step-1); }

  .section-head--center p { margin-inline: auto; }

  .eyebrow {
    display: block;
    font-size: var(--ww-step--1);
    font-weight: var(--ww-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ww-primary);
  }

  /* -- Grid --------------------------------------------------------------- */

  .grid {
    display: grid;
    gap: var(--ww-space-6);
  }

  /* Auto-fitting grid — collapses without media queries. */
  .grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }

  /* grid--4 was two columns from 0px up. At 320 each track is ~132px, and a
     card spends 48 of that on padding — leaving less than the content's
     min-content width, so the tracks blew the page out to 374px wide. It
     earns its second column at 480. */
  .grid--4 { grid-template-columns: 1fr; }

  @media (min-width: 480px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 768px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
  }

  @media (min-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }

  /* -- Split (text beside media) ------------------------------------------ */

  .split {
    display: grid;
    gap: var(--ww-space-8);
    align-items: center;
  }

  @media (min-width: 1024px) {
    .split { grid-template-columns: 1fr 1fr; gap: var(--ww-space-10); }
    .split--wide-media { grid-template-columns: 5fr 7fr; }
    .split--wide-text  { grid-template-columns: 7fr 5fr; }

    /* Alternating rows without duplicating markup. */
    .split--reverse > :first-child { order: 2; }

    /* `order` moves the items but not the track sizes, so a reversed row would
       otherwise hand the wide column to whichever child was meant to be narrow
       — media shrinking by 30% on every second showcase row. Swap the tracks to
       match the swapped content. */
    .split--reverse.split--wide-media { grid-template-columns: 7fr 5fr; }
    .split--reverse.split--wide-text  { grid-template-columns: 5fr 7fr; }
  }

  /* -- Stack (vertical rhythm) -------------------------------------------- */

  .stack > * + * { margin-top: var(--ww-space-4); }
  .stack--lg > * + * { margin-top: var(--ww-space-6); }
  .stack--sm > * + * { margin-top: var(--ww-space-2); }

  /* -- Cluster (inline wrapping row) -------------------------------------- */

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

  .cluster--center { justify-content: center; }
}