/* ==========================================================================
   Layout — page shell, section rhythm and the reusable grids.
   ========================================================================== */

/* Stacking context that sits above the fixed background pattern.
   The .deco shapes are deliberately hung past the edges of the orange bands
   (right: -60px and friends), which on a phone is enough to make the whole
   document scroll sideways. `clip` trims that overhang without turning .page
   into a scroll container, so smooth scrolling and the anchor links survive. */
.page {
  position: relative;
  overflow-x: clip;
}


/* --- Sections ------------------------------------------------------------ */

.section {
  padding: var(--section-py) var(--gutter);
}

/* Services: full top padding, lighter bottom (the rules carry the rhythm) */
.section--services {
  padding-bottom: var(--section-py-sm);
}

/* Work: sits directly under the services rules, so it needs less air on top */
.section--work {
  padding-top: clamp(20px, 4vh, 44px);
  padding-bottom: clamp(60px, 10vh, 110px);
}

/* Inset orange band with its own rounded card shape */
.section--band {
  margin: 0 var(--gutter-tight);
  padding: var(--section-py-lg) var(--gutter-inner);
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-on-accent);
}


/* --- Grids -------------------------------------------------------------- */

/* Two-ish columns that collapse to one when the content no longer fits */
.grid-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  gap: var(--gap-cols);
}

.grid-split--wide-gap {
  gap: var(--gap-cols-lg);
  align-items: start;
}

.grid-split--bottom {
  align-items: end;
}

/* Masonry-ish photo grid: dense so the wide tiles backfill gaps */
.grid-tiles {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr));
  gap: var(--gap-grid);
}

/* Below the two-column threshold this grid resolves to a single track, and
   `.tile--wide { grid-column: span 2 }` then spills into an implicit column
   sized to the photo's intrinsic width — which is what squashed the tiles and
   pushed the page sideways. On phones the grid becomes a snap-scrolling rail
   instead: it bleeds past the section gutter so cards reach both screen edges,
   and the next card peeks in to advertise that the row scrolls. */
@media (max-width: 720px) {
  .grid-tiles {
    display: flex;
    grid-auto-flow: initial;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-xs);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .grid-tiles::-webkit-scrollbar {
    display: none;
  }
}

.grid-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr));
  gap: var(--gap-steps);
  align-items: start;
}

/* Vertical stack with a shared gap */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.stack--sm {
  gap: var(--space-3xs);
}

/* Row that wraps rather than squashing its children */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* A closing hairline under the last services row */
.rule {
  border-top: 1px solid var(--color-rule);
}