/* Container + grid system. Fluid below --container-max-site (1905px),
   capped and centred above it. Gutter widens with viewport. */

.container {
  width: 100%;
  max-width: var(--container-max-site);
  margin-inline: auto;
  padding-inline: var(--gutter-sm);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--gutter-md);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--gutter-lg);
  }
}

/* Full-bleed editorial variant — for image-led sections that should feel
   wider than body copy, without going fully edge-to-edge on very large
   screens. */
.container--wide {
  max-width: var(--container-max-wide);
}

/* 12-column grid. Only .col-span-* classes actually used on real content
   should exist below — don't pre-generate the full 1–12 matrix. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

.col-span-12 { grid-column: span 12; }
.col-span-6  { grid-column: span 12; }
.col-span-4  { grid-column: span 12; }
.col-span-3  { grid-column: span 12; }

@media (min-width: 768px) {
  .col-span-6 { grid-column: span 6; }
  .col-span-4 { grid-column: span 6; }
  .col-span-3 { grid-column: span 4; }
}

@media (min-width: 1024px) {
  .col-span-4 { grid-column: span 4; }
  .col-span-3 { grid-column: span 3; }
}

/* Simple flex-based split, for the asymmetric two-column moments (e.g.
   image/text panels) that don't need a full 12-col grid. */
.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .split {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
  }

  .split > * {
    flex: 1 1 50%;
  }

  .split--60-40 > :first-child { flex-basis: 60%; }
  .split--60-40 > :last-child  { flex-basis: 40%; }
}