/* ============================================================
   GUIDED TANZANIA — Mobile Responsive Stylesheet
   Supplements gtl.css and page-inline styles.
   Targets: 1024px | 768px | 480px | 375px
   IMPORTANT: Only overrides — never removes desktop rules.
   ============================================================ */


/* ── 1024px — Tablet Landscape ────────────────────────────── */
@media (max-width: 1024px) {

  /* Global images */
  img { max-width: 100%; height: auto; }

  /* Sections: reduce horizontal padding from 6vw to safe edge */
  .page-hero { padding: 0 1.5rem 5vh; }

  /* Hero actions: allow wrapping */
  .page-hero-actions { gap: 1rem; }

  /* About page: badge would overflow at -1.5rem offset; pull it in */
  .about-badge {
    right: 0;
    bottom: 0;
    position: relative;
    margin-top: 1.5rem;
    display: inline-block;
  }

  /* Phil caption on about page */
  .phil-caption {
    position: static;
    margin-top: 0.75rem;
    display: inline-block;
    left: auto;
    bottom: auto;
  }

  /* Kilimanjaro itinerary: reduce left padding so timeline doesn't clip */
  .itinerary-day { padding-left: 2rem; gap: 1.5rem; }

  /* Routes grid: allow full-width cards earlier */
  .routes-grid { grid-template-columns: 1fr 1fr; }

  /* Expect grid: 1-col on tablet */
  .expect-grid { grid-template-columns: 1fr; }

  /* Gallery strip: 2-col */
  .kili-gallery { grid-template-columns: 1fr 1fr; }

  /* Contact form box padding */
  .contact-form-box { padding: 1.75rem; }

  /* Safari 101, blog, reviews, destinations: any section with 6vw padding */
  .safari-101-wrap,
  .blog-wrap,
  .reviews-page-wrap,
  .destinations-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }

  /* Destinations map section */
  .dest-map-section { overflow: hidden; }

  /* Footer grid: already 2-col in gtl.css but confirm */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  /* Footer bottom */
  .footer-bottom { gap: 0.5rem; }

  /* Footer brand description: don't exceed container */
  .footer-about,
  .footer-brand-desc { max-width: 100%; }

}


/* ── 768px — Tablet Portrait ──────────────────────────────── */
@media (max-width: 768px) {

  /* Navigation */
  nav { padding: 0.9rem 1.2rem; }
  nav.scrolled { padding: 0.75rem 1.2rem; }

  /* Page hero: shorter on portrait tablet */
  .page-hero { height: 65vh; min-height: 460px; padding: 0 1.2rem 4vh; }
  .page-hero-title { font-size: clamp(2.8rem, 9vw, 5rem); }
  .page-hero-sub { font-size: clamp(1rem, 2.5vw, 1.25rem); }

  /* Hero actions stack vertically */
  .page-hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }

  /* Routes grid: single column */
  .routes-grid { grid-template-columns: 1fr; }

  /* Itinerary */
  .itinerary-day {
    grid-template-columns: 70px 1fr;
    gap: 1rem;
    padding-left: 1.5rem;
    padding-right: 1rem;
  }
  .itinerary-timeline::before { left: 0; }

  /* About numbers: 2x2 grid */
  .numbers-grid { grid-template-columns: 1fr 1fr; }

  /* Philosophy grid: single column */
  .philosophy-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Contact page packages */
  .packages-available { grid-template-columns: 1fr; padding: 4rem 1.2rem; }

  /* Footer: single column */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 0.75rem; }

  /* Footer ticker: reduce fade width */
  .ticker::before,
  .ticker::after { width: 48px; }

  /* Form rows: stack at 768 */
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* WhatsApp float: keep clear of content */
  .wa-float { bottom: 1.25rem; right: 1.25rem; width: 50px; height: 50px; }

  /* Buttons: allow text wrap / full-width on small touch targets */
  .btn-primary,
  .btn-outline,
  .btn-gold-outline { padding: 1rem 1.75rem; font-size: 0.7rem; }

}


