/* =============================================================================
   Private tours catalogue (template-tours-hub.php), body.ca-tours-hub. The shop index: a sticky
   filter bar of chips derived from the tours' own data, a live count, sort, and a card grid.
   Words never sit on a photograph. Frame and tokens (--ui-*, Jost 500/600) come from ui.css.
   House tokens only. Motion is progressive: View Transitions and scroll-driven reveals only where
   supported and the reader has not asked for less motion.
   ============================================================================= */
body.ca-tours-hub { background: var(--ui-bg); }
html:has(body.ca-tours-hub), body.ca-tours-hub { overflow-x: clip; }
body.ca-tours-hub .th { --th-gut: clamp(1.25rem, 5vw, 3rem); --th-top: 0px;
    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-tours-hub .th *, body.ca-tours-hub .th *::before, body.ca-tours-hub .th *::after { box-sizing: border-box; }
body.ca-tours-hub .th-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--th-gut); }
body.ca-tours-hub .th h1, body.ca-tours-hub .th h2, body.ca-tours-hub .th h3 { font-family: 'Jost', sans-serif; font-style: normal; text-transform: none; letter-spacing: -.005em; color: var(--ui-ink); text-align: left; }
/* The theme dresses lists, links and spans in its own serif voice; here they read as plain Jost */
body.ca-tours-hub .th a, body.ca-tours-hub .th p, body.ca-tours-hub .th li, body.ca-tours-hub .th span, body.ca-tours-hub .th button,
body.ca-tours-hub .th select, body.ca-tours-hub .th summary, body.ca-tours-hub .th label { font-family: 'Jost', sans-serif; letter-spacing: normal; text-transform: none; }

/* Head */
body.ca-tours-hub .th-top { padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem); }
body.ca-tours-hub .th-crumb { display: flex; gap: .5rem; font-size: 14px; color: var(--ui-ink-2); margin-bottom: .9rem; }
body.ca-tours-hub .th-crumb a { color: var(--ui-ink-2); text-decoration: none; }
body.ca-tours-hub .th-crumb a:hover { color: var(--ui-accent); }
body.ca-tours-hub .th-crumb a::after { content: "/"; margin-left: .5rem; color: var(--ui-line); }
body.ca-tours-hub .th .th-h1 { font-weight: 600 !important; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem) !important; line-height: 1.08 !important; margin: 0 0 .7rem; max-width: 18em; }
body.ca-tours-hub .th-lead { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 500; line-height: 1.4; color: var(--ui-ink); max-width: 34em; }
body.ca-tours-hub .th-sub { margin: .35rem 0 0; color: var(--ui-ink-2); font-size: 17px; max-width: 36em; }

/* Sticky filter bar */
body.ca-tours-hub .th-bar { position: sticky; top: var(--th-top); transition: top 200ms ease, box-shadow var(--ca-transition); z-index: 20; background: var(--ui-bg); /* opaque: card titles ghosted through at 92% (QA M3) */
    border-block: 1px solid var(--ui-line); }
@supports (backdrop-filter: blur(8px)) { body.ca-tours-hub .th-bar { backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); } }
body.ca-tours-hub .th-bar.is-stuck { box-shadow: 0 6px 20px color-mix(in srgb, var(--obsidian) 8%, transparent); }
body.ca-tours-hub .th-bar-in { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1.5rem; padding-block: .7rem; }
body.ca-tours-hub .th-facets { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; min-width: 0; }
body.ca-tours-hub .th-group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
body.ca-tours-hub .th-group-name { font-size: 13px; font-weight: 600; color: var(--ui-ink-2); margin-right: .15rem; }
body.ca-tours-hub .th-chip { appearance: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; min-width: 0; padding: 0 .95rem; margin: 0;
    border-radius: 999px; border: 1px solid color-mix(in srgb, var(--obsidian) 22%, transparent); background: var(--ui-paper); color: var(--ui-ink);
    font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: none;
    transition: background var(--ca-transition), border-color var(--ca-transition), color var(--ca-transition), opacity var(--ca-transition); }
body.ca-tours-hub .th-chip:hover { border-color: var(--ui-ink); background: var(--ui-paper); color: var(--ui-ink); }
body.ca-tours-hub .th-chip[aria-pressed="true"] { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-paper); }
body.ca-tours-hub .th-chip[aria-pressed="true"]::before { content: "\2713"; font-weight: 600; }
body.ca-tours-hub .th-chip:disabled { opacity: .4; cursor: default; border-color: var(--ui-line); }
body.ca-tours-hub .th-chip-n { font-size: 13px; font-weight: 500; color: var(--ui-ink-2); font-variant-numeric: tabular-nums; }
body.ca-tours-hub .th-chip-n:empty { display: none; }
body.ca-tours-hub .th-chip[aria-pressed="true"] .th-chip-n { color: color-mix(in srgb, var(--ui-paper) 75%, transparent); }
body.ca-tours-hub .th-chip:focus-visible, body.ca-tours-hub .th-clear:focus-visible, body.ca-tours-hub .th-sort select:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

