/* ============================================================================
   06-INTERACTIVE — carousel, lightbox, reveal, compare slider, mobile menu,
   plus the corrections from review.
   ============================================================================ */

/* ==========================================================================
   CAROUSEL — proportions taken from the reference build.
   Card 0.747/1 portrait. 3.2 visible desktop · 2.2 tablet · 1.04 mobile,
   the fraction being the peek that tells you it scrolls.
   The row runs from the container's left edge to the RIGHT SCREEN EDGE, so
   cards are clipped by the screen, not by a container — that full-bleed feel
   is most of why the reference looks expensive.
   ========================================================================== */
/* The reference bleeds the row to the right SCREEN edge. That only reads well
   when the container is nearly as wide as the viewport; on a large display the
   centred column leaves a big left margin while the row runs off the right, and
   the two ends can never match. So the row is CONTAINED in the same column as
   the heading — it starts on the heading and clips on the opposite content
   edge. Symmetric at every width, and the peek still says "there is more".
   Sizing uses container query units, so slots measure the viewport element
   itself and no 100vw arithmetic is needed. */
.carousel {
  --c-gap: 24px;
  --c-visible: 3.2;
  --c-radius: 22px;
  position: relative;
}
@media (max-width: 64rem)   { .carousel { --c-visible: 2.2; } }
@media (max-width: 40rem)   { .carousel { --c-visible: 1.04; --c-gap: 16px; --c-radius: 16px; } }

.c-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-m); margin-block-end: var(--space-l);
}
.c-controls { display: flex; gap: var(--space-2xs); flex: 0 0 auto; }
.c-arrow {
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  border: 0; background: var(--bg-elevated); color: var(--label);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.c-arrow svg { inline-size: 17px; block-size: 17px; }
.c-arrow:hover { background: var(--label); color: var(--bg-elevated); }
.c-arrow:active { transform: scale(0.92); }
.c-arrow:disabled { opacity: 0.32; pointer-events: none; }
/* Nothing to scroll to -> no arrows at all. */
.carousel.c-static .c-controls { display: none; }
/* Arrows are pointless without a pointer — touch gets the native swipe. */
@media (hover: none) and (pointer: coarse) { .c-controls { display: none; } }

/* Native image-drag is what actually broke dragging: pressing an <img> and
   moving starts Chrome's built-in drag-and-drop, which cancels our pointer
   events. With no image (C8) you get text selection instead — same cause.
   Applied to the whole carousel, not just .c-ready, so it holds pre-JS too. */
.carousel img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* An <a> starts a native link-drag exactly like an <img> starts an image-drag,
   which is why the H2 article carousel would not drag at all. */
.carousel a, .carousel .c-card { -webkit-user-drag: none; user-drag: none; }
.carousel .c-track, .carousel .c-card { user-select: none; -webkit-user-select: none; }
.c-viewport {
  container-type: inline-size;      /* slots size against THIS, via 100cqw */
  overflow-x: auto; overflow-y: hidden;
  padding-block: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.c-viewport::-webkit-scrollbar { display: none; }
/* no-JS / touch: native scroll-snap */
.carousel:not(.c-ready) .c-viewport { scroll-snap-type: x mandatory; scroll-padding-inline-start: 0; }
/* scroll-snap-stop is the whole fix: without it a fast flick sails past several
   cards and rests between two, so every swipe ends on a split. With it the
   browser stops at the next card, every time. */
.carousel:not(.c-ready) .c-slot { scroll-snap-align: start; scroll-snap-stop: always; }
/* JS drag mode */
.carousel.c-ready .c-viewport { overflow: hidden; cursor: grab; touch-action: pan-y; }
.carousel.c-dragging .c-viewport { cursor: grabbing; }
.carousel.c-ready .c-track { user-select: none; will-change: transform; }

.c-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--c-gap); inline-size: max-content;
}
/* Slots keep their computed width — NOT flex:1. Letting them shrink to fit
   made seven cards "fit" at 160px each, destroying the 0.747/1 proportion. */