/* ── 480px — Mobile Landscape ─────────────────────────────── */
@media (max-width: 480px) {

  /* Base font slightly smaller */
  html { font-size: 15px; }

  /* Nav */
  nav { padding: 0.85rem 1rem; }
  nav.scrolled { padding: 0.7rem 1rem; }

  /* Page hero */
  .page-hero { height: 60vh; min-height: 420px; padding: 0 1rem 3.5vh; }
  .page-hero-title { line-height: 0.95; }
  .page-hero-sub { margin-bottom: 1.5rem; }
  .page-hero-actions { gap: 0.75rem; }

  /* Section labels */
  .section-label { font-size: 0.58rem; letter-spacing: 0.25em; }

  /* Kilimanjaro itinerary at 480 */
  .itinerary-day {
    grid-template-columns: 1fr;
    padding-left: 1.5rem;
    padding-bottom: 2rem;
  }
  .itinerary-day-label { padding-bottom: 0.25rem; }

  /* Expect grid */
  .expect-card { padding: 2rem 1.25rem; }

  /* Gallery: maintain 2-col */
  .kili-gallery { grid-template-columns: 1fr 1fr; }

  /* Safari feature cards */
  .sf-info { padding: 2rem 1rem; }
  .sf-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .sf-meta { flex-wrap: wrap; gap: 0.6rem; }

  /* Custom safari section */
  .custom-section { padding: 4rem 1rem; }
  .custom-inner { gap: 2rem; }
  .custom-feature-item { gap: 0.75rem; }
  .custom-feature-icon { width: 34px; height: 34px; flex-shrink: 0; }

  /* Contact form box */
  .contact-form-box { padding: 1.25rem; }

  /* Contact wrap */
  .contact-wrap { padding: 5rem 1rem 4rem; }

  /* Footer contact items: prevent long strings from overflowing */
  .footer-contact-item { word-break: break-word; }
  .footer-contact-val  { font-size: 0.8rem; }
  .footer-links a { font-size: 0.82rem; }

  /* Footer bottom */
  .footer-copy { font-size: 0.68rem; text-align: center; }
  .footer-built { font-size: 0.65rem; }

  /* Philanthropy stats: maintain 3-col but reduce padding */
  .philanthropy-stats { gap: 0.5rem; }
  .phil-stat { padding: 0.9rem 0.5rem; }
  .phil-stat-n { font-size: 1.5rem; }
  .phil-stat-l { font-size: 0.55rem; letter-spacing: 0.1em; }

  /* WhatsApp float: smaller at landscape mobile */
  .wa-float { width: 46px; height: 46px; bottom: 1rem; right: 1rem; }
  .wa-float svg { width: 22px; height: 22px; }

  /* Buttons: full width on smallest touch */
  .kili-cta-actions,
  .about-cta-actions,
  .cta-actions { flex-direction: column; align-items: center; }

  /* Dest grid on contact page */
  .pa-item { padding: 1rem; }
  .pa-item-name { font-size: 0.95rem; }

}