body.ca-tours-hub .th-tools { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem 1rem; margin-left: auto; }
body.ca-tours-hub .th-count { margin: 0; font-size: 15px; color: var(--ui-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ca-tours-hub .th-count strong { color: var(--ui-ink); font-weight: 600; }
body.ca-tours-hub .th-clear { appearance: none; background: none; border: 0; padding: .5rem .25rem; min-height: 40px; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; color: var(--ui-accent);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }
body.ca-tours-hub .th-clear[hidden] { display: none; }
body.ca-tours-hub .th-sort { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 14px; color: var(--ui-ink-2); }
body.ca-tours-hub .th-sort select { appearance: none; -webkit-appearance: none; height: 40px; min-width: 0; width: auto; margin: 0; padding: 0 2.1rem 0 .85rem; border-radius: var(--ui-radius-sm);
    border: 1px solid color-mix(in srgb, var(--obsidian) 22%, transparent); color: var(--ui-ink); font-size: 15px; font-weight: 500; cursor: pointer;
    background: var(--ui-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='gray' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center; }

/* Results grid: cards decide their own inner layout by their width */
body.ca-tours-hub .th-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
body.ca-tours-hub .th-results { padding-top: clamp(1.25rem, 3vw, 2rem); min-height: 40vh; }
body.ca-tours-hub .th-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); }
body.ca-tours-hub .th-grid > li { margin: 0; padding: 0; container-type: inline-size; container-name: th-card; }
body.ca-tours-hub .th-grid > li::before, body.ca-tours-hub .th-grid > li::marker { content: none; }
body.ca-tours-hub .th-grid > li[hidden] { display: none; }
body.ca-tours-hub .th-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; 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-tours-hub .th-card:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); color: var(--ui-ink); }
body.ca-tours-hub .th-card:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
body.ca-tours-hub .th-media { aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(150deg, var(--beige), color-mix(in srgb, var(--beige) 60%, var(--gold-pale))); }
body.ca-tours-hub .th-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms ease; }
body.ca-tours-hub .th-card:hover .th-media img { transform: scale(1.04); }
body.ca-tours-hub .th-body { display: flex; flex-direction: column; flex: 1; padding: 1.05rem 1.15rem 1.15rem; }
body.ca-tours-hub .th-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .6rem; padding: .28rem .65rem; border-radius: 999px;
    background: var(--ui-tint); color: var(--ui-ink); font-size: 13px; font-weight: 500; line-height: 1.25; }
body.ca-tours-hub .th-badge-winter { background: color-mix(in srgb, var(--gold-pale) 45%, var(--ui-paper)); }
body.ca-tours-hub .th-badge .th-ic { width: 15px; height: 15px; color: var(--ui-accent); flex: none; }
body.ca-tours-hub .th .th-title { font-weight: 600; font-size: 19px !important; line-height: 1.28; margin: 0 0 .45rem; }
body.ca-tours-hub .th-summary { margin: 0 0 .85rem; font-size: 16px; line-height: 1.55; color: var(--ui-ink-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.ca-tours-hub .th-facts { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
body.ca-tours-hub .th-facts li { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: 0; font-size: 15px; line-height: 1.4; color: var(--ui-ink); }
body.ca-tours-hub .th-facts li::before, body.ca-tours-hub .th-facts li::marker { content: none; }
body.ca-tours-hub .th-facts .th-ic { flex: none; margin-top: 1px; color: var(--ui-accent); }
body.ca-tours-hub .th-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .85rem; border-top: 1px solid var(--ui-line); }
body.ca-tours-hub .th-price { font-size: 15px; font-weight: 600; color: var(--ui-ink); }
body.ca-tours-hub .th-more { font-size: 15px; font-weight: 600; color: var(--ui-accent); }
body.ca-tours-hub .th-more::after { content: " \2192"; display: inline-block; transition: transform var(--ca-transition); }
body.ca-tours-hub .th-card:hover .th-more::after { transform: translateX(4px); }
@container th-card (min-width: 460px) {
    body.ca-tours-hub .th-body { padding: 1.25rem 1.4rem 1.35rem; }
}

/* Empty state */
body.ca-tours-hub .th-empty { text-align: left; padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem); border: 1px dashed color-mix(in srgb, var(--obsidian) 25%, transparent); border-radius: var(--ui-radius); background: var(--ui-paper); }
body.ca-tours-hub .th-empty[hidden] { display: none; }

/* Buttons: ghost, and the one solid WhatsApp action */
body.ca-tours-hub .th-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
body.ca-tours-hub .th-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.4rem; margin: 0; border-radius: var(--ui-radius-sm);
    font: 600 16px/1.2 'Jost', sans-serif; text-decoration: none; text-transform: none; letter-spacing: .01em; cursor: pointer; box-shadow: none;
    transition: background var(--ca-transition), border-color var(--ca-transition), color var(--ca-transition); }
