/*
 * Safari Yetu Adventures — Mobile Optimisation Layer
 * Loaded on every public page after page-specific CSS.
 * Fixes: cursor on touch, section padding, hero heights,
 * typography floors, intl grid, blog, gallery, footer.
 */

/* ══════════════════════════════════════════════════
   1. TOUCH DEVICES — restore cursor & tap targets
══════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Restore default cursor — custom cursor is invisible on touch */
  body, a, button, [role="button"],
  .btn-pill, .nav__cta, .nav__hamburger,
  .dp-card__toggle, .pkg-tabs__btn,
  .dh__thumb, .gal-filter__btn { cursor: auto !important; }

  /* Hide the custom cursor elements entirely on touch */
  .cursor, .cursor-follower { display: none !important; }

  /* Minimum tap target size — 44×44px */
  .nav__hamburger { min-width: 44px; min-height: 44px; }
  .btn-pill { min-height: 44px; }
  .dp-card__toggle { min-width: 44px; min-height: 44px; }
  .pkg-tabs__btn { min-height: 44px; padding: 12px 20px; }
  .dh__thumb { min-height: 40px; padding: 10px 16px; }
  .gal-filter__btn { min-height: 44px; }
  .mobile-menu__close { min-width: 44px; min-height: 44px; }
}

/* ══════════════════════════════════════════════════
   2. INTERMEDIATE BREAKPOINT — 768px
   (tablets, large phones landscape)
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Section padding: 110px → 80px (not jumping straight to 64px) */
  .section { padding: 80px 0; }

  /* Footer strip height */
  .site-footer__hero-strip { height: 360px; }

  /* Service page hero title */
  .sp-hero__title { font-size: clamp(2.4rem, 8vw, 4rem) !important; }

  /* Blog masthead */
  .masthead { padding: 100px 20px 48px; }
  .masthead__title { font-size: clamp(2.4rem, 9vw, 5rem); }

  /* Packages hero stat group */
  .pk-hero__stat-group { flex-wrap: wrap; gap: 12px; }

  /* Destinations intl grid — 3 col at 768px */
  .dp-intl__grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dp-intl__grid .dp-intl__card { height: 360px; min-height: 360px; }
}

