/*
  section — every full-width band below the hero (component.json section, 10 tokens).
  Owns the band's fill, its padding, the centered content container and the one text column.
  Sections stack edge to edge with no gap: the space between two sections is only their own padding.
  Fill is chosen by where the section sits: --default (most), --alternate, --bookend (e.g. the Overview).
*/

.section {
  padding-block: var(--section-padding-vertical-all);
}
.section--default   { background-color: var(--section-fill-default); }
.section--alternate { background-color: var(--section-fill-alternate); }
.section--bookend   { background-color: var(--section-fill-bookend); }

/* SECTION LINE (Vivek, 2026-10-19): a hairline only where two sections with the SAME fill meet
   (a fill change already marks the other breaks: after the hero, after and before a bookend).
   Drawn at the section's top edge, so it sits in the middle of the space between the two sections
   (their own padding, 64px each side on desktop, 32px on phones), and as wide as the column below it. */
.section--default + .section--default .section__container > :first-child,
.section--alternate + .section--alternate .section__container > :first-child,
.section--bookend + .section--bookend .section__container > :first-child {
  position: relative;
}
.section--default + .section--default .section__container > :first-child::before,
.section--alternate + .section--alternate .section__container > :first-child::before,
.section--bookend + .section--bookend .section__container > :first-child::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(-1 * var(--section-padding-vertical-all) - var(--section-divider-width-all) / 2);
  border-block-start: var(--section-divider-width-all) solid var(--section-divider-all);
}
/* NO LINE UNDER THE 'BUILDING NOW' NOTE (Vivek, 2026-10-21, item 16): when the section above ends with the
   currentWork note, its own hairline border already closes the section; a second line 64px below it,
   the same length, color and weight, read as a double rule. Today: homepage, Featured Work -> Earlier Work. */
.section:has(> .section__container > * > .current-work:last-child) + .section .section__container > :first-child::before {
  display: none;
}

/* Centered container, 1280px at most with the page padding included: every left edge lines up with the hero. */
.section__container {
  max-width: var(--section-content-max-width-all);
  margin-inline: auto;
  padding-inline: var(--section-padding-horizontal-all);
  container-type: inline-size; /* lets an image pair measure the room inside the page padding (figure.css) */
}

/* The one text column (42rem, 672px), centered. Everything in a section sits in it,
   except the homepage Featured Work section (.section__wide below). */
.section__text {
  max-width: var(--section-text-max-width-all);
  margin-inline: auto; /* centered on the page, the same column as the hero (decided by Vivek 2026-09-26) */
  font-family: var(--text-block-body-text-style-all-font-family);
  font-size: var(--text-block-body-text-style-all-font-size);
}

/* The wide column (900px), centered: homepage Featured Work only (decided by Vivek 2026-09-26).
   Its section header and work cards share it.
   Used instead of .section__text, never inside it. */
.section__wide {
  max-width: var(--section-wide-max-width-all);
  margin-inline: auto;
}