/*
 * Responsive layer (3.2.1) — every page, every device.
 *
 * Loads last, site-wide (homepage, listings, hubs, content pages and the
 * single Tour / Activity product pages). Tested breakpoints:
 *   320 · 360 · 390 · 414 (phones) · 600 · 768 · 820 (tablets portrait)
 *   1024 · 1180 (tablets landscape / small laptops) · 1280 · 1366 · 1440
 *   1920+ (desktop), plus short landscape phones.
 * Fixes found by an automated overflow / tiny-text audit:
 *   - header overflowed the screen below 430px (page could scroll sideways)
 *   - homepage "Where we travel" panels overflowed between 861–1180px
 *   - 7px brand tagline and ~10px labels on phones
 */

/* ── Global safety nets ─────────────────────────────────────────────── */
html, body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
.site-content :where(table) { display: block; max-width: 100%; overflow-x: auto; }
.entry-content :where(pre, code) { white-space: pre-wrap; word-break: break-word; }
.entry-content { overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .wrap, .wrap-wide { padding-inline: 16px; }
  .card-grid--rail, .hd-countries, .exp-rail { margin-inline: -16px !important; padding-inline: 16px !important; }
}

/* ── Header: fits 320px and up ──────────────────────────────────────── */
.header-cta .btn { white-space: nowrap; }
.nav-toggle { min-width: 44px; min-height: 44px; display: none; align-items: center; justify-content: center; flex-direction: column; }
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  .header-inner { gap: 10px; min-height: 64px; }
  .brand__link { gap: 8px; min-width: 0; }
  .brand__logo, .brand__logo--img { width: 42px !important; height: 42px !important; }
  .brand__name { font-size: 1.1rem; line-height: 1.05; }
  .brand__tag { display: none; }
  .header-cta { gap: 6px; flex: none; }
  .header-cta .btn { padding: 9px 14px; font-size: .82rem; min-height: 40px; }
  .brand { min-width: 0; flex: 1 1 auto; }
}
@media (max-width: 345px) {
  .brand__name { font-size: 1rem; }
  .header-cta .btn--gold { display: none; } /* still in the mobile menu panel */
}
@media (min-width: 641px) {
  .brand__tag { font-size: .56rem; }
}

/* Mobile menu panel: phone, WhatsApp and Plan-my-trip inside the menu */
.nav-mobile-cta { display: none; }
@media (max-width: 1024px) {
  .site-header.nav-open .nav-mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  }
  .nav-mobile-cta .btn { justify-content: center; border-radius: 100px; min-height: 44px; }
  .nav-mobile-cta .btn--gold { grid-column: 1 / -1; }
  .primary-nav .nav-menu a { min-height: 44px; display: flex; align-items: center; }
}

/* ── Readable minimum type on phones ────────────────────────────────── */
.dest-card__eyebrow, .hd-tile__country, .hd-mini__country, .tn-partner-tile__hook { font-size: max(.72rem, 11.5px); }
.fp-search__pill .fp-search__field label { font-size: max(.68rem, 11px); }
@media (max-width: 699px) {
  .tn-partners__hook { white-space: normal; text-wrap: balance; overflow: visible; font-size: 1rem; line-height: 1.45; }
  .lead { font-size: 1rem; }
}

/* ── Homepage "Where we travel" panels: 861–1180px ──────────────────── */
.hd-country { min-width: 0; }
@media (min-width: 861px) and (max-width: 1180px) {
  .hd-countries { gap: 14px; }
  .hd-country { aspect-ratio: auto; min-height: clamp(440px, 52vw, 560px); }
  .hd-country__body { padding: 20px 18px; }
  .hd-country__name { font-size: 1.8rem; }
}

