/* GENERATED by tools/build_nvy.py from the Nvy theme skeleton, 2026-10-17T11:41:40Z. Do not edit. */
/*
 * MVS MODULE BACKGROUND ELEMENTS
 * ───────────────────────────────────────────────────────────
 * Styles for content rendered inside background layers.
 * The layer wrapper (.mvs-module__background) lives in
 * elements/_mvsModule.css.
 * position: relative and overflow: clip come from .grid-area-full.
 *
 * Colour backgrounds are injected via inline style
 * in render_backgrounds.html — nothing needed here.
 */


/* ── Background scrim overlay ────────────────────────────── */
/*    Rendered via ::after on the background container.       */
/*    --mvs-scrim-bg is set in module_tags.html based on      */
/*    overlay_opacity field + text_color_context (dark/light). */

.mvs-module__background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mvs-scrim-bg, transparent);
  pointer-events: none;
  z-index: 2;
}


/* ── Image background (single) ───────────────────────────── */
/*    Absolutely fills the background container.              */
/*    Content stage drives the module height.                 */

.mv-background-img {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}


/* ── Image slider background ─────────────────────────────── */
/*    Absolutely fills the background container.              */
/*    Images stack inside via grid-area: full.                */
/*    JS (mvsBackgroundSlider.js) cycles .is-current and      */
/*    applies opacity/transition inline — CSS just stacks.    */

.mv-background-image-slider {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: [full-start] 1fr [full-end];
  grid-template-rows:    [full-start] 1fr [full-end];
  overflow: clip;
}

.mv-background-image-slider .mvs-bg-img {
  grid-area: full;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;          /* JS overrides on init; keeps pre-JS flash suppressed */
}

.mv-background-image-slider .mvs-bg-img.is-current {
  opacity: 1;          /* Visible before JS runs */
}


/* ── Image background (random pick) ─────────────────────── */
/*    Same structure as slider; JS picks one on load.        */
/*    No cycling interval. First image shows pre-JS.         */

.mv-background-image-random {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: [full-start] 1fr [full-end];
  grid-template-rows:    [full-start] 1fr [full-end];
  overflow: clip;
}

.mv-background-image-random .mvs-bg-img {
  grid-area: full;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.mv-background-image-random .mvs-bg-img.is-current {
  opacity: 1;
}

/* Height mode: background drives height */
.mvs-module__background[data-mvs-height-mode="image"] .mv-background-image-random {
  position: relative;
  inset: auto;
  height: auto;
}

.mvs-module__background[data-mvs-height-mode="image"] .mv-background-image-random .mvs-bg-img {
  position: absolute;
  inset: 0;
  height: 100%;
}


/* ── Image height mode ───────────────────────────────────── */
/*    Centre-align grid items so content stage sits in the   */
/*    vertical middle of the image-driven module height.     */

.mvs-grid:has([data-mvs-height-mode="image"]) {
  align-items: center;
}



/*    Reverts to natural flow so the image's aspect ratio     */
/*    drives module height. Content still wins if taller.    */

.mvs-module__background[data-mvs-height-mode="image"] .mv-background-img {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  min-width: 0;
}

/* Slider: back in flow; aspect-ratio set inline by macro    */
.mvs-module__background[data-mvs-height-mode="image"] .mv-background-image-slider {
  position: relative;
  inset: auto;
  height: auto;
}

.mvs-module__background[data-mvs-height-mode="image"] .mv-background-image-slider .mvs-bg-img {
  position: absolute;
  inset: 0;
  height: 100%;
}


/* ── Video background ────────────────────────────────────── */

.mv-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mv-background-video__element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video height mode — video drives module height.
   Requires Module height field = "Background sets height".
   --video-ar defaults to 16/9; override per-module as needed. */
.mvs-module__background[data-mvs-height-mode="image"] .mv-background-video {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
}

.mvs-module__background[data-mvs-height-mode="image"] .mv-background-video__element {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--video-ar, 16 / 9);
  object-fit: cover;
}


/* ── Reduced motion (WCAG 2.0 SC 2.2.2) ─────────────────── */
/*    Auto-playing content must be pauseable or absent for    */
/*    users who have requested reduced motion.                */

@media (prefers-reduced-motion: reduce) {

  /* Instantly cut between slider images — no fade animation  */
  /* !important overrides the inline transition set by JS     */
  .mv-background-image-slider .mvs-bg-img {
    transition: none !important;
  }

  /* Hide auto-playing video; any colour/image layer shows    */
  .mv-background-video__element {
    display: none;
  }

}