/* ============================================================
   ALL ITINERARIES (archive-itinerary.php)
   Region jump-bar (underline tabs on desktop, scrollable chips on phones), 4 -> 3 -> 2 -> 1 column
   card grid with content-anchored dark scrims (WCAG AA over any photo), filter summary + empty state.
   Breakpoints: 1100 · 820 · 560 · 400
   ============================================================ */
:root {
  --ink-muted: #66665f;                 /* secondary copy on ivory, 5.3:1 */
  --card-fallback: linear-gradient(160deg, #2c6e49 0%, #1f3d2e 55%, #151a17 100%); /* shown if a photo fails to load */
  --tabs-top: 68px;                     /* height of the scrolled fixed nav */
}
@media (max-width: 1100px) { :root { --tabs-top: 64px; } }
:root { --itin-bar-h: 57px; }                                /* region jump-bar height (56px tabs + hairline) */
@media (max-width: 820px) { :root { --itin-bar-h: 65px; } }  /* phone chips: 44px + 2 x 10px padding + hairline */

html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ——— Hero ——— */
.itin-archive-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--ivory);
  min-height: min(45vh, 480px);
  padding: calc(var(--nav-h) + clamp(36px, 7vw, 88px)) var(--gutter) clamp(32px, 4.5vw, 56px); }
.itin-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--orange); font-weight: 600; margin-bottom: 20px; }
.itin-hero-title { font-family: var(--f-display); font-size: clamp(44px, 9vw, 120px); font-weight: 900; line-height: 1.1; letter-spacing: -.025em; color: var(--black); margin-bottom: 20px; }
.itin-hero-title em { color: var(--orange); font-style: italic; }
.itin-hero-sub { font-size: 16px; color: var(--ink-muted); max-width: 480px; margin: 0 auto; line-height: 1.6; font-weight: 300; text-wrap: balance; }
@media (max-width: 560px) {
  .itin-hero-eyebrow { letter-spacing: 2.5px; margin-bottom: 16px; }
  .itin-hero-title { margin-bottom: 16px; }
  .itin-hero-sub { font-size: 15px; font-weight: 400; }
}

/* ——— Travel-style chips (Family / Friends / Couples) + active filter summary ——— */
.itin-filterbar { background: var(--ivory); padding: 0 var(--gutter) clamp(20px, 3vw, 28px); }
.itin-filterbar-inner { max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.itin-exp-chips { list-style: none; display: inline-flex; max-width: 100%; gap: 2px; margin: 0; padding: 4px; background: #fff; border: 1.5px solid var(--gray-light); border-radius: 999px; }   /* one segmented control: reads differently from the region pills below */
.itin-exp-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 56px; padding: 0 20px; font-size: 14px; font-weight: 600; letter-spacing: .2px; text-decoration: none; color: var(--black-soft); background: transparent; border-radius: 999px; transition: color .2s, background .2s, box-shadow .2s; }
.itin-exp-chip.is-active { background: var(--orange-pale); box-shadow: inset 0 0 0 1.5px var(--orange); color: var(--black); }
@media (hover: hover) { .itin-exp-chip:not(.is-active):hover { color: var(--orange-ink); background: var(--ivory-2); } }
.itin-filter-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; }
.itin-filter-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; }
.itin-filter-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--black); background: var(--orange-pale); border: 1.5px solid var(--orange); border-radius: 999px; }
.itin-filter-count { font-size: 13px; color: var(--ink-muted); }
.itin-filter-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .itin-filter-clear:hover { color: var(--dark-green); } }
@media (max-width: 400px) { .itin-exp-chip { min-width: 0; padding: 0 14px; } }