/* ── Photo heroes (homepage + every layer page) ─────────────────────── */
@media (max-width: 860px) {
  .lyr-hero--tall  { min-height: clamp(460px, 112vw, 600px); }
  .lyr-hero--mid   { min-height: clamp(420px, 100vw, 540px); }
  .lyr-hero--short { min-height: clamp(320px, 80vw, 420px); }
}
@media (max-width: 640px) {
  .lyr-hero .fp-hero__content h1, .fp-hero__content h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); line-height: 1.08; }
  .lyr-hero .fp-hero__sub, .fp-hero__sub { font-size: .98rem; margin-bottom: 16px; }
  .lyr-hero .lyr-hero__eyebrow { font-size: .68rem; letter-spacing: .14em; }
  /* chips: one swipeable row instead of a tall stack */
  .lyr-hero__chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: -22px; padding: 2px 22px 4px; scroll-snap-type: x proximity;
  }
  .lyr-hero__chips::-webkit-scrollbar { display: none; }
  .lyr-hero__chips li { flex: none; scroll-snap-align: start; }
  .lyr-hero__chips a { min-height: 38px; display: inline-flex; align-items: center; }
  .lyr-hero__actions .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }
}
@media (max-width: 400px) {
  .lyr-hero__chips { margin-inline: -16px; padding-inline: 16px; }
}
/* pill search on phones: two selects side by side, keyword + button below */
@media (max-width: 780px) {
  .fp-search__pill { gap: 10px 0; }
  .fp-search__pill .fp-search__field select,
  .fp-search__pill .fp-search__field input { min-height: 32px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  .fp-search__go { min-height: 46px; }
}
/* short landscape phones: let the hero hug its content */
@media (orientation: landscape) and (max-height: 520px) {
  .fp-hero--photo, .lyr-hero--tall, .lyr-hero--mid, .lyr-hero--short { min-height: 0; padding-top: 58px; padding-bottom: 26px; }
  .fp-hero__content h1 { font-size: clamp(1.7rem, 4.4vw, 2.3rem); }
  .lyr-hero__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
/* very wide screens: keep the photo crisp and the copy anchored */
@media (min-width: 1700px) {
  .lyr-hero--tall  { min-height: 700px; }
  .lyr-hero--mid   { min-height: 580px; }
  .lyr-hero--short { min-height: 440px; }
}

/* ── Listing layer ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lyr-results .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lyr-results .filters select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; padding-inline: 14px; }
  .ltbar { flex-wrap: wrap; gap: 10px; }
  .ltbar__sort { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
  .ltbar__sort select { flex: 1; min-height: 42px; font-size: 16px; }
  /* country pills: one swipeable row */
  .lyr-band .lyr-pills {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin-inline: -22px; padding: 2px 22px 6px;
  }
  .lyr-band .lyr-pills::-webkit-scrollbar { display: none; }
  .lyr-band .lyr-pills li { flex: none; }
  .lyr-pills a { min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
  .lyr-empty { padding: 32px 18px; }
  .lyr-empty .btn { width: 100%; justify-content: center; margin-top: 8px; }
}
@media (max-width: 400px) {
  .lyr-band .lyr-pills { margin-inline: -16px; padding-inline: 16px; }
}
/* tablets: two-up cards, map below list keeps a sensible height */
@media (min-width: 600px) and (max-width: 960px) {
  .card-grid:not(.card-grid--rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browsemap__mapwrap { max-height: 420px; }
}
@media (max-width: 599px) {
  .card-grid:not(.card-grid--rail) { grid-template-columns: 1fr; }
  .browsemap__mapwrap { aspect-ratio: 4 / 3; max-height: 320px; }
}

/* Section heads with a "see all" link: stack cleanly on phones */
@media (max-width: 640px) {
  .section-head--row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fp-bigheading { font-size: clamp(1.55rem, 7vw, 2rem); }
  .lyr-head { margin-bottom: 20px; }
  .section { padding-block: clamp(40px, 11vw, 64px); }
  .lyr-band { padding-block: 32px; }
}

/* ── Destinations hub ───────────────────────────────────────────────── */
.lyr-jump { top: 76px; }
@media (max-width: 640px) {
  .lyr-jump { top: 64px; }
  .lyr-jump .wrap-wide { padding-inline: 0; }
  .lyr-jump .fp-tagcloud__list { padding-inline: 16px; }
  .lyr-country-sec .section-head--row { flex-direction: column; }
  .lyr-country-sec__links { width: 100%; }
  .lyr-country-sec__links .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
}
.admin-bar .lyr-jump { top: calc(76px + 32px); }

/* ── Country hub / facts / content pages ────────────────────────────── */
@media (max-width: 640px) {
  .lyr-facts { padding: 22px 18px; }
  .lyr-facts dl > div { flex-wrap: wrap; }
  .lyr-intro__copy p:first-of-type { font-size: 1.1rem; }
  .lyr-aside__card { padding: 18px; }
  .lyr-page__body.entry-content > p:first-of-type { font-size: 1.08rem; }
  .contact-map__frame iframe { min-height: 300px; }
  .cta-band { padding: 32px 20px; border-radius: 16px; }
  .cta-band h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .lyr-cta__btns .btn { width: 100%; justify-content: center; min-height: 46px; }
  .fp-promise { padding: 32px 0; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .lyr-aside { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ── Experience rail + hub ──────────────────────────────────────────── */
@media (max-width: 680px) {
  .lyr-exp-rail .exp-tile { min-height: 112px; }
  .lyr-exp-rail .lyr-exp-rail__n { top: 6px; right: 6px; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .lyr-exp-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px; }
}

/* ── Touch devices: no sticky hover lifts, comfortable targets ──────── */
@media (hover: none) {
  .tour-card:hover, .dest-card:hover, .exp-tile:hover, .hd-mini:hover, .lyr-contact a:hover { transform: none; }
  .hd-country:hover > img, .hd-tile:hover > img, .dest-card:hover .dest-card__media img { transform: none; }
}
@media (pointer: coarse) {
  .breadcrumb a { padding-block: 6px; display: inline-block; }
  .seeall { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Laptop / landscape-tablet header (1025–1300px) ─────────────────── */
@media (min-width: 1025px) and (max-width: 1300px) {
  .header-phone { display: none; }
  .header-inner { gap: 14px; }
  .brand__tag { display: none; }
  .primary-nav .nav-menu { gap: 0; }
  .primary-nav .nav-menu > li > a { padding-inline: 9px; font-size: .92rem; }
}
@media (max-width: 640px) {
  .lyr-hero .lyr-hero__eyebrow, .eyebrow { font-size: max(.72rem, 11.5px); }
}

/* Mobile menu CTA buttons keep their own colours over the nav link styles */
.primary-nav .nav-mobile-cta .btn { display: flex; justify-content: center; align-items: center; text-align: center; padding: 11px 16px; font-weight: 600; }
.primary-nav .nav-mobile-cta .btn--gold { color: var(--ink-ongold, #241a06); background: var(--gold); }
.primary-nav .nav-mobile-cta .btn--forest { color: #fff; background: var(--forest); }
.primary-nav .nav-mobile-cta .btn--ghost { color: var(--ink); background: transparent; }

/* Country facts outline: decorative only, no stage box */
.lyr-facts__map .cdraw, .lyr-facts__map .cmap__stage { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
@media (max-width: 640px) { .lyr-facts__map { display: none; } }