/* ============================================================
   Buckettrips — Tour Page v2
   Clean mobile-first rebuild.
   No negative margins, no 100vw tricks, no overflow hacks.
   ============================================================ */

/* ── ROOT CONTAINMENT ── */
.tour { overflow-x:hidden; overflow-x:clip; max-width:100%; }
body.tour-page { padding-bottom:0; }
body.tour-page footer { margin-top:0 !important; margin-bottom:64px; }
body.tour-page .navbar { position:fixed; top:0; left:0; right:0; z-index:80; }
body.tour-page .settings-fab { display:none !important; }

/* Global content safety — user-generated HTML can't overflow.

   `:where()` on purpose. As `.tour img` this is one class and one type, which
   beats any single-class rule below it and takes the height of every classed
   image on the page with it. A place photograph set to 20 by 20 kept its width
   and got its own height back, so a landscape thumbnail drew a lozenge and a
   portrait one a tall egg, and the country flag beside it -- an SVG, square
   whatever you do to it -- became the bigger object in the line. It had already
   cost a day on the inclusive icons and a flag that filled a card. Inside
   :where() the type selector counts for nothing, so this still catches the raw
   <img> in an authored day description, which is the only thing it was for, and
   loses to every rule that names an image by class. */
.tour :where(img) { max-width:100%; height:auto; }
.tour iframe,.tour video,.tour table,.tour pre { max-width:100%; }

/* ── LAYOUT ── */
.tour-layout {
    max-width:1200px; margin:0 auto;
    padding:60px 16px 64px;
}
.tour-content { min-width:0; }
.tour-sidebar { display:none; }

/* ── HEADER ── */
/* position:relative for the cover image behind it, but deliberately NOT
   isolation:isolate. Isolating the header seals everything inside it into one
   stacking context, and the panel a count opens then cannot rise above what
   comes after the header however high its z-index goes -- which is how the
   places list ended up under the moments. The cover sits at z-index -1 and
   that is enough to keep it behind the words. */
.tour-header { padding:16px 0 12px; position:relative; }
/* The route's own thumbnail, masked to nothing before the meta row and bled
   past the layout's gutter so it reaches the edges of a phone.

   It runs up behind the navbar rather than starting under it -- a picture that
   begins below a fixed bar leaves a strip of bare page between the two -- and
   then a long way further up again, so pulling the page down past its top
   rubber-bands into more photograph instead of into a gap. */
