/* =============================================================================
   Crafted Journeys hub (template-journeys-hub.php), body.ca-journeys-hub. An editorial gallery
   corridor: the collections as large panels in a scroll-snap rail, photo above and words below on
   paper (never on the picture). Frame and tokens (--ui-*, Jost 500/600) come from ui.css.
   House tokens only. Motion is progressive: scroll-driven only inside @supports and no-preference.
   ============================================================================= */
body.ca-journeys-hub { background: var(--ui-bg); }
html:has(body.ca-journeys-hub), body.ca-journeys-hub { overflow-x: clip; }
body.ca-journeys-hub .jh { --jh-gut: clamp(1.25rem, 5vw, 3rem); --jh-edge: max(var(--jh-gut), calc((100% - 1200px) / 2 + var(--jh-gut)));
    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-journeys-hub .jh *, body.ca-journeys-hub .jh *::before, body.ca-journeys-hub .jh *::after { box-sizing: border-box; }
body.ca-journeys-hub .jh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--jh-gut); }
body.ca-journeys-hub .jh h1, body.ca-journeys-hub .jh h2, body.ca-journeys-hub .jh h3 { font-family: 'Jost', sans-serif; font-style: normal; text-transform: none; letter-spacing: -.005em; color: var(--ui-ink); text-align: left; }

/* Head: the title on the left, the rail's controls on the right */
body.ca-journeys-hub .jh-top { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
body.ca-journeys-hub .jh-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
body.ca-journeys-hub .jh .jh-h1 { font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem) !important; line-height: 1.08 !important; margin: 0; }
body.ca-journeys-hub .jh-nav { display: flex; align-items: center; gap: .6rem; }
body.ca-journeys-hub .jh-count { font-size: 15px; font-weight: 500; color: var(--ui-ink-2); font-variant-numeric: tabular-nums; margin-right: .4rem; }
body.ca-journeys-hub .jh-arrow { appearance: none; width: 48px; height: 48px; min-width: 0; padding: 0; display: grid; place-items: center; border-radius: 50%;
    background: transparent; color: var(--ui-ink); border: 1px solid color-mix(in srgb, var(--obsidian) 35%, transparent); cursor: pointer; transition: border-color var(--ca-transition), opacity var(--ca-transition); }
body.ca-journeys-hub .jh-arrow:hover:not(:disabled) { border-color: var(--ui-ink); }
body.ca-journeys-hub .jh-arrow:disabled { opacity: .35; cursor: default; }
body.ca-journeys-hub .jh-arrow:focus-visible, body.ca-journeys-hub .jh-rail:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* The rail: full bleed, first panel aligned to the content column, snaps panel by panel */
body.ca-journeys-hub .jh-rail { position: relative; display: flex; gap: clamp(.9rem, 2vw, 1.5rem); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--jh-edge); padding: .25rem var(--jh-edge) 1rem; scrollbar-width: none; }
body.ca-journeys-hub .jh-rail::-webkit-scrollbar { display: none; }
body.ca-journeys-hub .jh-panel { flex: 0 0 clamp(300px, 40vw, 540px); scroll-snap-align: start; container-type: inline-size; container-name: jh-panel; }
body.ca-journeys-hub .jh-panel-link { 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-journeys-hub .jh-panel-link:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); color: var(--ui-ink); }
body.ca-journeys-hub .jh-panel-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
body.ca-journeys-hub .jh-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(150deg, var(--beige), color-mix(in srgb, var(--beige) 60%, var(--gold-pale))); }
body.ca-journeys-hub .jh-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms ease; }
body.ca-journeys-hub .jh-panel-link:hover .jh-media img { transform: scale(1.03); }
body.ca-journeys-hub .jh-caption { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.3rem; }
body.ca-journeys-hub .jh-num { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--ui-accent); font-variant-numeric: tabular-nums; margin-bottom: .45rem; }
body.ca-journeys-hub .jh .jh-title { font-weight: 600; font-size: 24px !important; line-height: 1.2 !important; margin: 0 0 .5rem; }
body.ca-journeys-hub .jh-lead { margin: 0 0 1rem; font-size: 16px; line-height: 1.55; color: var(--ui-ink-2); }
body.ca-journeys-hub .jh-more { margin-top: auto; font-weight: 600; font-size: 16px; color: var(--ui-ink); }
body.ca-journeys-hub .jh-more::after { content: " \2192"; display: inline-block; transition: transform var(--ca-transition); }
body.ca-journeys-hub .jh-panel-link:hover .jh-more::after { transform: translateX(4px); }

