/* ============================================================
   BeMED Connect — MOBILE-FIRST refinements
   Loaded last. Scoped to phones (<= 640px). Desktop untouched.
   Addresses: hero pace, stat weight, text rhythm, phrase breaks,
   carousels instead of photo grids.
   ============================================================ */

@media (max-width: 640px) {

  /* ---------- 1 · HERO — faster to value ---------- */
  .hero { min-height: 84svh; }
  .hero-inner {
    padding-top: clamp(86px, 13vh, 120px);
    padding-bottom: clamp(30px, 6vh, 56px);
  }
  .hero h1 { margin-top: 16px; line-height: 1.05; }
  .hero-sub { margin-top: 18px; font-size: 15px; }
  .hero-cta-row { margin-top: 26px; gap: 16px; }
  .scroll-cue { display: none; }

  /* ---------- 2 · STATS — bold horizontal proof cards ---------- */
  .stats-band .stats-grid {
    display: flex; flex-direction: column; gap: 10px;
  }
  .stats-band .stats-grid .cell {
    display: flex; align-items: center; gap: 16px; text-align: left;
    padding: 18px 20px;
    background: var(--ink-2);
    border: 1px solid var(--ink-line-soft);
    border-radius: 13px;
    border-bottom: 1px solid var(--ink-line-soft);
  }
  .stats-band .stats-grid .cell + .cell::before { display: none; }
  .stats-band .stats-grid .n {
    flex: none; font-size: 27px; line-height: 1; min-width: 4.2ch;
  }
  .stats-band .stats-grid .l {
    margin-top: 0; text-align: left; font-size: 13.5px; letter-spacing: 0.02em;
    text-transform: none; color: var(--silver); max-width: none; line-height: 1.35;
  }

  /* ---------- 3 · long support text → rhythm, not a wall ---------- */
  .stats-support { margin-top: 30px; gap: 0; }
  .stats-support .s {
    padding: 20px 0; border-top: 1px solid var(--ink-line-soft);
  }
  .stats-support .s:first-child { border-top: none; padding-top: 0; }
  .stats-support .s h4 {
    font-size: 16px; color: var(--gold); margin-bottom: 7px;
  }
  .stats-support .s p { font-size: 15px; line-height: 1.55; color: var(--silver); }

  /* ---------- 4 · WOW phrase — fewer lines, dominant ---------- */
  .quote-inner { max-width: min(90vw, 360px); }
  .quote-inner blockquote {
    font-size: clamp(28px, 7.6vw, 40px); line-height: 1.2; letter-spacing: -0.012em;
  }
  .q-eyebrow { margin-bottom: 26px; }

  /* ---------- shared carousel mechanics ---------- */
  .mosaic, .gal-grid, .gal-bottom, .tendal-grid {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px; padding-bottom: 10px;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .mosaic::-webkit-scrollbar,
  .gal-grid::-webkit-scrollbar,
  .gal-bottom::-webkit-scrollbar,
  .tendal-grid::-webkit-scrollbar { display: none; }

  /* ---------- 5 · "Quem senta à mesa" → swipe carousel ---------- */
  .mosaic > * {
    flex: 0 0 76%; scroll-snap-align: center; aspect-ratio: 4/5;
  }
  .mosaic .tile.info { aspect-ratio: 4/5; }

  /* ---------- 7 · Manu & Lee — bigger, slower ---------- */
  .feature { padding-block: clamp(86px, 14vh, 140px); }
  .feature-media { aspect-ratio: auto; min-height: 0; }
  .feature-media .fm-cell { aspect-ratio: 3/4; }
  .feature h2 { font-size: clamp(24px, 6.2vw, 31px); line-height: 1.16; }
  .feature .pull { font-size: clamp(17px, 4.6vw, 21px); line-height: 1.4; }

  /* ---------- 8 · Tendall — hero photo + swipe support shots ---------- */
  .tendal-grid > * { flex: 0 0 84%; scroll-snap-align: center; }
  .tendal-grid .big { flex-basis: 88%; aspect-ratio: 4/5; }
  .tendal-grid .small { aspect-ratio: 4/5; }

  /* ---------- 9 · Event gallery → two swipe rows, curated peek ---------- */
  .gal-grid > * { flex: 0 0 80%; scroll-snap-align: center; aspect-ratio: 4/5; }
  .gal-grid .g-main { flex-basis: 88%; }
  .gal-bottom { margin-top: 12px; }
  .gal-bottom > * { flex: 0 0 66%; scroll-snap-align: center; aspect-ratio: 4/3; }

  /* swipe affordance hint under carousels */
  .mosaic, .tendal-grid, .gal-bottom { position: relative; }

  /* ---------- 10 · CTA final — let the line dominate ---------- */
  .final h2 { font-size: clamp(30px, 8.4vw, 44px); line-height: 1.12; }
  .final p { font-size: 16px; }

  /* tighten section rhythm a touch so scroll isn't tiring */
  .chapter { padding-block: clamp(76px, 12vh, 120px); }
}

/* swipe hint label — appended via ::after on a wrapping element */
@media (max-width: 640px) {
  .swipe-hint {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--grey); margin-top: 14px;
  }
  .swipe-hint::before { content: ""; width: 22px; height: 1px; background: var(--gold); }
}
@media (min-width: 641px) { .swipe-hint { display: none; } }