/* ===========================================================================
   Oloitiko — page-specific compositions
   Package detail, filters, itinerary, quote flow, gallery, map
   =========================================================================== */

/* ==================================================== package: facts bar */

.facts {
  border-block: 1px solid var(--rule);
  background: var(--ivory);
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.facts__item {
  padding: var(--sp-5) var(--sp-4);
  border-right: 1px solid var(--rule);
}
.facts__item:last-child { border-right: 0; }
.facts__label {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.facts__value { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
@media (max-width: 700px) {
  .facts__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .facts__item:nth-child(2n) { border-right: 0; }
  .facts__item { border-bottom: 1px solid var(--rule); }
}

/* ================================================ package: section nav */

.pagenav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
}
.pagenav__scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.pagenav__scroll::-webkit-scrollbar { display: none; }
.pagenav__link {
  flex: none;
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pagenav__link:hover { color: var(--text); }
.pagenav__link.is-active { color: var(--clay); border-bottom-color: var(--clay); }

/* =============================================== package: main + aside */

.pkg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 1080px) {
  .pkg-layout { grid-template-columns: minmax(0, 1fr); }
  .pkg-aside { display: none; }
}

.pkg-aside {
  position: sticky;
  top: calc(var(--header-h) + 4rem);
}
.quote-panel {
  border: 1px solid var(--rule);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}
.quote-panel__head {
  padding: var(--sp-5);
  background: var(--green-950);
  color: var(--ivory);
}
.quote-panel__from {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-300);
}
.quote-panel__price {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.1;
  margin-block: var(--sp-2);
}
.quote-panel__price small { font-family: var(--font-sans); font-size: var(--step--1); color: var(--green-300); }
.quote-panel__note { font-size: var(--step--2); color: var(--green-300); line-height: 1.5; }
.quote-panel__body { padding: var(--sp-5); }
.quote-panel__body .field { margin-bottom: var(--sp-4); }
.quote-panel__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.quote-panel__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--rule);
  background: var(--ivory);
  font-size: var(--step--2);
  color: var(--text-muted);
  text-align: center;
}

/* Mobile sticky CTA */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  display: none;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.sticky-cta.is-on { transform: none; }
@media (max-width: 1080px) { .sticky-cta { display: grid; grid-template-columns: 1fr 1fr; } }
.sticky-cta a {
  min-height: 4.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--ivory);
  color: var(--text);
  text-decoration: none;
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.sticky-cta a strong { font-family: var(--font-display); font-size: var(--step-0); font-weight: 400; letter-spacing: 0; text-transform: none; }
.sticky-cta a.is-primary { background: var(--clay); color: var(--ivory); }
.sticky-cta a.is-wa { background: var(--green-800); color: var(--ivory); }

/* ================================================ package: highlights */

.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-5) var(--sp-7); }
.highlight { display: flex; gap: var(--sp-4); align-items: flex-start; }
.highlight__num {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--clay);
  line-height: 1;
  width: 2rem;
  padding-top: 2px;
  border-top: 1px solid var(--clay);
}
.highlight__text { font-size: var(--step--1); line-height: var(--lh-loose); }

/* ================================================= package: itinerary */

.itin__controls {
  display: flex;
  gap: var(--sp-4);
  justify-content: flex-end;
  margin-bottom: var(--sp-5);
}
.itin__control {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.itin__control:hover { color: var(--clay); border-color: var(--clay); }

.itin { position: relative; }
/* The vertical spine */
.itin::before {
  content: "";
  position: absolute;
  left: 0.6rem; top: 1rem; bottom: 1rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--clay) 0 3rem, var(--rule) 3rem 100%);
}
@media (max-width: 700px) { .itin::before { left: 0.45rem; } }

.day { position: relative; padding-left: clamp(2.25rem, 4vw, 3.5rem); }
.day + .day { margin-top: var(--sp-3); }
.day__dot {
  position: absolute;
  left: 0; top: 1.6rem;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--brown-500);
  display: grid; place-items: center;
  transition: border-color var(--dur-base) var(--ease-out);
}
.day__dot::after {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--brown-500);
  transition: background var(--dur-base) var(--ease-out);
}
.day.is-open .day__dot { border-color: var(--clay); }
.day.is-open .day__dot::after { background: var(--clay); }
@media (max-width: 700px) { .day__dot { width: 0.9rem; height: 0.9rem; top: 1.5rem; } }