.carousel.c-static .c-track { inline-size: 100%; }
.c-slot {
  flex: 0 0 calc((100cqw - (var(--c-visible) - 1) * var(--c-gap)) / var(--c-visible));
  max-inline-size: 30rem;
}

/* --- the card ------------------------------------------------------------ */
.c-card {
  aspect-ratio: 0.747 / 1;
  border-radius: var(--c-radius);
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  text-decoration: none; color: var(--label);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.c-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.c-card > img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center;
}
/* text sits ON the image at the bottom, over a scrim */
.c-card__body {
  position: relative; z-index: 1; margin-block-start: auto;
  padding: var(--space-l) var(--space-m) var(--space-m);
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.66) 45%,
                            rgba(0,0,0,.34) 78%, transparent 100%);
}
.c-card__title {
  font-size: var(--type-title-3); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); letter-spacing: var(--track-title);
  color: #fff; text-wrap: balance;
}
.c-card__text { font-size: var(--type-subhead); color: rgba(255,255,255,.88); margin-block-start: 3px; }
.c-card__eyebrow {
  font-size: var(--type-caption); font-weight: var(--weight-semibold);
  letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
/* No hover zoom badge — the card itself is the affordance. */
/* content-card variant: solid surface, no photo */
.c-card--plain { background: var(--bg-elevated); }
.c-card--plain .c-card__body {
  color: var(--label); background: none; padding: var(--space-l);
  margin-block-start: 0; block-size: 100%;
  display: flex; flex-direction: column;
}
/* the bottom of a plain card gets a hairline + meta row so it never reads empty */
.c-card__meta {
  margin-block-start: auto; padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--separator);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs);
  font-size: var(--type-footnote);
}
.c-card__meta b { font-weight: var(--weight-semibold); color: var(--label); }
.c-card__meta span { color: var(--label-secondary); }
.c-card--plain .c-card__title { color: var(--label); }
.c-card--plain .c-card__text { color: var(--label-secondary); }
.c-card--plain .c-card__num {
  font-family: var(--font-display); font-size: var(--type-large-title);
  font-weight: var(--weight-bold); color: var(--accent); line-height: 1;
  margin-block-end: var(--space-xs);
}
/* same treatment as .card__icon — flat glyph, no pastel tile */
.c-card--plain .card__icon {
  inline-size: auto; block-size: auto; background: none; border-radius: 0;
  color: var(--accent); display: block; padding-block-end: var(--space-s);
  border-block-end: 1.5px solid var(--separator); margin-block-end: var(--space-m);
}
.c-card--plain .card__icon > svg { inline-size: 1.9rem; block-size: 1.9rem; }
.c-card__foot { margin-block-start: auto; padding-block-start: var(--space-s);
  font-size: var(--type-footnote); font-weight: var(--weight-semibold); color: var(--accent); }

/* ==========================================================================
   LIGHTBOX — native scroll-snap track. Swipe is the browser's, so it runs at
   full device Hz like the carousel. Arrows are for mice only.
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(0,0,0,.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox.is-open { display: block; }
.lightbox__track {
  block-size: 100%; display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__item {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  margin: 0; block-size: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-s); padding: var(--space-xl) var(--space-m);
}
.lightbox__item img {
  inline-size: auto; block-size: auto;
  max-inline-size: min(94vw, 1400px); max-block-size: 82vh;
  object-fit: contain; border-radius: var(--radius-m);
}
.lightbox__item figcaption {
  color: rgba(255,255,255,.82); font-size: var(--type-footnote);
  text-align: center; max-inline-size: 60ch;
}
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  inline-size: 46px; block-size: 46px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lightbox__close { inset-block-start: var(--space-m); inset-inline-end: var(--space-m); font-size: 28px; }
.lightbox__nav { inset-block-start: 50%; transform: translateY(-50%); font-size: 26px; }
.lightbox__nav[data-d="-1"] { inset-inline-start: var(--space-l); }
.lightbox__nav[data-d="1"]  { inset-inline-end: var(--space-l); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.28); }
/* Touch swipes. Arrows would just cover the photo. */
@media (hover: none) and (pointer: coarse) { .lightbox__nav { display: none; } }