/* ——— Region jump-bar ——— */
.itin-region-nav { position: sticky; top: var(--tabs-top); z-index: 100; background: var(--ivory); border-bottom: 1px solid var(--gray-light); transition: top .35s var(--ease-out); }
body:has(.nav.nav-hidden) .itin-region-nav { top: 0; }
.itin-region-scroll { display: flex; justify-content: center; padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.itin-region-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 56px; padding: 0 clamp(16px, 2.4vw, 32px); font-size: 13px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; color: var(--ink-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.itin-region-chip.active { color: var(--orange); border-bottom-color: var(--orange); }
@media (hover: hover) { .itin-region-chip:hover { color: var(--orange); } }
.itin-region-chip:focus-visible { outline-offset: -3px; }
.itin-region-nav::before, .itin-region-nav::after { content: ''; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; }
.itin-region-nav::before { left: 0;  background: linear-gradient(to right, var(--ivory) 25%, rgba(253,253,243,0)); }
.itin-region-nav::after  { right: 0; background: linear-gradient(to left,  var(--ivory) 25%, rgba(253,253,243,0)); }
.itin-region-nav.can-scroll-left::before, .itin-region-nav.can-scroll-right::after { opacity: 1; }
@media (max-width: 820px) {
  .itin-region-scroll { justify-content: flex-start; gap: 10px; padding: 10px var(--gutter); scroll-padding-inline: var(--gutter); }
  .itin-region-chip { min-height: 44px; padding: 0 20px; font-size: 14px; background: #fff; color: var(--black-soft); border: 1.5px solid var(--gray-light); border-radius: 999px; }
  .itin-region-chip.active { background: var(--orange-pale); border-color: var(--orange); color: var(--black); }
}

/* ——— List + region groups ——— */
.itin-archive-list { background: var(--ivory); padding: clamp(28px, 4vw, 40px) var(--gutter) clamp(52px, 7vw, 88px); }
.itin-archive-inner { max-width: 1280px; margin-inline: auto; }
/* Landing spot of a jumped-to heading: below the sticky bar even when the site nav is back on screen (the script tightens it
   to 18px under the bar when the jump scrolls down and the nav slides away). */
.itin-group { margin-bottom: clamp(40px, 6vw, 64px); scroll-margin-top: var(--land, calc(var(--tabs-top) + var(--itin-bar-h) + 18px)); }
.itin-group:last-child { margin-bottom: 0; }
.itin-group-title { font-family: var(--f-display); font-size: clamp(26px, 3.4vw, 32px); font-weight: 900; line-height: 1.15; color: var(--black); margin-bottom: clamp(20px, 3vw, 32px); padding-bottom: 16px; border-bottom: 1px solid var(--gray-light); }

/* ——— Itinerary cards ———
   Centred wrapping flex row (not a fixed grid): the last row of 1-3 cards sits in the middle instead of leaving a void on the right. */
.itin-archive-list .itin-grid { --ig-cols: 4; --ig-gap: clamp(14px, 1.6vw, 20px); display: flex; flex-wrap: wrap; justify-content: center; max-width: none; margin: 0; gap: var(--ig-gap); }
@media (max-width: 1100px) { .itin-archive-list .itin-grid { --ig-cols: 3; } }
@media (max-width: 820px)  { .itin-archive-list .itin-grid { --ig-cols: 2; } }
@media (max-width: 560px)  { .itin-archive-list .itin-grid { --ig-cols: 1; } }
.itin-archive-list .itin-card { flex: 0 0 calc((100% - (var(--ig-cols) - 1) * var(--ig-gap)) / var(--ig-cols) - .02px); }

/* text block is in flow at the bottom (the card grows to fit long titles); its own scrim keeps it readable on any photo */
.itin-card { --itin-shadow: 0 0 0 1px rgba(26,26,26,.09), 0 10px 26px -8px rgba(26,26,26,.16);
  display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 300px; overflow: hidden; overflow: clip; isolation: isolate; background: var(--card-fallback); -webkit-tap-highlight-color: transparent; box-shadow: var(--itin-shadow); }
@media (hover: hover) { .itin-card:hover { box-shadow: 0 0 0 1px rgba(26,26,26,.09), 0 20px 44px -10px rgba(0,0,0,.28); } }
/* pale photos (white sky, haze, snow) must not dissolve into the ivory page: the ring above + this gentle top vignette keep the edge and corners */
.itin-card .itin-overlay { background: linear-gradient(to bottom, rgba(8,8,8,.22) 0, rgba(8,8,8,0) 26%), var(--scrim-card); }
.itin-photo { width: 100%; height: 100%; object-fit: cover; }
.itin-photo.img-failed { display: none; }
/* Per-photo focal points (landscape photos are cropped to a portrait window, the middle 50% by default). Keyed by the Unsplash photo id,
   so the rule follows the photo if a card's image is swapped and quietly stops matching if it is replaced. */
.itin-photo[src*="photo-1552465011-b4e21bf6e79a"] { object-position: 80% 50%; }   /* Friends Trip to Thailand: the karst + longtail boats at the right */
.itin-photo[src*="photo-1779729887183-0e3a1ebfb3e3"] { object-position: 72% 50%; } /* Friends Trip to Europe: Big Ben */
.itin-photo[src*="photo-1637804438194-a638908197b2"] { object-position: 88% 50%; } /* Australia: Melbourne, Cairns...: the diver, right of frame */
.itin-photo[src*="photo-1746382321952-ddcdbfb93a59"] { object-position: 86% 50%; } /* Family Trip to Azerbaijan: the old-town facade, right of frame */
.itin-card:focus-visible { outline-offset: 4px; border-radius: 16px; }
.itin-card .itin-content { position: relative; inset: auto; z-index: 2; padding: 80px clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 22px);
  background: linear-gradient(to top, rgba(8,8,8,.88) 0, rgba(8,8,8,.68) calc(100% - 80px), rgba(8,8,8,0) 100%); }
.itin-card .itin-region { font-size: 11px; line-height: 1.3; margin-bottom: 6px; }
.itin-card .itin-name { font-size: 20px; line-height: 1.2; margin-bottom: 6px; color: #fff; text-wrap: balance; }
.itin-card .itin-days { font-size: 13px; color: rgba(255,255,255,.92); }
.itin-price { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--orange-light); }
.itin-price--request { font-weight: 500; color: rgba(255,255,255,.8); }     /* "Price on request": quieter than a real amount */
@media (hover: none) {
  .itin-card:active { transform: scale(.985); }
  .itin-card:hover { box-shadow: var(--itin-shadow); }
  .itin-card:hover .itin-bg { transform: none; }
}
@media (max-width: 1100px) and (min-width: 561px) { .itin-card { aspect-ratio: 1 / 1.08; } }
/* phones: compact landscape cards (a long list of 300-460px tiles was ~40 screens) */
@media (max-width: 560px) {
  .itin-card { aspect-ratio: auto; min-height: 236px; }
  .itin-card .itin-content { padding: 52px 20px 18px; background: linear-gradient(to top, rgba(8,8,8,.9) 0, rgba(8,8,8,.72) calc(100% - 52px), rgba(8,8,8,0) 100%); }
  .itin-card .itin-name { font-size: 19px; }
  .itin-price { margin-top: 6px; }
}
.itin-card.reveal.visible { transition: transform .4s, box-shadow .4s; transition-delay: 0s !important; animation: itinCardRise .7s var(--ease-out) var(--rd, 0s) backwards; }
@keyframes itinCardRise { from { opacity: 0; transform: translateY(28px); } }

/* ——— Long regions on tablets/phones: first 6 trips + "Show all N" (collapses only when scripts run, so no-JS shows everything) ——— */
.itin-more { display: none; }
@media (max-width: 820px) {
  html.js .itin-group.is-collapsed .itin-card:nth-child(n+7) { display: none; }
  html.js .itin-group.is-collapsed .itin-more { display: flex; }
  .itin-more { align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 18px; padding: 0 24px; font: inherit; font-size: 14px; font-weight: 600; color: var(--black); background: transparent; border: 1.5px solid rgba(26,26,26,.25); border-radius: 60px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, color .2s; }
  .itin-more:active { border-color: var(--orange); color: var(--orange-ink); }
}
@media (hover: hover) and (max-width: 820px) { .itin-more:hover { border-color: var(--orange); color: var(--orange-ink); } }

/* ——— Empty state ——— */
.itin-empty { max-width: 560px; margin: clamp(24px, 6vw, 72px) auto; text-align: center; }
.itin-empty-title { font-family: var(--f-display); font-size: clamp(26px, 4vw, 36px); font-weight: 900; line-height: 1.15; margin-bottom: 14px; }
.itin-empty-text { font-size: 16px; line-height: 1.6; color: var(--ink-muted); margin-bottom: 28px; }
.itin-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 560px) { .itin-empty-actions .btn-primary, .itin-empty-actions .btn-outline-dark { width: 100%; justify-content: center; } }

/* ——— Enquiry strip (shared component; accent + text contrast for this page) ——— */
.enquiry-strip h2 { line-height: 1.12; }
.enquiry-strip h2 em { color: var(--orange-light); font-style: italic; }
.enquiry-strip p { color: rgba(255,255,255,.84); max-width: 560px; margin-inline: auto; text-wrap: balance; }
@media (max-width: 560px) { .enquiry-strip p { font-size: 15px; margin-bottom: 28px; } }