/* ===================================================================
   Sun & Sand Tours — Mobile Audit Fixes
   File: assets/css/mobile.css
   Enqueued AFTER sst-pages in functions.php (handle: sst-mobile)
   
   ALL rules are inside max-width media queries — desktop untouched.
   Breakpoints reuse existing: 980px, 760px, 640px, 460px.
   =================================================================== */

/* ------------------------------------------------------------------
   1. OVERFLOW GUARD
   Prevent any content from causing horizontal scroll at any width.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  html, body {
    overflow-x: hidden;
  }
  /* Contain the outer page wrapper too */
  .site-header,
  .site-header__inner,
  .urgent-strip__inner,
  .hero__inner,
  .ss-container {
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------
   2. HEADER / NAV  (≤ 760px)
   Ensure logo + "Book now" don't crowd burger on 360px.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .site-header__inner {
    gap: var(--space-3);
    padding-inline: var(--gutter);
  }
  /* Make sure logo image scales */
  .site-header__logo img {
    max-height: 40px;
    width: auto;
  }
  /* Book now btn in header — shrink slightly on small screens */
  .site-header__actions .btn {
    padding: 9px 16px;
    font-size: var(--fs-sm);
  }
  /* Burger tap target ≥ 44×44px */
  .site-header__burger {
    padding: 9px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Mobile nav links tap target ≥ 44px height */
  .site-nav-mobile a {
    padding: 14px 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .site-nav-mobile .btn {
    min-height: 44px;
  }
  /* Prevent mobile nav from overflowing viewport */
  .site-nav-mobile {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Extra-tight: 360px — ensure logo + CTA don't wrap over burger */
@media (max-width: 460px) {
  .site-header__actions .btn:not(.site-header__actions .btn:last-child) {
    display: none; /* hide any secondary header CTA, keep primary */
  }
  .site-header__logo img {
    max-height: 36px;
  }
}

/* ------------------------------------------------------------------
   3. TAP TARGETS ≥ 44×44px
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  /* Tour card favourite button: was 36×36 */
  .tour-card__fav {
    width: 44px;
    height: 44px;
  }
  .tour-card__fav i {
    width: 20px;
    height: 20px;
  }

  /* Gallery filter chips */
  .gallery-filters button {
    padding: 11px 18px;
    min-height: 44px;
  }

  /* Footer social icons: was 38×38 */
  .site-footer__social a {
    width: 44px;
    height: 44px;
  }

  /* Footer links — add vertical padding for tap area */
  .site-footer__col a,
  .site-footer__contact span {
    padding: 8px 0;
    min-height: 44px;
  }

  /* Form inputs/selects already ≥ 44px via 12px padding + 16px font,
     but double-check select height */
  .field select,
  .field input,
  .field textarea {
    min-height: 44px;
  }
}

/* ------------------------------------------------------------------
   4. HERO (home)
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  /* Stack to one column: copy above, booking card below */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero__copy {
    max-width: 100%;
  }
  .booking-card {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .hero__inner {
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3.5rem);
  }
  /* Trust bar items wrap at smaller gaps */
  .hero__trust {
    gap: var(--space-4);
  }
}

@media (max-width: 460px) {
  /* Booking card comfortable on 360px */
  .booking-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }
  .booking-card__offer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ------------------------------------------------------------------
   5. URGENT STRIP / COUNTDOWN  
   Wrap pills; prevent overflow.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .urgent-strip__inner {
    flex-direction: column;
    gap: var(--space-3);
    padding-block: 12px;
  }
  .cd {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  .scarcity {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 460px) {
  .cd__cell {
    min-width: 38px;
    padding: 5px 6px;
  }
  .cd__cell b {
    font-size: var(--fs-md);
  }
}

/* ------------------------------------------------------------------
   6. TOUR CARDS / GRID
   1 col on phones, 2 on tablet already handled.
   Fix card foot from colliding price + CTA.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .tour-card__foot {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .tour-card__cta {
    white-space: nowrap;
  }
}

@media (max-width: 460px) {
  /* Ensure cards have comfortable padding on 360px */
  .tour-card__body {
    padding: var(--space-4);
  }
}

/* ------------------------------------------------------------------
   7. TOUR DETAIL
   .detail already stacks to 1-col at 980px. Confirm book-box is static.
   Gallery fix on small screens.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  /* book-box already static via pages.css — add comfortable spacing */
  .book-box {
    margin-top: var(--space-5);
  }
  /* detail gallery: 3-col → 2-col */
  .detail__gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 140px 140px;
    max-width: 100%;
    overflow: hidden;
  }
  .detail__gallery .imgph:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  /* pages.css already handles detail__gallery at 640px — reinforce */
  .detail__gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 6px;
  }
}