/* ==========================================================================
   REVEAL — scroll-triggered draw-in
   ========================================================================== */
.will-reveal [data-reveal-item], .will-reveal.is-reveal-self {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.will-reveal [data-reveal-item].is-in { opacity: 1; transform: none; }
/* steps: the rail draws itself downward */
.steps[data-reveal] .steps__item::after { transform-origin: top; transform: scaleY(0);
  transition: transform .5s var(--ease); }
.steps[data-reveal] .steps__item.is-in::after { transform: scaleY(1); }
/* rating bars grow from zero */
.bars[data-reveal] .bar__fill { inline-size: 0 !important; transition: inline-size .9s var(--ease); }
.bars[data-reveal] .bar__fill.is-in { inline-size: var(--pct) !important; }

/* ==========================================================================
   COMPARE SLIDER — G4
   ========================================================================== */
.cmp { --cmp: 50%; position: relative; border-radius: var(--radius-l); overflow: hidden;
  aspect-ratio: 3 / 2; background: var(--gray-6); }
.cmp__a, .cmp__b { position: absolute; inset: 0; }
.cmp__a img, .cmp__b img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.cmp__b { clip-path: inset(0 0 0 var(--cmp)); }
.cmp__range {
  position: absolute; inset-block-end: 0; inset-inline: 0; inline-size: 100%;
  block-size: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3;
  -webkit-appearance: none; appearance: none; background: none;
}
.cmp__handle {
  position: absolute; inset-block: 0; inset-inline-start: var(--cmp);
  inline-size: 3px; background: #fff; z-index: 2; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.cmp__handle::after {
  content: "⇄"; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%,-50%);
  inline-size: 42px; block-size: 42px; border-radius: 50%;
  background: #fff; color: var(--label); display: grid; place-items: center;
  font-size: 16px; box-shadow: var(--shadow-md);
}
.cmp__tag {
  position: absolute; inset-block-start: var(--space-s); z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; font-size: var(--type-caption);
  font-weight: var(--weight-semibold); padding: .25rem .6rem; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cmp__tag--a { inset-inline-start: var(--space-s); }
.cmp__tag--b { inset-inline-end: var(--space-s); }

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */
/* Both axes, not just height: the button was 16px wide because only the bar
   glyph inside it had a size. */
.navbar__toggle {
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  justify-content: center;
  display: none; inline-size: var(--tap-min); block-size: var(--tap-min);
  border: 0; background: none; color: var(--label);
  align-items: center; justify-content: center; cursor: pointer;
}
.navbar__toggle span { display: block; inline-size: 20px; block-size: 2px; background: currentColor;
  border-radius: 2px; position: relative; transition: transform var(--dur) var(--ease); }
.navbar__toggle span::before, .navbar__toggle span::after {
  content: ""; position: absolute; inset-inline: 0; block-size: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast); }
.navbar__toggle span::before { inset-block-start: -6px; }
.navbar__toggle span::after  { inset-block-start: 6px; }
.navbar__toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); }
.navbar__toggle[aria-expanded="true"] span::after  { opacity: 0; }

