/* =============================================================================
   Home storefront (template-home.php), body.ca-home. Same language as the tour page; the frame
   (header, footer, Jost 500/600, tokens --ui-*) comes from ui.css. House tokens only.
   ============================================================================= */
body.ca-home { background: var(--ui-bg); }
html:has(body.ca-home), body.ca-home { overflow-x: clip; }
body.ca-home .hm { 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-home .hm *, body.ca-home .hm *::before, body.ca-home .hm *::after { box-sizing: border-box; }
body.ca-home .hm-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
body.ca-home .hm h1, body.ca-home .hm h2, body.ca-home .hm h3 { font-family: 'Jost', sans-serif; font-style: normal; text-transform: none; letter-spacing: -.005em; color: var(--ui-ink); text-align: left; }

/* Hero: the film full screen under the fixed header (home.js writes --hm-head), poster first. The line, lead,
   actions and rating sit on one frosted plate (glass.css tokens, local fallbacks), never raw on footage. The
   plate's tint alone holds ink >= 4.5:1 over a pure black or pure white frame; the blur is decoration. */
body.ca-home .hm-hero { position: relative; isolation: isolate; display: grid; align-content: end;
    min-height: calc(100vh - var(--hm-head, 81px)); min-height: calc(100svh - var(--hm-head, 81px));
    padding: clamp(5rem, 14vh, 8rem) 0 clamp(1.25rem, 4vw, 3rem); overflow: hidden; background: var(--ui-tint); }
body.ca-home .hm-hero-media { position: absolute; inset: 0; z-index: -1; }
body.ca-home .hm-hero-media img, body.ca-home .hm-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.ca-home .hm-hero-video { opacity: 0; transition: opacity 600ms ease; }
body.ca-home .hm-hero-video.is-on { opacity: 1; }
/* The light page begins under the hero: a short paper fade at the foot, behind the plate */
body.ca-home .hm-hero-media::after { content: ""; position: absolute; inset: auto 0 0; height: 22%;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ui-bg) 55%, transparent)); }
body.ca-home .hm-hero-inner { width: 100%; }
body.ca-home .hm-plate { --hm-plate-alpha: 76%; max-width: 760px; padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: var(--ui-radius); color: var(--ui-ink);
    background: color-mix(in srgb, var(--ui-glass-tint, var(--ui-paper)) var(--hm-plate-alpha), transparent);
    -webkit-backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(var(--ui-glass-sat, 165%));
    backdrop-filter: blur(var(--ui-glass-blur, 14px)) saturate(var(--ui-glass-sat, 165%));
    border: 1px solid var(--ui-glass-line, var(--ui-line));
    box-shadow: inset 0 1px 0 var(--ui-glass-edge, var(--ui-paper)), var(--ui-glass-shadow, var(--ui-shadow)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.ca-home .hm-plate { background: var(--ui-paper); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
    body.ca-home .hm-plate { background: var(--ui-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
body.ca-home .hm-h1 { font-weight: 600; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.08; margin: 0 0 .85rem; max-width: none !important; text-wrap: balance; }
body.ca-home .hm-lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--ui-ink); margin: 0 0 1.4rem; max-width: 30em; }
body.ca-home .hm-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.1rem; }
body.ca-home .hm-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-home .hm-btn-wa { background: var(--wa-green); color: var(--ivory); border: 1px solid var(--wa-green); }
body.ca-home .hm-btn-wa:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); color: var(--ivory); }
body.ca-home .hm-btn-ghost { background: transparent; color: var(--ui-ink); border: 1px solid color-mix(in srgb, var(--obsidian) 35%, transparent); }
body.ca-home .hm-btn-ghost:hover { border-color: var(--ui-ink); color: var(--ui-ink); }
body.ca-home .hm-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
body.ca-home .hm-rating { display: inline-flex; align-items: center; gap: .6rem; min-height: 32px; font-size: 15px; color: var(--ui-ink); text-decoration: none; }
body.ca-home .hm-rating strong { color: var(--ui-ink); font-weight: 600; }
body.ca-home .hm-stars { color: var(--gold-dark); letter-spacing: .1em; font-size: 15px; }
/* WCAG 2.2.2: the film can be stopped. Shown by home.js only once the film plays. */
body.ca-home .hm-hero-pause { position: absolute; right: clamp(1.25rem, 5vw, 3rem); top: 1rem; z-index: 1;
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
    font: 500 14px/1 'Jost', sans-serif; letter-spacing: 0; text-transform: none; color: var(--ui-ink);
    background: color-mix(in srgb, var(--ui-paper) 82%, transparent); border: 1px solid var(--ui-glass-line, var(--ui-line));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--ui-shadow); }
