/* ═══════════════════════════════════════════════════════════
   MOBILE ENHANCE · v1
   Isolated mobile-only upgrades:
     1. Swipe carousels for .v8-cases-grid + .v8-agents-grid
     2. Quick-jump chips after hero
     3. Tap-active states on cards
   Desktop styles are untouched (everything is wrapped in
   @media (max-width: 767px) or (hover: none)).
   ═══════════════════════════════════════════════════════════ */


/* ─── 1. SWIPE CAROUSELS (Cases + Agents) ──────────────────── */
@media (max-width: 767px) {

  /* Common shell — added by JS as a wrapper around the grid */
  .me-carousel {
    position: relative;
    margin-left: calc(-1 * var(--container-pad, 20px));
    margin-right: calc(-1 * var(--container-pad, 20px));
    padding: 0;
  }

  /* Override the grid → horizontal flex with snap */
  .me-carousel .v8-cases-grid,
  .me-carousel .v8-agents-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;             /* hard-stop any Y bleed from the scroller */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding: 6px 20px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Lock touch gesture to horizontal pan so vertical swipes
       reach the page scroller instead of jittering the carousel.
       (pan-y removed → pinch-zoom kept for accessibility) */
    touch-action: pan-x pinch-zoom;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
  }
  .me-carousel .v8-cases-grid::-webkit-scrollbar,
  .me-carousel .v8-agents-grid::-webkit-scrollbar { display: none; }

  /* Each card becomes a snap slide */
  .me-carousel .v8-case-card,
  .me-carousel .v8-agent-card {
    flex: 0 0 86%;
    max-width: 360px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Swipe hint — sits above the carousel, fades after first interaction */
  .me-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 4px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-on-cream-muted, #6b6b6b);
    opacity: 0.85;
    transition: opacity 320ms ease;
  }
  .me-hint.is-dismissed { opacity: 0; pointer-events: none; }
  .me-hint .me-hint-arrow {
    display: inline-block;
    animation: me-hint-nudge 1.6s ease-in-out infinite;
  }
  @keyframes me-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .me-hint .me-hint-arrow { animation: none; }
  }

  /* Dot indicators — sit below the carousel, mirror current slide */
  .me-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 0 20px;
  }
  .me-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 51, 32, 0.18);
    transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 220ms ease;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .me-dot.is-active {
    width: 22px;
    background: var(--brand-green-deep, #2D8049);
  }
}


/* ─── 3. TAP-ACTIVE STATES (touch devices only) ────────────── */
@media (hover: none) {
  .v8-case-card,
  .v8-agent-card,
  .v8-pain-card,
  .v8-deliver-card,
  .v8-deliver-card--v83 {
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 180ms ease,
                background-color 160ms ease;
  }
  .v8-case-card:active,
  .v8-agent-card:active {
    transform: scale(0.985);
    box-shadow: 0 1px 2px rgba(15, 51, 32, 0.06);
  }
  .v8-pain-card:active,
  .v8-deliver-card:active,
  .v8-deliver-card--v83:active {
    transform: scale(0.99);
  }
  /* Buttons / chips inside cards get a quick darken */
  .v8-case-cta:active,
  .v8-agent-cta:active {
    opacity: 0.7;
  }
}


/* ─── 4. COUNT-UP STAT — initial state ─────────────────────── */
/* Prevents flash of final value before JS swaps to "0" */
.v8-case-stat[data-me-counter]:not(.is-counted) {
  font-variant-numeric: tabular-nums;
}

/* ─── 5. HEADER LOGO — larger + presence on cream BG ─────────
   Beats all earlier cascade rules in ai420-mvp.css / polish.css.
   Applies site-wide (homepage, book, web420, etc).
*/
.v8-nav-logo {
  padding: 4px 10px 4px 4px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(20,40,30,.04),
    0 4px 14px -8px rgba(20,40,30,.18) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.v8-nav-logo:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(20,40,30,.06),
    0 8px 20px -10px rgba(20,40,30,.25) !important;
}
.v8-nav-logo img {
  height: 52px !important;
  width: 52px !important;
  max-width: 52px !important;
}
@media (max-width: 720px) {
  .v8-nav-logo { padding: 3px 8px 3px 3px !important; border-radius: 10px !important; }
  .v8-nav-logo img {
    height: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
  }
}