/* =============================================
   PHONE EXPERIENCE (<= 700px)
   Swipe carousels instead of endless stacks, a sticky action dock,
   edge-to-edge media. Loaded last; desktop is untouched.
   ============================================= */

/* ---------- dock (injected by js/mobile.js) ---------- */
.dock { display: none; }

@media (max-width: 700px) {
  .float-wa { display: none !important; }

  .dock {
    display: flex; gap: 10px;
    position: fixed; z-index: 880;
    inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 8px;
    border-radius: 22px;
    background: rgba(16, 11, 28, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(214, 196, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
    transform: translateY(140%); opacity: 0; pointer-events: none;
    transition: transform 0.5s var(--ease-expo), opacity 0.3s var(--ease-out);
  }
  .dock.is-on { transform: none; opacity: 1; pointer-events: auto; }
  .dock a {
    flex: 1; min-height: 50px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-weight: 800; font-size: 0.98rem; color: var(--ink);
    transition: transform 0.16s var(--ease-out), background-color 0.2s;
  }
  .dock a:active { transform: scale(0.96); }
  .dock .dock-wa { background: #25d366; flex: 0 0 auto; padding-inline: 18px; }
  .dock .dock-talk { background: var(--txt-hi); }
  .dock .ico { width: 21px; height: 21px; }
  body.has-dock { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .vid-modal.open ~ .dock, body.drawer-open .dock { display: none; }

  /* ---------- swipe carousels ---------- */
  .client-grid, .thumb-grid {
    display: flex; flex-wrap: nowrap; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x);
    margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x);
    padding-block: 6px 14px; margin-top: 30px;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .client-grid::-webkit-scrollbar, .thumb-grid::-webkit-scrollbar { display: none; }

  .client-grid .client-card {
    flex: 0 0 74%; max-width: 300px; scroll-snap-align: center;
    grid-column: auto;
    opacity: calc(var(--o, 1)) !important;
    transform: scale(var(--s, 1)) !important;
    animation: none !important;
    transition: none;
    will-change: transform, opacity;
  }
  .client-grid .client-card.featured { flex-basis: 74%; }
  .client-grid .card-media, .client-grid .client-card.featured .card-media { aspect-ratio: 4 / 5; }
  .client-grid .card-body { padding: 14px 16px 18px; }
  .client-grid .card-name, .client-grid .client-card.featured .card-name { font-size: 1.05rem; }

  .thumb-grid .thumb-card { flex: 0 0 58%; max-width: 250px; scroll-snap-align: center; transform: scale(var(--s, 1)); opacity: var(--o, 1); }

  /* progress under each carousel */
  .car-prog {
    position: relative; height: 3px; margin: 0 0 4px; border-radius: 3px;
    background: rgba(214, 196, 255, 0.14); overflow: hidden;
  }
  .car-prog i { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; border-radius: 3px; background: var(--accent); }
  .car-hint {
    display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
    font-size: 0.8rem; font-weight: 700; color: var(--txt-mid);
  }
  .car-hint svg { width: 16px; height: 16px; flex-shrink: 0; }
  html[dir="rtl"] .car-hint svg { transform: scaleX(-1); }

  /* sections: a little tighter, headings keep their punch */
  .sec { padding-block: clamp(56px, 14vw, 88px); }
  .h2 { font-size: clamp(2.5rem, 12.5vw, 3.6rem); }

  /* thumbnail section intro: copy first, strip after */
  .thumb-intro { gap: 26px; margin-bottom: 0; }
  .thumb-intro > .thumb-grid { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
}

@media (max-width: 700px) {
  .thumb-intro > .car-prog { order: 3; }
  .thumb-intro > .thumb-grid { margin-top: 4px; }
}