@media (max-width: 46rem) {
  .navbar__toggle { display: inline-flex; }
  .navbar__links { display: none; }
  /* Lives OUTSIDE .navbar in the DOM: a backdrop-filter ancestor becomes the
     containing block for position:fixed children, which pinned the menu inside
     the 52px bar instead of the viewport. */
  #site-menu {
    position: fixed; inset: 3.25rem 0 0; z-index: 150;
    background: var(--bg); padding: var(--space-l) var(--gutter);
    overflow-y: auto;
  }
  /* Was title-3 semibold at 3.25rem rows — oversized and uneven against the
     language chips below. Headline weight at a steady row height reads as a
     normal iOS menu. */
  #site-menu a {
    display: flex; align-items: center; min-block-size: 3rem;
    font-size: var(--type-headline); font-weight: var(--weight-medium);
    color: var(--label); text-decoration: none;
    border-block-end: 0.5px solid var(--separator);
  }
  #site-menu a:last-of-type { border-block-end: 0; }
}
/* Desktop: hide the panel outright. `display: contents` worked only while the
   panel lived inside .navbar — now that it sits in the page flow (so it escapes
   the navbar's backdrop-filter containing block) contents would dump the links
   into the document. */
@media (min-width: 46.0625rem) {
  #site-menu { display: none !important; }
  .navbar__toggle { display: none; }
}

/* ==========================================================================
   CORRECTIONS FROM REVIEW
   ========================================================================== */

/* B5+D10 — the honest two-column verdict.

   No badge icon: a tinted circle round a tick is the cheapest-looking element
   in any design system, and it was carrying meaning the heading states anyway.
   Instead a short coloured rule above a large heading — an editorial device,
   and the same "one strong element at the top" idea that makes C8 work.
   Item counts are matched per column so the hairlines line up across the pair;
   a 4-vs-3 split made the two sides look misaligned.                        */
.verdict { display: grid; gap: var(--space-m); grid-template-columns: 1fr 1fr; }
.verdict > * {
  background: var(--bg-elevated);
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-l) var(--space-l);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.verdict__rule {
  inline-size: 2.5rem; block-size: 3px; border-radius: 2px;
  background: var(--success); margin-block-end: var(--space-m);
}
.verdict__rule--no { background: var(--label-tertiary); }
.verdict__title {
  font-family: var(--font-display);
  font-size: var(--type-title-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-title);
  line-height: var(--leading-tight);
  color: var(--label);
  text-transform: none;
  margin-block-end: var(--space-m);
  text-wrap: balance;
}
.verdict__title em { font-style: normal; color: var(--label-secondary); font-weight: var(--weight-medium); }
.verdict-list { list-style: none; padding: 0; margin: 0; }
.verdict-list li {
  display: block; font-size: var(--type-callout); line-height: var(--leading-snug);
  padding-block: var(--space-s);
  border-block-start: 1px solid var(--separator);
}
.verdict-list li:first-child { border-block-start: 0; padding-block-start: 0; }
.verdict-list li::before { content: none; }
.verdict__foot {
  margin-block-start: auto; padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--separator);
  font-size: var(--type-footnote); color: var(--label-secondary);
}

@media (max-width: 34rem) {
  .verdict { gap: var(--space-xs); }
  .verdict > * { padding: var(--space-l) var(--space-m) var(--space-m); }
  .verdict__rule { inline-size: 2rem; margin-block-end: var(--space-s); }
  .verdict__title { font-size: var(--type-title-3); margin-block-end: var(--space-s); }
  .verdict-list li { font-size: var(--type-footnote); padding-block: var(--space-xs); }
}

/* C5 price table — the label/value gap was 95% dead space. Value column is
   now only as wide as it needs to be, sitting next to the label. */
.pricetable { table-layout: auto; }
.pricetable td:last-child, .pricetable th:last-child { inline-size: 1%; white-space: nowrap; padding-inline-start: var(--space-xl); }

/* C6 inline CTA — button was floating. Now it aligns to the text baseline
   block on wide, and goes full width on narrow rather than sitting orphaned. */
.inlinecta { align-items: center; }
@media (max-width: 34rem) {
  .inlinecta { flex-direction: column; align-items: stretch; gap: var(--space-s);
               padding: var(--space-m) var(--space-m) var(--space-s); }
  .inlinecta__text { flex: 0 0 auto; text-align: center; }
  .inlinecta .btn { inline-size: 100%; }
}