/* Wide panels get a landscape frame and a larger title: the panel decides, not the viewport */
@container jh-panel (min-width: 420px) {
    body.ca-journeys-hub .jh-media { aspect-ratio: 4 / 3; }
    body.ca-journeys-hub .jh .jh-title { font-size: clamp(24px, 5.5cqi, 30px) !important; }
    body.ca-journeys-hub .jh-caption { padding: 1.3rem 1.5rem 1.5rem; }
}

/* A laptop at 100% (1366 x 650): a wider frame, so each panel's title shows on the first screen with its photo */
@media (min-width: 761px) and (max-height: 820px) {
    body.ca-journeys-hub .jh-top { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
    body.ca-journeys-hub .jh-head { margin-bottom: 1.25rem; }
    @container jh-panel (min-width: 420px) { body.ca-journeys-hub .jh-media { aspect-ratio: 16 / 9; } }
}

/* Panels not being pointed at step back a little while one is (pointer devices only) */
@media (hover: hover) {
    body.ca-journeys-hub .jh-rail:has(.jh-panel-link:hover) .jh-panel-link:not(:hover) { opacity: .82; }
    body.ca-journeys-hub .jh-panel-link { transition: box-shadow var(--ca-transition), transform var(--ca-transition), opacity var(--ca-transition); }
}

/* Dots: tap one, or slide a finger along the row */
body.ca-journeys-hub .jh-dots { display: flex; justify-content: center; margin-top: .25rem; touch-action: none; user-select: none; }
body.ca-journeys-hub .jh-dots button { appearance: none; width: 36px; height: 36px; min-width: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
body.ca-journeys-hub .jh-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--obsidian) 22%, transparent); transition: background var(--ca-transition), width var(--ca-transition); }
body.ca-journeys-hub .jh-dots button.on::before { width: 22px; background: var(--ui-ink); }
body.ca-journeys-hub .jh-dots button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -6px; border-radius: 10px; }