@media (max-width: 460px) {
  /* Single column gallery on small phones */
  .detail__gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .detail__gallery .imgph:first-child {
    grid-column: span 1;
  }
  .detail__gallery .imgph {
    aspect-ratio: 16/9;
    min-height: 0;
  }
  .detail h1 {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }
}

/* ------------------------------------------------------------------
   8. GALLERY PAGE
   4→3→2→1 columns handled in pages.css.
   Fix lightbox on mobile: buttons inset so they don't go off-screen.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  /* Lightbox: keep nav buttons fully on-screen */
  .lightbox {
    padding: 12px;
  }
  .lightbox__inner {
    width: 100%;
  }
  .lightbox__close {
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
  }
  .lightbox__nav {
    width: 44px;
    height: 44px;
  }
  .lightbox__nav--prev {
    left: 4px;
  }
  .lightbox__nav--next {
    right: 4px;
  }
  .lightbox__close i,
  .lightbox__nav i {
    width: 22px;
    height: 22px;
  }
  /* Lightbox stage: use full screen height */
  .lightbox__stage {
    aspect-ratio: unset;
    max-height: 70vh;
  }
  /* Lock body scroll when lightbox open — JS sets .lightbox-open class */
  body.lightbox-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   9. CONTACT FORM
   form-grid already collapses at 640px in pages.css.
   WhatsApp button full-width on phone.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .form-grid {
    gap: var(--space-3);
  }
  /* Ensure submit button is full-width */
  .form-grid .btn--full,
  .contact-grid .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   10. FOOTER
   Already collapses at 760px. Fine-tune spacing and legal links.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .site-footer__top {
    gap: var(--space-5);
  }
  .site-footer__brand p {
    max-width: 100%;
  }
  /* Legal links: wrap and centre */
  .site-footer__bottom {
    text-align: center;
  }
  .site-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }
}

/* ------------------------------------------------------------------
   11. TRUSTBAR
   2-col at 980px (pages.css). Stack to 1-col on phones.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .trustbar__inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 460px) {
  .trustbar__inner {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   12. LISTING PAGE SIDEBAR FILTERS
   Already goes static row at 980px (pages.css fix). 
   Make filter pills wrap nicely on phones.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .filters {
    gap: var(--space-3);
  }
  .filters__group {
    flex: 0 0 auto;
    min-width: 140px;
  }
}

/* ------------------------------------------------------------------
   13. TYPOGRAPHY SAFETY
   Ensure body text never drops below 16px (prevent iOS zoom on focus).
   H1 clamp already safe (min 2.75rem) — just guard edge cases.
   ------------------------------------------------------------------ */
@media (max-width: 460px) {
  /* Body font stays at 16px minimum — the token is 1rem, fine.
     Ensure form inputs won't zoom iOS (font-size ≥ 16px). */
  .field input,
  .field select,
  .field textarea {
    font-size: 1rem; /* 16px — prevent iOS auto-zoom */
  }

  /* Eyebrow text at 0.8125rem is fine for labels, but nav mobile stays readable */
  .site-nav-mobile a {
    font-size: var(--fs-base);
  }
}

/* ------------------------------------------------------------------
   14. IMAGE SAFETY
   img { max-width:100% } is in base.css already.
   Ensure hero bg images fill correctly.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  .hero__bg,
  .page-hero {
    /* ensure bg covers without letterboxing */
    background-size: cover;
    background-position: center;
  }
  /* Prevent images inside cards from overflowing */
  .tour-card__media img,
  .gallery-item img {
    max-width: 100%;
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   15. MISC OVERFLOW FIXES
   Catch any remaining wide elements.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  /* Itinerary line on mobile */
  .itinerary {
    padding-left: var(--space-5);
  }
  /* Detail includes list */
  .detail__meta {
    gap: 8px;
  }
  /* CTA band actions stack on phone */
  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-band__actions .btn {
    width: 100%;
    justify-content: center;
  }
  /* Section head row: stack to column on tablet/phone */
  .section-head--row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

@media (max-width: 460px) {
  /* Reviews summary: single column already. Tweak big score display. */
  .reviews-summary__score .big {
    font-size: 3.5rem;
  }
  /* Viewing/scarcity pills on cards: wrap if needed */
  .tour-card__meta {
    gap: 6px;
  }
  .viewing {
    font-size: var(--fs-xs);
  }
  /* Prevent tag overflow */
  .tag {
    white-space: normal;
    max-width: 100%;
  }
}