/* --------------------------------------------------------------------------
   Section Background & Effects (src/lib/section-background.ts) and, below,
   Section Layout & Style (src/lib/section-style.ts)

   Loaded only by a page with a section whose background an editor has
   changed, so every other page — and every other section — is exactly as it
   was. The wrapper `.cmsbg` has no box of its own (display: contents): it only
   carries the chosen values as custom properties to its one child, the
   section, which is laid out exactly as before.

   Layers, all inside the section and behind its content:
     the section's own background colour  → the chosen colour (or transparent)
     ::before                              → the picture or gradient (moves for parallax)
     ::after                               → the overlay
     the section's content                 → on top, unchanged
   -------------------------------------------------------------------------- */

.cmsbg { display: contents; }

.cmsbg > * { position: relative; isolation: isolate; }

/* Two classes, so the chosen background always wins over a section's own
   one-class background (.section--bone, .section--ink, .statbar …) whatever
   order the stylesheets load in. */
.cmsbg.cmsbg--bg > * {
  background-color: var(--cmsbg-color, transparent);
  background-image: none;
}

.cmsbg--bg > *::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--cmsbg-image, none);
  background-size: var(--cmsbg-size, cover);
  background-position: var(--cmsbg-position, center);
  background-repeat: var(--cmsbg-repeat, no-repeat);
  opacity: var(--cmsbg-opacity, 1);
}

.cmsbg--overlay > *::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cmsbg-overlay);
  opacity: var(--cmsbg-overlay-opacity, .5);
  mix-blend-mode: var(--cmsbg-blend, normal);
}

/* Fixed: the picture stays put while the page scrolls over it. Phones and
   tablets do not support it well, so there it scrolls with the section. */
.cmsbg--fixed > *::before { background-attachment: fixed; }

/* Parallax: section-background.js moves the picture a little slower than the
   page (a composited transform, no layout or repaint). Without the script —
   or on a phone, or with reduced motion — the picture simply stays in place. */
.cmsbg--parallax > * { overflow: clip; }
.cmsbg--parallax > *::before {
  inset: calc(var(--cmsbg-extend, 0px) * -1) 0;
  transform: translate3d(0, var(--cmsbg-shift, 0px), 0);
}
.cmsbg--parallax.cmsbg--moving > *::before { will-change: transform; }

