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

/* ── Tablet — iPad landscape & small laptops (≤1100px) ── */
@media (max-width: 1100px) {
  nav { padding: 1.2rem 2.5rem; }
  nav.solid { padding: .9rem 2.5rem; }
  .nav-links { gap: 1.6rem; }
  .nav-links a { font-size: .63rem; letter-spacing: .13em; }
  .nav-cta { padding: .45rem 1rem; font-size: .62rem; }
  .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: .75rem 1.5rem; }
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; position: relative; z-index: 501; }

  /* Logo — scale down from desktop 150px */
  .nav-logo { padding-left: 52px; }
  .nav-logo img { height: 62px; top: 50%; }

  /* 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,.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,.08);
  }
  nav.open .nav-links > li:first-child { border-top: 1px solid rgba(28,181,109,.08); }
  nav.open .nav-links > li > a {
    display: block;
    padding: .85rem 1rem;
    font-size: .88rem;
    letter-spacing: .22em;
    color: rgba(247,242,234,.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: .3rem .8rem;
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-width: auto;
    padding: .4rem 1rem .9rem;
  }
  nav.open .nav-dropdown .dropdown-menu a {
    font-size: .62rem;
    padding: .18rem .55rem;
    color: rgba(247,242,234,.35);
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid rgba(28,181,109,.18);
    border-radius: 2px;
    background: transparent;
    transition: color .2s, background .2s, border-color .2s;
  }
  nav.open .nav-dropdown .dropdown-menu a:hover {
    color: #9be7bf;
    background: rgba(28,181,109,.08);
    border-color: rgba(28,181,109,.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,.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,.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: .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: .6rem; }
    .ptcard { width: 98vw; max-width: 99vw; }
    .insta-grid { grid-template-columns: repeat(3, 1fr); gap: .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: .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,.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: .9rem 1.2rem .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,.08); width: 50%; }
    .lb-stage { padding: 4rem 3.5rem; }
    .lb-arrow { width: 42px; height: 42px; }
    .lb-prev { left: .5rem; }
    .lb-next { right: .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,.1);
        padding: 1rem 1.2rem;
        align-items: center;
        justify-content: space-between;
      }
      .gc-price {
        flex-direction: row;
        align-items: baseline;
        gap: .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: .3rem; }
  }
}


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