/* ══════════════════════════════════════════════════
   3. SMALL PHONES — 480px
   (most phones in portrait)
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Section padding */
  .section { padding: 56px 0; }
  .container { padding: 0 16px; }

  /* Typography — tighter floors */
  .section-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .eyebrow { font-size: 9px; letter-spacing: 2.5px; }

  /* Nav */
  .nav__inner { padding: 0 12px; }
  .nav__logo img { height: 44px; }

  /* Page hero */
  .page-hero { height: 38vh; min-height: 240px; }
  .page-hero__title { font-size: clamp(1.6rem, 8vw, 2.4rem); }

  /* Buttons */
  .btn-pill { padding: 11px 18px; font-size: 12px; }
  .btn-pill__icon { width: 24px; height: 24px; }

  /* Mobile menu */
  .mobile-menu nav a { font-size: 1.5rem; }
  .mobile-menu nav { gap: 16px; }

  /* Footer */
  .site-footer__hero-strip { height: 260px; }
  .site-footer__hero-text h2 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .site-footer__inner { padding: 0 16px 32px; }
  .site-footer__bottom { padding: 16px; }

  /* ── Homepage ── */
  .hero__title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__actions .btn-pill { width: 100%; justify-content: center; }

  /* ── Packages page ── */
  .pk-hero__title { font-size: clamp(2rem, 9vw, 3.5rem); }
  .pk-hero__stat-group { gap: 8px; }
  .pk-hero__stat { padding: 10px 14px; }
  .pk-hero__stat-val { font-size: 1.4rem; }
  .pkGrid, #pkGrid { grid-template-columns: 1fr !important; }

  /* ── Destinations page ── */
  .dh__title { font-size: clamp(2rem, 9vw, 3.5rem); }
  .dh__thumbs { gap: 5px; padding: 0 16px 20px; }
  .dh__thumb { font-size: 9px; padding: 6px 10px; }
  .dp__grid { grid-template-columns: 1fr; gap: 14px; }
  .dp-card__img { height: 180px; }
  .dp-intl__grid { grid-template-columns: 1fr !important; }
  .dp-intl__grid .dp-intl__card { height: 320px; min-height: 320px; }
  .dp-intl__track .dp-intl__card { width: 260px; height: 320px; }
  .dp-intl { padding: 64px 0 48px; }
  .dp-intl__top { padding: 0 16px; margin-bottom: 28px; }
  .dp-intl__stage { padding: 0 16px; }

  /* ── Blog page ── */
  .masthead { padding: 90px 16px 36px; }
  .masthead__title { font-size: clamp(2rem, 10vw, 3.5rem); }
  .j-article { gap: 12px; padding: 20px 0; }
  .j-article__num { font-size: 10px; width: 28px; }
  .j-article__title { font-size: 1rem; }
  .j-article__deck { font-size: 12px; }
  .j-article__img { height: 160px; }
  .j-pagination { gap: 4px; margin-top: 32px; }
  .j-pagination__item { padding: 6px 10px; font-size: 12px; }

  /* ── Gallery page ── */
  .gal-hero { height: 50vh; min-height: 280px; }
  .gal-hero__title { font-size: clamp(2rem, 9vw, 3.5rem); }
  .gal-grid { columns: 1 !important; }
  .gal-item { break-inside: avoid; }
  .gal-filter { padding: 0 16px; gap: 6px; }
  .gal-filter__btn { padding: 8px 14px; font-size: 11px; min-height: 40px; }

  /* ── About page ── */
  .about-hero__title { font-size: clamp(2rem, 9vw, 3.5rem); }
  .about-values__grid { grid-template-columns: 1fr; }
  .about-stats__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .astat__num { font-size: 2rem; }

  /* ── Contact page ── */
  .contact-hero__title { font-size: clamp(1.8rem, 8vw, 3rem); }
  .contact-form { padding: 24px 16px; }

  /* ── Services page ── */
  .sp-hero__title { font-size: clamp(1.8rem, 8vw, 3rem) !important; }
  .sp-highlights__grid { grid-template-columns: 1fr; }
  .sp-process__steps { grid-template-columns: 1fr; }

  /* ── Package detail / blog post ── */
  .bp-hero__title { font-size: clamp(1.8rem, 8vw, 3rem); }
  .bp-body { padding: 40px 16px 64px; gap: 40px; }
  .pkg-hero-price strong { font-size: 1.3rem; }
  .pkg-glance { gap: 10px; }
  .pkg-tabs__nav { gap: 4px; }
  .pkg-tabs__btn { font-size: 11px; padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════
   4. VERY SMALL PHONES — 360px
   (Android budget phones, older iPhones)
══════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .section-title { font-size: clamp(1.4rem, 8vw, 2rem); }
  .nav__logo img { height: 40px; }
  .mobile-menu nav a { font-size: 1.3rem; }
  .hero__title, .pk-hero__title, .dh__title,
  .masthead__title, .gal-hero__title,
  .bp-hero__title, .sp-hero__title { font-size: clamp(1.6rem, 9vw, 2.4rem) !important; }
  .btn-pill { padding: 10px 16px; font-size: 11px; }
  .site-footer__hero-strip { height: 220px; }
  .dp-intl__grid { grid-template-columns: 1fr !important; }
  .dp-intl__grid .dp-intl__card { height: 280px; min-height: 280px; }
}

/* ══════════════════════════════════════════════════
   5. LANDSCAPE PHONES — short viewport
══════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .page-hero, .dh, .pk-hero, .gal-hero { min-height: 280px; height: 80vh; }
  .mobile-menu { padding-top: 60px; }
  .mobile-menu nav { gap: 10px; }
  .mobile-menu nav a { font-size: 1.2rem; }
}