/**
 * Homepage mobile parity layer (≤860px) — ports the interaction pieces the
 * dedicated mobile design (Vybe_index_Final_02_Mobile) has but the responsive
 * theme lacked: horizontal swipe-carousels for Editions + Steps (with dots),
 * touch tap-states, and a sticky bottom "Create your bottle" CTA bar.
 * Loaded only on the front page, AFTER home-v2.css, in inc/enqueue.php.
 * Desktop is untouched — everything visual lives inside the media query.
 */

/* hidden on desktop; the carousel dots + CTA bar only exist on phones */
.steps-dots { display: none; }
.m-cta-bar { display: none; }

@media (max-width: 860px) {

  /* ---- Editions: horizontal swipe carousel ---- */
  .editions-band .ed3-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-padding-left: var(--pad);
    gap: 16px;
    padding: 4px 0 18px;
    margin-right: calc(-1 * var(--pad));
    scrollbar-width: none;
  }
  .editions-band .ed3-grid::-webkit-scrollbar { display: none; }
  .editions-band .ed3 { flex: 0 0 82%; scroll-snap-align: center; }
  .editions-band .ed3:last-child { margin-right: var(--pad); }

  /* ---- Steps: horizontal swipe carousel + dots ---- */
  .steps-cream .steps-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-padding-left: var(--pad);
    gap: 14px;
    padding: 4px 0 18px;
    margin-right: calc(-1 * var(--pad));
    scrollbar-width: none;
  }
  body.home .steps-cream .steps-grid::-webkit-scrollbar{ display: none; }
  body.home .steps-cream .steps-grid .step-card{
    flex: 0 0 78%;
    scroll-snap-align: center;
    opacity: 1 !important;
    transform: none !important;
  }
  body.home .steps-cream .steps-grid .step-card:last-child{ margin-right: var(--pad); }
  body.home .steps-cream .steps-grid .step-n{ font-size: 15px; letter-spacing: 0.2em; font-weight: 600; display: inline-block; margin-bottom: 4px; }
  body.home .steps-cream .steps-grid .step-meta h3{ font-size: 26px; margin-top: 8px; }
  body.home .steps-cream .steps-grid .step-photo{ min-height: 340px; }

  body.home .steps-cream .steps-dots{ display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
  body.home .steps-cream .steps-dots button{
    width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
    background: rgba(38,30,16,0.22); cursor: pointer;
    transition: transform .25s ease, background .25s ease;
  }
  body.home .steps-cream .steps-dots button.active{ background: #8a6d2f; transform: scale(1.35); }
  body.home .steps-cream .steps-legend{ color: #6a5a3f; }

  /* ---- Touch feedback on tappable cards ---- */
  .ed3, .step-card, .g-card, .icon-btn, .tab { -webkit-tap-highlight-color: transparent; }
  .ed3, .step-card { transition: transform .3s cubic-bezier(.4,0,.2,1); }
  .ed3:active, .step-card:active { transform: scale(0.985); }

  /* ---- Sticky bottom CTA bar ---- */
  .m-cta-bar {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(16,12,8,0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(231,210,176,0.14);
    transform: translateY(120%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
  }
  body.m-cta-show .m-cta-bar { transform: none; }
  body.drawer-open .m-cta-bar { transform: translateY(120%); }
  .m-cta-copy { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .m-cta-k { font-family: var(--font-code, monospace); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vyne-gold, #c9a44c); }
  .m-cta-t { font-family: var(--font-serif, serif); font-size: 16px; color: #f4ede0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-cta-btn {
    margin-left: auto; flex: none;
    background: var(--vyne-gold, #c9a44c); color: #16100a; text-decoration: none;
    padding: 13px 18px; border-radius: 999px;
    font-family: var(--font-code, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  }
  /* keep footer clear of the fixed bar */
  .site-footer { padding-bottom: 90px; }
}

/* ---------- Gallery: the mobile design shows a curated subset ----------
 * The full wall is 14 cards; the mobile design keeps 6 (the ones carrying
 * .m-keep in template-parts/home/gallery.php) and hides the rest, which is what
 * takes the section from ~4700px of scrolling down to the design's ~1830px. */
@media (max-width: 860px) {
  .gallery-bright .g-wall .g-card { display: none; }
  .gallery-bright .g-wall .g-card.m-keep { display: block; }
}

/* ---------- Remaining rules from the mobile design's own ≤860px layer ----------
 * Ported verbatim from Vybe_index_Final_02_Mobile's <style id="mobile-layer">.
 * These were the last unported pieces: the hero was still 94vh (940px vs the
 * design's 82vh/820), the proof findings stacked one-up instead of two, and the
 * subscription band's copy sat centred instead of bottom-left over the photo. */
@media (max-width: 860px) {

  /* ---- hero ---- */
  .hero { min-height: 82vh; align-items: flex-end; }
  body.home .hero-inner{ padding-bottom: clamp(40px, 9vw, 76px); }
  body.home .hero-photo-bg::after{
    background: linear-gradient(180deg, rgba(8,6,5,0.35) 0%, rgba(8,6,5,0.5) 45%, rgba(8,6,5,0.92) 100%) !important;
  }
  body.home .hero-lede{ max-width: 100%; font-size: 16px; }

  /* ---- proof: findings stay two-up, tabs scroll ---- */
  .proof-block .proof-findings { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  body.home .proof-block .pf-find + .pf-find::before{ display: none; }
  body.home .proof-block .tab-row{ overflow-x: auto; scrollbar-width: none; }
  body.home .proof-block .tab-row::-webkit-scrollbar{ display: none; }
  body.home .proof-block .tab{ white-space: nowrap; padding: 14px 18px; }
  body.home .proof-block .panel-head h3{ white-space: normal; font-size: clamp(24px, 7vw, 34px); }
  body.home .proof-block .collage{ grid-template-columns: 1fr; }
  body.home .proof-block .collage .hero-photo, body.home .proof-block .collage .quote-card{ grid-column: auto; }
  body.home .proof-block .pf-shell{ padding: 0 var(--pad); }

  /* ---- subscription band ---- */
  .subs-band .sb-bg { min-height: 300px; object-fit: cover; }
  body.home .subs-band::after{
    background: linear-gradient(180deg, rgba(8,6,4,0) 30%, rgba(8,6,4,0.86) 72%) !important;
  }
  body.home .subs-band .sb-inner{ align-items: flex-end; justify-content: flex-start; padding-bottom: 34px; }
  body.home .subs-band .sb-copy{ max-width: 100%; }

  /* ---- section rhythm a touch tighter ---- */
  .section { padding: clamp(30px, 8vw, 48px) 0; }

  /* ---- "swipe" hint next to the carousel section heads ---- */
  .m-swipe-hint {
    display: block;
    font-family: var(--font-code, monospace); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--vyne-gold, #c9a44c); margin-top: 6px;
  }

  /* ---- scroll-driven reveal for sections + cards ---- */
  .m-reveal {
    opacity: 0; transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .m-reveal.in { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .proof-block .proof-findings { grid-template-columns: 1fr 1fr; }
  .hero-title.jersey .big { font-size: clamp(58px, 20vw, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  .m-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- FAQ band --------------------------------------------------------------
   On phones the design lifts the FAQ off the page black onto a warmer brown
   (rgb(28,21,9)); ours inherited the page colour and the band disappeared. */
@media (max-width: 860px) {
  body.home #faqSection { background: #1c1509; }
}