/* =============================================================
   home-mobile.css
   Mobile-only overrides for the landing page.
   All rules are inside @media queries so desktop is untouched.
   ============================================================= */

/* ──────────────────────────────────────────────────────────────
   1. FIX GO LOGO — keep it top-left on mobile
   The webflow CSS centers .gg-brand on mobile. Override that.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .gg-brand {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .gg-logo.smaller {
    width: 200px !important;
    height: 124px !important;
    margin-top: 0 !important;
    margin-left: 11px !important;
    margin-bottom: 0 !important;
  }

  .gg-logo.smaller .gg-logo-animation {
    width: 100% !important;
    height: 100% !important;
  }
}

@media screen and (max-width: 479px) {
  .gg-logo.smaller {
    width: 160px !important;
    height: 101px !important;
    margin-top: 0 !important;
    margin-left: 11px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   2. MAKE "SAY HELLO" BUTTON LARGE on mobile
   The image was only 20% width — far too tiny on mobile.
   Match the Webflow reference: bottom-right, clearly visible.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .say-hello-btn-m {
    z-index: 80 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    position: absolute !important;
    inset: auto 0 0 auto !important;
    margin-bottom: 40px !important;
    margin-right: 20px !important;
  }

  .say-hello-btn-m .gg-say-hello-image {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
  }

  .say-hello-btn-m .cursor-gif-m-static {
    display: block !important;
  }
}

@media screen and (max-width: 479px) {
  .say-hello-btn-m .gg-say-hello-image {
    width: 140px !important;
    max-width: 140px !important;
  }

  .say-hello-btn-m {
    margin-bottom: 30px !important;
    margin-right: 16px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   3. SWIPEABLE MODEL CAROUSEL on mobile
   The DOM structure is:
     .slider.w-slider
       .mask.w-slider-mask
         .w-slide  ← groups of 3 cards
           .gg-slider-innercontainer
             .gg-girl-cards  ← grid container
               .gg-girlcell  ← individual card
   
   Strategy: Disable the Webflow slider, flatten the hierarchy,
   and turn the mask into a CSS scroll-snap horizontal scroller.
   Each individual .gg-girlcell becomes a swipe target.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {

  /* Remove right padding from the slider */
  #Section-1 .slider.w-slider {
    padding-right: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Turn the mask into a horizontal scroll container */
  #Section-1 .mask.w-slider-mask {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    /* Hide scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    height: auto !important;
    white-space: normal !important;
    transform: none !important;
    /* Gap BETWEEN .w-slide batches — without this, the last card of
       slide N sits flush against the first card of slide N+1 because
       the 16px .gg-girl-cards gap only spans within a single batch. */
    gap: 16px !important;
  }

  #Section-1 .mask.w-slider-mask::-webkit-scrollbar {
    display: none;
  }

  /* Flatten the slide hierarchy so .gg-girlcell becomes a direct
     flex child of .mask. CSS scroll-snap is hard-spec'd to only
     consider direct descendants of the scroll container as snap
     targets — without this collapse, scroll-snap-align on the
     deeply-nested cards is silently ignored and snapping fails.
     display:contents removes the box from the layout tree but
     keeps its children rendered, so the inline styles Webflow's
     slider JS sets on these wrappers (display, transform, etc)
     have no visual effect either. */
  #Section-1 .w-slide,
  #Section-1 .gg-slider-innercontainer,
  #Section-1 .gg-girl-cards {
    display: contents !important;
  }

  /* Each card snaps and takes up most of the viewport.
     scroll-snap-stop: always forces the scroller to come to rest on
     each card — without it a fast flick can skip multiple cards and
     defeats the whole point of "snap to the next model". */
  #Section-1 .gg-girlcell {
    flex: 0 0 75vw !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    min-width: 0 !important;
    max-width: 75vw !important;
  }

  /* Edge breathing space — left side anchored to the first card of
     the first batch (works since that one's stable in the DOM). */
  #Section-1 .w-slide:first-child .gg-girlcell:first-child {
    margin-left: 20px !important;
  }

  /* Right edge: a flex pseudo-element on the scroll container itself.
     Avoids relying on .w-slide:last-child / .gg-girlcell:last-child —
     Webflow's slider has data-infinite="true" and at runtime can
     clone slides past the real last one, which makes those
     pseudo-classes match a clone instead of the visible last card.
     A ::after on the scroller is always last in the flex stream. */
  #Section-1 .mask.w-slider-mask::after {
    content: '';
    flex: 0 0 20px;
    height: 1px;
  }

  /* Hide slider arrows on mobile (touch swipe replaces them) */
  #Section-1 .left-arrow,
  #Section-1 .right-arrow {
    display: none !important;
  }

  /* Hide the slide nav dots from the original slider */
  #Section-1 .slide-nav {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   4. REDUCE COPY ON MOBILE
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .gg-hide-on-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  #Section-1 .gg-girlcell {
    flex: 0 0 85vw !important;
    max-width: 85vw !important;
  }

  #Section-1 .gg-girl-cards {
    gap: 12px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   5. NAV CLUSTER ON MOBILE — share icon + triple-dot only
   On mobile we keep the menu HIDDEN by default. The Share icon and
   triple-dot stack at the top right; tapping the triple-dot toggles
   the nav-links list (Sign Up / Login / etc) via the existing
   more-menu-toggle JS in layouts/public.blade.php. The Webflow
   base sets opacity:0 on the links for a desktop fade animation
   that never fires on mobile, so we override opacity to 1 here —
   visibility is then controlled purely by the JS display toggle.
   Mirrors the live gogirlfriend.ai mobile UX.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .gg-nav {
    margin-top: 30px !important;
    margin-right: 30px !important;
    z-index: 600 !important;
  }
}