body.ca-home .hm-hero-pause[hidden] { display: none; }
body.ca-home .hm-hero-pause:hover { background: var(--ui-paper); }
body.ca-home .hm-hero-pause:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
body.ca-home .hm-pause-ico { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
body.ca-home .hm-hero-pause[aria-pressed="true"] .hm-pause-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }

/* Sections */
body.ca-home .hm-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; scroll-margin-top: 80px; }
body.ca-home .hm-tint { background: var(--ui-tint); }
body.ca-home .hm-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin: 0 0 1.75rem; }
body.ca-home .hm-h2 { font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.15; margin: 0 0 .4rem; }
body.ca-home .hm-sub { color: var(--ui-ink-2); margin: 0; max-width: 40em; }
body.ca-home .hm-link { font-weight: 500; color: var(--ui-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Review proof: the Google link beside Tripadvisor's own rating widget. The widget draws its own bordered box once
   their script runs (consent 'all'); without it the plain logo link stays, sized and aligned as a deliberate mark. */
body.ca-home .hm-rev-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
body.ca-home .ca-ta-badge { line-height: 0; }
body.ca-home .ca-ta-badge ul.TA_links { list-style: none; margin: 0; padding: 0; }
body.ca-home .ca-ta-badge ul.TA_links li { margin: 0; padding: 0; }
body.ca-home .ca-ta-badge ul.TA_links a { display: inline-flex; align-items: center; min-height: 44px; }
body.ca-home .ca-ta-badge ul.TA_links img { display: block; height: 24px; width: auto; }
body.ca-home .hm-more { display: inline-block; margin-top: .6rem; font-weight: 600; color: var(--ui-ink); }
body.ca-home .hm-more::after { content: " \2192"; }

/* Filter chips */
body.ca-home .hm-filter { display: flex; gap: .5rem; }
body.ca-home .hm-filter button { appearance: none; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-paper); color: var(--ui-ink); font: 500 15px 'Jost', sans-serif; cursor: pointer; text-transform: none; letter-spacing: 0; }
body.ca-home .hm-filter button span { color: var(--ui-ink-2); margin-left: .25rem; }
body.ca-home .hm-filter button[aria-pressed="true"] { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ivory); }
body.ca-home .hm-filter button[aria-pressed="true"] span { color: color-mix(in srgb, var(--ivory) 70%, transparent); }

/* Tour cards */
body.ca-home .hm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
body.ca-home .hm-card { display: flex; flex-direction: column; 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-home .hm-card[hidden] { display: none; }
body.ca-home .hm-card:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); color: var(--ui-ink); }
body.ca-home .hm-card-img { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(150deg, var(--beige), color-mix(in srgb, var(--beige) 60%, var(--gold-pale))); }
body.ca-home .hm-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ca-home .hm-badge { position: absolute; left: .75rem; top: .75rem; padding: .3rem .65rem; border-radius: 999px; background: var(--ui-paper); color: var(--ui-ink); font-size: 13px; font-weight: 600; box-shadow: var(--ui-shadow); }
body.ca-home .hm-card-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.15rem; }
body.ca-home .hm-card h3 { font-weight: 600; font-size: 17px; line-height: 1.35; margin: 0 0 .4rem; }
body.ca-home .hm-card-meta { font-size: 14px; color: var(--ui-ink-2); margin: 0 0 .8rem; }
body.ca-home .hm-card-price { margin: auto 0 0; font-size: 15px; font-weight: 600; }

/* Ways in */
body.ca-home .hm-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
body.ca-home .hm-way { display: block; text-decoration: none; color: var(--ui-ink); background: var(--ui-paper); border-radius: var(--ui-radius); overflow: hidden; border: 1px solid var(--ui-line); transition: box-shadow var(--ca-transition); }
body.ca-home .hm-way:hover { box-shadow: var(--ui-shadow); color: var(--ui-ink); }
body.ca-home .hm-way img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
body.ca-home .hm-way div { padding: 1.1rem 1.2rem 1.3rem; }
body.ca-home .hm-way h3 { font-weight: 600; font-size: 19px; margin: 0 0 .4rem; }
body.ca-home .hm-way p { margin: 0; color: var(--ui-ink-2); font-size: 16px; }

/* Reviews */
body.ca-home .hm-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
body.ca-home .hm-quote { margin: 0; padding: 1.4rem; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); display: flex; flex-direction: column; gap: .75rem; }
body.ca-home .hm-quote blockquote { margin: 0; padding: 0; border: 0; font-style: normal; }
body.ca-home .hm-quote blockquote p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ui-ink); }
body.ca-home .hm-quote figcaption { margin-top: auto; font-size: 14px; color: var(--ui-ink-2); }
body.ca-home .hm-quote figcaption a { color: var(--ui-ink-2); }

