/* GENERATED by tools/build_nvy.py from the Nvy theme skeleton, 2026-10-17T11:41:40Z. Do not edit. */
/*
 * ═══════════════════════════════════════════════════════════
 * MVS MODULE LAYERS
 * ───────────────────────────────────────────────────────────
 * Three layers sit as siblings in the same grid row.
 * Each self-places and the tallest drives the row height.
 *
 *   z-index 10   .mvs-module__background
 *                Colour / image / video. Self-places via
 *                grid-area-* class set by render_backgrounds.
 *
 *   z-index 20   .mvs-module__foreground
 *                Decorative only. pointer-events: none.
 *                Self-places via grid-area-* class.
 *
 *   z-index 30   .mvs-module__stage
 *                The content layer. Self-places via
 *                --placement CSS var set by open_tag.
 *
 * The grid itself is defined in utilities/mvsGrid.css.
 * ═══════════════════════════════════════════════════════════
 */


/* ── Module wrapper ──────────────────────────────────────── */
/*    Establishes the container query context.               */
/*    Applied alongside .mvs-grid by open_tag.               */

.mvs-module {
  container-type: inline-size;
  container-name: mv2Module;
}


/* ── Background layer ────────────────────────────────────── */

.mvs-module__background {
  grid-row: full;
  z-index: 10;
  /* position: relative; overflow: clip come from .grid-area-full */
}


/* ── Foreground layer ────────────────────────────────────── */
/*    For decorative elements that overlay the content.      */
/*    Add grid-area-* class to control placement.            */

.mvs-module__foreground {
  grid-row: full;
  z-index: 20;
  pointer-events: none;
}


/* ── Content stage ───────────────────────────────────────── */
/*    --placement is set by open_tag from the module's       */
/*    layout.content_width field. Defaults to content zone.  */
/*    --block-align and --text-align are also set by         */
/*    open_tag from the module's layout.alignment field.     */

.mvs-module__stage {
  container-type: inline-size;
  container-name: stage;
  grid-area: var(--placement, content);
  z-index: 30;
  display: flex;
  justify-self: var(--block-align, start);
  text-align: var(--text-align, left);
  width: 100%;
  max-width: var(--mvs-content-col-width, none);
}

@container mv2Module (width < 1024px) {
  .mvs-module__stage {
    justify-self: var(--block-align-md, var(--block-align, start));
    text-align:   var(--text-align-md,  var(--text-align,  left));
  }
}

@container mv2Module (width < 640px) {
  .mvs-module__stage {
    justify-self: var(--block-align-sm, var(--block-align-md, var(--block-align, start)));
    text-align:   var(--text-align-sm,  var(--text-align-md,  var(--text-align,  left)));
  }
}


/* ── Content stack ───────────────────────────────────────── */
/*    Flex column with molecule gap between content groups.  */
/*    Use inside .mvs-module__stage for standard modules.    */

.mvs-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--molecule-standard);
  width: 100%;
}

.mvs-content__titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--atom-standard);
}