.day__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.day__num {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: var(--sp-2);
  display: block;
}
.day__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--lh-heading);
  color: var(--text);
  transition: color var(--dur-fast);
}
.day__trigger:hover .day__title { color: var(--clay); }
.day__sub { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-2); }
.day__chev { flex: none; margin-top: 0.5rem; color: var(--brown-500); transition: transform var(--dur-base) var(--ease-out); }
.day__trigger[aria-expanded="true"] .day__chev { transform: rotate(180deg); }

.day__panel[hidden] { display: none; }
.day__inner { padding: var(--sp-6) 0 var(--sp-7); }
.day__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .day__grid { grid-template-columns: minmax(0,1fr); } }

.day__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.day__fact { font-size: var(--step--2); }
.day__fact dt { letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.day__fact dd { margin: 0; font-size: var(--step--1); }

.day__acts { list-style: none; margin-top: var(--sp-5); }
.day__acts li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.day__acts li + li { margin-top: var(--sp-2); }
.day__acts li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 1px;
  background: var(--clay);
}
.day__acts .is-optional::after {
  content: "Optional";
  margin-left: var(--sp-2);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brown-500);
}

/* Accommodation panel inside a day */
.stay {
  margin-top: var(--sp-5);
  border: 1px solid var(--rule);
  background: var(--ivory);
}
.stay__media { }
.stay__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.stay__label {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.stay__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.stay__name a { text-decoration: none; }
.stay__name a:hover { color: var(--clay); }
.stay__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.stay__alt { font-size: var(--step--2); color: var(--text-muted); margin-top: var(--sp-3); }

/* ==================================================== included/excluded */

.inex { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 760px) { .inex { grid-template-columns: minmax(0,1fr); } }
.inex__list { list-style: none; }
.inex__list li {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: var(--lh-body);
}
.inex__mark { flex: none; margin-top: 0.35em; }
.inex--in .inex__mark { color: var(--ok); }
.inex--out .inex__mark { color: var(--brown-500); }
.inex--out li { color: var(--text-muted); }

/* ============================================================== extras */

.extra {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 620px) {
  .extra { grid-template-columns: 4.5rem minmax(0,1fr); }
  .extra__price { grid-column: 2; }
}
.extra__name { font-family: var(--font-display); font-size: var(--step-1); }
.extra__text { font-size: var(--step--2); color: var(--text-muted); margin-top: 2px; }
.extra__price { font-family: var(--font-display); font-size: var(--step-1); white-space: nowrap; }
.extra__price small { display: block; font-family: var(--font-sans); font-size: var(--step--2); color: var(--text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ============================================================== filters */

/* Listing pages put the filters in a left rail and the results beside them,
   so the controls stay in view while you scroll the grid. */
.index-layout {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) {
  .index-layout { grid-template-columns: minmax(0, 1fr); }
}

.index-rail { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 900px) { .index-rail { position: static; } }

/* The results column sizes its own columns, so the grid stays sensible whether
   the rail is present or not. */
/* 18rem keeps two columns beside the rail at 1024px and finds a third at
   1600px+, instead of collapsing to one very wide card on a tablet. */
.index-results .grid {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
@media (max-width: 560px) {
  .index-results .grid { grid-template-columns: minmax(0, 1fr); }
}

.filters {
  border: 1px solid var(--rule);
  background: var(--ivory);
  padding: var(--sp-5);
  margin-bottom: var(--sp-7);
}
/* In the rail the form is one field per row; the mobile drawer re-uses it. */
.index-rail .filters { margin-bottom: 0; }
.index-rail .filters__row { grid-template-columns: minmax(0, 1fr); }
.index-rail .filters__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

.filters__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-4);
  align-items: end;
}
.filters__toggles { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.filters .field { margin-bottom: 0; }
.filters__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.filters__count { font-size: var(--step--1); color: var(--text-muted); }
.filters__count strong { color: var(--text); font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: var(--step--2);
  letter-spacing: 0.03em;
  cursor: pointer;
  background: var(--white);
  transition: all var(--dur-fast) var(--ease-out);
  user-select: none;
}
.chip:hover { border-color: var(--brown-500); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--green-800); border-color: var(--green-800); color: var(--ivory); }
.chip input:focus-visible ~ span { outline: 2px solid var(--clay); outline-offset: 4px; }

/* Mobile filter drawer.
   Scoped to [data-filter-panel] — only a panel that has a matching open button
   may hide itself on mobile. A filter form without one (the accommodation
   index) simply stacks, rather than disappearing with no way back. */
.filters__mobile-open { display: none; }
@media (max-width: 860px) {
  .filters__mobile-open { display: inline-flex; }
  .filters[data-filter-panel] { display: none; }
  .filters.is-open {
    display: block;
    position: fixed; inset: 0;
    z-index: var(--z-drawer);
    margin: 0; border: 0;
    overflow-y: auto;
    padding: var(--sp-5) var(--gutter) 7rem;
  }
  .filters.is-open .filters__row { grid-template-columns: minmax(0,1fr); }
  .filters__close { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; background: var(--ivory); padding-block: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
}
@media (min-width: 861px) { .filters__close { display: none; } }

.grid-results { transition: opacity var(--dur-base) var(--ease-out); }
.grid-results.is-loading { opacity: 0.35; pointer-events: none; }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--sand) 25%, var(--sand-deep) 50%, var(--sand) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton__line { height: 0.8rem; margin-top: var(--sp-3); }

/* =========================================================== quote flow */

.quote { max-width: 52rem; margin-inline: auto; }
.quote__progress { margin-bottom: var(--sp-8); }
.quote__bar { height: 2px; background: var(--stone); position: relative; overflow: hidden; }
/* scaleX rather than width: composited on the GPU, no layout per frame. */
.quote__bar span { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--clay); transition: transform var(--dur-slow) var(--ease-out); }
.quote__steps {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-3);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.quote__step[hidden] { display: none; }
.quote__question { margin-bottom: var(--sp-6); }
.quote__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-3); }
.quote__nav { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--rule); }
.quote__back { font-size: var(--step--1); color: var(--text-muted); }
.quote__back:hover { color: var(--clay); }

