/* =============================================================
   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: 180px !important;
    height: 104px !important;
    margin-top: 16px !important;
    margin-left: 16px !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: 140px !important;
    height: 81px !important;
    margin-top: 12px !important;
    margin-left: 12px !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;
  }

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

  /* Each slide becomes an inline flex item for the scroll */
  #Section-1 .w-slide {
    width: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    z-index: auto !important;
  }

  /* Inner container is transparent */
  #Section-1 .gg-slider-innercontainer {
    width: auto !important;
    display: flex !important;
  }

  /* The card grid becomes a flex row */
  #Section-1 .gg-girl-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    width: auto !important;
    margin-top: 40px !important;
    padding: 0 !important;
  }

  /* Each card snaps and takes up most of the viewport */
  #Section-1 .gg-girlcell {
    flex: 0 0 75vw !important;
    scroll-snap-align: center !important;
    min-width: 0 !important;
    max-width: 75vw !important;
  }

  /* First card gets left padding so it's not flush with edge */
  #Section-1 .w-slide:first-child .gg-girl-cards {
    padding-left: 20px !important;
  }

  /* Last card gets right padding */
  #Section-1 .w-slide:last-child .gg-girl-cards {
    padding-right: 20px !important;
  }

  /* 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;
  }
}