/* F2/F3 — the count now sits with the score, and the bars actually render.
   They were blank because .bar__fill is a <span>, which is display:inline,
   so inline-size silently did nothing. */
.bar__fill { display: block; }
.ratingsum { grid-template-columns: auto 1fr; gap: var(--space-l); align-items: center; }
.ratingsum__score { text-align: start; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 30rem) { .ratingsum { grid-template-columns: 1fr; } }

/* B4 quick facts — centred pairs with hairline separators, at every width.
   (Supersedes the earlier "use the iOS inset list on mobile" decision.)
   The card keeps its surface; no left rule anywhere. */
.summary--facts { border-inline: 0 !important; padding: 0; overflow: hidden; }
.summary--facts .summary__title { padding: var(--space-m) var(--space-m) 0; }
@media (max-width: 34rem) {
  .summary--facts dl { grid-template-columns: 1fr 1fr; }
  /* horizontal rule between the two rows as well */
  .summary--facts dl > div:nth-child(n+3)::after {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 18%;
    block-size: 1px; background: var(--separator);
  }
  .summary--facts dl > div:nth-child(3)::before { content: none; }
  .summary--facts dd { font-size: var(--type-title-3); }
}

/* D2/D4 icon tiles — the soft rounded pastel square is the single most
   recognisable "generated by AI" tell. Replaced with a flat monoline glyph
   on no background, sized up and sitting on a hairline rule. */
.card__icon {
  inline-size: auto; block-size: auto; background: none; border-radius: 0;
  color: var(--accent); display: block; padding-block-end: var(--space-s);
  border-block-end: 1.5px solid var(--separator); margin-block-end: var(--space-s);
}
.card__icon > svg { inline-size: 1.75rem; block-size: 1.75rem; }

/* Heading wrap — long place names were breaking badly in headings. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: none; }

/* ==========================================================================
   CURSORS — declared last so nothing else overrides them.
   A standalone image says "zoom-in". A card inside a carousel says "grab",
   because drag is its primary gesture — including <a> cards, which would
   otherwise default to the link pointer.
   ========================================================================== */
.is-zoomable { cursor: zoom-in; }
.carousel .is-zoomable,
.carousel .c-card,
.carousel a.c-card,
.carousel.c-ready .c-card,
.carousel.c-ready a.c-card { cursor: grab; }
.carousel.c-dragging .c-card,
.carousel.c-dragging a.c-card { cursor: grabbing; }
/* Nothing to scroll -> normal cursor, and links behave like links again. */
.carousel.c-static .c-card { cursor: default; }
.carousel.c-static a.c-card { cursor: pointer; }


/* ==========================================================================
   GYG WIDGETS — C1b
   Third-party iframes are the only place a price may appear (see CLAUDE.md).
   Space is reserved up front so the widget arriving does not shift the page,
   and released once it has rendered.
   ========================================================================== */
.gygwidget { position: relative; }
.gygwidget:not(.is-loaded) { min-block-size: var(--gyg-h, 20rem); }
.gygwidget:not(.is-loaded)::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-l);
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--separator);
}
.gygwidget:not(.is-loaded)::after {
  content: "Loading live availability from GetYourGuide…";
  position: absolute; inset-block-start: 50%; inset-inline: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: var(--type-footnote);
  color: var(--label-secondary);
}
.gygwidget[data-kind="activities"]:not(.is-loaded) { --gyg-h: 26rem; }
@media (max-width: 46rem) {
  .gygwidget:not(.is-loaded) { --gyg-h: 30rem; }
  .gygwidget[data-kind="activities"]:not(.is-loaded) { --gyg-h: 46rem; }
}

/* ==========================================================================
   REVIEW CARDS — F1, built on the carousel (block 21) rather than as a
   separate component. The old testimonial reel was plain text on a white card
   and read as filler. A real photograph from the tour with the review over it
   makes the proof feel like it came from the trip, which is the point.
   ========================================================================== */