body.ca-tours-hub .th-btn-ghost { background: transparent; color: var(--ui-ink); border: 1px solid color-mix(in srgb, var(--obsidian) 40%, transparent); }
body.ca-tours-hub .th-btn-ghost:hover { border-color: var(--ui-ink); background: transparent; color: var(--ui-ink); }
body.ca-tours-hub .th-btn-wa { background: var(--wa-green); color: var(--ivory); border: 1px solid var(--wa-green); }
body.ca-tours-hub .th-btn-wa:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); color: var(--ivory); }
body.ca-tours-hub .th-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* Questions */
body.ca-tours-hub .th-tint { background: var(--ui-tint); }
body.ca-tours-hub .th-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.25rem, 5vw, 4rem); align-items: start; }
body.ca-tours-hub .th .th-h2 { font-weight: 600; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem) !important; line-height: 1.2 !important; margin: 0 0 .5rem; }
body.ca-tours-hub .th-faq { border-top: 1px solid var(--ui-line); }
body.ca-tours-hub .th-faq details { border-bottom: 1px solid var(--ui-line); }
body.ca-tours-hub .th-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem .25rem; cursor: pointer;
    font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ui-ink); }
body.ca-tours-hub .th-faq summary::-webkit-details-marker { display: none; }
body.ca-tours-hub .th-faq summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--ui-accent); transition: transform var(--ca-transition); }
body.ca-tours-hub .th-faq details[open] summary::after { transform: rotate(45deg); }
body.ca-tours-hub .th-faq summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 6px; }
body.ca-tours-hub .th-faq details p { margin: 0 0 1.15rem; padding: 0 .25rem; font-size: 16px; color: var(--ui-ink-2); max-width: 40em; }

/* Closing band */
body.ca-tours-hub .th-contact-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; }
body.ca-tours-hub .th-contact-box > div:first-child { max-width: 40em; }
body.ca-tours-hub .th-contact-box .th-actions { margin-top: 0; }

/* View Transitions: the grid reflows as one animated move when filters change. tours-hub.js names the cards and
   sets html.th-vt only for that in-page transition, so the site-wide page cross-fade (ux.css) stays untouched. */
html.th-vt::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
html.th-vt::view-transition-old(root), html.th-vt::view-transition-new(root) { animation: none; }

/* Scroll-driven: cards rise in as they enter the viewport */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        body.ca-tours-hub .th-card { animation: th-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    }
}
@keyframes th-rise { from { opacity: .3; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    body.ca-tours-hub .th *, body.ca-tours-hub .th *::after { transition: none !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media (max-width: 960px) {
    body.ca-tours-hub .th-faq-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the chips become one swipeable row under a compact count and sort line */
@media (max-width: 760px) {
    body.ca-tours-hub .th-bar-in { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: .5rem; padding-block: .6rem; padding-inline: 0; }
    body.ca-tours-hub .th-facets { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: .4rem; padding-inline: var(--th-gut);
        scroll-padding-inline: var(--th-gut); -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--th-gut), black calc(100% - var(--th-gut)), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, black var(--th-gut), black calc(100% - var(--th-gut)), transparent 100%); }
    body.ca-tours-hub .th-facets::-webkit-scrollbar { display: none; }
    body.ca-tours-hub .th-group { flex-wrap: nowrap; flex: none; }
    body.ca-tours-hub .th-group + .th-group { padding-left: .6rem; border-left: 1px solid var(--ui-line); }
    body.ca-tours-hub .th-tools { order: -1; margin-left: 0; justify-content: space-between; padding-inline: var(--th-gut); gap: .5rem; }
    body.ca-tours-hub .th-count { margin-right: auto; }
    body.ca-tours-hub .th-sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    body.ca-tours-hub .th-contact-box .th-actions, body.ca-tours-hub .th-empty .th-actions { width: 100%; }
    body.ca-tours-hub .th-actions .th-btn { flex: 1 1 100%; }
}
/* Once stuck on wider screens the bar tightens, so three rows of chips cost less of the screen */
@media (min-width: 761px) {
    body.ca-tours-hub .th-bar.is-stuck .th-bar-in { padding-block: .45rem; }
    body.ca-tours-hub .th-bar.is-stuck .th-facets { row-gap: .35rem; }
    body.ca-tours-hub .th-bar.is-stuck .th-chip { min-height: 34px; padding-inline: .8rem; font-size: 14px; }
    body.ca-tours-hub .th-bar.is-stuck .th-sort select { height: 36px; }
}
body.ca-tours-hub .th .th-contact-box .th-h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.9rem) !important; line-height: 1.25 !important; }

