/* H-SCROLL-V1 — horizontal-swipe shelf utility for portrait mobile.
 *
 * Rationale: on a phone, vertical screen space is the most expensive currency. A 4-card grid that
 * collapses to a vertical stack on mobile costs ~600–800px of vertical scroll just for one section.
 * The 2026-standard fix (App Store / Spotify / Netflix / Instagram Stories / TikTok Discover) is a
 * horizontal swipe shelf with peek-edges — user sees 1.5–2.5 items at once, swipes naturally, and the
 * whole section costs ~140–220px of vertical instead.
 *
 * Usage: add `data-h-scroll` to any flex/grid container. On <= 768px it becomes a horizontal-snap row.
 * On larger screens it falls back to whatever your existing grid/flex was — zero desktop impact.
 *
 *   <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4" data-h-scroll>
 *     <div>card 1</div>
 *     <div>card 2</div>
 *     ...
 *   </div>
 *
 * Optional size hints (controls card peek-width on mobile):
 *   data-h-scroll="sm"  → 60% width per card (4–5 visible across)
 *   data-h-scroll       → 85% width per card (1.5 visible — default)
 *   data-h-scroll="lg"  → 92% width per card (1.1 visible — for hero cards)
 *
 * Optional: add `data-h-scroll-edge="fade"` for a soft fade-out on right edge as a visual swipe hint.
 */

@media (max-width: 768px) {

  [data-h-scroll] {
    /* Force horizontal flex even if it was a vertical grid */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 16px;
    /* gap + padding give the peek-edge effect — first/last card hug the edges */
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
    /* Hide scrollbar (touch users don't need it; mouse users on touch laptops drag) */
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* Edge legacy */
  }
  [data-h-scroll]::-webkit-scrollbar { display: none; }  /* Chrome / Safari */

  /* Each direct child becomes a snap-card with peek */
  [data-h-scroll] > * {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
  }
  [data-h-scroll="sm"] > * { flex: 0 0 60%; max-width: 60%; }
  [data-h-scroll="lg"] > * { flex: 0 0 92%; max-width: 92%; }

  /* Soft right-edge fade hinting "more →" (opt-in via data-h-scroll-edge="fade") */
  [data-h-scroll-edge="fade"] {
    position: relative;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
  }

  /* Optional scroll-dot indicators (rendered by JS or markup) */
  .h-scroll-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
  .h-scroll-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    transition: background .2s, transform .2s;
  }
  .h-scroll-dots .dot.active {
    background: #00913a;
    transform: scale(1.4);
  }
}

/* SPONSOR MARQUEE — on portrait mobile, disable the auto-scroll animation and let the user
 * swipe through the sponsor logos with their finger. Saves ~150px of vertical (the marquee section
 * shrinks from ~250px to ~140px on mobile) AND removes a distracting always-moving element. */
@media (max-width: 768px) {
  .marquee-track {
    animation: none !important;
    width: auto !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }
  .marquee-track::-webkit-scrollbar { display: none; }
  .marquee-track > * {
    scroll-snap-align: start;
  }
  /* Smaller sponsor section padding on mobile */
  section.bg-white.border-b.border-gray-100.py-10 { padding-top: 24px; padding-bottom: 24px; }
}

/* Tablet portrait — still benefit from h-scroll for >4-card rows, but with smaller peek */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  [data-h-scroll-tablet] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-h-scroll-tablet]::-webkit-scrollbar { display: none; }
  [data-h-scroll-tablet] > * {
    flex: 0 0 45%;
    max-width: 45%;
    scroll-snap-align: start;
  }
}