@media (hover: none), (max-width: 900px) {
  .cmsbg--fixed > *::before { background-attachment: scroll; }
  .cmsbg--parallax > *::before { inset: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cmsbg--parallax > *::before { inset: 0; transform: none; }
}

/* Text colour for contrast on the new background: body text and headings
   (which use the site's text colours). Cards, buttons, tables and other
   elements with their own designed colours keep them. */
.cmsbg.cmsbg--text-light > * {
  color: #fff;
  --body: rgba(255, 255, 255, .86);
  --body-strong: rgba(255, 255, 255, .94);
  --muted: rgba(255, 255, 255, .74);
}
.cmsbg.cmsbg--text-dark > * {
  color: var(--ink);
  --body: #5c5854;
  --body-strong: #3a3735;
  --muted: #75706d;
  --on-dark: #5c5854;
}

/* --------------------------------------------------------------------------
   Section Layout & Style (src/lib/section-style.ts)

   The same kind of wrapper, `.cmsst`, with no box of its own. Every rule is
   switched on by a class for one screen size (-d desktop, -t tablet, -m
   phone) inside that screen's media query, so a screen without a value keeps
   the section's designed one. The classes are repeated to outrank the
   section's own rules (.section, .section--lg …) whatever order the
   stylesheets load in.
   -------------------------------------------------------------------------- */

.cmsst { display: contents; }

/* Not per screen: content width and colours. */
.cmsst.cmsst--w > * { --wrap: var(--cmsst-w); }
.cmsst.cmsst--maxw > * { --wrap: var(--cmsst-maxw); --wrap-wide: var(--cmsst-maxw); }
.cmsst.cmsst.cmsst--bleed > * { padding-left: 0; padding-right: 0; --wrap: none; --wrap-wide: none; }
.cmsst.cmsst.cmsst--hc > * :is(h1, h2, h3, h4) { color: var(--cmsst-hc); }
.cmsst.cmsst.cmsst--tc > * {
  color: var(--cmsst-tc);
  --body: var(--cmsst-tc);
  --body-strong: var(--cmsst-tc);
  --muted: var(--cmsst-tc);
  --on-dark: var(--cmsst-tc);
}

@media (min-width: 901px) {
  .cmsst.cmsst.cmsst--pt-d > * { padding-top: var(--cmsst-pt-d); }
  .cmsst.cmsst.cmsst--pb-d > * { padding-bottom: var(--cmsst-pb-d); }
  .cmsst.cmsst.cmsst--mt-d > * { margin-top: var(--cmsst-mt-d); }
  .cmsst.cmsst.cmsst--mb-d > * { margin-bottom: var(--cmsst-mb-d); }
  .cmsst.cmsst.cmsst.cmsst--pl-d > * { padding-left: var(--cmsst-pl-d); }
  .cmsst.cmsst.cmsst.cmsst--pr-d > * { padding-right: var(--cmsst-pr-d); }
  .cmsst.cmsst.cmsst--al-d > * { text-align: var(--cmsst-al-d); }
  .cmsst.cmsst.cmsst--hs-d > * :is(h1, h2, h3, h4[data-retag]) { zoom: var(--cmsst-hs-d); }
  .cmsst.cmsst.cmsst--ts-d > * :is(p, li, dd, dt, blockquote, figcaption):not(:is(li, dd, blockquote) *) { zoom: var(--cmsst-ts-d); }
  .cmsst.cmsst.cmsst--fp-d > * :is(img, video) { object-position: var(--cmsst-fp-d); }
  .cmsst.cmsst.cmsst--hide-d > * { display: none; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .cmsst.cmsst.cmsst--pt-t > * { padding-top: var(--cmsst-pt-t); }
  .cmsst.cmsst.cmsst--pb-t > * { padding-bottom: var(--cmsst-pb-t); }
  .cmsst.cmsst.cmsst--mt-t > * { margin-top: var(--cmsst-mt-t); }
  .cmsst.cmsst.cmsst--mb-t > * { margin-bottom: var(--cmsst-mb-t); }
  .cmsst.cmsst.cmsst.cmsst--pl-t > * { padding-left: var(--cmsst-pl-t); }
  .cmsst.cmsst.cmsst.cmsst--pr-t > * { padding-right: var(--cmsst-pr-t); }
  .cmsst.cmsst.cmsst--al-t > * { text-align: var(--cmsst-al-t); }
  .cmsst.cmsst.cmsst--hs-t > * :is(h1, h2, h3, h4[data-retag]) { zoom: var(--cmsst-hs-t); }
  .cmsst.cmsst.cmsst--ts-t > * :is(p, li, dd, dt, blockquote, figcaption):not(:is(li, dd, blockquote) *) { zoom: var(--cmsst-ts-t); }
  .cmsst.cmsst.cmsst--fp-t > * :is(img, video) { object-position: var(--cmsst-fp-t); }
  .cmsst.cmsst.cmsst--hide-t > * { display: none; }
}
@media (max-width: 640px) {
  .cmsst.cmsst.cmsst--pt-m > * { padding-top: var(--cmsst-pt-m); }
  .cmsst.cmsst.cmsst--pb-m > * { padding-bottom: var(--cmsst-pb-m); }
  .cmsst.cmsst.cmsst--mt-m > * { margin-top: var(--cmsst-mt-m); }
  .cmsst.cmsst.cmsst--mb-m > * { margin-bottom: var(--cmsst-mb-m); }
  .cmsst.cmsst.cmsst.cmsst--pl-m > * { padding-left: var(--cmsst-pl-m); }
  .cmsst.cmsst.cmsst.cmsst--pr-m > * { padding-right: var(--cmsst-pr-m); }
  .cmsst.cmsst.cmsst--al-m > * { text-align: var(--cmsst-al-m); }
  .cmsst.cmsst.cmsst--hs-m > * :is(h1, h2, h3, h4[data-retag]) { zoom: var(--cmsst-hs-m); }
  .cmsst.cmsst.cmsst--ts-m > * :is(p, li, dd, dt, blockquote, figcaption):not(:is(li, dd, blockquote) *) { zoom: var(--cmsst-ts-m); }
  .cmsst.cmsst.cmsst--fp-m > * :is(img, video) { object-position: var(--cmsst-fp-m); }
  .cmsst.cmsst.cmsst--hide-m > * { display: none; }
}

/* --------------------------------------------------------------------------
   A video or slideshow behind the whole section (Background: Video /
   Slideshow). The wrapper becomes a one-cell grid holding the media layer and
   the section, one over the other; the section is see-through, so the media
   shows, and its overlay and text colour sit above the media as usual.
   -------------------------------------------------------------------------- */
.cmsbg.cmsbg--media { display: grid; }
.cmsbg.cmsbg--media > * { grid-area: 1 / 1; }
.cmsbg.cmsbg.cmsbg--media > .cmsbg__media { position: relative; overflow: hidden; z-index: 0; pointer-events: none; isolation: auto;
  background-color: var(--cmsbg-under, transparent); }
.cmsbg.cmsbg--media > :not(.cmsbg__media) { z-index: 1; }