/**
 * Section shell.
 *
 * Variant pattern: the block declares local custom properties prefixed with an
 * underscore, and modifiers change those values rather than redeclaring rules.
 * Underscore marks a property as internal to this block.
 */

.section-shell {
  --_bg: transparent;
  --_fg: inherit;
  --_heading-color: var(--color-brand);
  --_rule-color: var(--color-border);
  --_width: var(--container);
  --_space: var(--space-section);

  padding-block: var(--_space);
  padding-inline: var(--gutter);
  background-color: var(--_bg);
  color: var(--_fg);
}

.section-shell__inner {
  display: grid;
  gap: var(--space-m);
  inline-size: 100%;
  max-inline-size: var(--_width);
  margin-inline: auto;
}

.section-shell__heading {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-strong);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--color-rule);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--color-rule);
  text-align: center;
  max-inline-size: var(--container);
  margin-inline: auto;
}

.section-shell__content {
  display: grid;
  gap: var(--space-m);
}

/* ----------------------------------------------------------------------
   Background
   Default is transparent so the parent background or image shows through.
   ---------------------------------------------------------------------- */

.section-shell--bg-surface {
  --_bg: var(--color-surface);
}

.section-shell--bg-alt {
  --_bg: var(--color-surface-alt);
}

.section-shell--bg-section {
  --_bg: var(--color-section);
}

/*
 * Inverted variants set both background and foreground together so text
 * contrast can never drift out of compliance.
 * White on #262626 measures 15.1:1.
 */
.section-shell--bg-dark {
  --_bg: var(--color-shell);
  --_fg: var(--color-surface);
  --_heading-color: var(--color-surface);
  --_rule-color: rgb(255 255 255 / 0.25);
}

/*
 * Uses --color-brand-strong rather than --color-brand. White on #558d96 is only
 * 3.7:1 and fails AA for body text. White on #3f6b73 measures 5.9:1.
 */
.section-shell--bg-brand {
  --_bg: var(--color-brand-strong);
  --_fg: var(--color-surface);
  --_heading-color: var(--color-surface);
  --_rule-color: rgb(255 255 255 / 0.25);
}

.section-shell--bg-dark .section-shell__heading,
.section-shell--bg-brand .section-shell__heading {
  border-block-end-color: var(--_rule-color);
}

/* Adjacent panels of the same treatment collapse the doubled padding. */
.section-shell--bg-alt + .section-shell--bg-alt,
.section-shell--bg-dark + .section-shell--bg-dark,
.section-shell--bg-brand + .section-shell--bg-brand {
  padding-block-start: 0;
}

/* ----------------------------------------------------------------------
   Width
   ---------------------------------------------------------------------- */

.section-shell--width-measure {
  --_width: var(--measure);
}

.section-shell--width-container {
  --_width: var(--container);
}

.section-shell--width-wide {
  --_width: var(--container-wide);
}

/**
 * Full width releases the content from the container, but the heading keeps
 * its own measure so the underline does not run edge to edge.
 */
.section-shell--width-full {
  --_width: none;
  padding-inline: 0;
}

.section-shell--width-full .section-shell__heading {
  padding-inline: var(--gutter);
}

/* ----------------------------------------------------------------------
   Spacing
   ---------------------------------------------------------------------- */

.section-shell--space-compact {
  --_space: var(--space-l);
}

.section-shell--space-none {
  --_space: 0;
}

/* ----------------------------------------------------------------------
   Container context
   Lets nested components respond to the section's own width rather than the
   viewport, which matters when an editor drops a component into a narrow slot.
   ---------------------------------------------------------------------- */

.section-shell__content {
  container-type: inline-size;
  container-name: section;
}