/*
 * BEAST OF AFRICA — mobile.css
 * Targeted fixes based on live site audit.
 * Loaded on all pages. Minimal — only overrides
 * what the live site actually needs fixed.
 */

/* ═══════════════════════════════════════════════════
   1. NAV — prevent overflow at all widths
═══════════════════════════════════════════════════ */

/* Hard cap the nav to never overflow the header */
.boa-nav {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.boa-nav__list {
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* Tighten nav link padding progressively */
@media (max-width: 1300px) {
  .boa-nav__link { padding: .5rem .62rem !important; font-size: .72rem !important; }
}
@media (max-width: 1150px) {
  .boa-nav__link { padding: .46rem .5rem !important; font-size: .68rem !important; letter-spacing: .03em !important; }
}

/* At 1100px switch to hamburger — beats style.css 900px breakpoint */
@media (max-width: 1100px) {
  .boa-nav       { display: none !important; }
  .boa-hamburger { display: flex !important; }
}
@media (min-width: 1101px) {
  .boa-hamburger { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   2. HEADER — mobile tightening
═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .boa-topbar           { display: none !important; }
  .boa-brand__sub       { display: none !important; }
  .boa-act-wa           { display: none !important; }
  .boa-brand__name      { font-size: 1.05rem !important; }
  .boa-brand__mark img  { width: 38px !important; height: 38px !important; }
  .boa-header__inner    { padding: 0 1rem !important; }
}

@media (max-width: 420px) {
  /* Icon-only CTA on very small phones */
  .boa-act-cta__text  { display: none !important; }
  .boa-act-cta__arrow { display: none !important; }
  .boa-act-cta {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }
  .boa-act-cta__shimmer { display: none !important; }
  /* Show icon only */
  .boa-act-cta::before {
    content: '♡';
    font-size: 1rem;
    color: var(--sand);
  }
}

/* ═══════════════════════════════════════════════════
   3. HOMEPAGE — mobile section fixes
═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero */
  .hp-hero { min-height: 100dvh; }
  .hp-hero__t1  { font-size: clamp(2.6rem,13vw,4.5rem) !important; }
  .hp-hero__t2  { font-size: clamp(.88rem,4vw,1.2rem) !important; }
  .hp-hero__sub { font-size: .82rem !important; max-width: 100% !important; }
  .hp-hero__actions { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .hp-hero__actions .hp-cta { width: 100% !important; justify-content: center !important; }
  .hp-intel { display: none !important; }
  .hp-scroll-cue { display: none !important; }

  /* Trust strip */
  .hp-trust__inner {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 0 !important;
  }
  .hp-trust__item { border-right: 1px solid rgba(200,178,138,.07) !important; }
  .hp-trust__item:nth-child(2n) { border-right: none !important; }

  /* Destination rail */
  .hp-dest-card { min-width: 76vw !important; height: 420px !important; }
  .hp-dest-rail__hint { display: flex !important; }

  /* Itinerary grid */
  .hp-itin-grid { grid-template-columns: 1fr !important; }
  .hp-itin-card--hero { grid-column: auto !important; min-height: 360px !important; }
  .hp-itin-stack { flex-direction: column !important; }
  .hp-itin-custom { min-height: auto !important; flex-direction: column !important; grid-column: auto !important; }

  /* Why section */
  .hp-why-grid { grid-template-columns: 1fr !important; }
  .hp-identity { grid-template-columns: 1fr !important; }
  .hp-identity__imgs { display: none !important; }

  /* Arusha section */
  .hp-arusha__inner { grid-template-columns: 1fr !important; }
  .hp-arusha__cards {
    grid-template-columns: 1fr 1fr !important;
    max-height: 320px !important;
  }

  /* Intel grid */
  .hp-intel-grid { grid-template-columns: 1fr 1fr !important; }
  .hp-mig-strip { grid-template-columns: 1fr !important; column-gap: 0 !important; }

  /* Planner */
  .hp-planner__inner { grid-template-columns: 1fr !important; }

  /* Reviews */
  .hp-reviews-layout { grid-template-columns: 1fr !important; }
  .hp-review-cards { grid-template-columns: 1fr !important; }
  .hp-review-score {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Night CTA */
  .hp-night-cta__inner { grid-template-columns: 1fr !important; }
  .hp-night-cta__actions { flex-direction: column !important; }
  .hp-night-cta__actions .hp-cta { width: 100% !important; justify-content: center !important; }
}

@media (max-width: 480px) {
  .hp-trust__inner { grid-template-columns: 1fr 1fr !important; }
  .hp-arusha__cards { grid-template-columns: 1fr !important; }
  .hp-intel-grid { grid-template-columns: 1fr !important; }
  .hp-qp-chips { flex-direction: column !important; }
  .hp-qp-chip  { width: 100% !important; }
  .hp-review-score__num { flex-direction: column !important; gap: .25rem !important; }
}

/* ═══════════════════════════════════════════════════
   4. CPT ARCHIVE PAGES — mobile
═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Destination archive */
  .dest-grid { grid-template-columns: 1fr !important; }
  .dest-card--featured { grid-column: auto !important; }
  .dest-card { min-height: 340px !important; }
  .dest-filters { gap: .35rem !important; }
  .dest-filter { font-size: .7rem !important; padding: .35rem .8rem !important; }

  /* Itinerary archive */
  .itin-grid { grid-template-columns: 1fr !important; }
  .itin-card { min-height: 340px !important; }
  .itin-card__pricing { flex-wrap: wrap !important; gap: .35rem !important; }
  .cpt-filters--secondary { gap: .35rem !important; }

  /* Lodge archive */
  .lodge-grid { grid-template-columns: 1fr !important; }

  /* Experience archive */
  .exp-grid { grid-template-columns: 1fr 1fr !important; }

  /* Single destination */
  .dest-single__inner { grid-template-columns: 1fr !important; }
  .dest-single__sidebar { position: static !important; }
  .dest-gallery__grid { grid-template-columns: 1fr 1fr !important; }

  /* Single itinerary pricing */
  .itin-pricing__tiers { grid-template-columns: 1fr !important; }
  .itin-pricing__tier { min-height: auto !important; }

  /* CPT hero */
  .cpt-hero { height: clamp(440px,70vh,640px) !important; }
  .cpt-hero__t1 { font-size: clamp(2.4rem,11vw,4rem) !important; }
  .cpt-hero__actions { flex-wrap: wrap !important; }
  .cpt-hero__actions .cpt-btn { width: auto !important; }
}

@media (max-width: 480px) {
  .exp-grid { grid-template-columns: 1fr !important; }
  .dest-gallery__grid { grid-template-columns: 1fr !important; }
  .cpt-hero__actions { flex-direction: column !important; align-items: stretch !important; }
  .cpt-hero__actions .cpt-btn { width: 100% !important; justify-content: center !important; }
  .dest-cta-strip__inner { flex-direction: column !important; align-items: flex-start !important; }
  .dest-cta-strip__actions { flex-direction: column !important; width: 100% !important; }
  .dest-cta-strip__actions .cpt-btn { width: 100% !important; justify-content: center !important; }
}

/* ═══════════════════════════════════════════════════
   5. MOUNTAIN PAGE — mobile
═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .mtn-hero__t1 { font-size: clamp(2.6rem,13vw,4.5rem) !important; }
  .mtn-hero__t2 { font-size: clamp(.88rem,4vw,1.2rem) !important; }
  .mtn-hero__actions { flex-direction: column !important; align-items: flex-start !important; gap: .65rem !important; }
  .mtn-hero__actions .cpt-btn { width: 100% !important; justify-content: center !important; }
  .mtn-live-strip { gap: .35rem !important; }
  .mtn-live-chip { font-size: .64rem !important; padding: .28rem .65rem !important; }
  .mtn-alt-scale { display: none !important; }
  .mtn-map-wrap #mtnLeafletMap { height: 320px !important; }

  .mtn-card__hero { height: 260px !important; }
  .mtn-weather-panel {
    position: relative !important; top: auto !important; right: auto !important;
    margin: 0 !important; border-radius: 0 !important;
    border-left: none !important; border-right: none !important; border-top: none !important;
  }
  .mtn-card__body { grid-template-columns: 1fr !important; }
  .mtn-card__col { border-right: none !important; padding: 1.25rem 1rem !important; }
  .mtn-card__col:not(:first-child) { border-top: 1px solid rgba(200,178,138,.07) !important; }

  .mtn-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .mtn-health-grid { grid-template-columns: 1fr !important; }
  .mtn-calc { grid-template-columns: 1fr !important; }
  .mtn-calc__form { border-right: none !important; border-bottom: 1px solid rgba(200,178,138,.1) !important; }
  .mtn-toll-row { grid-template-columns: 90px 1fr 44px !important; gap: .65rem !important; }
}

@media (max-width: 480px) {
  .mtn-stats-grid { grid-template-columns: 1fr !important; }
  .mtn-months__row { flex-wrap: wrap !important; }
  .mtn-toll-row { grid-template-columns: 1fr !important; }
  .mtn-toll-o2 { display: none !important; }
  .mtn-calc__chips { flex-direction: column !important; }
  .mtn-chip { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════
   6. GLOBAL TOUCH & ACCESSIBILITY FIXES
═══════════════════════════════════════════════════ */

/* Minimum touch targets */
@media (max-width: 768px) {
  .hp-cta, .cpt-btn, .enq-btn,
  .dest-filter, .cpt-filter,
  .enq-chip, .mtn-chip,
  .boa-act-cta, .boa-act-wa,
  .boa-drawer__link, .boa-drawer__wa, .boa-drawer__plan {
    min-height: 44px !important;
  }

  /* Larger tap targets on cards */
  .dest-card__cta, .itin-card__actions .cpt-btn,
  .lodge-card__actions .cpt-btn, .exp-card__actions .cpt-btn {
    min-height: 44px !important;
    padding: .75rem 1.25rem !important;
  }

  /* Input fields */
  .enq-input, .enq-textarea, .mtn-select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 48px !important;
  }
}

/* Prevent iOS text size adjustment */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Smooth momentum scrolling on iOS */
.hp-dest-rail,
.hp-arusha__cards,
.enq-progress,
.mtn-live-strip {
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════
   7. SPEED — reduce paint on mobile
═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Remove expensive backdrop-filters on mobile */
  .glass-deep {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8,14,12,.94) !important;
  }

  /* Reduce animation complexity */
  .hp-hero__veil--ambient {
    animation: none !important;
  }

  /* Disable parallax/transform on cards for smoother scroll */
  .dest-card:hover,
  .itin-card:hover,
  .lodge-card:hover,
  .exp-card:hover,
  .hp-dest-card:hover {
    transform: none !important;
  }

  /* Reduce shadow complexity */
  .boa-act-cta {
    box-shadow: none !important;
  }

  /* Will-change only on things that animate */
  .boa-header {
    will-change: transform !important;
  }
  .dest-card__img,
  .itin-card__img,
  .lodge-card__img {
    will-change: auto !important;
    transition: filter .3s !important;
  }
}

/* ═══════════════════════════════════════════════════
   8. DRAWER — mobile improvements
═══════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .boa-drawer__panel { width: 100% !important; border-left: none !important; }
}

.boa-drawer__list a,
.boa-drawer__link {
  min-height: 52px !important;
  font-size: .92rem !important;
}

/* ═══════════════════════════════════════════════════
   9. PRINT
═══════════════════════════════════════════════════ */

@media print {
  #boaVideoBg, .boa-header, .hp-intel,
  .boa-drawer, .scroll-progress,
  .enq-side, .hp-scroll-cue { display: none !important; }
  body { background: white !important; color: black !important; }
  a { color: black !important; }
}