/* ==========================================================================
   Aim IT — Layout

   One rule governs spacing in this project:
     Sections own the space between blocks. Components own their inside space.
   No component sets margin on its own root element. This is what stops
   section spacing from cancelling itself out later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINER
   -------------------------------------------------------------------------- */

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

.container--narrow {
  max-width: var(--container-narrow);
}

/* --------------------------------------------------------------------------
   2. SECTION
   -------------------------------------------------------------------------- */

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

.section--tight {
  padding-block: var(--section-space-tight);
}

/* Surface variants. .on-dark comes from tokens.css and sets its own
   background and colour. */
.section--surface {
  background-color: var(--surface);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   3. SECTION HEAD
   A small accent rule plus a heading. No all-caps eyebrow above it.
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 40rem;
  margin-block-end: clamp(var(--s-5), 3vw, var(--s-6));
}

.section-head--wide {
  max-width: none;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--eco-ink);
}

.section-kicker::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background-color: var(--eco);
  flex: none;
}

.section-head > p {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   5. CLUSTER — inline items that wrap (button rows, chips, meta)
   -------------------------------------------------------------------------- */

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

.cluster--4 { gap: var(--s-4); }

/* --------------------------------------------------------------------------
   6. GRID
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--s-5);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auto grids size themselves and need no breakpoints. */
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

.grid--gap-lg { gap: var(--s-6); }
.grid--gap-sm { gap: var(--s-3); }

@media (width < 62rem) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 44rem) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   7. SPLIT — two column layouts (hero, product showcase, case study)
   Mobile is not a shrunken desktop: the split becomes one column and the
   order can be set per block.
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.split--hero {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
}

.split--text-first {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.split--media-first {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.split--top {
  align-items: start;
}

@media (width < 60rem) {
  .split,
  .split--hero,
  .split--text-first,
  .split--media-first {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Text always reads before the visual on small screens. */
  .split__media {
    order: 2;
  }

  .split__body {
    order: 1;
  }
}

/* --------------------------------------------------------------------------
   9. MEASURE HELPERS
   -------------------------------------------------------------------------- */

.measure { max-width: var(--measure); }
.measure-none { max-width: none; }

/* --------------------------------------------------------------------------
   10. SPACING HELPERS — used sparingly, only where a one-off is genuinely
   needed. Layout should come from the classes above first.
   -------------------------------------------------------------------------- */

.mt-4 { margin-block-start: var(--s-4); }
.mt-5 { margin-block-start: var(--s-5); }
.mt-6 { margin-block-start: var(--s-6); }
.text-muted { color: var(--text-muted); }
.text-lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
}
.text-small { font-size: var(--fs-small); }

.mt-0 { margin-block-start: 0; }
.mb-5 { margin-block-end: var(--s-5); }