/* =============================================================================
   Destinations hub, the atlas (template-destinations-hub.php), body.ca-dest-hub.
   Same language as home.css and tour.css; the frame (header, footer, Jost 500/600, tokens --ui-*)
   comes from ui.css. Desktop: card list beside a sticky map. Phone: the map is a compact header,
   a sticky row of names follows the scroll, the list is primary. House tokens only.
   ============================================================================= */
body.ca-dest-hub { background: var(--ui-bg); }
html:has(body.ca-dest-hub), body.ca-dest-hub { overflow-x: clip; }
body.ca-dest-hub .dh { display: block; color: var(--ui-ink); background: var(--ui-bg); font-family: 'Jost', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.6; }
body.ca-dest-hub .dh *, body.ca-dest-hub .dh *::before, body.ca-dest-hub .dh *::after { box-sizing: border-box; }
body.ca-dest-hub .dh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
body.ca-dest-hub .dh h1, body.ca-dest-hub .dh h2, body.ca-dest-hub .dh h3 { font-family: 'Jost', sans-serif; font-style: normal; text-transform: none; letter-spacing: -.005em; color: var(--ui-ink); text-align: left; }
body.ca-dest-hub .dh a { text-decoration: none; }
body.ca-dest-hub .dh :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* Hero: a short title block, the atlas is the hero */
body.ca-dest-hub .dh-hero { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem); }
body.ca-dest-hub .dh .dh-h1 { font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem) !important; line-height: 1.08 !important; margin: 0 0 .75rem; }
body.ca-dest-hub .dh-lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--ui-ink); margin: 0 0 .5rem; max-width: 34em; }
body.ca-dest-hub .dh-sub { color: var(--ui-ink-2); margin: 0; max-width: 42em; font-size: 16px; }
body.ca-dest-hub .dh-sub a { color: var(--ui-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Atlas: list left, sticky map right */
body.ca-dest-hub .dh-atlas { padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
body.ca-dest-hub .dh-atlas-grid { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 13fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
body.ca-dest-hub .dh-map-col { order: 2; position: sticky; top: calc(var(--dh-top, 80px) + 16px); }
/* The sticky map must fit the window at 100% zoom on a laptop (Cem 2026-10-03: "fits at 90%, spills at 100%").
   Height follows width (aspect 1000/760), so cap the width by the height left under the header, less the peek. */
@media (min-width: 961px) {
    body.ca-dest-hub .dh-map-col { width: 100%; max-width: calc((100vh - var(--dh-top, 80px) - 16px - 82px - 24px) * 1000 / 760); justify-self: end; }
}
body.ca-dest-hub .dh-map { position: relative; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; box-shadow: var(--ui-shadow); }
body.ca-dest-hub .dh-map-art { position: relative; background: var(--ui-bg); }
body.ca-dest-hub .dh-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 760; }

/* Map paint (europe-map-v2.svg): sea is the page, every other country quiet land, destinations lit as whole
   shapes, the active one in the accent. Neighbours read by their shapes; no pins to crowd the Alps. */
body.ca-dest-hub .dh-land { fill: color-mix(in srgb, var(--ui-tint) 80%, var(--ui-line)); stroke: var(--ui-bg); stroke-width: .7; stroke-linejoin: round; }
body.ca-dest-hub .dh-reg { fill: color-mix(in srgb, var(--gold-pale) 62%, var(--ui-tint)); stroke: var(--ui-paper); stroke-width: 1; cursor: pointer; transition: fill 200ms ease; }
body.ca-dest-hub .dh-reg.is-active { fill: var(--ui-accent); }
body.ca-dest-hub .dh-inset-box { fill: var(--ui-bg); stroke: var(--ui-line); stroke-width: 1.2; }
body.ca-dest-hub .dh-inset-label[hidden] { display: none; }
body.ca-dest-hub .dh-inset-label { position: absolute; transform: translateY(0); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ui-ink-2); line-height: 1.2; pointer-events: none; }
body.ca-dest-hub .dh-city { cursor: pointer; }
body.ca-dest-hub .dh-city:focus { outline: none; }
body.ca-dest-hub .dh-city-hit { fill: transparent; }
body.ca-dest-hub .dh-city-dot { fill: var(--ui-paper); stroke: var(--ui-ink); stroke-width: 1.6; transition: fill 200ms ease, stroke 200ms ease; }
body.ca-dest-hub .dh-city.is-on .dh-city-dot, body.ca-dest-hub .dh-city:focus-visible .dh-city-dot { fill: var(--ui-ink); }

/* The label: the active country or city, a small paper chip above its anchor */
body.ca-dest-hub .dh-label { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 8px)); padding: .3rem .65rem; border-radius: 999px; background: var(--ui-paper); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); color: var(--ui-ink); font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none; }
body.ca-dest-hub .dh-label[hidden] { display: none; }
body.ca-dest-hub .dh-label.is-below { transform: translate(-50%, 8px); }
body.ca-dest-hub .dh-label.is-left { transform: translate(-12px, calc(-100% - 8px)); }
body.ca-dest-hub .dh-label.is-right { transform: translate(calc(-100% + 12px), calc(-100% - 8px)); }

