/**
 * @file
 * MLT Modern — Per-block section appearance.
 *
 * Applied via classes on the block wrapper, emitted by hook_preprocess_block()
 * in the mlt_modern_helper module. Editors set these via the "Section
 * appearance" fieldset on every block's configuration form.
 *
 * Classes follow .mlt-section--<group>-<value> pattern so they read
 * naturally in dev tools.
 *
 * Class reference:
 *   .mlt-section--has-bg                — Block has a background colour set
 *   .mlt-section--bg-{name}             — Predefined background variant
 *   .mlt-section--text-{light|dark}     — Text colour override
 *   .mlt-section--pt-{scale}            — Top padding from scale
 *   .mlt-section--pb-{scale}            — Bottom padding from scale
 *   .mlt-section--container-{variant}   — Inner content width
 *   .mlt-section--corners-{style}       — Wrapper corner radius
 *   .mlt-section--sticky                — Sticks to viewport on scroll
 *
 * Scale tokens for padding: none / xs / sm / md / lg / xl / xxl
 * Backgrounds: white / soft / primary / primary_dark / accent / dark / custom
 * Corners: sharp / soft / rounded / pill
 */

/* =======================================================================
 * BACKGROUNDS
 * ======================================================================= */

.mlt-section--bg-white {
  background: #ffffff;
}

.mlt-section--bg-soft {
  background: var(--mlt-bg-soft);
}

.mlt-section--bg-primary {
  background: var(--mlt-primary);
}

.mlt-section--bg-primary_dark {
  background: var(--mlt-primary-dark);
}

.mlt-section--bg-accent {
  background: var(--mlt-accent);
}

.mlt-section--bg-dark {
  background: var(--mlt-surface-dark);
}

/* =======================================================================
 * TEXT COLOUR
 * ======================================================================= */

/* Auto: dark backgrounds → light text. */
.mlt-section--bg-primary,
.mlt-section--bg-primary_dark,
.mlt-section--bg-dark {
  color: #ffffff;
}

.mlt-section--bg-primary h1,
.mlt-section--bg-primary h2,
.mlt-section--bg-primary h3,
.mlt-section--bg-primary h4,
.mlt-section--bg-primary h5,
.mlt-section--bg-primary h6,
.mlt-section--bg-primary_dark h1,
.mlt-section--bg-primary_dark h2,
.mlt-section--bg-primary_dark h3,
.mlt-section--bg-primary_dark h4,
.mlt-section--bg-primary_dark h5,
.mlt-section--bg-primary_dark h6,
.mlt-section--bg-dark h1,
.mlt-section--bg-dark h2,
.mlt-section--bg-dark h3,
.mlt-section--bg-dark h4,
.mlt-section--bg-dark h5,
.mlt-section--bg-dark h6 {
  color: #ffffff;
}

/* Explicit overrides — win over the auto rules above. */
.mlt-section--text-light,
.mlt-section--text-light h1,
.mlt-section--text-light h2,
.mlt-section--text-light h3,
.mlt-section--text-light h4,
.mlt-section--text-light h5,
.mlt-section--text-light h6 {
  color: #ffffff;
}

.mlt-section--text-dark,
.mlt-section--text-dark h1,
.mlt-section--text-dark h2,
.mlt-section--text-dark h3,
.mlt-section--text-dark h4,
.mlt-section--text-dark h5,
.mlt-section--text-dark h6 {
  color: var(--mlt-text);
}

/* =======================================================================
 * PADDING SCALE
 * ======================================================================= */

.mlt-section--pt-none { padding-top: 0; }
.mlt-section--pt-xs   { padding-top: var(--mlt-space-xs); }
.mlt-section--pt-sm   { padding-top: var(--mlt-space-sm); }
.mlt-section--pt-md   { padding-top: var(--mlt-space-md); }
.mlt-section--pt-lg   { padding-top: var(--mlt-space-lg); }
.mlt-section--pt-xl   { padding-top: var(--mlt-space-xl); }
.mlt-section--pt-xxl  { padding-top: var(--mlt-space-2xl); }

.mlt-section--pb-none { padding-bottom: 0; }
.mlt-section--pb-xs   { padding-bottom: var(--mlt-space-xs); }
.mlt-section--pb-sm   { padding-bottom: var(--mlt-space-sm); }
.mlt-section--pb-md   { padding-bottom: var(--mlt-space-md); }
.mlt-section--pb-lg   { padding-bottom: var(--mlt-space-lg); }
.mlt-section--pb-xl   { padding-bottom: var(--mlt-space-xl); }
.mlt-section--pb-xxl  { padding-bottom: var(--mlt-space-2xl); }

/* =======================================================================
 * CONTAINER WIDTH
 * ======================================================================= */

.mlt-section--container-constrained > * {
  max-width: var(--mlt-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mlt-container-pad);
  padding-right: var(--mlt-container-pad);
  box-sizing: border-box;
}

.mlt-section--container-wide > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mlt-container-pad);
  padding-right: var(--mlt-container-pad);
  box-sizing: border-box;
}

.mlt-section--container-narrow > * {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mlt-container-pad);
  padding-right: var(--mlt-container-pad);
  box-sizing: border-box;
}

.mlt-section--container-full > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* =======================================================================
 * CORNERS
 * ======================================================================= */

.mlt-section--corners-sharp.mlt-section--has-bg {
  border-radius: 0;
}

.mlt-section--corners-soft.mlt-section--has-bg {
  border-radius: 4px;
  overflow: hidden;
}

.mlt-section--corners-rounded.mlt-section--has-bg {
  border-radius: 12px;
  overflow: hidden;
}

.mlt-section--corners-pill.mlt-section--has-bg {
  border-radius: 28px;
  overflow: hidden;
}

/* =======================================================================
 * STICKY ON SCROLL
 *
 * Uses position: sticky which is well supported in every modern browser.
 *
 * The top offset is read from a CSS custom property (--mlt-sticky-top)
 * so editors can fine-tune via the block's "Sticky top offset" field.
 * Default offset is 20px when no custom value is set.
 *
 * GOTCHA: align-self: start is essential. Sidebar regions in our layout
 * use CSS Grid, and grid items stretch to fill the row by default. A
 * stretched item is as tall as its track, which means there's nothing
 * for "sticky" to scroll past inside its own bounding box, so it never
 * appears to stick. align-self: start lets the block shrink to its
 * natural content height, leaving the rest of the grid track as scroll
 * space — which is exactly what sticky needs.
 *
 * Disabled on mobile (<992px) because sidebars stack vertically below
 * the main content, so "stickiness" makes no sense and would create
 * weird overlap with the footer.
 * ======================================================================= */

.mlt-section--sticky {
  position: sticky;
  top: var(--mlt-sticky-top, 20px);
  align-self: start;
  /* Belt and braces: also disable for flex parents. */
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .mlt-section--sticky {
    position: static;
    top: auto;
  }
}