/* ── 375px — Mobile Portrait (smallest target) ────────────── */
@media (max-width: 375px) {

  /* Root: prevent overflow from any fixed element */
  html, body { overflow-x: hidden; }

  /* Base font */
  html { font-size: 14px; }

  /* Nav: tighter */
  nav { padding: 0.75rem 0.9rem; min-height: 60px; }
  .nav-logo-img { height: 62px !important; max-width: 160px; }

  /* Page hero: minimal chrome on smallest screens */
  .page-hero { height: 55vh; min-height: 380px; padding: 0 0.9rem 3vh; }
  .page-hero-content { max-width: 100%; }
  .page-hero-title { font-size: clamp(2.2rem, 10vw, 3.5rem); line-height: 1.0; }
  .page-hero-sub {
    font-size: 1rem;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    max-width: 100%;
  }
  .page-hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .page-eyebrow,
  .page-hero-overline { font-size: 0.58rem; letter-spacing: 0.2em; }

  /* Buttons: full width where in a column stack */
  .btn-primary { width: 100%; justify-content: center; padding: 0.95rem 1.5rem; font-size: 0.68rem; }
  .btn-outline { padding: 0.95rem 1.5rem; font-size: 0.68rem; }

  /* Section components */
  .section-label { font-size: 0.55rem; letter-spacing: 0.2em; gap: 0.6rem; }
  .section-label::before { width: 20px; }

  /* Kilimanjaro hero CTA row */
  .kili-hero-content > div[style*="display:flex"] { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

  /* Kilimanjaro itinerary */
  .itinerary-day {
    grid-template-columns: 1fr;
    padding-left: 1.25rem;
    padding-right: 0.5rem;
    gap: 0.5rem;
  }
  .itinerary-day-meta { flex-wrap: wrap; gap: 0.5rem; }

  /* Routes grid */
  .route-card { padding: 1.75rem 1.25rem; }

  /* Expect cards */
  .expect-card { padding: 1.5rem 1rem; }
  .expect-title { font-size: 0.88rem; }

  /* Gallery: single column at 375 */
  .kili-gallery { grid-template-columns: 1fr; }

  /* Safari feature on safaris index */
  .sf-info { padding: 1.75rem 0.9rem; }
  .sf-meta-item { font-size: 0.65rem; }

  /* Finder: single column on 375 */
  .finder-options { grid-template-columns: 1fr; }
  .finder-option { padding: 1rem; }
  .finder-question { font-size: 1.2rem; }

  /* Reviews track: single column already, just reduce padding */
  .review-card { padding: 1.75rem 1.25rem; }
  .review-card-text { font-size: 0.92rem; }

  /* Contact page */
  .contact-wrap { padding: 4rem 0.9rem 3rem; }
  .contact-form-box { padding: 1rem; }
  .contact-form-title { font-size: 1.1rem; }
  .contact-method { padding: 0.9rem; gap: 0.75rem; }
  .contact-method-icon { width: 34px; height: 34px; flex-shrink: 0; font-size: 0.85rem; }

  /* Footer */
  footer { padding: 3rem 0.9rem 2rem; }
  .footer-grid { gap: 1.75rem; }
  .footer-brand-name { font-size: 1.25rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 0.6rem; }
  .footer-copy { font-size: 0.65rem; }
  .footer-built { font-size: 0.62rem; }
  .footer-col-label,
  .footer-col-title { font-size: 0.55rem; letter-spacing: 0.2em; }
  .footer-links a { font-size: 0.8rem; }
  .footer-contact-item { font-size: 0.78rem; word-break: break-word; }

  /* Ticker: remove heavy fade on small screens */
  .ticker::before,
  .ticker::after { width: 30px; }

  /* Philanthropy stats: 3-col compact */
  .philanthropy-stats { gap: 0.35rem; }
  .phil-stat { padding: 0.75rem 0.3rem; }
  .phil-stat-n { font-size: 1.3rem; }
  .phil-stat-l { font-size: 0.5rem; letter-spacing: 0.08em; }

  /* About numbers: 2-col compact */
  .number-card { padding: 2rem 1rem; }
  .number-n { font-size: 2.2rem; }
  .number-l { font-size: 0.58rem; }

  /* Philosophy quote */
  .philosophy-quote { padding: 1.25rem 1.5rem; }
  .philosophy-quote blockquote { font-size: 1.1rem; }

  /* WhatsApp float: minimal footprint */
  .wa-float { width: 44px; height: 44px; bottom: 0.75rem; right: 0.75rem; }
  .wa-float svg { width: 20px; height: 20px; }

  /* Dest card name: prevent clipping */
  .dest-card-name { font-size: 1.15rem; }
  .dest-card-info { padding: 1rem; }

  /* Guide card names */
  .guide-card-name { font-size: 1.6rem; }
  .guide-card-quote { font-size: 0.9rem; }

  /* pa-list items on contact */
  .pa-item { padding: 0.85rem 0.75rem; }
  .pa-item-name { font-size: 0.88rem; }
  .pa-item-detail { font-size: 0.6rem; }

  /* Form elements */
  .form-input,
  .form-select,
  .form-textarea { padding: 0.7rem 0.85rem; font-size: 0.85rem; }
  .form-label { font-size: 0.62rem; }

}


/* ── GLOBAL MOBILE SAFETY NETS (all breakpoints) ────────────── */

/* All images responsive */
img { max-width: 100%; height: auto; }

/* All iframes (e.g. maps) responsive */
iframe { max-width: 100%; }

/* Prevent any table from causing horizontal scroll */
table { width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Leaflet map overflow containment */
.leaflet-container { max-width: 100% !important; overflow: hidden; }

/* Prevent long URLs / words from breaking layout */
.footer-contact-item,
.footer-links a,
.contact-method-value { word-break: break-word; overflow-wrap: break-word; }

/* Ensure clip-path shapes don't cause horizontal overflow on mobile */
@media (max-width: 480px) {
  .btn-primary { clip-path: none; }
  .intro-img-wrap { clip-path: none; }
  .about-img { clip-path: none; }
  .phil-img-wrap img { clip-path: none; }
  .intro-badge { clip-path: none; border-radius: 2px; }
  .about-badge { clip-path: none; border-radius: 2px; }
}