.tour-header.has-shot::before {
    content:''; position:absolute; z-index:-1;
    top:calc(-1 * (60px + var(--tour-nav,56px) + 320px));
    left:-16px; right:-16px; bottom:0;
    background-image:var(--tour-shot); background-size:cover;
    /* Horizontally, where somebody put the focal point. Vertically, the bottom:
       this box runs hundreds of pixels above the header for the bleed, so a
       vertical focal point would place the chosen part of the picture up behind
       the navbar where nobody can see it. */
    background-position:var(--tour-shot-x,50%) bottom;
    opacity:.28;
    /* Two masks, intersected -- not a white sheet fading over the top, which
       would tint the page and could only ever be right in one theme. A mask
       takes the picture itself to nothing and adds no color at all.

       The first fade is in pixels from the bottom rather than a percentage,
       because this box runs hundreds of pixels up behind the navbar and a
       percentage of all that put the whole fade off screen -- which is what
       made it end so abruptly. The second runs across the diagonal, so the
       picture is strongest at the top right and thinnest where the title and
       the route line have to be read. */
    -webkit-mask-image:
        linear-gradient(to top, transparent 0, #000 250px),
        linear-gradient(to bottom left, #000 0%, #000 30%, rgba(0,0,0,.06) 92%);
    mask-image:
        linear-gradient(to top, transparent 0, #000 250px),
        linear-gradient(to bottom left, #000 0%, #000 30%, rgba(0,0,0,.06) 92%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
}
/* A pale page hides a faint picture, so it gets more of one. */
[data-mode="light"] .tour-header.has-shot::before { opacity:.5; }
.tour-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tour-title {
    font-size:1.6rem; font-weight:800;
    letter-spacing:-.02em; line-height:1.2; margin:0 0 6px;
}
.tour-route {
    font-family:var(--font-mono);
    font-size:.8rem; font-weight:500;
    color:var(--text-muted); margin-bottom:8px;
}
/* The same line, with the places wearing their own photographs. It scrolls
   sideways rather than wrapping: a route reads as one line or not at all. */
.tour-route-faces {
    display:flex; align-items:center; gap:7px; overflow-x:auto;
    padding-bottom:2px; margin-bottom:10px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tour-route-faces::-webkit-scrollbar { display:none; }
.tour-route-stop { display:inline-flex; align-items:center; gap:6px; flex:none; white-space:nowrap; }
.tour-route-stop img {
    width:26px; height:26px; border-radius:50%; object-fit:cover; display:block;
    border:1px solid var(--border-color);
}
.tour-route-stop span { font-size:.78rem; color:var(--text-secondary); }
.tour-route-arrow { flex:none; opacity:.45; font-size:.75rem; }

/* ── WHAT YOU WILL REMEMBER ── */
/* Room above it: it is a section, and it was sitting on the header's chin. */
.tour-moments { margin:22px 0 22px; }

.tour-moments-row {
    display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;
    scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tour-moments-row::-webkit-scrollbar { display:none; }
.tour-moment {
    position:relative; flex:0 0 208px; scroll-snap-align:start; text-decoration:none; color:inherit;
    border:1px solid var(--border-color); border-radius:14px; overflow:hidden;
    background:var(--card-bg); transition:border-color .2s ease, transform .2s ease;
}
.tour-moment:hover { border-color:var(--accent-color); transform:translateY(-2px); }
.tour-moment img { width:100%; height:118px; object-fit:cover; display:block; }
.tour-moment > .photo-mark { top:8px; bottom:auto; }
.tour-moment-body { display:block; padding:9px 11px 12px; }
.tour-moment-day {
    display:block; font-size:.6rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--accent-color); margin-bottom:3px;
}
.tour-moment-text { display:block; font-size:.79rem; line-height:1.45; font-weight:600; }
@media(min-width:1024px){
    .tour-moment { flex:0 0 236px; }
    .tour-moment img { height:132px; }
}
.tour-meta {
    display:flex; align-items:center; gap:8px;
    flex-wrap:wrap; font-size:.875rem; color:var(--text-secondary);
}
.tour-dot { width:3px; height:3px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.tour-stars { color:#f59e0b; }

/* ── ROUTE SWITCHER (inline) ── */
/* ── THE WAYS THIS ROUTE RUNS ──
   One control for both kinds of variant, replacing a text link ("Also
   available: <-> Reykjavik") and an amber callout that said the same thing in a
   second idiom.

   No amber: it is `--warning-color` here and the page spends it on scarcity, so
   a better version of the trip sitting in the alarm color read as a caveat.
   These are cards in the site's own idiom -- the 1.5px border, the radius and
   the accent hover the departure rows use -- and a special is gold.

   The card being viewed is shown, not omitted. A switcher listing only the
   alternatives makes the reader deduce where they are; naming it costs one card
   and settles it. That matters more here than usual, because choosing a variant
   filters the whole page. */
.tour-ways { margin-bottom:18px; }
.tour-ways-lbl {
    display:block; margin-bottom:7px;
    font-size:.63rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
    color:var(--text-muted);
}
/* A grid, not a wrapping flex row. Flex-wrap stretches whatever is left on the
   last line, so four versions came out as three wide cards and one enormous one.
   `auto-fit` with a floor keeps every card the same width however many there
   are: three fill the row, six make two tidy rows of four and two. The
   `min(...,100%)` is the usual guard -- a bare 280px floor overflows a screen
   narrower than 280px instead of shrinking. */
.tour-ways-list {
    display:grid; gap:8px;
    grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.tour-way {
    min-width:0; display:flex; flex-direction:column; gap:3px;
    padding:11px 14px; border:1.5px solid var(--border-color); border-radius:14px;
    text-decoration:none; color:inherit;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.tour-way:hover { border-color:var(--accent-color); box-shadow:0 4px 24px var(--accent-alpha); }
.tour-way-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tour-way-name { font-size:.88rem; font-weight:700; letter-spacing:-.014em; }
/* The same gold sparkle the departure rows wear, so a special edition is one
   recognizable object wherever it appears on the page. */
.tour-way-star { width:13px; height:13px; fill:var(--warning-color); flex:0 0 auto; }
.tour-way.is-special { border-color:rgba(245,158,11,.45); }
.tour-way.is-special:hover { border-color:var(--warning-color); box-shadow:0 4px 24px var(--warning-alpha); }
/* How many dates, and which is next. The count is the trade being offered --
   "1 departure" against "5 departures" says what switching costs before it is
   clicked -- and on a special the date is the product. */
.tour-way-meta {
    font-size:.72rem; color:var(--text-secondary); font-weight:600;
}
/* Two lines, whatever was typed. A 255-character description is allowed and one
   long one made its card twice the height of the others, which in a grid drags
   the whole row with it. The name, the count and the date are the decision; the
   sentence is the reason, and two lines of it is enough to go on. */
.tour-way-desc {
    font-size:.76rem; color:var(--text-muted); line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}

/* The one on screen. The accent border the checkout uses for a chosen row, and
   an explicit word: a filtered page that does not say it is filtered is a page
   quietly hiding departures from somebody counting them. */
.tour-way.is-current {
    border-color:var(--accent-color); background:var(--accent-alpha); cursor:default;
}
.tour-way.is-current:hover { box-shadow:none; border-color:var(--accent-color); }
.tour-way.is-current.is-special { border-color:var(--warning-color); background:var(--warning-alpha); }
.tour-way-here {
    font-size:.58rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
    color:var(--accent-color); border:1px solid currentColor;
    padding:1px 6px; border-radius:20px; flex:0 0 auto;
}
.tour-way.is-special .tour-way-here { color:var(--warning-color); }

/* ── On a phone: a rail, not a stack ──
   Three of these stacked is most of a screen, and this sits above everything the
   page is actually selling -- somebody would scroll past the whole switcher
   before reading a word about the trip. The same rail the moments row uses:
   swipe, snap, no scrollbar.

   It stays inside the page's own gutter and does NOT bleed to the screen edge.
   Bleeding it with a negative margin and matching padding is the usual trick and
   it put the first card a gutter's width left of the label above it and the
   section below, which reads as a broken row rather than as a deliberate edge.
   Every other block on this page starts on the same line; so does this one.

   The card is 78% wide so the next one is always visibly there, which is the
   only thing that tells a reader to swipe. */
@media (max-width:700px) {
    .tour-ways-list {
        display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
        scroll-snap-type:x mandatory; scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }
    .tour-ways-list::-webkit-scrollbar { display:none; }
    .tour-way { flex:0 0 78%; scroll-snap-align:start; padding:9px 13px; }
    /* No description here. On a phone this control is navigation sitting above
       everything the page sells, and the name with its trip count is the whole
       decision -- the sentence explaining a version is on the page that version
       opens. Dropping it takes the card from four lines to two, which is the
       difference between a rail and a wall. */
    .tour-way-desc { display:none; }
    .tour-ways { margin-bottom:14px; }
}

/* ── DESCRIPTION ── */
.tour-desc-wrap { margin-bottom:20px; }
.tour-desc {
    font-size:1rem; line-height:1.75; color:var(--text-secondary);
    overflow-wrap:anywhere; text-align:justify;
}


/* ── INCLUSIVES ── */
.tour-inclusives { margin-bottom:24px; }

/* A list, not a wrap of pills. Each pill sized itself to its own text, so nine of
   them made a ragged block with nothing to read down; the reader is checking a
   list, so it should look like one. Two columns where there is room, and a hairline
   between rows instead of a border around every item. */
/* Two columns everywhere, not only where there is room to spare. Nine rows down
   one column is a scroll; the same nine in two is a glance, and on a phone that
   is the difference between reading the list and skipping it. */
.tour-inc-list {
    list-style:none; margin:0; padding:0;
    /* minmax(0,1fr), not 1fr: a track sized to its content will not shrink below
       it, so "Private minibus & driver, plus both Machu Picchu shuttles" pushed
       the second column off the side of a phone. */
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:16px;
    border-top:1px solid var(--border-color);
}
.tour-inc-row {
    display:flex; align-items:center; gap:11px;
    padding:11px 2px;
    border-bottom:1px solid var(--border-color);
}
/* The inclusive icon tile, shared by the trip-level list and the day badges.
   They used to be two rules with different geometry: a 14px glyph in a 28px tile
   up here (half of it empty) against an 18px glyph in a 24px tile below, which
   read as two different sizes on the same page.

   The glyph size is what carries the weight, not the tile, so it fills more of
   the tile now and the tint is strong enough to see. */
.tour-inc-icon {
    width:28px; height:28px; flex:none; border-radius:8px;
    background:var(--accent-alpha);                                   /* fallback */
    background:color-mix(in srgb, var(--accent-color) 16%, transparent);
    color:var(--accent-color);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tour-inc-icon svg { width:18px; height:18px; display:block; }
.tour-inc-name { font-size:.87rem; font-weight:500; color:var(--text-primary);
    min-width:0; overflow-wrap:anywhere; }

/* ── REVIEW (pitch) ── */
.tour-pitch-review {
    background:var(--bg-secondary); border:1px solid var(--border-color);
    border-radius:14px; padding:16px 20px; margin-bottom:24px;
}
.tour-pitch-stars { color:#f59e0b; font-size:.8rem; letter-spacing:2px; margin-bottom:8px; }
.tour-pitch-text { font-size:.9rem; line-height:1.55; color:var(--text-secondary); margin-bottom:8px; }
.tour-pitch-author { font-size:.78rem; color:var(--text-muted); font-weight:600; }

/* ── MAP ── */
.tour-map-mobile { margin-bottom:24px; }
.tour-map-wrap { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border-color); }
/* Short enough that the map is whole on the screen you land on, rather than
   asking for a scroll before it has said anything. */
#tour-map { width:100%; height:34vh; min-height:220px; transition:height .35s cubic-bezier(.4,0,.2,1); }

/* ── THE MAP ON A PHONE ──
   In the flow, not pinned. It opens the page, you scroll past it, and it goes.
   What follows you instead is a button back to it -- one that opens the full
   screen view, where the map is worth the whole screen rather than a third of
   it competing with what you are reading. */
/* A bar under the navbar, once the header has scrolled off. It carries what the
   page is and the way back to the map. Not a button floating over the booking
   bar: two things competing at the bottom right of a phone, one of which is the
   only call to action on the page. */
/* The accent, not another sheet of gray. Under a dark navbar a translucent
   dark bar is a second navbar nobody asked for; in the tour's own color it
   reads as this page rather than as more chrome. */
.tour-topbar {
    display:none; position:fixed; left:0; right:0; top:var(--tour-nav,56px); z-index:70;
    align-items:center; gap:10px; padding:10px 14px;
    background:var(--accent-color); color:var(--white);
    box-shadow:0 4px 18px rgba(0,0,0,.28);
    opacity:0; transform:translateY(-6px); pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
}
.tour-topbar-title {
    flex:1; min-width:0; font-size:.88rem; font-weight:700; letter-spacing:-.01em;
    color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tour-topbar-map {
    flex:none; width:34px; height:34px; padding:0; border-radius:10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.34); color:var(--white);
    transition:background .15s ease;
}
.tour-topbar-map:hover { background:rgba(255,255,255,.28); }
.tour-topbar-map:active { transform:scale(.94); }
@media (max-width:1023px){
    .tour-map-mobile { margin-bottom:20px; }
    .tour-topbar { display:flex; }
    .tour-topbar.is-on { opacity:1; transform:translateY(0); pointer-events:auto; }
}


.tour-map-attr { font-size:.6rem; color:var(--text-muted); opacity:.5; padding:4px 0; text-align:right; }
.tour-map-attr a { color:var(--text-muted); text-decoration:none; }
.tour-map-attr a:hover { text-decoration:underline; }

/* MapLibre overrides */
.maplibregl-ctrl-bottom-left { display:none !important; }
.maplibregl-ctrl-attrib { font-size:.6rem !important; opacity:.5; background:transparent !important; }
.maplibregl-ctrl-attrib a { color:var(--text-muted) !important; }
/* Belt and braces on the gray sheet: the phone map has its gesture handlers
   turned off, so this should never be asked for in the first place. */
@media (max-width:1023px){
    .tour-map-mobile .maplibregl-cooperative-gesture-screen { display:none !important; }
}

/* ── MARKERS ──
   The two ends carry a symbol, everything between is a dot, and all of them
   name themselves on hover. The day you are reading names its own stops without
   being hovered, which is the only way this works on a phone. */
.tour-mk { cursor:pointer; }
.tour-mk-dot {
    display:block; width:11px; height:11px; border-radius:50%;
    background:var(--accent-color); border:2px solid var(--white);
    box-shadow:0 2px 8px rgba(0,0,0,.45); transition:transform .25s ease;
}
.tour-mk-disc {
    display:flex; align-items:center; justify-content:center;
    width:23px; height:23px; border-radius:50%;
    background:var(--accent-color); border:2px solid var(--white);
    box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.tour-mk-disc svg { width:11px; height:11px; }
.tour-mk.is-terminal .tour-mk-disc { display:flex; }
.tour-mk.is-terminal .tour-mk-dot { display:none; }
/* Too close to the last one to be a separate thing at this zoom: faded out
   rather than piled on top of it. It comes back on its own as you zoom in. */
.tour-mk { transition:opacity .25s ease; }
.tour-mk.is-merged { opacity:0; pointer-events:none; }
/* A lookout is on the route but is not a town. Same line, quieter dot. */
.tour-mk-poi .tour-mk-dot { width:8px; height:8px; border-width:1.5px; opacity:.8; }
.tour-mk.is-lit .tour-mk-dot { transform:scale(1.45); opacity:1; }
.tour-mk.is-lit { z-index:4; }
/* An 11px dot is not a target. The pad is out of flow, so it adds no size and
   cannot shift the marker off its coordinate. */
.tour-mk::after { content:''; position:absolute; left:50%; top:50%;
    width:36px; height:36px; transform:translate(-50%,-50%); border-radius:50%; }
.tour-mk-tip {
    position:absolute; bottom:calc(100% + 9px); left:50%;
    transform:translateX(-50%) translateY(3px);
    background:rgba(9,9,12,.94); border:1px solid rgba(255,255,255,.14);
    color:var(--white); font-size:.68rem; font-weight:600; padding:4px 9px;
    border-radius:7px; white-space:nowrap; pointer-events:none; opacity:0; z-index:5;
    box-shadow:0 4px 14px rgba(0,0,0,.5);
    transition:opacity .18s ease, transform .18s ease;
}
.tour-mk:hover { z-index:6; }
.tour-mk:hover .tour-mk-tip,
.tour-mk.is-lit .tour-mk-tip { opacity:1; transform:translateX(-50%) translateY(0); }
/* Moved before it is dropped. A label that cannot fit above its pin is put
   below it, then beside it -- which is what lets the first stop of a day keep
   its name when the next stop is sitting on the space above. See deconflict()
   in tour.html for who gets first refusal on which side. */
.tour-mk.tip-down .tour-mk-tip {
    bottom:auto; top:calc(100% + 9px); transform:translateX(-50%) translateY(-3px);
}
.tour-mk.is-lit.tip-down .tour-mk-tip { transform:translateX(-50%) translateY(0); }
.tour-mk.tip-right .tour-mk-tip {
    bottom:auto; top:50%; left:calc(100% + 10px); transform:translate(-3px,-50%);
}
.tour-mk.is-lit.tip-right .tour-mk-tip { transform:translate(0,-50%); }
.tour-mk.tip-left .tour-mk-tip {
    bottom:auto; top:50%; left:auto; right:calc(100% + 10px); transform:translate(3px,-50%);
}
.tour-mk.is-lit.tip-left .tour-mk-tip { transform:translate(0,-50%); }

/* Dropped rather than stacked: three stops inside one city produced three
   labels on top of each other and none of them readable. Hover still works.
   The side classes are cleared with it, so this is always the plain one. */
.tour-mk.is-lit.tip-hidden .tour-mk-tip { opacity:0; transform:translateX(-50%) translateY(3px); }
.tour-mk.is-lit.tip-hidden:hover .tour-mk-tip { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── FULL SCREEN ──
   The map and the day list are moved in here, not copied, so this is an empty
   frame until it opens. Desktop puts the days beside the map; a phone puts the
   map on top and the days under it. */
.tour-fs {
    position:fixed; inset:0; z-index:200; background:var(--bg-primary);
    display:grid; grid-template-columns:1fr; grid-template-rows:40vh 1fr;
    grid-template-areas:"map" "days";
}
.tour-fs[hidden] { display:none; }
body.tour-fs-open { overflow:hidden; }
.tour-fs-map { grid-area:map; position:relative; min-height:0; }
.tour-fs-days {
    grid-area:days; overflow-y:auto; min-height:0;
    /* No padding on the scroller itself: the header is sticky, and a padded
       scroller leaves a gap above it for the content to show through. The
       gutter is carried by the children instead, so the header covers the
       full width of the panel. */
    --gut:14px;
    padding:0 0 calc(28px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
    /* Barely there, and only while you are in it. */
    scrollbar-width:thin; scrollbar-color:transparent transparent;
    transition:scrollbar-color .25s ease;
}
.tour-fs-days:hover { scrollbar-color:var(--border-color) transparent; }
.tour-fs-days::-webkit-scrollbar { width:6px; }
.tour-fs-days::-webkit-scrollbar-track { background:transparent; }
.tour-fs-days::-webkit-scrollbar-thumb { background:transparent; border-radius:3px; }
.tour-fs-days:hover::-webkit-scrollbar-thumb { background:rgba(128,128,140,.35); }
.tour-fs-days::-webkit-scrollbar-thumb:hover { background:rgba(128,128,140,.6); }
.tour-fs-map .tour-map-wrap { height:100%; border:0; border-radius:0; display:flex; }
.tour-fs-map #tour-map { height:100%; min-height:0; flex:1; }
.tour-fs-map .tour-map-full { display:none; }
.tour-fs-close {
    position:absolute; top:14px; right:14px; z-index:4;
    width:36px; height:36px; padding:0; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(9,9,12,.8); border:1px solid rgba(255,255,255,.14); color:var(--white);
    backdrop-filter:blur(12px); box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.tour-fs-close:hover { background:rgba(9,9,12,.95); }
[data-mode="light"] .tour-fs-close { background:rgba(255,255,255,.88); border-color:rgba(0,0,0,.1); color:#0f0f14; }
/* ── PHONE: a sheet lying over the map ──
   The map is the top 40% and the days are a sheet on top of it: rounded at the
   corners, overlapping the last few pixels, and lit along its top edge with a
   shadow above it, so it reads as something laid over the map rather than the
   next thing down the page. The row of days floats clear of the sheet, on the
   map, where it belongs to the map it is driving. */
@media (max-width:1023px){
    .tour-fs-days {
        position:relative; z-index:2; margin-top:-16px;
        border-radius:18px 18px 0 0; background:var(--bg-primary);
        box-shadow:0 -14px 34px rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.09) inset;
    }
    [data-mode="light"] .tour-fs-days {
        box-shadow:0 -14px 34px rgba(0,0,0,.22), 0 -1px 0 rgba(0,0,0,.07) inset;
    }

    /* The head of the card. The grab line belongs to it rather than to the
       sheet behind it, so the whole top -- handle, days, rounded corners -- is
       one thing that stays put while the day scrolls under it. */
    .tour-fs-strip {
        position:sticky; top:0; z-index:4;
        border-radius:18px 18px 0 0; padding:19px 10px 10px;
        background:var(--bg-primary);
    }
    .tour-fs-strip::before {
        content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
        width:36px; height:4px; border-radius:3px; background:var(--border-color);
    }
    .tour-fs-strip .tour-fs-chip { border-radius:50%; width:33px; min-width:33px; padding:0; }
    /* The heading sticks to the top of the sheet now, not under the row -- and
       the sheet keeps no room for a row that is no longer in it. Written
       against .tour-fs so these beat the desktop rules further down the file
       rather than losing to them on source order at equal specificity. */
    .tour-fs .tour-fs-days { padding-top:0; }
    /* Not sticky here. The sheet is a page of one day and the row on the map
       already says which day it is, so pinning the title only takes a fifth of
       a short screen away from the thing you opened it to read. */
    .tour-fs .tour-fs-days .tour-day-summary {
        position:static; border-bottom:0; padding-bottom:6px; margin:0;
    }
}

@media(min-width:1024px){
    .tour-fs {
        grid-template-columns:minmax(390px,470px) 1fr;
        grid-template-rows:1fr; grid-template-areas:"days map";
    }
    .tour-fs-days { --gut:18px; padding:0 0 40px; border-right:1px solid var(--border-color); }
}

/* The day list inside the full screen view is not a list. One day is shown and
   the days are a row you click along, which is the map's own pill moved into
   the panel and given room -- so the pill stands down while this is up. */
.tour-fs-strip {
    position:sticky; top:0; z-index:3;
    display:flex; align-items:center; gap:6px;
    padding:14px var(--gut) 10px; background:var(--bg-primary);
}
.tour-fs-days .tour-days { padding:0 var(--gut); }
.tour-fs-nums {
    display:flex; gap:5px; overflow-x:auto; flex:1; padding:2px 1px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tour-fs-nums::-webkit-scrollbar { display:none; }
.tour-fs-chip {
    flex:none; min-width:33px; height:33px; padding:0 7px; border-radius:9px; cursor:pointer;
    border:1px solid var(--border-color); background:transparent;
    color:var(--text-secondary); font-family:inherit; font-size:.78rem; font-weight:700;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.tour-fs-chip:hover { border-color:var(--accent-color); color:var(--text-primary); }
.tour-fs-chip.is-now { background:var(--accent-color); border-color:var(--accent-color); color:var(--white); }
.tour-fs-step {
    flex:none; width:28px; height:33px; padding:0; border:0; border-radius:8px; cursor:pointer;
    background:transparent; color:var(--text-primary); font-size:1rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
}
.tour-fs-step:hover:not(:disabled) { background:var(--accent-alpha); color:var(--accent-color); }
.tour-fs-step:disabled { opacity:.25; cursor:default; }

/* One day, always open, no card around it and nothing to toggle. */
.tour-fs-days .tour-day { display:none; border:0; border-radius:0; overflow:visible;
    background:transparent; cursor:default; }
.tour-fs-days .tour-day.is-current { display:block; }
/* The heading is part of the fixed top, not part of what scrolls under it:
   which day you are reading has to stay on screen while you read it. It sits
   directly under the row of days, and the negative gutter lets it cover the
   full width so nothing passes up its sides. */
.tour-fs-days .tour-day-summary {
    position:sticky; top:var(--tour-strip-h,61px); z-index:2;
    background:var(--bg-primary); cursor:default;
    margin:0 calc(var(--gut) * -1); padding:0 var(--gut) 13px;
    border-bottom:1px solid var(--border-color);
}
/* The inclusives are the first thing that does scroll. */
.tour-fs-days .tour-day-inc { margin-top:16px; }
.tour-fs-days .tour-day-thumb, .tour-fs-days .tour-day-chevron { display:none; }
.tour-fs-days .tour-day-city { font-size:1.35rem; letter-spacing:-.02em; margin-bottom:3px; }
.tour-fs-days .tour-day-num { color:var(--accent-color); }
/* Forced open in CSS rather than by adding the class, so the page's own open
   and closed days are exactly as they were when the view closes. */
.tour-fs-days .tour-day.is-current .tour-day-detail { max-height:none !important; padding:0 0 24px; }
.tour-fs-days .tour-day-body { flex-direction:column; gap:14px; margin-bottom:10px; }
.tour-fs-days .tour-day-images { flex:none; width:100%; }
.tour-fs-days .tour-day-hero { flex:none; aspect-ratio:16/9; max-height:210px; }
/* !important because adjustDayHeroes promotes the second slot with an inline
   style, and one photograph is already generous in a column this narrow. */
.tour-fs-days .tour-day-hero-second { display:none !important; }
/* ...and because it hides the matching strip tile when it promotes, which would
   lose that photograph entirely once the second slot is held down. */
.tour-fs-days .tour-photo-item { display:block !important; }
/* Two up rather than a strip of thumbnails. In a column this narrow a scrolling
   row of 68px squares was a filmstrip of stamps; at half the width each they
   are photographs again, and nothing has to be scrolled sideways to be seen. */
.tour-fs-days .tour-photos {
    display:grid; grid-template-columns:1fr 1fr; gap:9px;
    overflow:visible; scroll-snap-type:none; margin-bottom:2px;
}
.tour-fs-days .tour-photo-item { width:auto; aspect-ratio:4/3; border-radius:10px; }
.tour-fs-days .tour-day-text { font-size:.9rem; line-height:1.7; text-align:left; }
.tour-fs-days .tour-photo-caption { font-size:.68rem; -webkit-line-clamp:2; margin-top:6px; }

/* The pill is the same control; two of them is one too many. */
.tour-fs .tour-dayline { display:none; }

/* The button that opens it, on the map itself. */
.tour-map-full {
    position:absolute; top:10px; right:10px; z-index:3;
    width:30px; height:30px; padding:0; border-radius:9px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(9,9,12,.78); border:1px solid rgba(255,255,255,.14); color:var(--white);
    backdrop-filter:blur(10px); box-shadow:0 3px 12px rgba(0,0,0,.35);
    transition:background .15s ease;
}
.tour-map-full:hover { background:rgba(9,9,12,.95); }
[data-mode="light"] .tour-map-full { background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.1); color:#0f0f14; }

/* ── THE DAY, ON THE CANVAS ──
   A pill, not a chart. How far through the trip you are is already drawn: the
   route behind you is solid and the route ahead is faint, so a progress bar
   was saying the same thing twice and worse. This just names the day and steps. */
.tour-dayline {
    position:absolute; left:11px; right:11px; bottom:11px; z-index:3;
    display:flex; align-items:center; gap:2px;
    padding:3px 4px; border-radius:999px;
    background:rgba(9,9,12,.8); border:1px solid rgba(255,255,255,.13);
    backdrop-filter:blur(12px) saturate(1.4);
    box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.tour-dl-text {
    flex:1; min-width:0; display:flex; align-items:baseline; gap:7px;
    padding:0 4px; font-size:.72rem; font-weight:600; color:var(--white);
}
.tour-dl-text b {
    flex:none; color:var(--accent-color); font-size:.6rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em;
}
/* Day titles are whole sentences on some routes, so the pill truncates rather
   than growing a second line over the map. */
.tour-dl-text span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tour-dl-arrow {
    flex:none; width:24px; height:24px; padding:0; border:0; border-radius:50%;
    background:transparent; color:var(--white); font-size:.95rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, opacity .15s ease;
}
.tour-dl-arrow:hover:not(:disabled) { background:rgba(255,255,255,.14); }
.tour-dl-arrow:disabled { opacity:.25; cursor:default; }
[data-mode="light"] .tour-dayline { background:rgba(255,255,255,.86); border-color:rgba(0,0,0,.1); }
[data-mode="light"] .tour-dl-text { color:#0f0f14; }
[data-mode="light"] .tour-dl-arrow { color:#0f0f14; }
[data-mode="light"] .tour-dl-arrow:hover:not(:disabled) { background:rgba(0,0,0,.08); }

/* ── SECTION TITLE ── */
/* ── Counts that open ──
   "3 cities" on its own answers nothing, and the names were already computed for
   the route line. The flags sit in the closed state because a row of them reads
   before the words do. */
.tour-pop { position:relative; display:inline-flex; }
.tour-pop-btn {
    display:inline-flex; align-items:center; gap:5px;
    background:none; border:none; padding:0; cursor:pointer;
    font:inherit; color:inherit;
    border-bottom:1px dashed currentColor;
}
.tour-pop-btn:hover { color:var(--accent-color); }
.tour-pop-caret {
    width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.5;
    stroke-linecap:round; stroke-linejoin:round;
    transition:transform .2s ease; opacity:.6;
}
.tour-pop-btn[aria-expanded="true"] .tour-pop-caret { transform:rotate(180deg); }
.tour-flags { display:inline-flex; align-items:center; }
.tour-flags img {
    width:15px; height:15px; border-radius:50%; display:block;
    box-shadow:0 0 0 1.5px var(--bg-primary);
}
.tour-flags img + img { margin-left:-5px; }   /* overlapped, like a stack of stamps */

/* One country: the same flag, its name beside it, and no button -- there is
   nothing to expand into. Matches the popover's closed state so the row reads
   the same whether a route crosses one border or four. */
.tour-country-one { display:inline-flex; align-items:center; gap:6px; }
.tour-country-one img {
    width:15px; height:15px; border-radius:50%; display:block;
    box-shadow:0 0 0 1.5px var(--bg-primary);
}

.tour-pop-list {
    display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:30;
    min-width:230px; max-width:min(320px, 78vw); max-height:280px; overflow-y:auto;
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:10px; padding:6px; box-shadow:0 12px 32px rgba(0,0,0,.18);
    font-size:.82rem; font-weight:500; color:var(--text-primary);
}
.tour-pop-btn[aria-expanded="true"] + .tour-pop-list { display:block; }
/* Two columns, not one: the name reads down the left and the day it belongs to
   sits against the right, so the list says something a row of names could not.
   No hover state -- there is nothing here to click. */
.tour-pop-list > span {
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    padding:6px 8px; border-radius:6px; white-space:nowrap;
}
.tour-pop-name { font-weight:500; }
.tour-pop-day {
    flex:none; font-size:.7rem; font-weight:600; color:var(--text-muted);
    letter-spacing:.01em;
}
.tour-pop-list img { width:16px; height:16px; border-radius:50%; flex-shrink:0; }

/* ── SECTION HEADERS ──
   One treatment for all of them. "What's included" and "What you'll remember"
   were .7rem uppercase muted gray, which is a form label rather than a
   heading -- so at a glance the page had two headings and two pieces of small
   print, and the two sections doing the selling were the small print. */
.tour-sec { display:flex; align-items:baseline; gap:11px; margin:0 0 14px; }
.tour-sec-title{
    position:relative; margin:0; padding-left:13px;
    font-size:1.12rem; font-weight:700; letter-spacing:-.015em; color:var(--text-primary);
}
.tour-sec-title::before{
    content:''; position:absolute; left:0; top:.16em; bottom:.16em;
    width:3px; border-radius:2px; background:var(--accent-color);
}
.tour-sec-note { font-size:.78rem; color:var(--text-muted); flex:none; }
@media(min-width:1024px){
    .tour-sec { margin-bottom:18px; }
    .tour-sec-title{ font-size:1.3rem; }
}

/* ── DAY CARDS ── */
.tour-days { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
/* No hover state. A day is a paragraph of the itinerary, not a thing to pick
   between: the accent ring and lift said "this one is selected" on whichever
   one the pointer happened to be crossing, which on a long route meant the page
   lit up under the mouse all the way down. The chevron already says a day
   opens, and the cursor already says it is pressable. Nothing here transitions
   either, because nothing here changes. */
.tour-day {
    border:1px solid var(--border-color); border-radius:14px;
    overflow:hidden; cursor:pointer; scroll-margin-top:72px;
}
.tour-day-summary { display:flex; align-items:center; gap:14px; padding:14px 16px; }
.tour-day-thumb { width:60px; height:60px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.tour-day-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.tour-day-info { flex:1; min-width:0; }
.tour-day-num {
    font-family:var(--font-mono);
    font-size:.65rem; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--accent-color); margin-bottom:2px;
}
.tour-day-city { font-size:1.1rem; font-weight:700; letter-spacing:-.01em; line-height:1.2; margin-bottom:2px; }
/* The day's own route line. Scrolls sideways rather than wrapping, the same
   rule .tour-route-faces follows in the header: a route reads as one line or not
   at all, and a wrapped one turns a two-line card into a five-line one. */
.tour-day-route {
    font-size:.78rem; color:var(--text-muted);
    display:flex; align-items:center; gap:6px;
    overflow-x:auto; padding-bottom:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tour-day-route::-webkit-scrollbar { display:none; }
.tour-day-place { display:inline-flex; align-items:center; gap:5px; flex:none; white-space:nowrap; }
/* Smaller than the header's 26px: this line sits under a title inside a card,
   not under the name of the trip.

   A disc, never an oval: both dimensions and object-fit, so the crop happens in
   the picture rather than in the frame. What made these ovals is answered at
   .tour :where(img) up the top. */
.tour-day-face {
    width:20px; height:20px; border-radius:50%; object-fit:cover; display:block;
    flex-shrink:0; border:1px solid var(--border-color);
}
/* The stand-in for a place we have no photograph of. It keeps the face's 20px
   slot -- the margins make up the difference -- so the line does not go ragged
   exactly where the catalog is thin, but it does not fill that slot. At an
   equal 20px it outshouted the thing it stands in for: a flag is flat saturated
   color edge to edge and a photograph is not, so the fallback read as the
   larger object even when a ruler said the two discs matched. */
.tour-day-flag {
    width:16px; height:16px; margin:0 2px;
    border-radius:50%; flex-shrink:0; display:block;
    box-shadow:0 0 0 1px var(--border-color);
}
/* Drawn, not typed. The arrow glyph is set in whatever the body font has and
   sits off the baseline between two place names; this one is the same weight as
   the text around it and stays on the line. */
.tour-day-arrow { display:inline-flex; align-items:center; flex:none; opacity:.55; }
/* 16x14 is the icon's own 576x512, so the arrow is not letterboxed inside a box
   of the wrong shape. It draws thin: the glyph is a rule and a head across the
   middle fifth of that square, not a shape filling it. */
.tour-day-arrow svg { width:16px; height:14px; display:block; fill:currentColor; }
.tour-day-chevron {
    width:28px; height:28px; border-radius:50%;
    background:var(--bg-secondary); display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:transform .3s ease,background .2s ease; color:var(--text-muted);
}
.tour-day.open .tour-day-chevron { transform:rotate(180deg); background:var(--accent-alpha); color:var(--accent-color); }
.tour-day.open .tour-day-thumb { display:none; }

.tour-day-detail { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1); padding:0 16px; }
.tour-day.open .tour-day-detail { max-height:2000px; padding:0 16px 20px; }
/* Day body — hero + text side by side on desktop.

   The picture has a shape of its own rather than stretching to the words. It
   used to be flex:1 in a column with no height, so `height:100%` on the image
   fell back to the photograph's own: a portrait shot at 45% of the column came
   out six hundred pixels tall and a day with four sentences on it became the
   longest card on the page. A fixed 4:3 means the frame is the same on every
   day and a short day is a short card. Where the words run long the second
   slot comes up under the first -- see adjustDayHeroes -- so the column fills
   rather than leaving a well of white beside the text. */
.tour-day-body { display:flex; gap:20px; margin-bottom:10px; align-items:flex-start; }
.tour-day-images { flex:0 0 45%; display:flex; flex-direction:column; gap:6px; }
.tour-day-hero { border-radius:10px; overflow:hidden; flex:none; aspect-ratio:4/3; }
.tour-day-hero-second { display:none; }
.tour-day-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.tour-day-text { flex:1; font-size:.93rem; line-height:1.75; color:var(--text-secondary); overflow-wrap:anywhere; text-align:justify; }
@media (max-width:700px) {
    .tour-day-body { flex-direction:column; gap:12px; }
    .tour-day-images { flex:none; width:100%; }
    .tour-day-hero { aspect-ratio:16/9; }
    /* Stacked, one photograph is the whole width and a second is just the strip
       again. !important because adjustDayHeroes promotes it with an inline
       style, which a resize would otherwise leave behind. */
    .tour-day-hero-second { display:none !important; }
}

/* Day inclusives — badges at top */
.tour-day-inc { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.tour-day-inc-badge {
    display:inline-flex; align-items:center; gap:7px; cursor:default;
    background:var(--bg-secondary); border:1px solid var(--border-color);
    padding:6px 12px 6px 7px; border-radius:9px; font-size:.75rem; font-weight:600;
    /* These are flex items in a wrapping row, so without this they shrink to fit
       and "Walking tour" breaks onto two lines. The row wraps; the badge does not. */
    flex-shrink:0; white-space:nowrap;
}
/* Icon geometry comes from .tour-inc-icon above, so a day badge and the list at
   the top of the page can never drift apart again. */

/* Photo strip — horizontal scroll */
.tour-photos {
    display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; margin-bottom:4px;
}
.tour-photos::-webkit-scrollbar { display:none; }
/* Words on the tile itself, so the strip reads as a story rather than a
   contact sheet. Clamped to two lines: the full text is in the lightbox. */
.tour-photo-caption {
    font-size:.7rem; line-height:1.4; color:var(--text-secondary);
    margin-top:5px; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}
.tour-photo-item {
    flex:0 0 88px; aspect-ratio:1; border-radius:8px; overflow:hidden;
    scroll-snap-align:start; cursor:pointer;
}
.tour-photo-item img,
.tour-photo-item video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
/* A clip should be recognizable as one before it starts, and while it is still
   only a poster frame. */
.tour-photo-item.is-video { position:relative; }
.tour-play-badge {
    position:absolute; bottom:6px; right:6px; z-index:2;
    width:22px; height:22px; border-radius:50%;
    background:rgba(0,0,0,.55); color:var(--white);
    display:grid; place-items:center; font-size:.6rem; padding-left:2px;
    pointer-events:none;
}
.tour-photo-item:hover img,
.tour-photo-item:hover video { transform:scale(1.06); }
.tour-day-hero, .tour-photo-item { position:relative; }
.tour-header > .photo-mark { right:0; bottom:4px; }

/* ── BUCKET LIST ──
   The badges live in bucket-badges.css, shared with the landing page. These are the
   section's own chrome: the landing page gets the same classes from landing.css,
   which this page does not load. */
/* The one section on the page that is not a list of facts, so it stops looking
   like one: its own ground, bled to the edges of a phone, with a wash of the
   accent behind it. It is the part of the page that is about wanting to go. */
.lp-bucket {
    position:relative; margin:8px 0 44px; padding:26px 16px 30px;
    border-radius:18px; border:1px solid var(--border-color);
    background:
        radial-gradient(120% 90% at 8% 0%, var(--accent-alpha), transparent 62%),
        var(--bg-secondary);
}
@media (max-width:1023px){
    /* bled past the layout gutter so the panel reaches the edges of the screen */
    .lp-bucket { margin-left:-16px; margin-right:-16px; border-radius:0; border-left:0; border-right:0; }
}
.lp-bucket .container { padding:0; max-width:none; }
.lp-bucket-header { margin-bottom:20px; }
.lp-bucket-title {
    font-size:clamp(1.3rem,3.2vw,1.75rem); font-weight:700; letter-spacing:-.025em;
    margin:0;
}

/* ── DEPARTURES ── */
.tour-departures { margin-bottom:32px; scroll-margin-top:80px; }
.tour-trip-card {
    border:1.5px solid var(--border-color); border-radius:14px;
    padding:16px; margin-bottom:12px; overflow:hidden; transition:all .2s ease;
}
.tour-trip-card:hover { border-color:var(--accent-color); box-shadow:0 4px 24px var(--accent-alpha); }
.tour-trip-card.selected { border-color:var(--accent-color); box-shadow:0 4px 24px var(--accent-alpha); }
.tour-private-note {
    display:flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:10px; margin-bottom:16px;
    background:var(--accent-alpha); border:1px solid var(--accent-alpha);
    font-size:.82rem; color:var(--accent-color);
}
.tour-trip-request { text-align:center; padding:20px; color:var(--text-muted); font-size:.9rem; }
.tour-trip-request a { color:var(--accent-color) !important; text-decoration:none; font-weight:600; }
.tour-separator { font-size:.78rem; color:var(--text-muted); margin:16px 0 12px; display:flex; align-items:center; gap:10px; }
.tour-separator-line { flex:1; height:1px; background:var(--border-color); }

/* ── REVIEWS ── */
.tour-reviews { margin-bottom:32px; }
.tour-reviews-header { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.tour-reviews-rating { display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--text-muted); }
.tour-reviews-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.tour-review-card { background:var(--card-bg); border-radius:14px; padding:16px; border:1px solid var(--card-border); }
.tour-review-stars { color:#f59e0b; margin-bottom:8px; letter-spacing:2px; }
.tour-review-text { font-size:.92rem; line-height:1.6; color:var(--text-secondary); margin-bottom:10px; }
.tour-review-author { font-size:.78rem; color:var(--text-muted); }
.tour-review-author strong { color:var(--text-primary); font-weight:600; }

/* ── BUTTONS ── */
.tour-btn-book {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--accent-gradient) !important; color:var(--white) !important;
    border:none; padding:10px 20px; border-radius:50px;
    font-size:.875rem; font-weight:600; font-family:inherit;
    cursor:pointer; transition:all .2s ease; text-decoration:none !important; white-space:nowrap;
}
.tour-btn-book:hover { filter:brightness(1.1); transform:translateY(-1px); color:var(--white) !important; }
.tour-btn-outline {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:transparent !important; color:var(--text-primary) !important;
    border:1.5px solid var(--border-color); padding:10px 20px; border-radius:50px;
    font-size:.875rem; font-weight:600; font-family:inherit;
    cursor:pointer; transition:all .2s ease; text-decoration:none !important;
}
.tour-btn-outline:hover { border-color:var(--accent-color); color:var(--accent-color) !important; }
/* Where the Book button stands while nothing is on sale: its shape, no action. */
.tour-not-on-sale {
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 20px; border-radius:50px; border:1.5px solid var(--border-color);
    color:var(--text-muted); font-size:.875rem; font-weight:600; white-space:nowrap;
}
.tour-bar .tour-not-on-sale { font-size:.92rem; padding:13px 22px; }

/* ── HEART ── */
/* A circle, not a pill. It holds an icon and nothing else -- there is no label
   to make it wider than it is tall -- and the phone's has always been a 44px
   circle, so a squashed oval up here was the desktop disagreeing with the phone
   about the same button. Square box, 50% radius, icon centered. */
.tour-heart-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; padding:0;
    background:none; border:1px solid var(--border-color);
    cursor:pointer; border-radius:50%;
    color:#ef4444; font-family:inherit;
    transition:all .15s ease; flex-shrink:0;
    position:absolute; top:14px; right:16px;
}
.tour-heart-btn:hover { border-color:#ef4444; background:rgba(239,68,68,.06); }
.tour-heart-btn.saved { border-color:#ef4444; background:rgba(239,68,68,.1); }

/* ── MOBILE BOOKING BAR (always visible) ── */
/* The only call to action on a phone, and it was the quietest thing on the
   screen: 58px of small print beside a small pill. The price gets room to be a
   number, the button gets room to be pressed, and a hairline of accent along
   the top separates the bar from the page instead of a gray rule. */
.tour-bar {
    position:fixed; bottom:0; left:0; right:0; z-index:99;
    padding:11px 14px; padding-bottom:calc(11px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.9); backdrop-filter:blur(20px) saturate(1.8);
    border-top:2px solid var(--accent-color);
    display:flex; justify-content:space-between; align-items:center; gap:12px;
}
[data-mode="dark"] .tour-bar { background:rgba(24,24,27,.9); }
.tour-bar-price { display:flex; flex-direction:column; line-height:1.14; min-width:0; }
.tour-bar-price em {
    font-style:normal; font-size:.63rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--text-muted);
}
.tour-bar-price b { font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
.tour-bar-price i { font-style:normal; font-size:.7rem; color:var(--text-muted); }
.tour-bar-pp { display:flex; align-items:center; gap:3px; }
.tour-bar .tour-btn-book {
    font-size:.92rem; padding:13px 22px;
    box-shadow:0 6px 20px color-mix(in srgb, var(--accent-color) 34%, transparent);
}
.tour-bar .tour-bar-heart { width:44px; height:44px; padding:0; }
.tour-bar-heart {
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--border-color);
    cursor:pointer; padding:8px 14px; border-radius:50px;
    color:#ef4444; flex-shrink:0; transition:background .15s ease;
}
.tour-bar-heart.saved { background:rgba(239,68,68,.08); }

/* ── LIGHTBOX ── */
.tour-lightbox {
    position:fixed; inset:0; z-index:200;
    background:rgba(0,0,0,.92); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.tour-lightbox.open { opacity:1; pointer-events:all; }
.tour-lightbox-figure {
    margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
    max-width:80vw;
}
.tour-lightbox img { max-width:80vw; max-height:78vh; object-fit:contain; border-radius:8px; }
/* The caption is the selling, so it gets room to be read: a comfortable measure,
   centered under the picture, above the counter. */
.tour-lightbox-caption {
    color:rgba(255,255,255,.92); font-size:.95rem; line-height:1.5;
    text-align:center; max-width:62ch; padding:0 12px;
}
.tour-lightbox-note { display:block; margin-top:4px; font-size:.78rem; color:rgba(255,255,255,.65); }
.tour-lightbox-close {
    position:absolute; top:16px; right:16px;
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.1); border:none; color:var(--white);
    font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.tour-lightbox-close:hover { background:rgba(255,255,255,.2); }
.tour-lightbox-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.1); border:none; color:var(--white);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.tour-lightbox-arrow:hover { background:rgba(255,255,255,.25); }
.tour-lb-prev { left:16px; }
.tour-lb-next { right:16px; }
.tour-lightbox-counter {
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.55); font-size:.75rem; font-weight:500;
}

/* ── SIDEBAR (desktop) ── */
.tour-sidebar-sticky { display:flex; flex-direction:column; gap:16px; }
.tour-sidebar-booking {
    position:relative; background:var(--card-bg);
    border:1px solid var(--card-border); border-radius:14px;
    padding:20px; display:flex; flex-direction:column; gap:10px;
    margin-top:24px;
}
.tour-sidebar-price { font-size:1.4rem; font-weight:800; letter-spacing:-.02em; }
.tour-sidebar-price span { font-size:.82rem; font-weight:400; color:var(--text-muted); }
/* ── The 30-day low, on an icon ──
   Always drawn, which is the point of it. Everything else about the window is
   a claim -- a reduction to strike, a low to name -- and a claim is true only
   sometimes, so those come and go. The number underneath them does not, and
   somebody who wants to know what we have been charging should not have to
   catch the page on a day it happens to be saying so. */
.tour-low {
    position:relative; display:inline-flex; align-items:center;
    padding:0; margin-left:3px; vertical-align:-2px;
    background:none; border:0; color:var(--text-muted); cursor:pointer;
}
.tour-low:hover, .tour-low:focus-visible { color:var(--accent-color); }
.tour-low .tour-low-say {
    position:absolute; bottom:calc(100% + 8px); left:50%;
    transform:translateX(-50%) translateY(3px);
    z-index:5; width:max-content; max-width:230px;
    padding:7px 10px; border-radius:8px;
    background:var(--bg-elevated); border:1px solid var(--card-border);
    box-shadow:0 6px 22px var(--card-shadow);
    font-size:.72rem; font-weight:400; line-height:1.4; color:var(--text-secondary);
    text-align:left; white-space:normal;
    opacity:0; visibility:hidden; transition:opacity .14s ease, transform .14s ease;
}
.tour-low .tour-low-say b { color:var(--text-primary); font-weight:700; }
/* Centered on the icon is right in the middle of a card and wrong at either end
   of the viewport, where half of a 230px panel hangs off the screen. In the
   phone's bar it opens from the left edge, and in a departure row -- whose
   money column is hard against the right of the card -- from the right. */
.tour-bar .tour-low .tour-low-say { left:0; right:auto; transform:translateX(0) translateY(3px); }
.tour-bar .tour-low:hover .tour-low-say,
.tour-bar .tour-low:focus-visible .tour-low-say,
.tour-bar .tour-low.is-open .tour-low-say { transform:translateX(0) translateY(0); }
.dep-money .tour-low .tour-low-say { left:auto; right:0; transform:translateX(0) translateY(3px); }
.dep-money .tour-low:hover .tour-low-say,
.dep-money .tour-low:focus-visible .tour-low-say,
.dep-money .tour-low.is-open .tour-low-say { transform:translateX(0) translateY(0); }
/* The row's money column is nowrap and right-aligned; the icon must not be
   dragged onto a line of its own or push the price off the edge. */
.dep-money .tour-low { vertical-align:-1px; margin-left:4px; }
.tour-low:hover .tour-low-say,
.tour-low:focus-visible .tour-low-say,
.tour-low.is-open .tour-low-say {
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
/* What it was, and what that is worth, on their own line under the number.
   Inline they made three figures in a row before the eye reached "/ person";
   here the pair reads as a note about the price rather than as more prices.

   The saving is the loud half, because it is the one nobody has to work out.
   In the accent rather than in the deal gold: gold words are 1.81:1 on the
   light card, and this is a sentence rather than a badge. */
.tour-sidebar-was {
    display:flex; align-items:baseline; gap:8px;
    font-size:.8rem; margin-top:-4px;
}
.tour-sidebar-was s { color:var(--text-muted); font-weight:400; }
.tour-sidebar-was b { color:var(--accent-color); font-weight:700; }

/* ── THE DEPARTURE ON SHOW ──
   A caption under the button, not a row above it. This was two bordered cells
   with a date, a flag and a city each; then one borderless row with the label
   at one edge and the date pushed to the other. Both were the full width of the
   card, and the second one spent the widest gap in the card on the fact the
   card is least about -- it does not book this date, it sends somebody to the
   checkout to choose one.

   So it goes where a caption goes: under the thing it qualifies, centered on it,
   at caption size, reading as one sentence rather than a label and a value at
   opposite ends. The height that frees goes to the map below. */
.tour-sidebar-next {
    margin:0; display:flex; justify-content:center; align-items:baseline;
    flex-wrap:wrap; gap:3px 7px; font-size:.78rem; line-height:1.4;
}
.tour-sidebar-lbl { color:var(--text-muted); }
.tour-sidebar-next b { font-weight:700; letter-spacing:-.012em; }
/* The countdown, quieter than the date and separated from it by a dot rather
   than by a bracket: it is the same fact said the other way, not an aside. */
.tour-sidebar-soon { color:var(--text-muted); }
.tour-sidebar-soon::before { content:"\00b7"; margin-right:7px; }
.tour-sidebar-map { border-radius:14px; overflow:hidden; }
/* Not a fixed 360px. The sidebar is a column of known height, so the map takes
   whatever the booking card leaves and the itinerary gets a map worth reading. */
.tour-sidebar-map { flex:1; min-height:300px; display:flex; }
.tour-sidebar-map .tour-map-wrap { flex:1; display:flex; }
.tour-sidebar-map #tour-map { height:auto; flex:1; min-height:300px; }

/* ════════════════════════════════════════════════════════════════
   TABLET (>=768px)
   ════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
    body.tour-page .settings-fab { display:flex !important; }
    .tour-inc-list { column-gap:28px; }
    .tour-reviews-grid { grid-template-columns:repeat(2,1fr); }
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP (>=1024px)
   ════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
    body.tour-page footer { margin-bottom:0; }

    .tour-layout {
        display:grid;
        grid-template-columns:1fr 370px;
        grid-template-rows:auto 1fr;
        gap:0 32px;
        padding:60px 24px 64px;
    }
    .tour-content { grid-column:1; grid-row:1 / -1; }
    .tour-sidebar { display:block; grid-column:2; grid-row:1 / -1; }
    .tour-sidebar-sticky {
        position:sticky; top:72px; height:calc(100vh - 88px);
        overflow-y:auto; padding-bottom:2px;
    }

    /* Reading the itinerary: the booking card tightens up and the map takes the
       height back. It *tightens*; it no longer throws anything away.

       It used to hide the next-departure line, which is the one line somebody
       reading the day-by-day is actually checking against -- "can I go on the
       17th" is the question the itinerary raises. A card that answers it until
       you start reading and then stops is worse than one that never did. The
       padding and the gap give the map all the room the hidden line did. */
    .tour-sidebar-booking { transition:padding .3s ease, margin .3s ease, gap .3s ease; }
    .tour-sidebar-sticky.is-reading .tour-sidebar-booking { padding:13px 16px; gap:8px; margin-top:0; }

    /* Hide mobile elements */
    .tour-map-mobile { display:none; }
    .tour-bar { display:none !important; }

    /* Larger elements */
    .tour-header { padding:24px 0 16px; }
    .tour-title { font-size:2rem; }
    .tour-day-thumb { width:80px; height:80px; border-radius:12px; }
    .tour-day-city { font-size:1.15rem; }
    .tour-day-summary { padding:16px 20px; }
    .tour-day.open .tour-day-detail { padding:0 20px 24px; }
    .tour-reviews-header { flex-direction:row; justify-content:space-between; align-items:baseline; }
    .tour-reviews-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

    .tour-lightbox img { max-width:88vw; max-height:70vh; border-radius:8px; }
    .tour-lightbox-figure { max-width:88vw; gap:10px; }
    .tour-lightbox-caption { font-size:.86rem; max-width:none; }
    .tour-lb-prev { left:24px; }
    .tour-lb-next { right:24px; }
}

/* ════════════════════════════════════════════════════════════════
   BIG SCREENS
   1200px was chosen for a laptop and never revisited. On a large monitor it
   leaves the itinerary in a narrow strip with a field of margin either side,
   which is the one place the page has room to spare and does not use it. The
   column grows and the sidebar with it, in two steps rather than one, so the
   line length never runs away.
   ════════════════════════════════════════════════════════════════ */
@media (min-width:1500px){
    .tour-layout { max-width:1420px; grid-template-columns:1fr 410px; gap:0 40px; padding:60px 32px 64px; }
    .tour-day-city { font-size:1.22rem; }
    .tour-day-text { font-size:.97rem; }
}
@media (min-width:1900px){
    .tour-layout { max-width:1660px; grid-template-columns:1fr 450px; gap:0 48px; padding:60px 40px 64px; }
}

/* ── Opened from a booking (`auth.booking_itinerary`) ──
   The card that sells the trip, holding the booking instead: the booking
   page's green and gold, its dates and its people. */
.tour-mine { margin-top: 0; padding: 20px 22px; border-radius: 16px; background: var(--brand-bg); color: var(--brand-text);
    display: flex; flex-direction: column; gap: 4px; box-shadow: 0 14px 34px var(--card-shadow); }
.tour-mine-lab { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-highlight); }
.tour-mine-when { margin-top: 10px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.tour-mine-who { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .86rem; color: var(--brand-text-muted); }
.tour-mine-faces { display: flex; }
.tour-mine-faces i { width: 28px; height: 28px; margin-left: -7px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
    font-size: .62rem; font-weight: 800; background: var(--brand-highlight); color: var(--brand-highlight-text); border: 2px solid var(--brand-bg); }
.tour-mine-faces i:first-child { margin-left: 0; }
.tour-mine-kept { margin: 12px 0 0; font-size: .84rem; line-height: 1.5; color: var(--brand-text-muted); }
.tour-mine-go { display: block; margin-top: 16px; padding: 11px 16px; border-radius: 50px; text-align: center; font-weight: 700; font-size: .92rem;
    background: var(--brand-highlight); color: var(--brand-highlight-text) !important; text-decoration: none; transition: transform .15s, filter .15s; }
.tour-mine-go:hover { filter: brightness(1.06); transform: translateY(-1px); }
.tour-mine-share { margin: 10px 0 0; text-align: center; font-size: .82rem; color: var(--brand-text-muted); }
.tour-mine-share a, .tour-bar-price i a { color: var(--brand-highlight); font-weight: 600; text-decoration: none; }
.tour-bar-price i a { color: var(--accent-color); }
/* The column is one screen tall and the map takes what the card leaves, so the
   card fits rather than scrolls: no scrollbar, and while the days are being
   read (`.is-reading`, as the price card does) it keeps only the dates and
   the way back. */
.tour-sidebar-sticky:has(.tour-mine) { scrollbar-width: none; }
.tour-sidebar-sticky:has(.tour-mine)::-webkit-scrollbar { display: none; }
.tour-sidebar-sticky.is-reading .tour-mine { padding: 14px 18px; }
.tour-sidebar-sticky.is-reading .tour-mine-who,
.tour-sidebar-sticky.is-reading .tour-mine-share,
.tour-sidebar-sticky.is-reading .tour-mine-kept { display: none; }
.tour-sidebar-sticky.is-reading .tour-mine-when { margin-top: 6px; }
.tour-sidebar-sticky.is-reading .tour-mine-go { margin-top: 12px; padding: 9px 14px; }