/* The planner reuses the filter grid, whose bottom alignment lines a filter bar
   up with its button. In a form it misfires: an error message that wraps to two
   lines makes its own field taller, and that input rises above its neighbours. */
.quote .filters__row { align-items: start; }

/* The planner's running price. Dark, like the price panel on an itinerary page,
   so a guest recognises it as the same kind of number. */
.estimate {
  margin-bottom: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  background: var(--green-950);
  color: var(--ivory);
}
.estimate[hidden] { display: none; }
.estimate__eyebrow {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-300);
}
.estimate__headline {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.1;
  margin-block: var(--sp-2) var(--sp-1);
}
.estimate__headline small { font-family: var(--font-sans); font-size: var(--step--1); color: var(--green-300); }
/* On a phone the display size breaks a price range across two lines and leaves
   the dash hanging. One size down keeps "US$10,429 – 21,090" on a single line. */
@media (max-width: 480px) { .estimate__headline { font-size: var(--step-3); } }
.estimate__total { font-size: var(--step-0); }
.estimate__basis { margin-top: var(--sp-3); font-size: var(--step--1); max-width: 44rem; }
.estimate__caveat { margin-top: var(--sp-3); font-size: var(--step--2); color: var(--green-300); max-width: 44rem; }

.quote-done { text-align: center; max-width: 34rem; margin-inline: auto; padding-block: var(--sp-8); }
.quote-done__mark {
  width: 4rem; height: 4rem;
  margin-inline: auto;
  border: 1px solid var(--clay);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--clay);
  margin-bottom: var(--sp-5);
}
.quote-done__ref {
  display: inline-block;
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: var(--sand);
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.06em;
}

/* ============================================================= gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
/* First image spans wide — an editorial opening rather than a uniform grid */
.gallery > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gallery > *:nth-child(1) { grid-column: span 2; grid-row: auto; }
}
.gallery__item { display: block; overflow: hidden; cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(18, 33, 26, 0.96);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--gutter); color: rgba(250,247,241,.8); font-size: var(--step--2); }
.lightbox__stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 78svh; width: auto; height: auto; object-fit: contain; }
.lightbox__foot { padding: var(--sp-4) var(--gutter) var(--sp-6); text-align: center; color: rgba(250,247,241,.72); font-size: var(--step--1); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  color: var(--ivory);
  border: 1px solid rgba(250,247,241,.28);
  border-radius: 50%;
  transition: all var(--dur-fast);
}
.lightbox__nav:hover { background: rgba(250,247,241,.12); }
.lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__next { right: clamp(0.5rem, 2vw, 2rem); }
.lightbox__close { color: var(--ivory); }

/* ================================================================= map */

