/* ================================================================
   GLOBAL RESPONSIVE
   ================================================================ */

/* ── Hero cards row — desktop-only decoration ──
   Selector matches main.css's #page-home .hero-cards specificity
   (that file nests these rules inside #page-home), otherwise this
   media query would lose the cascade to the flex display set there. */
@media (max-width: 1400px) {
  #page-home .hero-cards {
    display: none;
  }
}

/* ── Tablet — iPad landscape & small laptops (≤1100px) ── */
@media (max-width: 1100px) {
  nav {
    padding: 1.2rem 2.5rem;
  }
  nav.solid {
    padding: 0.9rem 2.5rem;
  }
  .nav-links {
    gap: 1.6rem;
  }
  .nav-links a {
    font-size: 0.63rem;
    letter-spacing: 0.13em;
    white-space: nowrap;
  }
  .nav-cta {
    padding: 0.45rem 1rem;
    font-size: 0.62rem;
    white-space: nowrap;
  }

/* ── Narrow laptop (≤1020px) ── */
@media (max-width: 1020px) {
  nav {
    padding: 1.1rem 2rem;
  }
  nav.solid {
    padding: 0.85rem 2rem;
  }
  .nav-links {
    gap: 1.1rem;
  }
  .nav-links a {
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    white-space: nowrap;
  }
  .nav-cta {
    padding: 0.4rem 0.8rem;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* ── Small tablet (≤940px) ── */
@media (max-width: 940px) {
  nav {
    padding: 1rem 1.5rem;
  }
  nav.solid {
    padding: 0.75rem 1.5rem;
  }
  .nav-links {
    gap: 0.7rem;
  }
  .nav-links a {
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .nav-cta {
    padding: 0.38rem 0.65rem;
    font-size: 0.54rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* ── Mobile / iPad portrait (≤860px) ── */
@media (max-width: 860px) {
  /* Nav bar */
  nav {
    padding: 1rem 1.5rem;
  }
  nav.solid {
    padding: 0.75rem 1.5rem;
  }
  .nav-links,
  .nav-cta {
    display: none;
  }
  .burger {
    display: flex;
    position: relative;
    z-index: 501;
  }

  /* Logo — condensed wordmark on mobile */
  .nav-logo {
    gap: 0.6rem;
  }
  .nav-logo-title {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }
  .nav-logo-accent {
    font-size: 0.82rem;
  }

  /* Remove backdrop-filter when open — it creates a containing block that
     prevents fixed children from covering the full viewport */
  nav.open {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Burger → X animation when menu is open */
  nav.open .burger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  nav.open .burger span:nth-child(2) {
    opacity: 0;
  }
  nav.open .burger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Burger floats above the overlay */
  nav.open .burger {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    z-index: 601;
  }

  /* Full-screen overlay — covers the entire viewport */
  nav.open .nav-links {
    display: flex;
    position: fixed;
    top: -20px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.98);
    gap: 0;
    z-index: 600;
    padding: 0 2rem;
    overflow-y: auto;
  }
  nav.open .nav-links > li {
    width: 100%;
    max-width: 320px;
    text-align: center;
    border-bottom: 1px solid rgba(28, 181, 109, 0.08);
  }
  nav.open .nav-links > li:first-child {
    border-top: 1px solid rgba(28, 181, 109, 0.08);
  }
  nav.open .nav-links > li > a {
    display: block;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    letter-spacing: 0.22em;
    color: rgba(247, 242, 234, 0.68);
  }
  nav.open .nav-links > li > a:hover,
  nav.open .nav-links > li > a:focus {
    color: #9be7bf;
  }

  /* Tours sub-links — always expanded as compact inline chips */
  nav.open .nav-dropdown .dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 0.8rem;
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-width: auto;
    padding: 0.4rem 1rem 0.9rem;
  }
  nav.open .nav-dropdown .dropdown-menu a {
    font-size: 0.62rem;
    padding: 0.18rem 0.55rem;
    color: rgba(247, 242, 234, 0.35);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(28, 181, 109, 0.18);
    border-radius: 2px;
    background: transparent;
    transition:
      color 0.2s,
      background 0.2s,
      border-color 0.2s;
  }
  nav.open .nav-dropdown .dropdown-menu a:hover {
    color: #9be7bf;
    background: rgba(28, 181, 109, 0.08);
    border-color: rgba(28, 181, 109, 0.35);
  }

  /* Footer */
  .foot-top {
    grid-template-columns: 1fr;
  }
  footer {
    padding: 4rem 2rem 2rem;
    color: var(--color-primary);
    background: var(--color-footer-bg);
  }
  .foot-bot {
    flex-direction: column;
    text-align: center;
  }

  /* Cursor */
  body {
    cursor: auto;
  }
  .cur,
  .cur-ring {
    display: none;
  }
  a,
  button,
  .acard,
  .tab,
  .wm,
  .poi-item,
  .fcard,
  .tcard,
  .gi,
  .nl-btn,
  .burger,
  .btn-fill,
  .btn-line,
  .flinks a {
    cursor: pointer;
  }
}

/* ── HOME — Responsive ── */
#page-home {
  /* ── Responsive ── */
  @media (max-width: 1200px) {
    .premium-tour-grid {
      gap: 1rem;
    }
    .ptcard {
      width: 95vw;
      max-width: 370px;
    }
  }

  @media (max-width: 1100px) {
    .att-grid {
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: auto;
    }
    .acard.big {
      grid-column: span 2;
      grid-row: auto;
    }
    .att-grid .acard:not(.big) {
      grid-row: auto;
      grid-column: auto;
    }
    .about {
      grid-template-columns: 1fr;
    }
    .premium-tour-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 900px) {
    .rv-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .ta-divider {
      display: none;
    }
  }

  @media (max-width: 860px) {
    .hero-content {
      padding: 0 2rem 5rem;
    }
    .hero-h1 {
      font-size: clamp(3rem, 11vw, 5rem);
    }
    .scroll-hint {
      display: none;
    }
    .stats {
      grid-template-columns: 1fr 1fr;
    }
    .stat {
      border-right: none;
      border-bottom: 1px solid rgba(184, 144, 42, 0.1);
    }
    .att-grid {
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: auto;
      gap: 6px;
    }
    .acard.big {
      grid-column: span 2;
      grid-row: auto;
      min-height: 260px;
    }
    .acard:not(.big) {
      min-height: 180px;
      aspect-ratio: 1/1;
    }
    .acard .ainfo {
      transform: none;
    }
    .acard .adesc {
      max-height: 4.5rem;
    }
    .acard .alink {
      opacity: 1;
      transform: none;
    }
    .activity-grid {
      grid-template-columns: 1fr;
    }
    .tips-grid {
      grid-template-columns: 1fr;
    }
    .tcard {
      border-right: none;
    }
    .weather-row {
      grid-template-columns: repeat(3, 1fr);
    }
    .map-wrap {
      grid-template-columns: 1fr;
    }
    .map-vis {
      min-height: 260px;
    }
    .map-side {
      border-left: none;
      border-top: 1px solid rgba(184, 144, 42, 0.1);
    }
    .sec-att,
    .sec-tips,
    .sec-gal,
    .sec-nl {
      padding: 5rem 2rem;
    }
    .sec-activity {
      padding: 5rem 2rem;
    }
    .about-copy {
      padding: 4rem 2.5rem;
    }
    .premium-tour-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.8rem;
    }
  }

  @media (max-width: 768px) {
    .weather-row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 700px) {
    .sec-premium-tours {
      padding: 2.2rem 0 1.2rem;
    }
    .premium-tour-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.6rem;
    }
    .ptcard {
      width: 98vw;
      max-width: 99vw;
    }
    .insta-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 0.3rem;
    }
  }

  @media (max-width: 480px) {
    .premium-tour-grid {
      grid-template-columns: 1fr;
    }
    .att-grid {
      grid-template-columns: 1fr;
      gap: 6px;
    }
    .acard.big {
      grid-column: auto;
      min-height: 240px;
    }
    .acard:not(.big) {
      aspect-ratio: unset;
      min-height: 200px;
    }
  }

  @media (max-width: 560px) {
    .rv-grid {
      grid-template-columns: 1fr;
    }
    .ta-badge {
      padding: 0.9rem 1.2rem;
      gap: 1rem;
    }
  }

  @media (max-width: 400px) {
    .insta-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

/* ── ABOUT — Responsive ── */
#page-about {
  /* ── Responsive ── */
  @media (max-width: 1100px) {
    .sec-inner {
      padding: 0 2rem;
    }
    .story-grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .story-img-wrap img {
      height: 300px;
    }
    .values-grid {
      grid-template-columns: 1fr 1fr;
    }
    .team-grid {
      grid-template-columns: 1fr 1fr;
    }
    .stats-bar {
      grid-template-columns: 1fr 1fr;
    }
    .stat-ab:nth-child(2) {
      border-right: none;
    }
    .stat-ab:nth-child(3) {
      border-right: 1px solid rgba(28, 181, 109, 0.1);
    }
  }

  @media (max-width: 860px) {
    .values-grid,
    .team-grid {
      grid-template-columns: 1fr;
    }
    .stats-bar {
      grid-template-columns: 1fr 1fr;
    }
    .cta-band {
      flex-direction: column;
      align-items: flex-start;
      padding: 2rem;
    }
    .sec-about,
    .sec-values,
    .sec-team,
    .sec-cta-band {
      padding: 4rem 0;
    }
    .hero-mini {
      padding: 0 0 3rem;
      min-height: 44vh;
    }
  }
}

/* ── CONTACT — Responsive ── */
#page-contact {
  /* ── Responsive ── */
  @media (max-width: 1100px) {
    .sec-inner {
      padding: 0 2rem;
    }
    .contact-layout {
      grid-template-columns: 1fr;
    }
    .faq-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 860px) {
    .form-row {
      grid-template-columns: 1fr;
    }
    .sec-contact,
    .sec-faq {
      padding: 4rem 0;
    }
    .hero-mini {
      padding: 0 0 3rem;
      min-height: 44vh;
    }
    .form-panel {
      padding: 1.8rem;
    }
  }
}

/* ── INFORMATION — Responsive ── */
#page-information {
  /* ── Responsive ── */
  @media (max-width: 1100px) {
    .sec-inner {
      padding: 0 2rem;
    }
    .featured-post {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 860px) {
    .hero-mini {
      padding: 0 0 3rem;
      min-height: 44vh;
    }
    .blog-grid {
      grid-template-columns: 1fr 1fr;
    }
    .featured-post {
      grid-template-columns: 1fr;
    }
    .fp-img-wrap {
      min-height: 260px;
    }
    .newsletter-band {
      flex-direction: column;
      padding: 2.5rem 2rem;
    }
    .nl-form {
      flex-direction: column;
      width: 100%;
    }
    .nl-input {
      width: 100%;
    }
  }

  @media (max-width: 520px) {
    .sec-inner {
      padding: 0 1.2rem;
    }
    .blog-grid {
      grid-template-columns: 1fr;
    }
    .fp-body {
      padding: 1.8rem 1.5rem;
    }
  }
}

/* ── INFORMATION DETAIL — Responsive ── */
#page-information-detail {
  /* ── Responsive ── */
  @media (max-width: 1100px) {
    .sec-inner {
      padding: 0 2rem;
    }
    .art-hero-content {
      padding: 0 2rem 3rem;
    }
    .art-layout {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .art-sidebar {
      position: static;
    }
    .sidebar-card {
      margin-bottom: 1rem;
    }
    .month-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 860px) {
    .related-grid {
      grid-template-columns: 1fr 1fr;
    }
    .art-nav {
      grid-template-columns: 1fr;
    }
    .art-nav-card.next .art-nav-dir,
    .art-nav-card.next .art-nav-title {
      text-align: left;
    }
    .art-img-row {
      grid-template-columns: 1fr;
    }
    .art-hero {
      height: 58vh;
    }
  }

  @media (max-width: 520px) {
    .sec-inner {
      padding: 0 1.2rem;
    }
    .art-hero-content {
      padding: 0 1.2rem 2.5rem;
    }
    .related-grid {
      grid-template-columns: 1fr;
    }
    .month-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* ── ACTIVITIES — Responsive ── */
#page-activities {
  /* ── Responsive ── */
  @media (max-width: 1100px) {
    .sec-inner {
      padding: 0 2rem;
    }
    .act-grid {
      grid-template-columns: 1fr 1fr;
    }
    .highlights-grid {
      grid-template-columns: 1fr 1fr;
    }
    .hero-mini {
      padding: 0 0 2.5rem;
    }
  }

  @media (max-width: 860px) {
    .act-grid {
      grid-template-columns: 1fr;
    }
    .highlights-grid {
      grid-template-columns: 1fr 1fr;
    }
    .cta-band {
      flex-direction: column;
      align-items: flex-start;
      padding: 2rem;
    }
    .sec-activities {
      padding: 4rem 0 2rem;
    }
    .sec-highlights {
      padding: 0 0 4rem;
    }
    .hero-mini {
      min-height: 44vh;
      padding: 0 0 3rem;
    }
  }

  @media (max-width: 520px) {
    .highlights-grid {
      grid-template-columns: 1fr;
    }
    .act-img-wrap img {
      height: 200px;
    }
  }
}

/* ── ACTIVITIES DETAIL + CIRCUIT DETAIL — Responsive ── */
#page-activities-detail,
#page-les-circuit-detail {
  /* ── Responsive ── */
  @media (max-width: 860px) {
    .hero-slide {
      flex: 0 0 50%;
    }
  }
  @media (max-width: 520px) {
    .hero-slide {
      flex: 0 0 100%;
      padding: 0;
    }
  }

  @media (max-width: 1100px) {
    .sec-inner {
      padding: 0 2rem;
    }
    .detail-hero-content {
      padding-left: 2rem;
      padding-right: 2rem;
    }
    .detail-hero {
      height: 44vh;
    }
    .hero-arrow {
      width: 36px;
      height: 36px;
    }
    .detail-layout {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .detail-sidebar {
      position: static;
    }
    .info-strip-inner {
      padding: 0 2rem;
      flex-wrap: wrap;
    }
    .istrip-item {
      padding: 0.9rem 1.2rem 0.9rem 0;
      margin-right: 1.2rem;
    }
    .related-grid {
      grid-template-columns: 1fr 1fr;
    }
    .gallery-mosaic {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 160px 160px 160px;
    }
    .gm-item.gm-main {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
    }
  }

  @media (max-width: 860px) {
    .detail-hero {
      height: 40vh;
      min-height: 280px;
    }
    .hero-arrow {
      display: none;
    }
    .incl-grid {
      grid-template-columns: 1fr;
    }
    .related-grid {
      grid-template-columns: 1fr;
    }
    .info-strip-inner {
      gap: 0;
    }
    .istrip-item {
      border-right: none;
      border-bottom: 1px solid rgba(28, 181, 109, 0.08);
      width: 50%;
    }
    .lb-stage {
      padding: 4rem 3.5rem;
    }
    .lb-arrow {
      width: 42px;
      height: 42px;
    }
    .lb-prev {
      left: 0.5rem;
    }
    .lb-next {
      right: 0.5rem;
    }
    .lb-caption-top {
      display: none;
    }
  }

  @media (max-width: 520px) {
    .istrip-item {
      width: 100%;
    }
    .detail-hero {
      height: 38vh;
      min-height: 260px;
    }
    .gallery-mosaic {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 140px 140px 140px;
    }
    .lb-stage {
      padding: 3.5rem 1rem;
    }
    .lb-arrow {
      width: 36px;
      height: 36px;
    }
    .lb-thumb {
      flex: 0 0 52px;
      height: 38px;
    }
  }
}

/* ── LES CIRCUIT — Responsive ── */
#page-les-circuit {
  /* ── Responsive ── */
  @media (max-width: 1200px) {
    .cards-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 1100px) {
    .sec-inner {
      padding: 0 2rem;
    }
    .page-wrap {
      grid-template-columns: 250px 1fr;
      gap: 2rem;
    }
  }

  @media (max-width: 860px) {
    .page-wrap {
      grid-template-columns: 1fr;
      padding: 2.5rem 0 5rem;
    }
    .filter-sidebar {
      position: static;
    }
    .cards-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .list-mode {
      .gc {
        flex-direction: column;
      }
      .gc-img {
        flex: 0 0 auto;
        img {
          height: 200px;
        }
      }
      .gc-foot {
        flex: 0 0 auto;
        flex-direction: row;
        border-left: none;
        border-top: 1px solid rgba(28, 181, 109, 0.1);
        padding: 1rem 1.2rem;
        align-items: center;
        justify-content: space-between;
      }
      .gc-price {
        flex-direction: row;
        align-items: baseline;
        gap: 0.4rem;
        strong {
          font-size: 1.1rem;
        }
        span {
          display: none;
        }
      }
      .gc-btn-book {
        width: auto;
      }
      .gc-foot .gc-btn {
        width: auto;
      }
    }
  }

  @media (max-width: 520px) {
    .sec-inner {
      padding: 0 1.2rem;
    }
    .cards-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* ════════════════════════════════════════
   customize-tour.html — responsive
   ════════════════════════════════════════ */
@media (max-width: 900px) {
  #page-customize-tour {
    .itnb-wrap {
      grid-template-columns: 1fr;
    }
    .itnb-panel {
      position: static;
    }
    .itnb-acts-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 480px) {
  #page-customize-tour {
    .itnb-acts-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .day-btns {
      gap: 0.3rem;
    }
  }
}

/* ════════════════════════════════════════
   les-circuit-detail.html — responsive
   ════════════════════════════════════════ */
@media (max-width: 520px) {
  #page-les-circuit-detail {
    .addon-acts-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}