/* =============================================================================
   Verb Interactive — Wireframe Shared Responsive Layer
   -----------------------------------------------------------------------------
   ONE stylesheet, linked on every wireframe AFTER the page's inline <style> so it
   overrides. All mobile rules live under @media (max-width: 640px); desktop is
   untouched. Rules are keyed to the component classes, so a single edit here lands
   the fix on every page that uses that component.

   Wire it up:  <link rel="stylesheet" href="shared/responsive.css">   (just before </head>)
   Breakpoint:  640px.  Pairs with shared/nav.js + shared/footer.js.
   ========================================================================== */

/* Label-swap helper default: short label hidden until mobile (see @media below) */
.lbl-short { display: none; }

@media (max-width: 640px) {

  /* ---- 1. Fluid tokens: shrink margins + scale type/space on narrow screens ---- */
  :root {
    --grid-margin: clamp(20px, 6vw, 80px);
    --space-10: clamp(24px, 6vw, 40px);
    --space-12: clamp(28px, 7vw, 48px);
    --space-16: clamp(34px, 9vw, 64px);
    --space-20: clamp(40px, 11vw, 80px);
    --text-3xl: clamp(20px, 6vw, 22px);
    --text-4xl: clamp(24px, 7vw, 28px);
    --text-5xl: clamp(28px, 9vw, 36px);
    --hero-min-height: 520px;
  }

  /* ---- 2. Multi-column layouts collapse to a single column ---- */
  .bt-split,
  .feature-2col,
  .footer-main,
  .feature-slide.active {
    grid-template-columns: 1fr !important;
  }
  .feature-col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }
  .gallery-grid-4 { grid-template-columns: 1fr 1fr; }

  /* ---- 3. Section padding tightens ---- */
  .hero-content   { padding: var(--space-10) var(--grid-margin); }
  .bt-split-body,
  .slide-body     { padding: var(--space-12) var(--grid-margin); }
  .feature-col-body { padding: var(--space-8) var(--grid-margin); }

  /* ---- 4. Hero booking widget: wrap fields instead of one wide row ---- */
  .hero-actions { flex-wrap: wrap; }
  .bw-bar   { flex-wrap: wrap; max-width: 100%; gap: var(--space-2); }
  .bw-field { border-right: none; min-width: 45%; padding: var(--space-2) 0; }
  .bw-field:first-child { padding-left: 0; }

  /* ---- 5. Carousels: one card at a time (JS reads data-visible-mobile) ---- */
  .carousel-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .carousel-wrap   { padding: var(--space-10) 0; }

  /* ---- 6. Cap tall placeholder media so mobile doesn't scroll past big greys ---- */
  .bt-split-media,
  .feature-col-img,
  .slide-media { min-height: 220px; }
  .gallery-cell { min-height: 180px; }

  /* ---- 7. Footer: stack the bottom bar, let util links wrap ---- */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .footer-util-links { gap: var(--space-4); }

  /* ---- 8. Chrome (shared nav): keep the bar tidy on narrow screens ---- */
  .ham-bar { padding: 0 var(--grid-margin); }

  /* ---- 9. Label-swap helper: show short labels where space is tight ---- */
  .lbl-full  { display: none; }
  .lbl-short { display: inline; }

  /* ---- 10. Safety: nothing forces horizontal scroll ---- */
  img, video { max-width: 100%; }
}

/* -----------------------------------------------------------------------------
   Atlantis project note: the utility bar (.unav), main nav (.fnav) and mega panel
   are injected by shared/nav.js, which carries its OWN 640px switch (util bar +
   exposed links hide; hamburger drawer takes over; mega + featured callout are
   desktop-only). Footer collapse (.footer-main -> 1fr) is handled above.
   ----------------------------------------------------------------------------- */