/* =========================================================
   CrossMerg — Marketing Full-View Sections
   🔒 FROZEN FILE (Level-1 / Utility Contract)
   File: assets/themes/crossmerg/custom/css/marketing-fullview.css
   Updated: 2026-01-27 14:24:45 (America/Los_Angeles)

   Role:
   - Opt-in full-viewport sections for marketing pages
   - CSS-first (no JS dependency)
   - Mobile-safe viewport handling
   - Never forces height (content may grow)
   - Safe with Bootstrap 3 + cm-2up-eq

   Notes:
   - Full-view can be enabled EITHER by:
       1) adding class="cm-fullview", OR
       2) adding the attribute data-cm-fullview to the section
     (This supports your existing markup like: <section ... data-cm-fullview>)
   ========================================================= */


/* ---------------------------------------------------------
   Viewport Height Contract (class OR attribute)
   --------------------------------------------------------- */
.cm-fullview,
[data-cm-fullview] {
  /* Mobile-first: dynamic viewport where supported */
  min-height: 100svh;

  /* Fallback */
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  /* Default vertical centering (override with modifiers below) */
  justify-content: center;

  /* Safe-area padding (token-driven) */
  padding-top: var(--cm-fullview-pad-y, 4rem);
  padding-bottom: var(--cm-fullview-pad-y, 4rem);
}

/* ---------------------------------------------------------
   Vertical Alignment Modifiers
   - Use as classes:
       .cm-fullview--top / --center / --bottom
   - Or as attributes:
       data-cm-fullview="top|center|bottom"
   --------------------------------------------------------- */
.cm-fullview--top,
[data-cm-fullview="top"] {
  justify-content: flex-start;
}

.cm-fullview--center,
[data-cm-fullview="center"] {
  justify-content: center;
}

.cm-fullview--bottom,
[data-cm-fullview="bottom"] {
  justify-content: flex-end;
}

/* ---------------------------------------------------------
   Width / Bleed Options
   --------------------------------------------------------- */

/* Full-bleed background, container content stays aligned */
.cm-fullbleed-bg {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Edge-to-edge content (use sparingly) */
.cm-fullbleed-content {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--cm-fullview-pad-x, 1.5rem);
  padding-right: var(--cm-fullview-pad-x, 1.5rem);
}

/* ---------------------------------------------------------
   Safety Rules
   --------------------------------------------------------- */

/* Never interfere with Bootstrap rows */
.cm-fullview .row,
[data-cm-fullview] .row {
  width: auto;
}

/* Allow natural growth if content exceeds viewport */
.cm-fullview > *,
[data-cm-fullview] > * {
  flex-shrink: 0;
}