/* The peek: the active destination, on paper, docked to the map's lower left (never over a photo) */
body.ca-dest-hub .dh-peek { display: flex; gap: .85rem; align-items: center; min-height: 82px; padding: .65rem .9rem .65rem .65rem; background: var(--ui-paper); color: var(--ui-ink); border-top: 1px solid var(--ui-line); transition: background var(--ca-transition); }
body.ca-dest-hub .dh-peek:hover { color: var(--ui-ink); background: var(--ui-bg); }
body.ca-dest-hub .dh-peek[hidden] { visibility: hidden; display: flex; }
body.ca-dest-hub .dh-peek-img { flex: 0 0 72px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--ui-tint); }
body.ca-dest-hub .dh-peek-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ca-dest-hub .dh-peek-body { min-width: 0; display: flex; flex-direction: column; }
body.ca-dest-hub .dh-peek strong { font-weight: 600; font-size: 17px; line-height: 1.25; }
body.ca-dest-hub .dh-peek strong::after { content: " \2192"; color: var(--ui-accent); }
body.ca-dest-hub .dh-peek-desc { font-size: 14px; line-height: 1.4; color: var(--ui-ink-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Jump row: names only. Hidden on desktop (the list sits beside the map), the phone's index */
body.ca-dest-hub .dh-jump { display: none; }

/* Destination list */
body.ca-dest-hub .dh-list { order: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
body.ca-dest-hub .dh-list > li { margin: 0; }
body.ca-dest-hub .dh-list > li.dh-dest { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1rem; padding: .75rem; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); scroll-margin-top: calc(var(--dh-top, 80px) + 72px); transition: box-shadow var(--ca-transition), border-color var(--ca-transition); }
body.ca-dest-hub .dh-list > li.dh-dest.is-active { border-color: color-mix(in srgb, var(--ui-accent) 70%, transparent); box-shadow: var(--ui-shadow); }
body.ca-dest-hub .dh-list > li.dh-dest::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--ui-accent); opacity: 0; transition: opacity 200ms ease; }
body.ca-dest-hub .dh-list > li.dh-dest.is-active::before { opacity: 1; }
body.ca-dest-hub .dh-dest-img { position: relative; aspect-ratio: 1 / 1; border-radius: var(--ui-radius-sm); overflow: hidden; background: linear-gradient(150deg, var(--beige), color-mix(in srgb, var(--beige) 60%, var(--gold-pale))); }
body.ca-dest-hub .dh-dest-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.ca-dest-hub .dh-dest-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: .15rem .25rem .15rem 0; }
body.ca-dest-hub .dh .dh-dest-name { font-weight: 600; font-size: 19px !important; line-height: 1.25; margin: 0 0 .3rem; }
body.ca-dest-hub .dh-dest-name a { color: var(--ui-ink); }
body.ca-dest-hub .dh-dest-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ui-radius); }   /* the whole card is the link */
body.ca-dest-hub .dh-dest-name a:hover { color: var(--ui-ink); }
body.ca-dest-hub .dh-dest-desc { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ui-ink-2); }
body.ca-dest-hub .dh-dest-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
body.ca-dest-hub .dh-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-bg); color: var(--ui-ink); font-size: 14px; font-weight: 500; line-height: 1.2; transition: border-color var(--ca-transition); }
body.ca-dest-hub .dh-tag:hover { border-color: var(--ui-ink); color: var(--ui-ink); }
body.ca-dest-hub .dh-tag-tours { border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent); color: var(--ui-ink); }
body.ca-dest-hub .dh-tag-tours::after { content: " \2192"; white-space: pre; color: var(--ui-accent); }

