/* ==========================================================================
   SAHARA NIGHT CAMP — Responsive Stylesheet
   Breakpoints: 1280 | 1024 | 768 | 640 | 480
   ========================================================================== */

/* --------------------------------------------------------------------------
   LARGE DESKTOP (≤ 1400px)
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  :root {
    --container: 1200px;
  }
  .about-preview-grid { gap: 5rem; }
  .footer-grid { gap: 3rem; }
}

/* --------------------------------------------------------------------------
   DESKTOP (≤ 1280px)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root {
    --container: 1100px;
    --sp-2xl: 7rem;
    --sp-3xl: 9rem;
  }

  .features-grid { gap: 1.8rem; }
  .location-grid { gap: 4rem; }
  .contact-grid  { gap: 4rem; }
  .about-preview-grid { gap: 4.5rem; }

  .lightbox-prev { left: -55px; }
  .lightbox-next { right: -55px; }
}

/* --------------------------------------------------------------------------
   TABLET LARGE (≤ 1100px)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Homepage hero — tablet aspect ratio sits between desktop's wide/short
     and mobile's narrow/tall, so ease the focal point partway toward the
     mobile value below rather than jumping straight to it. */
  .hero-bg--home         { background-position: 52% 49%; }
  /* New page elements */
  .stats-band-grid      { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .getting-here-grid    { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .faq-grid             { grid-template-columns: 1fr; gap: 1rem; }
  .about-location-facts { gap: 2rem; }
  .owner-spotlight      { grid-template-columns: 1fr; }
  .owner-photo-wrap     { min-height: 320px; }
  .owner-content        { padding: 2.5rem; }
  :root {
    --container: 960px;
    --header-h: 80px;
    --sp-2xl: 6rem;
  }

  /* Header */
  .nav-links { gap: 2rem; }
  .header-logo img { height: 60px; }

  /* About */
  .about-preview-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
    max-width: 680px;
    margin: 0 auto;
  }

  .about-images { padding-bottom: 4rem; }

  /* Accommodation */
  .room-card { max-width: calc(50% - 1.1rem); }

  /* Features */
  .features-grid { grid-template-columns: 1fr 1fr; }

  /* Gallery mosaic */
  .gallery-mosaic {
    grid-template-rows: 220px 220px;
  }

  /* Trust */
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  /* Location */
  .location-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .location-map-frame { aspect-ratio: 16/9; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .footer-brand { grid-column: 1 / -1; }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  /* Values — must match the base rule's ".values .values-grid" specificity
     (two classes), otherwise this single-class override loses the cascade
     to style.css's always-on ".values .values-grid" rule and silently never
     applies at any breakpoint. See the 768px block below for the real fix. */
  .values .values-grid { gap: 1.5rem; }

  /* Mission/Vision */
  .mv-grid { grid-template-columns: 1fr 1fr; }

  /* Story grid */
  .story-grid { gap: 4rem; }
}

/* --------------------------------------------------------------------------
   TABLET (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --container: 100%;
    --header-h: 72px;
    --sp-xl: 4.5rem;
    --sp-2xl: 5rem;
    --sp-3xl: 6rem;
    --text-hero: clamp(2.5rem, 8vw, 3.8rem);
  }

  /* Container padding on mobile */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* ---- HEADER ---- */
  .nav-links    { display: none; }
  .lang-switcher{ display: none; }
  .header-cta   { display: none; }
  .hamburger    { display: flex; }

  /* ---- HERO ---- */
  .hero-badge { font-size: 0.58rem; padding: 0.5rem 1.2rem; }
  .hero-lead  { font-size: 0.95rem; }
  .hero-actions { gap: 0.8rem; }
  .hero-scroll { bottom: 1.5rem; }
  /* Narrow/tall mobile viewport crops the (landscape) hero image's sides
     rather than its top/bottom — nudge the focal point right to keep the
     camp cluster centered in that narrower visible slice. */
  .hero-bg--home { background-position: 54% 50%; }

  /* ---- STRIP ---- */
  .strip { display: none; }

  /* ---- ABOUT PREVIEW ---- */
  .about-preview-grid { max-width: 100%; }
  .about-img-main { width: 85%; }
  .about-img-secondary { width: 55%; }
  .about-stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .stat-num { font-size: 2.2rem; }
  .about-years-badge {
    width: 90px;
    height: 90px;
    right: 3rem;
    top: 1.5rem;
  }
  .about-years-num { font-size: 2rem; }

  /* ---- ACCOMMODATION ---- */
  .room-card { max-width: 100%; flex: 1 1 100%; }
  .room-img-wrap { aspect-ratio: 16/10; }

  /* ---- FEATURES ---- */
  .features-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .feature-card  { padding: 2rem 1.5rem; }

  /* ---- GALLERY PREVIEW ---- */
  .gallery-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 8px;
  }
  .gallery-mosaic-item:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 16/9; }
  .gallery-mosaic-item:nth-child(2) { grid-column: 1 / 2; aspect-ratio: 1; }
  .gallery-mosaic-item:nth-child(3) { grid-column: 2 / 3; aspect-ratio: 1; }
  .gallery-mosaic-item:nth-child(4) { grid-column: 1 / 2; aspect-ratio: 1; }
  .gallery-mosaic-item:nth-child(5) { grid-column: 2 / 3; aspect-ratio: 1; }
  .gallery-mosaic-item img { width: 100%; height: 100%; object-fit: cover; }

  /* ---- TRUST ---- */
  .trust-grid { grid-template-columns: 1fr; }

  /* ---- LOCATION ---- */
  .location-item-icon { width: 38px; height: 38px; font-size: 0.85rem; }

  /* ---- CTA BANNER ---- */
  .cta-banner { padding: 6rem 0; }
  .cta-banner-bg { background-attachment: scroll; }

  /* ---- FOOTER ---- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-brand { grid-column: 1; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }

  /* ---- PAGE HERO ---- */
  .page-hero { height: 50vh; min-height: 360px; }
  .page-hero-content { padding: 0 0 3rem; }

  /* ---- ABOUT PAGE ---- */
  .story-grid          { grid-template-columns: 1fr; gap: 3.5rem; }
  .story-images        { margin-bottom: 3rem; }
  .story-img-accent    { display: none; }
  .mv-grid             { grid-template-columns: 1fr; }
  /* ROOT CAUSE of "only 4 of 6 cards visible on mobile": style.css's base
     rule is ".values .values-grid { grid-template-columns: repeat(3, 1fr); }"
     — a two-class descendant selector, specificity (0,0,2,0). The old
     override here was the single class ".values-grid" — specificity
     (0,0,1,0). CSS resolves conflicting declarations by specificity FIRST;
     source order and media-query match only break ties between EQUAL
     specificities. So this override never won the cascade at any viewport
     width: mobile kept rendering the desktop's forced 3-column grid.
     Each .value-card has fixed padding (3rem 2.5rem) and a `1fr` track's
     default min-width is `auto` (content-based), not 0 — so 3 columns'
     combined minimum content width (~450px+) exceeds a ~320-375px phone
     viewport. The grid overflowed its container, and body's
     `overflow-x: hidden` (style.css) clipped whatever fell past the right
     edge — which column(s) that is depends on exact viewport width and
     text wrapping, but it reliably erases some subset of cards rather than
     visibly showing an overflowing/scrollable grid. That's why it looked
     like "cards 5 and 6 are just gone" instead of "layout looks broken."
     Fix: match the base rule's specificity so this override actually wins. */
  .values .values-grid { grid-template-columns: 1fr; gap: 1.2rem; }

  /* Secondary safety net (kept, not the fix): guarantees cards aren't stuck
     at opacity:0 if scroll-reveal timing is ever an issue on a long stacked
     mobile column, independent of the layout fix above. */
  .values-grid .value-card[data-reveal] {
    opacity: 1;
    transform: none;
  }
  .mv-card             { padding: 3rem 2rem; }
  .stats-band-grid     { grid-template-columns: repeat(2, 1fr); }
  .about-location      { padding: 6rem 0; }
  .about-location-facts{ gap: 2rem; flex-wrap: wrap; }
  .getting-here-grid   { grid-template-columns: 1fr 1fr; }
  .faq-grid            { grid-template-columns: 1fr; }
  .contact-map-frame   { height: 360px; }
  .contact-social-links{ flex-wrap: wrap; }

  /* ---- GALLERY PAGE ---- */
  .masonry-grid { columns: 2; column-gap: 10px; }
  .masonry-item { margin-bottom: 10px; }
  .gallery-filters { gap: 0.5rem; }
  .filter-btn { padding: 0.6rem 1.1rem; font-size: 0.58rem; }

  /* ---- CONTACT PAGE ---- */
  .contact-grid { gap: 3.5rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form-wrap { padding: 2.5rem 2rem; }

  /* ---- LIGHTBOX ---- */
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-img  { max-width: 95vw; max-height: 80vh; }
  .lightbox-caption { display: none; }

  /* ---- WHATSAPP ---- */
  .whatsapp-float { width: 52px; height: 52px; font-size: 1.35rem; bottom: 1.8rem; right: 1.5rem; }
  .back-to-top { bottom: 5.5rem; right: 1.5rem; }

  /* ---- SECTION HEADER ---- */
  .section-header { margin-bottom: 3rem; }
}

