/* ==========================================================================
   responsive.css — Breakpoint overrides (mobile-first)
   Levii Portal · Layout Base / Phase 2

   Base styles target mobile. These media queries progressively enhance for
   larger viewports. Breakpoints:
     sm  640   ·  md 768  ·  lg 1024  ·  xl 1280  ·  2xl 1536  ·  ultrawide 1800
   ========================================================================== */

/* ---- Stack multi-column layouts on small screens --------------------- */
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .split--reverse .split__media {
    order: 0;
  }
  .bento__cell,
  .bento__cell--wide,
  .bento__cell--full {
    grid-column: 1 / -1;
  }
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .bento__cell--tall {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .section {
    padding-block: var(--space-2xl);
  }
  .section-head {
    margin-bottom: var(--space-xl);
  }
  .cta-band {
    padding: var(--space-xl) var(--space-md);
  }
}

/* ---- Large screens: roomier gutters ---------------------------------- */
@media (min-width: 1280px) {
  :root {
    --gutter: 3rem;
  }
}

/* ---- Ultrawide / 4K: cap line lengths, scale rhythm ------------------ */
@media (min-width: 1800px) {
  :root {
    --container-max: 1320px;
    --space-3xl: 8rem;
  }
}

/* ---- Foldables & very narrow ----------------------------------------- */
@media (max-width: 360px) {
  :root {
    --gutter: 1rem;
  }
}

/* ---- Landscape phones: reduce vertical hero padding ------------------ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: var(--space-2xl);
  }
}

/* ---- Print ------------------------------------------------------------ */
@media print {
  .site-nav,
  .site-footer,
  .cta-band,
  .page-bg,
  [data-no-print] {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .prose {
    max-width: none;
  }
}