/* ==========================================================================
   Layout: containers, sections, grids
   Breakpoints: sm 640px · md 768px · lg 1024px · xl 1280px
   ========================================================================== */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: hsl(var(--white));
}

.site__main {
  flex: 1;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--6xl { max-width: 72rem; }
.container--4xl { max-width: 56rem; }
.container--3xl { max-width: 48rem; }

/* --------------------------------------------------------------------------
   Sections
   .section--light  white        .section--dark  navy
   .section--tint   pale blue    .section--grid  pale blue + grid lines
   Sizes: default (inner pages), --lg (home), --md, --compact
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  border-bottom: 1px solid var(--c-line);
}

.section__inner {
  position: relative;
  padding-block: var(--section-y);
}

.section--lg .section__inner { padding-block: var(--section-y-lg); }
.section--md .section__inner { padding-block: 4rem; }
.section--compact .section__inner { padding-block: 3.5rem; }
.section__inner--tight { padding-block: 3rem; }
.section__inner--snug { padding-block: 3.5rem; }

@media (min-width: 768px) {
  .section--md .section__inner { padding-block: 5rem; }
  .section__inner--tight { padding-block: 4rem; }
  .section__inner--snug { padding-block: 5rem; }
}

.section--flat { border-bottom: 0; }

.section--light { background: hsl(var(--white)); }

.section--tint { background: hsl(var(--secondary) / 0.3); }

.section--grid {
  background-color: hsl(var(--secondary) / 0.3);
  background-image:
    linear-gradient(hsl(223 28% 90% / 0.7) 1px, transparent 1px),
    linear-gradient(90deg, hsl(223 28% 90% / 0.7) 1px, transparent 1px);
  background-size: 48px 48px;
}

.section--dark {
  background: hsl(var(--navy-950));
}

.section--glow {
  overflow: hidden;
}
.section--glow::before {
  content: "";
  position: absolute;
  left: -8rem;
  top: 33%;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: hsl(var(--signal) / 0.08);
  filter: blur(64px);
  pointer-events: none;
}

/* Grid-line overlay for dark heroes and bands */
.bg-grid-dark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(hsl(var(--navy-line) / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--navy-line) / 0.35) 1px, transparent 1px);
  background-size: 48px 48px;
}
.bg-grid-dark--soft { opacity: 0.5; }
.bg-grid-dark--strong { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Two-column split — stacks below 1024px
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: 3rem;
  min-width: 0;
}
.split > * { min-width: 0; }

@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; }
  .split--center { align-items: center; }
  .split--start { align-items: start; }
}

/* Visual that sits first on desktop but after the text on phones */
.split__second-mobile { order: 2; }
@media (min-width: 1024px) {
  .split__second-mobile { order: 0; }
}

/* --------------------------------------------------------------------------
   Hairline card grids: 1px gaps show the line colour between cards.
   Column classes switch on at their breakpoint: cols-sm-2, cols-lg-3 …
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.cards > * { min-width: 0; }

/* Nested grid inside another .cards (no double border) */
.cards--nested { border: 0; }

/* Grid continuing directly under another one */
.cards--attached { border-top: 0; margin-top: 0; }

@media (min-width: 640px) {
  .cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cols-lg-pain { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* Solution page: three capability cards get tight between 640px and 1280px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cols-lg-pain .cols-sm-3 { grid-template-columns: minmax(0, 1fr); }
}