/* ==========================================================================
   TIMELESS ROOTS — RESPONSIVE
   Loaded last so these rules win the cascade at matching specificity.
   Written as a sequence of max-width breakpoints from large desktop down
   to small mobile, covering every viewport called for in the brief
   (1920 / 1600 / 1440 / 1366 / 1280 / 1024 / 768 / 480 / 390 / 375 / 360).
   Base (style.css) targets ~1920–1600px comfortably via fluid clamp()
   typography, so the rules below focus on real layout shifts.
   ========================================================================== */

/* ===== ≤1600px : large desktop — tighten the outer container slightly ===== */
@media (max-width: 1600px) {
  :root { --container-width: 1180px; }
}

/* ===== ≤1440px / 1366px : standard laptop — reduce side padding ===== */
@media (max-width: 1440px) {
  :root { --container-padding: 32px; }
  .hero-grid { gap: 26px; }
}

/* ===== ≤1280px : small laptop ===== */
@media (max-width: 1280px) {
  .mission-panel { padding: 60px 36px; }
  .journey-card-body { padding: 40px 20px 24px; }
  .footer-grid { gap: 32px; }
}

/* ===== ≤1100px : nav becomes a slide-in panel with hamburger toggle ===== */
@media (max-width: 1100px) {
  .hamburger { display: flex; }

  .nav-box {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: none;
    border-left: 1px solid var(--color-border-gold);
    border-radius: 0;
    background-color: rgba(9, 8, 6, 0.98);
    backdrop-filter: blur(18px);
    padding: 110px 34px 40px;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    z-index: var(--z-overlay);
  }
  .nav-box.is-open { transform: translateX(0); }

  .nav-flourish { display: none; }

  .nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    width: 100%;
  }
  .nav-link { font-size: 0.95rem; }
  .nav-link.is-active::after { bottom: -6px; }

  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 10px 0 0 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }
  .nav-dropdown.is-open .nav-dropdown-menu { max-height: 260px; }

  /* Backdrop behind the slide-in panel */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: calc(var(--z-overlay) - 1);
  }
  .nav-backdrop.is-visible { opacity: 1; visibility: visible; }

  .carousel { gap: 14px; }
  .journey-card { flex: 0 0 calc(33.333% - 17.3px); }
}

/* ===== ≤980px : hero / about stack to a single column ===== */
@media (max-width: 980px) {
  .hero { padding: 40px 0 70px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-content { text-align: left; }
  .hero-subtitle { max-width: 100%; }
  .hero-visual { max-width: 560px; margin-inline: auto; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-visual { order: -1; }
  .about-visual img { max-width: 320px; }

  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  .journey-card { flex: 0 0 calc(50% - 11px); }
}

/* ===== ≤768px : tablet — grids go from 4/3/2 columns to 2 ===== */
@media (max-width: 768px) {
  :root { --container-padding: 24px; }

  .page-banner { padding: 140px 0 48px; margin-bottom: 56px; }

  .mission-panel { padding: 48px 24px; }
  .mission-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .mission-card { border-left: none; padding: 0 12px; }

  .faq-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .footer-brand { grid-column: span 2; margin-bottom: 8px; }

  .footer-bottom-inner { flex-direction: column; gap: 14px; text-align: center; }

  .book-grid { grid-template-columns: repeat(2, 1fr); }
  .book-journey-head { flex-direction: column; }

  .journey-card { flex: 0 0 calc(50% - 11px); }
}

/* ===== ≤600px : carousel drops to one visible card ===== */
@media (max-width: 600px) {
  .journey-card { flex: 0 0 100%; }
  .carousel { gap: 10px; }
  .carousel-arrow { width: 40px; height: 40px; }

  .book-grid { grid-template-columns: 1fr; }
}

/* ===== ≤480px : mobile — single-column everything, full-width CTAs ===== */
@media (max-width: 480px) {
  :root { --container-padding: 18px; }

  .site-header { padding: 20px 0; }
  .logo-icon { width: 46px; height: 46px; }
  .logo-title { font-size: 1.15rem; }

  .hero { padding: 24px 0 56px; }
  .hero-title { margin-bottom: 20px; }
  .hero .divider { margin-bottom: 22px; }
  .hero-subtitle { margin-bottom: 28px; }
  .btn { width: 100%; }
  .hero-content .btn { width: auto; }

  .mission { padding: var(--space-xl) 0; }
  .mission-grid { grid-template-columns: 1fr; gap: 36px; }
  .mission-panel { padding: 40px 20px; }

  .journeys, .about, .faq { padding: var(--space-xl) 0; }

  .journey-card-body { padding: 38px 18px 22px; }

  .about-grid { gap: 32px; }

  .faq-question { padding: 18px; font-size: 0.9rem; }

  .footer-grid { grid-template-columns: 1fr; text-align: left; padding-block: 48px 32px; }
  .footer-brand { grid-column: span 1; }
  .footer-legal { gap: 16px; }

  .page-banner { padding: 120px 0 40px; }
  .contact-form { padding: 28px; }

  .book-journey-head .journey-badge-static { width: 46px; height: 46px; }
}

/* ===== ≤390px : small phones (iPhone SE / mini and similar) ===== */
@media (max-width: 390px) {
  .hero-title { font-size: 2.1rem; }
  .section-title { font-size: 1.7rem; }
  .nav-box { width: 88vw; padding: 100px 24px 32px; }
  .btn { padding: 15px 22px; font-size: 0.75rem; }
  .contact-form { padding: 22px; }
}

/* Safety net: nothing is ever allowed to force horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }