/* GENERATED by tools/build_nvy.py from the Nvy theme skeleton, 2026-10-17T11:41:40Z. Do not edit. */
/*
 * ═══════════════════════════════════════════════════════════
 * MVS GRID SYSTEM
 * ───────────────────────────────────────────────────────────
 * Two modes:
 *
 *   1. Module grid     .mvs-grid       — module owns its grid
 *   2. Section takeover .mvs-takeover  — HS section IS the grid
 *
 * Named column lines (mobile collapses all to single track):
 *   full → gutter → breakout → content → content-col-1 / content-col-2
 *
 * Named row lines (one content row per section by design):
 *   full → padding row → content → padding row → full
 *
 * Layer z-index stack (defined in _mvsModule.css):
 *   10  background    self-places via grid-area-* class
 *   20  foreground    decorative, pointer-events: none
 *   30  stage         self-places via --placement CSS var
 * ═══════════════════════════════════════════════════════════
 */


/* ── Shared sizing tokens ────────────────────────────────── */
/*    Applied to both .mvs-grid and .mvs-takeover            */

.mvs-grid,
.mvs-takeover,
.dnd-section:has(.mvs-bg-marker) {

  /* Side gutter (breathing room at viewport edges) */
  --mvs-gutter-inline:  clamp(30px, 5vw, 60px);

  /* Vertical spacing — overridden per-module by open_tag */
  --mvs-gutter-top:    var(--organism-standard);
  --mvs-gutter-bottom: var(--organism-standard);

  /* Max widths */
  --mvs-content-max:  1200px;
  --mvs-breakout-max: 1400px;

  /* Derived sizes — do not edit directly */
  --mvs-breakout-size: minmax(0, calc((var(--mvs-breakout-max) - var(--mvs-content-max)) / 2));
  --mvs-content-size:  min(100% - (var(--mvs-gutter-inline) * 2), var(--mvs-content-max));
  --mvs-content-half:  calc(var(--mvs-content-size) / 2);

  /* Column templates */
  --mvs-cols-mobile:
    [full-start] var(--mvs-gutter-inline)
    [gutter-start breakout-start content-start content-col-1-start content-col-2-start]
      auto
    [content-col-1-end content-col-2-end content-end breakout-end gutter-end]
    var(--mvs-gutter-inline) [full-end];

  --mvs-cols:
    [full-start] var(--mvs-gutter-inline)
    [gutter-start] auto
    [breakout-start] var(--mvs-breakout-size)
    [content-start content-col-1-start] var(--mvs-content-half)
    [content-col-1-end content-col-2-start] var(--mvs-content-half)
    [content-col-2-end content-end] var(--mvs-breakout-size)
    [breakout-end] auto
    [gutter-end] var(--mvs-gutter-inline) [full-end];

  /* Row template — padding rows use the spacing vars above */
  --mvs-rows:
    [full-start] minmax(var(--mvs-gutter-top), auto)
    [gutter-start breakout-start content-start content-col-1-start content-col-2-start]
      auto
    [content-col-1-end content-col-2-end content-end breakout-end gutter-end]
    minmax(var(--mvs-gutter-bottom), auto) [full-end];

}


/* ── 1. Module grid ──────────────────────────────────────── */
/*    The module owns and controls its own grid.             */
/*    Use for the majority of modules.                       */

.mvs-grid {
  container-type: inline-size;
  container-name: mv2Module;
  display: grid;
  grid-template-columns: var(--mvs-cols-mobile);
  min-height: var(--mvs-min-height, 0);
  grid-template-rows: var(--mvs-rows);
  overflow: clip;
}

@media (width > 1168px) {
  .mvs-grid {
    grid-template-columns: var(--mvs-cols);
  }
}


/* ── 2. Section takeover ─────────────────────────────────── */
/*    Add class "mvs-takeover" to a HubSpot section via the  */
/*    custom CSS class field in the page builder.            */
/*    The section becomes the grid. The module emits no      */
/*    wrapper — layers self-place directly into it.          */

.mvs-takeover,
.dnd-section:has(.mvs-bg-marker) {
  container-type: inline-size;
  container-name: mv2Module;
  display: grid;
  grid-template-columns: var(--mvs-cols-mobile);
  grid-template-rows: var(--mvs-rows);
  overflow: clip;
}

@media (width > 1168px) {
  .mvs-takeover,
  .dnd-section:has(.mvs-bg-marker) {
    grid-template-columns: var(--mvs-cols);
  }
}

/* Neutralise HS wrapper divs with display: contents.        */
.mvs-takeover .dnd-column,
.mvs-takeover .dnd-module,
.mvs-takeover .row-fluid-wrapper,
.mvs-takeover .row-fluid,
.mvs-takeover .hs_cos_wrapper,
.dnd-section:has(.mvs-bg-marker) .dnd-column,
.dnd-section:has(.mvs-bg-marker) .dnd-module,
.dnd-section:has(.mvs-bg-marker) .row-fluid-wrapper,
.dnd-section:has(.mvs-bg-marker) .row-fluid,
.dnd-section:has(.mvs-bg-marker) .hs_cos_wrapper {
  display: contents;
}


/* ── Placement classes ───────────────────────────────────── */
/*    Used by render_backgrounds (background layers) and     */
/*    any element that needs to self-place in the grid.      */

.grid-area-full          { grid-area: full; position: relative; min-height: 100%; max-height: 100%; overflow: clip; }
.grid-area-gutter        { grid-area: gutter; }
.grid-area-breakout      { grid-area: breakout; }
.grid-area-content       { grid-area: content; }
.grid-area-content-col-1 { grid-area: content-col-1; }
.grid-area-content-col-2 { grid-area: content-col-2; }


/* ── Column span utilities ───────────────────────────────── */
/*    Combine start + end classes to build custom spans      */
/*    when grid-area shorthand doesn't cover your needs.     */

.col-full-start          { grid-column-start: full; }
.col-full-end            { grid-column-end:   full; }
.col-gutter-start        { grid-column-start: gutter; }
.col-gutter-end          { grid-column-end:   gutter; }
.col-breakout-start      { grid-column-start: breakout; }
.col-breakout-end        { grid-column-end:   breakout; }
.col-content-start       { grid-column-start: content; }
.col-content-end         { grid-column-end:   content; }
.col-content-col-1-start { grid-column-start: content-col-1; }
.col-content-col-1-end   { grid-column-end:   content-col-1; }
.col-content-col-2-start { grid-column-start: content-col-2; }
.col-content-col-2-end   { grid-column-end:   content-col-2; }


/* ── Row span utilities ──────────────────────────────────── */

.row-full-start          { grid-row-start: full; }
.row-full-end            { grid-row-end:   full; }
.row-gutter-start        { grid-row-start: gutter; }
.row-gutter-end          { grid-row-end:   gutter; }
.row-breakout-start      { grid-row-start: breakout; }
.row-breakout-end        { grid-row-end:   breakout; }
.row-content-start       { grid-row-start: content; }
.row-content-end         { grid-row-end:   content; }
.row-content-col-1-start { grid-row-start: content-col-1; }
.row-content-col-1-end   { grid-row-end:   content-col-1; }
.row-content-col-2-start { grid-row-start: content-col-2; }
.row-content-col-2-end   { grid-row-end:   content-col-2; }