/* Sections */
body.ca-dest-hub .dh-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
body.ca-dest-hub .dh-tint { background: var(--ui-tint); }
body.ca-dest-hub .dh-sec-head { margin: 0 0 1.75rem; }
body.ca-dest-hub .dh .dh-h2 { font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) !important; line-height: 1.15 !important; margin: 0 0 .5rem; }

/* Cities and regions */
body.ca-dest-hub .dh-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
body.ca-dest-hub .dh-place { display: flex; flex-direction: column; color: var(--ui-ink); background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; transition: box-shadow var(--ca-transition), transform var(--ca-transition); }
body.ca-dest-hub .dh-place:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); color: var(--ui-ink); }
body.ca-dest-hub .dh-place-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--beige), color-mix(in srgb, var(--beige) 60%, var(--gold-pale))); }
body.ca-dest-hub .dh-place-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.ca-dest-hub .dh-place-body { padding: 1rem 1.1rem 1.2rem; }
body.ca-dest-hub .dh-place-region { display: block; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ui-accent); margin: 0 0 .2rem; }
body.ca-dest-hub .dh .dh-place h3 { font-weight: 600; font-size: 18px !important; line-height: 1.3; margin: 0 0 .35rem; }
body.ca-dest-hub .dh-place p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ui-ink-2); }
@media (max-width: 640px) { body.ca-dest-hub .dh-place p { font-size: 16px; } }

/* Contact band */
body.ca-dest-hub .dh-contact-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
body.ca-dest-hub .dh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.4rem; border-radius: var(--ui-radius-sm); font: 600 16px/1.2 'Jost', sans-serif; text-transform: none; letter-spacing: .01em; transition: background var(--ca-transition), border-color var(--ca-transition); }
body.ca-dest-hub .dh-btn-wa { background: var(--wa-green); color: var(--ivory); border: 1px solid var(--wa-green); }
body.ca-dest-hub .dh-btn-wa:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); color: var(--ivory); }

@media (hover: hover) {
    body.ca-dest-hub .dh-list > li.dh-dest:hover { border-color: color-mix(in srgb, var(--ui-accent) 70%, transparent); }
}