@media screen and (max-width: 479px) {
  .gg-nav {
    margin-top: 30px !important;
    margin-right: 30px !important;
    padding-top: 2px !important;
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }

  /* Stack the share icon above the triple-dot vertically */
  #w-node-_69facbe9-7f25-e1eb-6c51-0f84c0d7b143-1fd19d65 {
    grid-template-rows: auto !important;
    grid-template-columns: 1fr !important;
  }

  /* Triple-dot ends up below the share icon */
  #w-node-_69facbe9-7f25-e1eb-6c51-0f84c0d7b144-1fd19d65 {
    order: 9999 !important;
  }

  .gg-share-btn {
    display: flex !important;
  }

  .gg-share-btn.homepage {
    justify-content: center !important;
    display: flex !important;
  }

  .gg-share-container {
    margin-right: 0 !important;
  }

  /* Drop the "Share" text label on phone — icon only */
  .gg-ui-font.share,
  .gg-ui-font.black {
    display: none !important;
  }
}

/* Make the toggleable menu fade in/out when the more-menu-toggle JS
   flips display:none → display:block. The JS coordinates the
   display change with the opacity flip; this transition is what
   actually animates the fade. We DO NOT force opacity:1 on mobile
   anymore — that would defeat the close animation. The starting
   inline style="display:none;opacity:0" on .gg-nav-links keeps it
   hidden until the user taps the triple-dot. */
@media screen and (max-width: 991px) {
  .gg-nav .gg-nav-links {
    transition: opacity 1000ms ease !important;
  }

  .gg-nav .gg-nav-link {
    /* Webflow base sets 13px between menu rows — too airy on mobile */
    margin-bottom: 4px !important;
  }

  .gg-nav .gg-nav-link .gg-menu-text {
    color: #fff !important;
    text-align: right !important;
  }
}

/* Tighter share-icon stack: pull the bottom arrow closer to the
   top one, and shrink the gap between the share icon block and
   the triple-dot button. Webflow's mobile defaults are too loose. */
@media screen and (max-width: 479px) {
  .gg-share-icon-top {
    margin-bottom: -15px !important;
  }

  .quick-stack-14 {
    grid-row-gap: 20px !important;
    grid-column-gap: 0px !important;
  }
}

/* Minimum tap-target height for any interactive element on mobile.
   26px is below the WCAG-recommended 44px but matches what feels
   right for this UI's compact menu rows + icon buttons. */
@media (max-width: 768px) {
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .w-button,
  .w-inline-block {
    min-height: 26px;
  }
}

/* ──────────────────────────────────────────────────────────────
   6. INTRO TITLE — match Webflow mobile (#12 + #14)
      - Both heading and subheading center-aligned
      - More vertical space above the block so it doesn't crowd
        against the hero video
      - "Unlike anything else." sized down for phone fit (was 43)
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  #Section-1 .gg-intro-title {
    text-align: center !important;
    margin-top: 64px !important;
    margin-bottom: 24px !important;
  }
  #Section-1 .gg-intro-title-heading {
    text-align: center !important;
    font-size: 43px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #Section-1 .gg-intro-title-subheading {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   7. TAP-TO-PREVIEW for model cards on mobile
   On desktop the hover video plays via :hover. On mobile there's
   no hover, so we mirror the behaviour with a tap: first tap on
   a card flips it into preview mode (hover video opacity 1, X
   button shown, Tap indicator hidden), and the X dismisses
   preview. A second tap on a previewing card lets the underlying
   <a> navigate to signup.chat as normal.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  /* Hold every card and its inner pieces at full opacity. Webflow's
     slider runtime + data-w-id animations occasionally re-apply
     opacity values to .gg-girlcell / .gg-model-card / .gg-data-cell
     after a tap-and-close, leaving adjacent cards looking dimmed
     OR with hidden stat rows. Forcing opacity here on mobile
     defeats that. The data cells start at inline opacity:0.5 in
     the markup which Webflow animates to 1; we short-circuit and
     just keep them at 1 always on mobile. */
  #Section-1 .gg-girlcell,
  #Section-1 .gg-model-card,
  #Section-1 .gg-model-card-relative,
  #Section-1 .gg-data-cell,
  #Section-1 .gg-girl-signatures,
  #Section-1 .gg-card-info-pad {
    opacity: 1 !important;
  }

  /* Hover video — show when previewing. .is-previewing now lives on
     .gg-model-card-relative (the parent of the anchor) so the close
     button can sit outside the <a> and stop driving navigation. */
  .gg-model-card-relative.is-previewing .layer--base.switch {
    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* Hide the Tap indicator so it doesn't obscure the preview */
  .gg-model-card-relative.is-previewing .gg-tap-mobile {
    display: none !important;
  }

  /* Close button — sibling of .gg-model-card, NOT inside it. Outside
     the anchor → tapping it can't trigger href navigation. The
     position:relative on .gg-model-card-relative anchors our
     absolute positioning. 12px icon with surrounding padding so the
     tap target stays usable while the visible glyph is small. */
  .gg-mobile-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    display: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 0;
    padding: 10px;
  }

  .gg-mobile-close .gg-close-icon {
    width: 12px;
    height: auto;
    display: block;
  }

  .gg-model-card-relative.is-previewing .gg-mobile-close {
    display: flex;
  }
}