.c-card--review .c-card__body {
  /* Reviews need more scrim than a title does — 3 lines of small text over a
     photograph fails immediately without it. */
  background: linear-gradient(to top,
    rgb(var(--scrim-rgb) / 0.92) 0%, rgb(var(--scrim-rgb) / 0.80) 42%, rgb(var(--scrim-rgb) / 0.42) 74%, transparent 100%);
  padding-block-start: var(--space-2xl);
}
.c-card__stars {
  color: var(--star);
  font-size: var(--type-footnote);
  letter-spacing: 0.09em;
  margin-block-end: var(--space-2xs);
}
.c-card__quote {
  font-size: var(--type-subhead);
  line-height: var(--leading-snug);
  color: #fff;
  text-wrap: pretty;
}
/* The avatar spans both lines: name sits on its top edge, place and date on its
   bottom. Centring a 26px circle against two lines of text left it floating
   between them with the name clear of it entirely. */
.c-card__who {
  display: flex; align-items: stretch; gap: var(--space-xs);
  margin-block-start: var(--space-s);
}
.c-card__avatar {
  inline-size: 40px; block-size: 40px; border-radius: 50%;
  object-fit: cover; flex: none; align-self: center;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.5);
}
.c-card__whotext {
  display: flex; flex-direction: column; justify-content: space-between;
  min-block-size: 40px; min-inline-size: 0;
}
.c-card__name { font-size: var(--type-caption); font-weight: var(--weight-semibold); color: #fff; }
.c-card__meta-line { font-size: var(--type-caption); color: rgba(255,255,255,0.72); }
.c-card__verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--type-caption); color: rgba(255,255,255,0.72);
}

/* The widget's own "Powered by GetYourGuide" fallback link ships as bare inline
   text at 20px tall. It is a real link, so it needs a real target. */
.gygwidget > div > span { display: block; padding-block: var(--space-xs); font-size: var(--type-footnote); color: var(--label-secondary); }
.gygwidget > div > span a { display: inline-flex; align-items: center; min-block-size: var(--tap-min); }

/* Language inside the phone menu — the header has no room for a globe once the
   title is centred, and a language list is a menu concern anyway. */
.site-menu__label {
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-xs);
  font-size: var(--type-caption); font-weight: var(--weight-semibold);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--label-secondary);
}
/* Language as an iOS inset grouped list, not a row of chips. This is the
   pattern Settings actually uses for a single-choice list: full-width rows,
   hairline separators inset from the leading edge, a tick on the current one.
   Chips read as filters — several can be on at once — which is the wrong
   affordance for picking exactly one language. */
.langlist { margin-block-start: var(--space-xs); }
.langlist .list-row {
  min-block-size: var(--tap-min);
  justify-content: space-between;
  font-size: var(--type-body);
}
/* No disclosure chevron. a.list-row carries one because most list rows lead
   somewhere with more to see; a single-choice list is finished at the tick, and
   showing both says "chosen, and also there is more" — two answers to one
   question. */
.langlist a.list-row::after { content: none; }
.langlist .list-row[aria-current] { color: var(--accent); font-weight: var(--weight-semibold); }
.langlist .list-row[aria-current] .langlist__tick { color: var(--accent); }
.langlist__tick { inline-size: 1.1rem; block-size: 1.1rem; flex: none; opacity: 0; }
.langlist .list-row[aria-current] .langlist__tick { opacity: 1; }
.langlist__native { color: var(--label-tertiary); font-size: var(--type-footnote); }


/* ==========================================================================
   THEME TOGGLE — footer. iOS switch: a track that fills and a knob that
   travels. No icons inside the control; the label carries the meaning.
   ========================================================================== */