/* Tablet and phone: the map becomes a compact header above the list */
@media (max-width: 960px) {
    body.ca-dest-hub .dh-atlas-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    body.ca-dest-hub .dh-map-col { order: 0; position: static; display: contents; }
    body.ca-dest-hub .dh-map { box-shadow: none; }
    body.ca-dest-hub .dh-peek { display: none !important; }
    body.ca-dest-hub .dh-map-col { top: auto; }
    /* The phone's index: a sticky segmented scroller (ux.css .ux-seg) whose thumb follows the scroll-spy */
    body.ca-dest-hub .dh-jump { display: block; position: sticky; top: var(--dh-top, 60px); z-index: 5; margin: 0 calc(clamp(1.25rem, 5vw, 3rem) * -1); padding: .5rem clamp(1.25rem, 5vw, 3rem);
        background: var(--ui-bg); border-bottom: 1px solid var(--ui-line); box-shadow: 0 -16px 0 var(--ui-bg); }
    body.ca-dest-hub .dh-seg { display: grid; width: 100%; grid-auto-columns: max-content; justify-content: start; scroll-padding-inline: 1rem; }
    body.ca-dest-hub .dh-seg > a { min-height: 40px; padding: 0 1rem; font-size: 15px; }
    body.ca-dest-hub .dh-city { display: none; }   /* too close to tap at phone scale; the cities are in the list below */
    body.ca-dest-hub .dh-label { font-size: 13px; padding: .2rem .55rem; }
}
@media (max-width: 640px) {
    body.ca-dest-hub .dh-map { margin: 0 calc(clamp(1.25rem, 5vw, 3rem) * -1); border-radius: 0; border-left: 0; border-right: 0; }
    body.ca-dest-hub .dh-list > li.dh-dest { grid-template-columns: 96px minmax(0, 1fr); gap: .85rem; padding: .65rem; }
    body.ca-dest-hub .dh-dest-img { position: relative; aspect-ratio: 1 / 1; align-self: start; }
    body.ca-dest-hub .dh-dest-desc { font-size: 16px; }
    body.ca-dest-hub .dh-places { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(1.25rem, 5vw, 3rem); gap: .9rem; margin: 0 calc(clamp(1.25rem, 5vw, 3rem) * -1); padding: 0 clamp(1.25rem, 5vw, 3rem) .5rem; scrollbar-width: none; }
    body.ca-dest-hub .dh-places::-webkit-scrollbar { display: none; }
    body.ca-dest-hub .dh-place { flex: 0 0 78%; scroll-snap-align: start; }
    body.ca-dest-hub .dh-contact .dh-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    body.ca-dest-hub .dh * { transition: none !important; }
}

/* Phone action bar (checklist 6): the page's one WhatsApp action stays a tap away. It replaces the chat
   bubble on phones, steps aside behind the drawer, and slides away while the closing button or the footer
   is on screen (destinations-hub.js). */
body.ca-dest-hub .dh-mbar { display: none; }
@media (max-width: 760px) {
    body.ca-dest-hub { padding-bottom: 74px; }
    body.ca-dest-hub #ca-chat-bubble { display: none !important; }
    body.ca-dest-hub .dh-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .65rem clamp(1.25rem, 5vw, 3rem) calc(.65rem + env(safe-area-inset-bottom));
        background: var(--ui-paper); border-top: 1px solid var(--ui-line); box-shadow: 0 -6px 20px color-mix(in srgb, var(--obsidian) 8%, transparent); }
    body.ca-dest-hub .dh-mbar .dh-btn { flex: 1 1 100%; min-height: 48px; }
    body.ca-dest-hub .dh-mbar[data-hide] { transform: translateY(110%); visibility: hidden; }
    body.ca-dest-hub.ca-nav-open .dh-mbar { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    body.ca-dest-hub .dh-mbar { transition: transform 240ms ease, visibility 240ms; }
}
/* Ghost and focus for the band button (checklist 4, 5) */
body.ca-dest-hub .dh-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* ---- Native feel and large screens (S2-2/S2-3, 2026-10-08) --------------------------------------------------- */
@media (max-width: 760px) {
    body.ca-dest-hub .dh-tag { min-height: 44px; padding: 0 .9rem; }
    body.ca-dest-hub .dh-list > li.dh-dest:active { transform: scale(.985); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    body.ca-dest-hub .dh-list > li.dh-dest { transition: transform 140ms ease, box-shadow var(--ca-transition), border-color var(--ca-transition); }
}
/* 1600px and up: the atlas widens and the map takes the room (list a fixed reading column, map the rest, still capped
   by the window height so the sticky map never spills). Cities and regions go to six across. */
@media (min-width: 1600px) {
    body.ca-dest-hub .dh-wrap { max-width: 1440px; }
    body.ca-dest-hub .dh-atlas-grid { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 3rem; }
    body.ca-dest-hub .dh-places { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}