/* Phone action bar (checklist 6): the page's WhatsApp action stays one tap away. It replaces the chat
   bubble on phones, steps aside behind the drawer, and slides away while another WhatsApp button or the
   footer is on screen (tours-hub.js). */
body.ca-tours-hub .th-mbar { display: none; }
@media (max-width: 760px) {
    body.ca-tours-hub { padding-bottom: 74px; }
    body.ca-tours-hub #ca-chat-bubble { display: none !important; }
    body.ca-tours-hub .th-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .65rem var(--th-gut) 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-tours-hub .th-mbar .th-btn { flex: 1 1 100%; min-height: 48px; }
    body.ca-tours-hub .th-mbar[data-hide] { transform: translateY(110%); visibility: hidden; }
    body.ca-tours-hub.ca-nav-open .th-mbar { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    body.ca-tours-hub .th-mbar { transition: transform 240ms ease, visibility 240ms; }
}

/* ---- Native feel (S2-2, 2026-10-08) -------------------------------------------------------------------------
   Phones: the chip row gives way to one Filter button that pulls up a sheet (ux.css): season and length as
   segmented controls, start cities as chips, a footer that says how many tours the choice leaves. */
body.ca-tours-hub .th-open { display: none; }
body.ca-tours-hub .th-sheet .th-sgroup + .th-sgroup { margin-top: 1.35rem; }
body.ca-tours-hub .th-sheet .th-sgroup-name { margin: 0 0 .55rem; font-size: 14px; font-weight: 600; color: var(--ui-ink); }
body.ca-tours-hub .th-sheet .th-seg > button { padding: 0 .55rem; font-size: 14px; min-width: 0; }
body.ca-tours-hub .th-sheet .th-seg > button:disabled { opacity: .4; cursor: default; }
body.ca-tours-hub .th-sheet .th-schips { display: flex; flex-wrap: wrap; gap: .5rem; }
body.ca-tours-hub .th-sheet .th-chip { min-height: var(--ux-target); padding: 0 1.05rem; }
body.ca-tours-hub .th-sheet .ux-sheet-foot .th-btn { min-height: var(--ux-target); padding: 0 1rem; }
body.ca-tours-hub .th-sheet .th-btn-ink { border: 1.5px solid var(--ui-ink); color: var(--ui-ink); }
body.ca-tours-hub .th-sheet [data-th-clear]:disabled { opacity: .45; cursor: default; }
@media (max-width: 760px) {
    body.ca-tours-hub .th-facets { display: none; }
    body.ca-tours-hub .th-bar-in { padding-block: .55rem; }
    body.ca-tours-hub .th-tools { order: 0; flex-wrap: nowrap; }
    body.ca-tours-hub .th-open { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--ux-target); padding: 0 1rem; margin: 0; border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--obsidian) 30%, transparent); background: var(--ui-paper); color: var(--ui-ink); font: 600 15px/1 'Jost', sans-serif; cursor: pointer; box-shadow: none; }
    body.ca-tours-hub .th-open .th-ic { color: var(--ui-ink); }
    body.ca-tours-hub .th-open-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .35rem; border-radius: 999px; background: var(--ui-ink); color: var(--ui-paper); font-size: 13px; font-weight: 600; }
    body.ca-tours-hub .th-open-n[hidden] { display: none; }
    body.ca-tours-hub .th-count { margin: 0 auto 0 0; font-size: 14px; }
    body.ca-tours-hub .th-sort select { height: var(--ux-target); }
    body.ca-tours-hub .th-clear { display: none; }
    body.ca-tours-hub .th-faq summary { min-height: var(--ux-target); }
}
/* No hover needed: the card's lift is also a pressed state on touch */
body.ca-tours-hub .th-card:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { body.ca-tours-hub .th-card:active { transform: none; } }

/* Desktop at large widths: the catalogue widens to four columns from 1600px; the whole page keeps one measure. */
@media (min-width: 1600px) {
    body.ca-tours-hub .th-wrap { max-width: 1440px; }
    body.ca-tours-hub .th-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
}
@media (min-width: 1100px) and (max-width: 1599px) {
    body.ca-tours-hub .th-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}