/* ==========================================================================
   Allutech Systems — container, 12-column grid, section rhythm
   ========================================================================== */

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

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

.container--flush { padding-inline: 0; }

/* ---- 12-column grid --------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--stack);
}

/* Column spans.
   These set grid-column-END deliberately. The shorthand `grid-column: span 7`
   expands to `grid-column-start: span 7; grid-column-end: auto`, so pairing it
   with a .start-* class overwrites the start and leaves the end at auto — the
   element then occupies a single column. Setting the end explicitly leaves the
   start free for .start-* to control. */
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-12 { grid-column-end: span 12; }

.start-5 { grid-column-start: 5; }
.start-9 { grid-column-start: 9; }

@media (max-width: 1023px) {
  .col-2, .col-3, .col-4 { grid-column-end: span 6; }
  .col-5, .col-7, .col-8, .col-9 { grid-column-end: span 12; }
  .start-5, .start-9 { grid-column-start: auto; }
}

@media (max-width: 767px) {
  .col-2, .col-3, .col-4, .col-5, .col-6 { grid-column-end: span 12; }
}

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

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

.section--tight { padding-block: calc(var(--section) * .6); }
.section--flush-top { padding-top: 0; }
.section--pane { background: var(--pane); }
.section--rule { border-top: var(--hairline); }

/* Sections alternate strictly: white, tint, white, tint. --wash-mint is the
   single tint so the rhythm reads as structure rather than as four unrelated
   colours; the other three washes remain available as tokens. */
.section--mint  { background: var(--wash-mint); }
.section--sky   { background: var(--wash-sky); }
.section--sand  { background: var(--wash-sand); }
.section--blush { background: var(--wash-blush); }

/* Card backgrounds invert on white sections — that rule lives in sections.css
   with the cards themselves, so each block stays owned by one stylesheet. */

.site-main {
  position: relative;
  z-index: var(--z-base);
}

/* The fixed 1px mullion rule layer that used to run behind the page at grid
   columns 5 and 9 has been removed on request, along with the --edge segment
   that marked each section heading. Section content still snaps to the same
   12-column grid — the rules are simply no longer drawn. */

/* ---- Full-bleed --------------------------------------------------------- */

.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}