/* =========================================================================
   Dentora — Layout utilities
   Container, section rhythm, simple responsive grids, dark-section surface.
   ========================================================================= */

/* ---------- Container ---------------------------------------------------
   One container rule for the whole site. Padding is fluid (18 → 40px) so
   there is no hard breakpoint step, and max-width caps at 1280px. */

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

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--container-pad) * 2);
}

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

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

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

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

.section--top-only {
  padding-block: var(--section-y) 0;
}

.section--bottom-only {
  padding-block: 0 var(--section-y);
}

/* Section surfaces */
.section--white {
  background-color: var(--color-white);
}

.section--alt {
  background-color: var(--color-surface-alt);
}

.section--dark {
  background-color: var(--color-surface-dark);
  color: var(--color-text-on-dark);
}

/* Any subtree marked .on-dark flips text colours to the inverse ramp.
   Applied automatically to dark sections.

   These are DEFAULTS, not overrides. `:where()` holds their specificity at
   zero for the ancestor part, so any component that states its own colour
   wins — a card on a dark band keeps its dark-on-white text, and a badge
   keeps its teal. Written as a plain descendant selector these would beat
   a single-class component rule and repaint everything inside a dark
   section, including the contents of white cards sitting on top of it. */
:where(.section--dark, .on-dark) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-on-dark);
}

:where(.section--dark, .on-dark) p {
  color: var(--color-text-on-dark-muted);
}

/* ---------- Stack: vertical rhythm between siblings --------------------- */

.stack > * + * {
  margin-block-start: var(--space-4);
}

.stack-sm > * + * {
  margin-block-start: var(--space-2);
}

.stack-lg > * + * {
  margin-block-start: var(--space-8);
}

/* ---------- Grid --------------------------------------------------------
   Auto-fit grids collapse 3 → 2 → 1 on their own, driven by available
   width rather than device breakpoints. */

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Two-column split used by heroes and text+media blocks. */
.split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .split--wide-start {
    grid-template-columns: 1.15fr 1fr;
  }

  .split--wide-end {
    grid-template-columns: 1fr 1.15fr;
  }
}

/* ---------- Helpers ------------------------------------------------------ */

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

.text-center {
  text-align: center;
}

.center-x {
  margin-inline: auto;
}

/* Full-bleed escape hatch for edge-to-edge media inside a container. */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}