/*
 * Layout: container, sections, grids.
 *
 * CSS Grid only. No calc() percentage arithmetic and no flexbox width maths.
 */

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

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

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

/*
 * The three product families.
 *
 * Deliberately NOT three equal columns — DESIGN.md rule 15. Equal thirds are the
 * most recognisable generic-template signature there is. The middle card is
 * wider and the outer two are offset on the block axis, so the row reads as a
 * composition rather than a grid of clones.
 */
.family-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .family-grid {
    grid-template-columns: 1fr 1.25fr 1fr;
    align-items: start;
  }

  .family-grid > :nth-child(1) { margin-block-start: var(--space-5); }
  .family-grid > :nth-child(3) { margin-block-start: var(--space-4); }
}

/* Editorial two-column split for the choose-a-product guide and article intros. */
.split {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
}

.card-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* Anything that could exceed the viewport scrolls inside its own box.
   The page body must never scroll horizontally. DESIGN.md rule 17. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile reserves room for the sticky bottom bar so the last element is
   never trapped underneath it. */
@media (max-width: 899px) {
  body {
    padding-block-end: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
  }
}