/* Journal */
body.ca-home .hm-journal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
body.ca-home .hm-entry { display: block; padding: 1.4rem; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); text-decoration: none; color: var(--ui-ink); transition: box-shadow var(--ca-transition); }
body.ca-home .hm-entry:hover { box-shadow: var(--ui-shadow); color: var(--ui-ink); }
body.ca-home .hm-entry h3 { font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0 0 .5rem; }
body.ca-home .hm-entry p { margin: 0; font-size: 15px; color: var(--ui-ink-2); }

/* Contact band */
body.ca-home .hm-contact-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }

/* Wide screens: three-up, so 21 tours sit as seven even rows. auto-fill flips to four narrow cards (and an orphan
   row) the moment the column passes 1100px, which is where 1920 lands. */
@media (min-width: 1200px) {
    body.ca-home .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 960px) {
    body.ca-home .hm-ways, body.ca-home .hm-quotes, body.ca-home .hm-journal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    body.ca-home .hm-hero { padding-top: 4.5rem; }
    body.ca-home .hm-hero-inner { padding: 0 .75rem; }
    body.ca-home .hm-plate { padding: 1.25rem 1.1rem 1rem; }
    body.ca-home .hm-actions .hm-btn { flex: 1 1 100%; }
    /* Phones: the tour cards scroll sideways instead of stacking 21 deep */
    body.ca-home .hm-cards { display: flex; overflow-x: auto; 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-home .hm-cards::-webkit-scrollbar { display: none; }
    body.ca-home .hm-card { flex: 0 0 78%; scroll-snap-align: start; }
}
/* The theme styles blockquote and figcaption in serif caps; on this page they read as plain Jost */
body.ca-home .hm-quote blockquote, body.ca-home .hm-quote blockquote p, body.ca-home .hm-quote figcaption, body.ca-home .hm-quote figcaption a {
    font-family: 'Jost', sans-serif !important; font-weight: 400 !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; quotes: none; }
body.ca-home .hm-quote blockquote::before, body.ca-home .hm-quote blockquote::after { content: none !important; display: none !important; }
body.ca-home .hm-quote blockquote p { font-size: 16px !important; line-height: 1.6 !important; color: var(--ui-ink) !important; }
body.ca-home .hm-quote figcaption { font-size: 14px !important; color: var(--ui-ink-2) !important; }
body.ca-home .hm .hm-h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem) !important; line-height: 1.08 !important; }
/* Motion beyond a colour fade is cancelled for readers who ask for less (UI checklist 5) */
@media (prefers-reduced-motion: reduce) {
    body.ca-home .hm-card, body.ca-home .hm-way, body.ca-home .hm-entry, body.ca-home .hm-hero-video { transition: none; }
    body.ca-home .hm-card:hover, body.ca-home .hm-way:hover, body.ca-home .hm-entry:hover { transform: none; }
}

/* =============================================================================
   S2-0b phones (2026-10-08): the plate was covering most of the film at 360. On a phone it now carries the line,
   the lead and the one WhatsApp action only; the second action and the rating sit just under the hero (.hm-under).
   From 641px nothing changes: the plate carries all four, .hm-under is not shown.
   ============================================================================= */
body.ca-home .hm-under { display: none; }
@media (max-width: 640px) {
    body.ca-home .hm-on-plate { display: none !important; }
    body.ca-home .hm-hero { padding-bottom: 1rem; }
    body.ca-home .hm-plate { max-width: 34rem; padding: 1rem 1.05rem 1.05rem; --hm-plate-alpha: 80%; }
    body.ca-home .hm .hm-plate .hm-h1 { font-size: clamp(1.6rem, 1.05rem + 3.2vw, 1.95rem) !important; line-height: 1.1 !important; margin: 0 0 .5rem; }
    body.ca-home .hm-lead { font-size: 16px; line-height: 1.45; margin: 0 0 .85rem; }
    body.ca-home .hm-actions { margin: 0; }
    body.ca-home .hm-actions .hm-btn { min-height: 48px; }
    body.ca-home .hm-under { display: block; background: var(--ui-bg); padding: 1rem 0 .25rem; }
    body.ca-home .hm-under-in { display: grid; gap: .5rem; justify-items: center; }
    body.ca-home .hm-under .hm-btn { width: 100%; min-height: 48px; }
    body.ca-home .hm-under .hm-rating { min-height: 44px; font-size: 15px; }
    body.ca-home .hm-under + .hm-sec { padding-top: 2rem; }
}

/* S2-3 desktop: the header now takes the same 1200 frame and gutter as every page (ui.css, S2 close), so the home
   wrap stays at the shared 1200 and lines up with the logo like the other families. */