/* =========================================================
   TropiRoots Madagascar — responsive.css
   ========================================================= */

/* ---------- Large desktop refinement ---------- */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .main-nav > ul { gap: 0; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .map-block { grid-template-columns: 1fr; padding: 36px; }
}

/* ---------- Navigation collapses to hamburger ---------- */
@media (max-width: 880px) {
  .main-nav { display: none; }
  .hamburger { display: block; }
  .site-header { padding: 14px 20px; }
  .site-header.is-scrolled { padding: 10px 20px; }
  .brand img { height: 44px; width: 44px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 780px) {
  .container { padding: 0 18px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-card-info { padding: 30px 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-content { padding-bottom: 70px; max-width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
  .scroll-cue { display: none; }
  .page-hero {
    padding: 132px 0 60px;
    min-height: 42vh;
    min-height: 42svh;
    min-height: 42dvh;
  }
  .map-block { padding: 26px; gap: 30px; }
  .map-facts { gap: 16px; }
  h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 14px; right: 14px; width: 40px; height: 40px; }
  .lightbox-inner { width: 94vw; }
  .lightbox-inner .photo-ph { max-height: 68vh; }
  .lb-enabled .lb-zoom-icon { opacity: 1; background: rgba(14,28,19,.16); }
  .lb-enabled .lb-zoom-icon svg { transform: scale(.8); }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-actions { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }
  .map-facts { flex-direction: column; gap: 12px; }
  .contact-card-info { padding: 26px 18px; }
  .page-hero {
    min-height: 38vh;
    min-height: 38svh;
    min-height: 38dvh;
  }
}

/* ---------- Mobile phones in landscape (short viewport height) ---------- */
/* On short landscape screens, a full 100dvh hero leaves little room to read
   the title/buttons without scrolling. Cap the hero height and keep the
   page-hero a bit shorter too; object-fit:cover still frames the photo
   correctly at any height, no distortion. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }
  .page-hero {
    min-height: 60vh;
    min-height: 60svh;
    min-height: 60dvh;
    padding: 100px 0 36px;
  }
}

/* ---------- WhatsApp floating button: mobile ---------- */
@media (max-width: 780px) {
  .whatsapp-float { width: 48px; height: 48px; right: 16px; bottom: 16px; }
  .whatsapp-float svg { width: 23px; height: 23px; }
}

/* ---------- Search: responsive ---------- */
@media (max-width: 880px) {
  .header-actions { gap: 10px; }
}
@media (max-width: 780px) {
  .search-overlay { padding: 92px 14px 20px; }
  .search-panel { max-height: calc(100vh - 112px); border-radius: var(--radius-md); }
  .search-panel-head { padding: 4px 6px 4px 16px; gap: 8px; }
  .search-input { font-size: .95rem; padding: 14px 0; }
  .search-result-title { font-size: .95rem; }
  .search-result-category { font-size: .62rem; padding: 3px 8px; }
}
@media (max-width: 420px) {
  .search-toggle { width: 42px; height: 42px; }
  .search-result-top { flex-wrap: wrap; }
}

/* ---------- Prevent any horizontal overflow ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
table { max-width: 100%; }

/* ---------- Photos: keep every image clean on small screens ---------- */
@media (max-width: 780px) {
  .dest-thumbs { padding: 6px 6px 0; gap: 5px; }
  .page-hero-img { object-position: center; }
}
img { max-width: 100%; }

/* ---------- Language switcher (FR | EN) ---------- */
@media (max-width: 1024px) {
  .lang-globe { display: none; }
}
@media (max-width: 880px) {
  .lang-switch--header { height: 42px; padding: 0 4px; }
  .lang-switch--header .lang-btn { min-width: 36px; height: 32px; padding: 0 9px; font-size: .74rem; }
}
/* Phones: the header keeps a single round button (same size as the search
   button) that shows the language you can switch TO; the full FR | EN
   switch, with the active language highlighted, is at the top of the menu. */
@media (max-width: 480px) {
  .lang-switch--header {
    width: 46px; height: 46px; padding: 0; justify-content: center;
    border-width: 1.5px; border-color: rgba(245,238,220,.4); background: rgba(245,238,220,.08);
  }
  .lang-switch--header .lang-btn[aria-pressed="true"],
  .lang-switch--header .lang-sep,
  .lang-switch--header .lang-globe { display: none; }
  .lang-switch--header .lang-btn {
    width: 100%; height: 100%; min-width: 0; padding: 0; border-radius: 50%;
    color: var(--cream); font-size: .74rem;
  }
}
@media (max-width: 420px) {
  .lang-switch--header { width: 42px; height: 42px; }
}
@media (max-width: 340px) {
  .lang-switch--header { display: none; }
}