/* ============================================================================
   THEME TOGGLE — iOS switch.

   The track and knob are real elements, not pseudo-elements on the <input>.
   Pseudo-elements on form controls are unreliable — that is what produced an
   oval knob overflowing an oval track. The input is transparent, sits on top,
   and stays focusable; everything visible is a <span>.

   iOS geometry: 51x31 track, 27px knob, 2px inset, 20px travel.
   ============================================================================ */
.themetoggle {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  position: relative; cursor: pointer;
  min-block-size: var(--tap-min);
}
.themetoggle__label { font-size: var(--type-footnote); color: var(--label-secondary); }

.themetoggle__input {
  position: absolute; inset-inline-end: 0; inset-block: 0;
  inline-size: 3.2rem; block-size: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}

.themetoggle__track {
  flex: none;
  /* The input sits underneath in z-order; without this the track swallows the
     click and the control is only operable via the label. */
  pointer-events: none;
  inline-size: 51px; block-size: 31px;
  border-radius: 999px;
  background: var(--gray-4);
  position: relative;
  transition: background-color var(--dur) var(--ease);
}
.themetoggle__knob {
  position: absolute;
  inset-block-start: 2px; inset-inline-start: 2px;
  inline-size: 27px; block-size: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16);
  transition: translate var(--dur) var(--ease);
  display: grid; place-items: center;
}
/* Sun and moon stacked in the knob, cross-fading. Without a glyph the control
   says "something is on" but never says what. */
.themetoggle__knob svg {
  grid-area: 1 / 1;
  inline-size: 58%; block-size: 58%;
  transition: opacity var(--dur-fast) var(--ease), rotate var(--dur) var(--ease);
}
.themetoggle__knob .ico-sun  { color: #F5A524; opacity: 1; }
/* Fixed colours, not tokens. The knob is white in BOTH themes, so a token that
   inverts (--label-secondary goes light in dark mode) renders the moon almost
   invisible on it. */
.themetoggle__knob .ico-moon { color: #3F4470; opacity: 0; rotate: -50deg; }
.themetoggle__input:checked ~ .themetoggle__track .ico-sun  { opacity: 0; rotate: 50deg; }
.themetoggle__input:checked ~ .themetoggle__track .ico-moon { opacity: 1; rotate: 0deg; }
.themetoggle__input:checked ~ .themetoggle__track { background: var(--success); }
.themetoggle__input:checked ~ .themetoggle__track .themetoggle__knob { translate: 20px 0; }
.themetoggle__input:focus-visible ~ .themetoggle__track {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* Header variant: no visible text, slightly smaller. */
.themetoggle--bare { gap: 0; }
.themetoggle--bare .themetoggle__label {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.themetoggle--bare .themetoggle__track { inline-size: 44px; block-size: 26px; }
.themetoggle--bare .themetoggle__knob { inline-size: 22px; block-size: 22px; }
.themetoggle--bare .themetoggle__input:checked ~ .themetoggle__track .themetoggle__knob { translate: 18px 0; }

@media (prefers-reduced-motion: reduce) {
  .themetoggle__track, .themetoggle__knob, .themetoggle__knob svg { transition: none; }
}

/* ==========================================================================
   TIMELINE OVERFLOW — E6. A 24-stop pickup list is not an itinerary, it is a
   wall. The middle collapses behind one row; first stops and the terminus stay
   visible so the shape of the day still reads. Without JS every stop shows,
   which is the correct no-script fallback.
   ========================================================================== */
.timeline[data-collapsible] .timeline__item[data-extra] { display: none; }
.timeline[data-collapsible][data-open] .timeline__item[data-extra] { display: list-item; }
.timeline__more {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--type-subhead); font-weight: var(--weight-semibold);
  color: var(--accent); text-align: start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-block-size: var(--tap-min); padding-inline-end: 5px;
}
.timeline__more::after {
  content: ""; inline-size: 6px; block-size: 6px;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.timeline[data-open] + .timeline__more::after,
.timeline__more[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }