/* =========================================================
   Ombe Guestfarm & Safari — Mobile / Responsive overrides
   Loaded LAST so it overrides desktop defaults without
   altering the design system (colors, fonts, aesthetic).
   ========================================================= */

/* ---------- Universal safety: no horizontal overflow ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, picture, svg, canvas { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }

/* Drawer bottom logo — hidden on desktop */
.nav-drawer-logo { display: none; }

/* =========================================================
   TABLET AND BELOW  (≤ 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .section-dots { display: none !important; }
}

/* =========================================================
   TABLET  (≤ 900px)
   ========================================================= */
@media (max-width: 900px) {

  /* ---------- Tighten section spacing on mobile ---------- */
  :root {
    --section-pad: clamp(1.75rem, 5vw, 3rem);
    --gap: clamp(0.75rem, 2.5vw, 1.25rem);
  }
  section { padding-block: var(--section-pad) !important; }
  /* Hero section should sit flush against the top — no padding */
  #home { padding-block: 0 !important; }
  /* These sections use inner wrappers with their own padding — keep the section itself flush */
  #hunting,
  #about { padding-block: 0 !important; }
  /* Trim last-child margins that create dead space at the bottom of sections */
  section > *:last-child,
  .container > *:last-child,
  section > .container > *:last-child,
  .about-hosts-section > *:last-child,
  .foundation-section > *:last-child { margin-bottom: 0 !important; }
  /* Wrapper sections with padding-block */
  .about-hosts-section,
  .foundation-section,
  .catering-section,
  .accommodation-section,
  .hunt-methods-section,
  .leg-timeline-wrap,
  #activities,
  #travel,
  #contact {
    padding-block: var(--section-pad) !important;
  }
  /* Leg timeline had its own large padding */
  .leg-timeline-wrap { padding-block: clamp(2rem, 6vw, 3.5rem) !important; }

  /* Welcome + stats bar paddings were hardcoded to 5rem / 2.75rem */
  .welcome-section { padding-block: var(--section-pad) !important; gap: 1.5rem !important; }
  .welcome-video-wrap { height: auto !important; aspect-ratio: 16/9; }
  .stats-bar { padding-block: 1.25rem !important; }
  /* Butchery feature */
  .sustain-butchery-content { margin-bottom: 1.25rem !important; }
  .sustain-butchery-imgs img {
    height: auto !important;
    aspect-ratio: 4/3;
    width: 100%;
    object-fit: cover;
  }

  /* Other hardcoded large paddings/margins throughout sections */
  .leg-hosts { padding-top: 1.5rem !important; padding-bottom: 1rem !important; gap: 1.5rem !important; }
  .gen-row + .gen-row { padding-top: 1.5rem !important; }
  .social-strip { margin-top: 1.5rem !important; padding-top: 1.25rem !important; }
  .site-footer { margin-top: 1.5rem !important; padding-top: 1.25rem !important; }

  /* Generic: any inline reveal/section with big top padding */
  .container { padding-block: 0; }
  section > .container:first-child { padding-top: 0; }

  /* ---------- Nav: hamburger → top right ---------- */
  .nav-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .nav-hamburger {
    margin-left: auto !important;
    order: 3 !important;
    position: relative;
    z-index: 1005 !important;
  }
  .nav-logo { order: 1; }
  .nav-links-wrap { order: 2; }

  /* Drawer: hidden by default — no rendering when closed */
  .nav-links-wrap:not(.open) { display: none !important; }
  /* Drawer covers full screen when open — solid background, above header */
  .nav-links-wrap.open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--dark-deep) !important;
    z-index: 1003 !important;
    padding-top: calc(var(--nav-height) + 1rem) !important;
    overflow-y: auto !important;
  }
  /* Hide the in-header logo when drawer is open (prevents logo overlap) */
  .nav-links-wrap.open ~ .nav-logo,
  .nav-inner:has(.nav-links-wrap.open) .nav-logo { visibility: hidden; }

  /* Bottom logo inside drawer */
  .nav-drawer-logo {
    display: none;
    margin-top: auto;
    padding-top: 2rem;
    text-align: center;
    width: 100%;
  }
  .nav-links-wrap.open .nav-drawer-logo { display: block; }
  .nav-drawer-logo img {
    max-width: 140px;
    height: auto;
    opacity: 0.9;
  }

  /* ---------- Hero ---------- */
  .hero-content { padding-inline: 1rem; }
  .hero-content h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .hero-content p { white-space: normal !important; max-width: 100%; }

  /* ---------- Section padding trim ---------- */
  section { padding-block: clamp(2.5rem, 7vw, 4rem); }

  /* ---------- Legacy/hero hosts ---------- */
  .leg-hosts {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem;
  }
  .leg-hosts-img { width: 100%; max-width: 480px; margin-inline: auto; }
  .leg-landscape-duo { grid-template-columns: 1fr !important; gap: 0.75rem; }

  /* ---------- Hunting methods ---------- */
  .hunt-methods-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .hunt-method-imgs { grid-template-columns: 1fr 1fr !important; }

  /* ---------- Accommodation ---------- */
  .accom-strip--three,
  .accom-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .accom-grid img.wide { grid-column: auto !important; }

  /* ---------- Sustainability ---------- */
  .sustain-img-pair,
  .sustain-pillars,
  .sustain-pillars--three,
  .sustain-butchery,
  .sustain-butchery-imgs,
  .sustain-wildlife {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .sustain-pillar {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 1rem;
  }
  .sustain-pillar:last-child { border-bottom: none; }

  /* ---------- Day flow (catering) ---------- */
  .day-flow-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
  .day-segment { grid-template-columns: 1fr !important; }
  .day-segment > img,
  .day-segment .day-segment-img2 { width: 100% !important; height: auto !important; aspect-ratio: 4/3; }

  /* ---------- About hosts ---------- */
  .about-hosts {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  /* Override desktop absolute-positioned overlapping photos */
  .about-hosts-imgs {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    height: auto !important;
  }
  .about-hosts-imgs img,
  .about-hosts-imgs img:first-child,
  .about-hosts-imgs img:nth-child(2) {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
    border: none !important;
    object-fit: cover;
  }
  .about-farm-strip { grid-template-columns: 1fr 1fr !important; gap: 0.5rem; }

  /* ---------- Generation timeline ---------- */
  .gen-row,
  .gen-row--reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem;
  }
  .gen-imgs,
  .gen-content { order: unset !important; width: 100%; }
  .gen-img-grid--2,
  .gen-img-grid--4 { grid-template-columns: 1fr 1fr !important; }
  .gen-year-badge { font-size: 2.5rem !important; }
  .gen-quote { font-size: 0.95rem; padding-left: 1rem; }

  /* ---------- Foundation ---------- */
  .foundation-pillars { grid-template-columns: 1fr 1fr !important; }
  .foundation-mosaic {
    grid-template-columns: repeat(3, 1fr) !important;
    height: auto !important;
  }
  .foundation-mosaic img { aspect-ratio: 4/3; height: auto !important; }
  .foundation-feature { grid-template-columns: 1fr !important; }

  /* ---------- Travel ---------- */
  .travel-two-col {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .travel-visa-row { grid-template-columns: 1fr !important; gap: 1rem; }
  .firearms-rental-row { grid-template-columns: 1fr !important; }
  .included-grid { grid-template-columns: 1fr !important; }
  .travel-tabs-bar { flex-wrap: wrap; gap: 0.25rem; }
  .travel-tab-btn { flex: 1 1 45%; text-align: center; }

  /* Booking & Rates tab inline grids — force stack */
  .travel-panel > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .travel-panel > div[style*="grid-template-columns"] > * { width: 100%; }

  /* Contact scenic strip (inline 3-col) */
  .contact-scenic[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ---------- Contact ---------- */
  .contact-layout {
    flex-direction: column !important;
    gap: 1.25rem;
  }
  .contact-map,
  .contact-map iframe { min-height: 320px !important; }
  .contact-info-row {
    flex-direction: column !important;
    gap: 1.75rem;
  }
  .contact-info-block { width: 100%; margin-bottom: 0; }

  /* ---------- Activities ---------- */
  .act-row--4 { grid-template-columns: 1fr 1fr !important; }
  .act-row--1 .act-card,
  .act-row--2 .act-card,
  .act-row--4 .act-card { height: auto !important; min-height: 320px; }
  /* Children activity card: stack mosaic above text */
  .act-card--children {
    grid-template-columns: 1fr !important;
  }
  .act-children-mosaic { grid-template-columns: 1fr 1fr !important; }
  .act-children-text {
    padding: 1.5rem 1.25rem !important;
  }

  /* ---------- Trophies ---------- */
  .trophy-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---------- Footer ---------- */
  .footer-inner { grid-template-columns: 1fr !important; gap: 1.5rem; text-align: center; }
  .footer-logo-col { margin-inline: auto; }
}

/* =========================================================
   PHONE  (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {
  .container { width: min(var(--container), 100% - 1.5rem); }

  /* Typography: slightly smaller headers */
  h1 { font-size: clamp(1.6rem, 6vw, 2.25rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }

  /* Info blocks */
  .info-block { padding: 1rem 1.1rem; }

  /* Form inputs: 16px font prevents iOS autozoom */
  .contact-form input,
  .contact-form textarea,
  .contact-form select { font-size: 16px; }
  .form-row { grid-template-columns: 1fr !important; }

  /* Activities full width */
  .act-row--2,
  .act-row--4 { grid-template-columns: 1fr !important; }

  /* Fade container inside act cards remains static */
  .act-card .fade-container img { aspect-ratio: 4/3; }

  /* Hunt method imgs stack vertically too */
  .hunt-method-imgs { grid-template-columns: 1fr !important; gap: 0.5rem; }

  /* About farm strip tighter */
  .about-farm-strip { grid-template-columns: 1fr !important; }

  /* Foundation */
  .foundation-pillars { grid-template-columns: 1fr !important; }
  .fp-card-img,
  .fp-card-slider { height: 220px !important; }
  .foundation-mosaic { grid-template-columns: 1fr 1fr !important; }

  /* Gen image grids: keep 2 cols so they're visible but reasonable */
  .gen-img-grid--4 { grid-template-columns: 1fr 1fr !important; }

  /* Trophy grid → 1 col */
  .trophy-grid { grid-template-columns: 1fr !important; }

  /* Tables scroll horizontally */
  .rates-table-wrap,
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 0.85rem; }

  /* Hero scroll arrow tighter */
  .hero-scroll-arrow { bottom: 0.5rem !important; }

  /* Video wrapper */
  .video-wrapper { max-width: 100%; }
  .video-wrapper video { width: 100%; height: auto; }

  /* Legacy timeline: stacked centered cards */
  .leg-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.25rem;
    grid-template-columns: none !important;
  }
  .leg-timeline::before { display: none !important; }
  .leg-tl-node {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0 1rem !important;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  .leg-tl-top {
    height: auto !important;
    padding-bottom: 0 !important;
  }
  .leg-tl-photo,
  .leg-tl-founding {
    width: 180px !important;
    height: 240px !important;
    max-width: 70vw;
  }
  .leg-tl-dot { margin: 0.75rem 0 !important; }
  .leg-tl-bottom { width: 100%; }

  /* Welcome/method generic grids */
  .welcome-grid,
  .method-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
  .method-imgs { grid-template-columns: 1fr !important; }

  /* Tab bar: scrollable */
  .travel-tabs-bar,
  .tabs-bar { overflow-x: auto; flex-wrap: nowrap; }
  .travel-tab-btn,
  .tab-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Included cards */
  .included-card { padding: 1rem; }

  /* Sustain butchery images */
  .sustain-butchery-imgs { grid-template-columns: 1fr !important; }

  /* Contact scenic strip → 1 col on phones */
  .contact-scenic[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Rates table left-column images: stack side-by-side to save vertical space */
  .travel-panel > div[style*="grid-template-columns"] > div[style*="flex-direction:column"] {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .travel-panel > div[style*="grid-template-columns"] > div[style*="flex-direction:column"] > img {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }
}

/* =========================================================
   SMALL PHONE  (≤ 600px)
   ========================================================= */
@media (max-width: 600px) {
  .container { width: min(var(--container), 100% - 1rem); }

  /* All multi-col trophy and predator grids collapse */
  #predators-grid,
  #plains-game-grid,
  .trophy-grid,
  .timeline,
  .gens-grid { grid-template-columns: 1fr !important; }

  /* Keep children mosaic as 2x2 even on small phones (4 images look better square) */
  .act-children-mosaic { grid-template-columns: 1fr 1fr !important; }

  /* Hero buttons stack full width */
  .hero-btns,
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .hero-btns .btn,
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Foundation mosaic 1 col */
  .foundation-mosaic { grid-template-columns: 1fr !important; }

  /* Gen year badge smaller */
  .gen-year-badge { font-size: 2rem !important; }
  .gen-img-grid--2,
  .gen-img-grid--4 { grid-template-columns: 1fr 1fr !important; }

  /* Stat counters */
  .stats-row,
  .stat-grid { grid-template-columns: 1fr 1fr !important; }

  /* Floating buttons */
  .whatsapp-fab,
  .back-to-top {
    right: 0.75rem !important;
    width: 48px !important;
    height: 48px !important;
  }
  .back-to-top { bottom: 0.75rem !important; }
  .whatsapp-fab { bottom: 4.5rem !important; }

  /* Footer */
  .site-footer { padding: 1.5rem 0; font-size: 0.85rem; }
  .footer-inner { padding: 0 1rem; }

  /* Legacy timeline photos on small phones — slightly smaller */
  .leg-tl-photo,
  .leg-tl-founding { width: 150px !important; height: 200px !important; }

  /* Trophy card */
  .trophy-card { max-width: 100%; }
  .trophy-card-img,
  .trophy-card-slider { height: 220px !important; }

  /* Hero height */
  .hero { min-height: 85vh; }
}

/* =========================================================
   EXTRA SMALL  (≤ 400px)
   ========================================================= */
@media (max-width: 400px) {
  html { font-size: 15px; }
  .section-label { letter-spacing: 0.12em; }
  .nav-logo img { max-height: 38px; width: auto; }

  /* Inputs/buttons take full width */
  .btn { width: 100%; justify-content: center; }

  /* Tabs full width */
  .travel-tab-btn,
  .tab-btn { flex: 1 1 100%; }

  /* Day slider dots larger */
  .day-slider-dot { width: 10px; height: 10px; }

  /* Smaller headings */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }

  /* Reduce info-block padding further */
  .info-block { padding: 0.85rem 1rem; }

  .gen-year-badge { font-size: 1.75rem !important; }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn, .tab-btn, .travel-tab-btn, .read-more-btn, .trophy-toggle {
    min-height: 40px;
  }
  a.nav-link, .nav-links a {
    display: flex;
    align-items: center;
  }

  /* Disable hover transforms on touch (prevents stuck hover state) */
  .card:hover,
  .act-card:hover,
  .trophy-card:hover,
  .hunt-method-card:hover,
  .sustain-wild-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .sustain-wild-card:hover img { transform: none !important; }

  /* Activity cards: tap-to-toggle description (no hover on touch) */
  .act-card {
    cursor: pointer;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* Image container sits on top, natural height */
  .act-card .fade-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/3;
    flex-shrink: 0;
  }
  /* Overlay becomes a normal block below the image — card grows to fit description */
  .act-card .act-card-overlay {
    position: relative !important;
    inset: auto !important;
    background: var(--dark-deep) !important;
    padding: 1rem 1.25rem !important;
    flex: 1;
  }
  .act-card .act-card-body {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: max-height 0.4s ease, opacity 0.25s ease, transform 0.3s ease !important;
    overflow: hidden !important;
  }
  .act-card.expanded .act-card-body {
    max-height: 1200px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  /* Chevron icon inline with the title */
  .act-card .act-card-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 !important;
  }
  .act-card .act-card-title::after {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: rgba(200,146,42,0.85)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,10 8,6 12,10'/></svg>")
      center / 14px 14px no-repeat;
    border-radius: 50%;
    transition: transform 0.3s ease;
  }
  .act-card.expanded .act-card-title::after {
    transform: rotate(180deg);
  }
  /* Children card: also uses toggle on mobile */
  .act-card--children { cursor: pointer; }
  .act-card--children .act-children-text h3 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 !important;
  }
  .act-card--children .act-children-text h3::after {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: rgba(200,146,42,0.85)
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,10 8,6 12,10'/></svg>")
      center / 14px 14px no-repeat;
    border-radius: 50%;
    transition: transform 0.3s ease;
  }
  .act-card--children.expanded .act-children-text h3::after {
    transform: rotate(180deg);
  }
  .act-card--children .act-children-lead,
  .act-card--children .act-children-text .bullet-list {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    transition: max-height 0.4s ease, opacity 0.25s ease, margin 0.3s ease !important;
  }
  .act-card--children.expanded .act-children-lead,
  .act-card--children.expanded .act-children-text .bullet-list {
    max-height: 1200px !important;
    opacity: 1 !important;
    margin-top: 0.75rem !important;
  }

  /* Disable parallax on mobile — causes performance issues */
  .hero-bg { transform: none !important; }
}

/* =========================================================
   LANDSCAPE PHONE
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; }
  .hero-content { padding-block: 1rem; }
  .nav-links-wrap { padding-block: 1rem !important; }
}