/* =========================================================
   Mobile-only carousel: turn select grids into snap scrollers
   + dot + arrow pager injected by mobile-carousel.js
   ========================================================= */

@media (max-width: 768px) {
  /* Container that holds the converted grid + pager. The grid keeps
     its original class so JSX/data still works; we just override layout. */
  .cat-grid,
  .feature-grid,
  .spot-grid,
  .searched-grid,
  .partners-grid,
  .editorial-grid,
  .review-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px !important;
    /* allow first/last to sit nicely against viewport edge */
    padding: 4px 20px 4px;
    margin: 0 -20px;
    /* override grid sizing */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    background: transparent !important;
    border: 0 !important;
  }
  .cat-grid::-webkit-scrollbar,
  .feature-grid::-webkit-scrollbar,
  .spot-grid::-webkit-scrollbar,
  .searched-grid::-webkit-scrollbar,
  .partners-grid::-webkit-scrollbar,
  .editorial-grid::-webkit-scrollbar,
  .review-grid::-webkit-scrollbar { display: none; }

  /* Each direct child becomes a snap slide ~85% viewport-wide */
  .cat-grid > *,
  .feature-grid > *,
  .spot-grid > *,
  .searched-grid > *,
  .partners-grid > *,
  .editorial-grid > *,
  .review-grid > * {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* reset any grid-area / row spans */
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Categories grid had hairline borders via background trick — restore card border per item */
  .cat-grid > .cat-card {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    background: var(--paper);
  }

  /* Searched-grid had grid-template-rows fixed heights — let cards size themselves */
  .searched-grid > .searched-card {
    height: 280px;
  }

  /* Pager (dots + arrows) — injected by mobile-carousel.js */
  .carousel-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    padding: 0 20px;
  }
  .carousel-pager .cp-arrow {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    flex-shrink: 0;
    transition: opacity .15s ease, transform .15s ease;
    cursor: pointer;
  }
  .carousel-pager .cp-arrow:active { transform: scale(.94); }
  .carousel-pager .cp-arrow[disabled] {
    opacity: .35;
    cursor: default;
  }
  .carousel-pager .cp-arrow svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .carousel-pager .cp-dots {
    display: flex; gap: 6px; align-items: center;
    flex: 0 1 auto;
    overflow: hidden;
  }
  .carousel-pager .cp-dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--ink-3) 55%, transparent);
    transition: width .2s ease, background .2s ease;
    flex-shrink: 0;
  }
  .carousel-pager .cp-dot.active {
    width: 18px;
    background: var(--brand);
  }
}

/* Desktop: never show injected pager */
@media (min-width: 769px) {
  .carousel-pager { display: none !important; }
}