.map { position: relative; }
.map__canvas { width: 100%; aspect-ratio: 16/10; background: var(--sand); border: 1px solid var(--rule); }
@media (max-width: 700px) { .map__canvas { aspect-ratio: 10/8; } }
.map__route { list-style: none; margin-top: var(--sp-5); }
.map__stop {
  position: relative;
  padding-left: var(--sp-6);
  padding-block: var(--sp-2);
  font-size: var(--step--1);
}
.map__stop::before {
  content: "";
  position: absolute; left: 0.35rem; top: 1.1rem; bottom: -0.4rem;
  width: 1px; background: var(--rule);
}
.map__stop:last-child::before { display: none; }
.map__stop::after {
  content: "";
  position: absolute; left: 0; top: 0.72rem;
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  border: 1px solid var(--clay);
  background: var(--ivory);
}
.map__stop strong { font-weight: 500; }
.map__stop span { color: var(--text-muted); }
/* Leaflet, when present, must not float above the sticky header */
.leaflet-pane, .leaflet-control { z-index: 5 !important; }

/* ============================================================ reviews */

.review { border-top: 1px solid var(--rule); padding-top: var(--sp-5); }
.review__stars { display: flex; gap: 3px; color: var(--clay); margin-bottom: var(--sp-4); }
.review__body { font-family: var(--font-display); font-size: var(--step-1); line-height: var(--lh-heading); text-wrap: pretty; }
.review__foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.review__avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; flex: none; }
.review__avatar .o-media { aspect-ratio: 1/1; }
.review__who { font-size: var(--step--1); }
.review__who strong { display: block; font-weight: 500; }
.review__who span { color: var(--text-muted); font-size: var(--step--2); }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(21rem, 78vw), 1fr);
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-4);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: var(--sp-2); }
.rail-nav button {
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.rail-nav button:hover:not(:disabled) { border-color: var(--clay); color: var(--clay); }
.rail-nav button:disabled { opacity: .3; cursor: default; }

/* ============================================================== expert */

.expert {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .expert { grid-template-columns: minmax(0,1fr); } }
.expert__quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--lh-heading);
  text-wrap: pretty;
}
.expert__who { margin-top: var(--sp-5); font-size: var(--step--1); }
.expert__who strong { display: block; font-weight: 500; }
.expert__who span { color: var(--text-muted); }

/* =============================================== table of contents (blog) */

.toc { border-left: 1px solid var(--rule); padding-left: var(--sp-5); font-size: var(--step--1); }
.toc__title { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-4); }
.toc ol { list-style: none; }
.toc li + li { margin-top: var(--sp-3); }
.toc li.is-sub { padding-left: var(--sp-4); }
.toc a { text-decoration: none; color: var(--text-muted); transition: color var(--dur-fast); }
.toc a:hover, .toc a.is-active { color: var(--clay); }

.article-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0,1fr); }
  .article-layout .toc { display: none; }
}
.article-layout .toc { position: sticky; top: calc(var(--header-h) + 2rem); }

/* ============================================================== search */

.search-group + .search-group { margin-top: var(--sp-8); }
.search-result { display: block; padding-block: var(--sp-4); border-bottom: 1px solid var(--rule); text-decoration: none; }
.search-result:hover .search-result__title { color: var(--clay); }
.search-result__title { font-family: var(--font-display); font-size: var(--step-1); transition: color var(--dur-fast); }
.search-result__text { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-2); }

/* ===========================================================================
   Touch targets (WCAG 2.5.8)
   Loaded last so it wins the cascade. Standalone controls get a 44px hit area
   on touch-sized screens WITHOUT changing how they look — the extra area comes
   from padding and negative margin, so the visual rhythm is untouched.
   Inline links inside a sentence are exempt under 2.5.8 and left alone.
   =========================================================================== */

@media (max-width: 900px) {
  /* Footer navigation columns — stacked standalone links */
  .footer__list li + li { margin-top: 0; }
  .footer__list a {
    display: block;
    padding-block: 0.6rem;
    min-height: 44px;
  }
  .footer__legal a,
  .footer__contact dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Itinerary expand/collapse */
  .itin__control {
    padding: 0.7rem 0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .itin__controls { gap: var(--sp-5); }

  /* "Read more" style links */
  .link-arrow {
    padding-block: 0.65rem var(--sp-2);
    min-height: 44px;
  }

  /* Accommodation name inside an itinerary day */
  .stay__name a,
  .map__stop a {
    display: inline-block;
    padding-block: 0.5rem;
  }

  /* Brand lockup in the header and drawer */
  .brand { min-height: 44px; align-items: center; }

  /* Month tabs and filter chips */
  .months__tab { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 40px; }

  /* Search results and article links are already block-level and tall enough. */
}

/* Pointer-coarse devices of any width get the same treatment. */
@media (pointer: coarse) {
  .pagenav__link { min-height: 46px; display: inline-flex; align-items: center; }
  .rail-nav button { min-width: 46px; min-height: 46px; }
}