/* About and index */
body.ca-journeys-hub .jh-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
body.ca-journeys-hub .jh-tint { background: var(--ui-tint); }
body.ca-journeys-hub .jh-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
body.ca-journeys-hub .jh .jh-h2 { font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) !important; line-height: 1.15 !important; margin: 0 0 .6rem; }
body.ca-journeys-hub .jh-intro, body.ca-journeys-hub .jh-sub { margin: 0; color: var(--ui-ink-2); font-size: 17px; max-width: 32em; }
body.ca-journeys-hub .jh-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ui-line); counter-reset: none; }
body.ca-journeys-hub .jh-index li { margin: 0; padding: 0; border-bottom: 1px solid var(--ui-line); }
body.ca-journeys-hub .jh-index li::before, body.ca-journeys-hub .jh-index li::marker { content: none; }
body.ca-journeys-hub .jh-index a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: baseline; padding: 1.05rem .25rem; text-decoration: none; color: var(--ui-ink); }
body.ca-journeys-hub .jh-index a::after { content: "\2192"; font-weight: 600; transition: transform var(--ca-transition); }
body.ca-journeys-hub .jh-index a:hover::after { transform: translateX(4px); }
body.ca-journeys-hub .jh-index a:hover .jh-index-title { color: var(--ui-accent); }
body.ca-journeys-hub .jh-index a:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 6px; }
body.ca-journeys-hub .jh-index-num { font-size: 14px; font-weight: 600; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
body.ca-journeys-hub .jh-index-body { display: flex; flex-direction: column; gap: .2rem; }
body.ca-journeys-hub .jh-index-title { font-weight: 600; font-size: 19px; line-height: 1.3; transition: color var(--ca-transition); }
body.ca-journeys-hub .jh-index-line { font-size: 16px; color: var(--ui-ink-2); line-height: 1.5; }

/* Contact band: the one solid action on the page */
body.ca-journeys-hub .jh-contact-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
body.ca-journeys-hub .jh-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-decoration: none; text-transform: none; letter-spacing: .01em; transition: background var(--ca-transition), border-color var(--ca-transition); }
body.ca-journeys-hub .jh-btn-wa { background: var(--wa-green); color: var(--ivory); border: 1px solid var(--wa-green); }
body.ca-journeys-hub .jh-btn-wa:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); color: var(--ivory); }
body.ca-journeys-hub .jh-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* Scroll-driven: each photo settles as its panel travels into the rail, and the panel rises in.
   Only where the browser supports view timelines and the reader has not asked for less motion. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        body.ca-journeys-hub .jh-media img { animation: jh-settle linear both; animation-timeline: view(inline); animation-range: entry 0% cover 50%; }
        body.ca-journeys-hub .jh-panel-link:hover .jh-media img { transform: none; }
        body.ca-journeys-hub .jh-index li { animation: jh-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    }
}
@keyframes jh-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes jh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    body.ca-journeys-hub .jh-rail { scroll-behavior: auto; }
    body.ca-journeys-hub .jh *, body.ca-journeys-hub .jh *::after { transition: none !important; }
}

@media (max-width: 960px) {
    body.ca-journeys-hub .jh-about { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    body.ca-journeys-hub .jh-nav .jh-arrow { display: none; }
    body.ca-journeys-hub .jh-panel { flex-basis: 84%; }
    body.ca-journeys-hub .jh-contact-box .jh-btn { flex: 1 1 100%; }
}
/* The theme dresses lists and links in its own serif voice; on this page they read as plain Jost */
body.ca-journeys-hub .jh a, body.ca-journeys-hub .jh p, body.ca-journeys-hub .jh li, body.ca-journeys-hub .jh span { font-family: 'Jost', sans-serif; letter-spacing: normal; text-transform: none; }
body.ca-journeys-hub .jh-num, body.ca-journeys-hub .jh-index-num { letter-spacing: .08em; }
@media (max-width: 640px) {
    body.ca-journeys-hub .jh-index a { grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .2rem .75rem; }
}

/* 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 (journeys-hub.js). */
body.ca-journeys-hub .jh-mbar { display: none; }
@media (max-width: 760px) {
    body.ca-journeys-hub { padding-bottom: 74px; }
    body.ca-journeys-hub #ca-chat-bubble { display: none !important; }
    body.ca-journeys-hub .jh-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .65rem var(--jh-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-journeys-hub .jh-mbar .jh-btn { flex: 1 1 100%; min-height: 48px; }
    body.ca-journeys-hub .jh-mbar[data-hide] { transform: translateY(110%); visibility: hidden; }
    body.ca-journeys-hub.ca-nav-open .jh-mbar { display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    body.ca-journeys-hub .jh-mbar { transition: transform 240ms ease, visibility 240ms; }
}

/* Laptop and up: the rail's peeking panels fade out across the side margins, so the next panel still
   shows there is more without its number and title running under the WhatsApp bubble (QA M2, 1366x650). */
@media (min-width: 1024px) {
    body.ca-journeys-hub .jh-rail {
        -webkit-mask-image: linear-gradient(to right, transparent calc(var(--jh-edge) * .3), black var(--jh-edge), black calc(100% - var(--jh-edge)), transparent calc(100% - var(--jh-edge) * .3));
        mask-image: linear-gradient(to right, transparent calc(var(--jh-edge) * .3), black var(--jh-edge), black calc(100% - var(--jh-edge)), transparent calc(100% - var(--jh-edge) * .3)); }
}