/* --------------------------------------------------------------------------
   MOBILE (≤ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --sp-xl: 3.5rem;
    --sp-2xl: 4rem;
  }

  /* Hero */
  .hero-badge { display: none; }
  .hero-lead  { max-width: 100%; }
  .btn { padding: 0.9rem 2rem; }

  /* About stats — stack on very small */
  .about-stats { grid-template-columns: 1fr; text-align: center; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }
  .feature-card  { padding: 2.2rem 1.8rem; }

  /* Trust */
  .trust-card { padding: 2rem 1.8rem; }

  /* Footer */
  .footer-brand p { max-width: 100%; }

  /* Contact methods */
  .contact-methods { gap: 0.8rem; }
  .contact-method  { padding: 1.2rem 1.4rem; }

  /* Gallery filters */
  .gallery-filters { justify-content: flex-start; overflow-x: auto; padding-bottom: 0.5rem; flex-wrap: nowrap; }
  .filter-btn { flex-shrink: 0; }

  /* Room configurations — stack to full width for readability */
  .room-types-item { min-width: 100%; flex-direction: row; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .container { padding-left: 1.2rem; padding-right: 1.2rem; }

  h2 { font-size: 1.9rem; }
  h3 { font-size: 1.45rem; }

  /* Hero */
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  .hero-actions .btn {
    width: 100%;
    max-width: 260px;
  }
  /* Small mobile crops even further into the image's sides — nudge the
     focal point a little further right than the 768px value. */
  .hero-bg--home { background-position: 56% 50%; }

  /* Gallery */
  .masonry-grid { columns: 1; }

  /* About images */
  .about-img-secondary { display: none; }
  .about-img-main { width: 100%; }

  /* Lightbox nav */
  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
  }

  /* CTA banner */
  .cta-banner-actions {
    flex-direction: column;
    align-items: center;
  }
  .cta-banner-actions .btn {
    width: 100%;
    max-width: 260px;
  }

  /* Footer */
  .social-links { flex-wrap: wrap; }

  /* Page hero */
  .page-hero { height: 44vh; min-height: 300px; }
  .page-hero-content h1 { font-size: 2.4rem; }

  /* Room card */
  .room-img-wrap { aspect-ratio: 4/3; }

  /* Stats band */
  .stats-band-grid       { grid-template-columns: repeat(2, 1fr); }
  .stats-band-item       { padding: 1.5rem; }
  .stats-band-item .stat-num { font-size: 2.4rem; }

  /* Getting here */
  .getting-here-grid     { grid-template-columns: 1fr; }

  /* Contact */
  .contact-form-wrap     { padding: 2rem 1.5rem; }
  .contact-form-header h3{ font-size: 1.6rem; }
  .contact-map-frame     { height: 300px; }

  /* Owner spotlight */
  .owner-content   { padding: 2rem 1.5rem; }
  .owner-contact   { flex-direction: column; align-items: stretch; }
  .owner-contact-btn { justify-content: center; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  #header, #footer, .whatsapp-float, .back-to-top,
  .hero-scroll, .strip, .cta-banner { display: none !important; }

  body { color: #000; background: #fff; }
  a    { color: #000; }
  img  { max-width: 100%; }
}