/* home.css -- the shared homepage template's OWN stylesheet (build/launch-v2/home). Loaded after styles.css, which
   supplies only the tokens (:root), the nav, footer, sticky bar, buttons and the embedded
   booking panel / explorer / hotel cards. Everything page-specific lives here, all scoped to
   body.pv-home. Palette tokens only; no new colours except the two dark-band tints. */
.pv-home h2 { margin: 0 0 var(--s3); font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.1; border: 0; padding: 0; }
.pv-home h3 { margin: 0; }
.pv-home .pv-h2-2 { margin-top: var(--s6); }
.pv-home .pv-intro { margin: 0 0 var(--s4); color: var(--ink-soft); max-width: 62ch; }
.pv-sec { padding-block: clamp(2.5rem, 5vw, 4.25rem); background: var(--paper); }
.pv-sec + .pv-sec { padding-top: clamp(2.5rem, 5vw, 4.25rem); }
.pv-sec.pv-alt { background: var(--paper-2); }
.pv-sec.pv-dark { background: var(--brand-deep); color: #fff; }
.pv-sec.pv-dark h2 { color: #fff; }
.pv-sec.pv-dark .pv-intro { color: color-mix(in srgb, #fff 82%, transparent); }

/* ---- hero ---- */
.pv-hero { position: relative; overflow: hidden; background: var(--brand-deep); color: #fff; padding-block: clamp(2rem, 5vw, 4rem); isolation: isolate; }
.pv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-deep, #08343b) 80%, transparent) 0%, color-mix(in srgb, var(--brand-deep, #08343b) 62%, transparent) 55%, color-mix(in srgb, var(--brand-deep, #08343b) 34%, transparent) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .pv-hero-img { animation: pv-drift 32s ease-in-out infinite alternate; transform-origin: 60% 50%; }
  @keyframes pv-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
}
.pv-hero-grid { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .pv-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 26rem); } }
.pv-hero h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); margin: 0 0 var(--s3); }
.pv-lede { color: color-mix(in srgb, #fff 90%, transparent); font-size: var(--step-0); max-width: 52ch; margin: 0 0 var(--s4); }
.pv-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.pv-pills li { display: flex; flex-direction: column; gap: .15rem; padding: .7rem 1rem; border: 1px solid color-mix(in srgb, #fff 40%, transparent); border-radius: var(--radius); background: color-mix(in srgb, #fff 10%, transparent); flex: 1 1 9.5rem; max-width: 15rem; }
.pv-pills strong { font-family: var(--display); font-size: var(--step-1); line-height: 1.1; color: #fff; }
.pv-pills span { font-size: var(--step--2); line-height: 1.3; color: #fff; }
.pv-hero .booking-panel { margin: 0; color: var(--ink); }

/* ---- numbers ---- */
.pv-facts { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .pv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pv-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-facts > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); }
.pv-facts .num { font-family: var(--display); font-weight: 800; font-size: var(--step-1); color: var(--gold); line-height: 1.15; }
.pv-facts .lbl { font-size: var(--step--1); color: var(--ink-soft); margin-top: .3rem; line-height: 1.4; }

/* ---- tabs ---- */
.pv-tablist { display: none; gap: .5rem; flex-wrap: wrap; margin: 0 0 var(--s4); }
.js .pv-tablist { display: flex; }
.pv-tab { font: inherit; font-size: var(--step--1); font-weight: 700; padding: .6rem 1.1rem; min-height: 44px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.pv-tab[aria-selected="true"] { background: var(--brand-fixed, var(--ink)); border-color: var(--brand-fixed, var(--ink)); color: #fff; }
.pv-tab .pv-n, .pv-chip .pv-n { font-weight: 600; opacity: .85; margin-left: .25rem; }
.pv-panel-h { font-size: var(--step-1); margin: var(--s4) 0 var(--s2) !important; }
.js .pv-panel-h { display: none; }
.js .pv-panel[hidden] { display: none; }
.pv-trips { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .pv-trips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pv-trips { grid-template-columns: repeat(var(--cols, 4), minmax(0, 20rem)); } }
.pv-trip { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pv-trip-img { aspect-ratio: 4 / 3; background: var(--paper-2); }
.pv-trip-img img { width: 100%; height: 100%; object-fit: cover; }
.pv-trip-body { display: flex; flex-direction: column; gap: .45rem; padding: var(--s3); flex: 1; }
.pv-trip h3 { font-size: var(--step-0); line-height: 1.25; }
.pv-trip-link { color: var(--ink); text-decoration: none; }
.pv-trip-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pv-trip-link:hover { text-decoration: underline; }
.pv-trip-link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }
.pv-trip-line { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; }
.pv-trip-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem; margin: 0; font-size: var(--step--1); }
.pv-price { font-weight: 800; }
.pv-rev { color: var(--ink-soft); }
.pv-cta { position: relative; z-index: 2; margin-top: auto; align-self: flex-start; }
.pv-all { margin: var(--s3) 0 0; font-weight: 700; }

/* ---- picker ---- */
.pk-qs { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .pk-qs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pk-q { border: 0; padding: 0; margin: 0; min-width: 0; }
.pk-q legend { font-weight: 800; font-size: var(--step--1); padding: 0; margin-bottom: .5rem; color: var(--ink); }
.pk-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.pk-opt { font: inherit; font-size: var(--step--1); min-height: 44px; padding: .5rem .95rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.pk-opt.is-on { background: var(--brand-fixed, var(--ink)); border-color: var(--brand-fixed, var(--ink)); color: #fff; }
.pk-controls { margin: var(--s3) 0 0; }
.pk-summary { margin: var(--s2) 0 var(--s3); color: var(--ink-soft); min-height: 1.6em; }
.pk-top, .pk-rest { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pk-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pk-top { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Opus r2: 4 revealed picks = one row, never 3 + 1 orphan */
.pk-item { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pk-img { aspect-ratio: 16 / 9; background: var(--paper-2); }
.pk-img img { width: 100%; height: 100%; object-fit: cover; }
.pk-body { padding: var(--s3); display: flex; flex-direction: column; gap: .3rem; }
.pk-item h3 { font-size: var(--step-0); line-height: 1.25; }
.pk-link { color: var(--ink); text-decoration: none; }
.pk-link::after { content: ""; position: absolute; inset: 0; }
.pk-price a { color: var(--ink); text-decoration: none; }
.pk-link:hover { text-decoration: underline; }
.pk-facts, .pk-price { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.pk-price strong { color: var(--ink); }
.pk-more { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s3); }
.pk-more > summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; color: var(--ink); }
.pk-more[open] > summary { margin-bottom: var(--s3); }
@media (min-width: 760px) { .pk-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pk-rest .pk-item { flex-direction: row; align-items: stretch; }
.pk-rest .pk-img { aspect-ratio: auto; width: 6.5rem; flex: 0 0 6.5rem; }
.pk-rest .pk-body { padding: .7rem .9rem; }

/* ---- table blocks (existing explorer / comparison markup, restyled as one clean surface) ---- */
.pv-home .tour-explorer .table-wrap, .pv-home .table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-x: auto; }

/* ---- map ---- */
.pv-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s3); }
.pv-chip { font: inherit; font-size: var(--step--1); font-weight: 700; min-height: 44px; padding: .55rem 1.05rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.pv-chip.is-on { background: var(--brand-fixed, var(--ink)); border-color: var(--brand-fixed, var(--ink)); color: #fff; }
.pv-map { position: relative; height: 30rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px) 0 0 / 48px 48px, var(--paper-2); z-index: 0; }
@media (max-width: 600px) { .pv-map { height: 24rem; } }
.pv-map-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 1rem; text-align: center; color: var(--ink); font-weight: 600; max-width: none; width: 100%; box-sizing: border-box; }
.pv-map.is-live .pv-map-hint { display: none; }
.pv-credit { margin: .5rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.pv-credit a { color: var(--brand); }
.pv-map .leaflet-control-attribution { font-size: 11px; color: #173d44; }
.pv-map .leaflet-control-attribution a { color: var(--brand, #0b5d68); }
.pv-map .leaflet-popup-content { font-family: inherit; color: var(--ink, #0e2a30); }
.pv-pin { background: none; border: 0; }
.pv-pin span, .pv-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 13px; line-height: 1; }
.pv-pin span { border: 2px solid #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--ink, #0e2a30) 40%, transparent); }
.pv-num { width: 28px; height: 28px; background: var(--c, var(--brand)); flex: 0 0 28px; }
.pv-num-off { background: transparent; border: 2px dashed var(--line); }
.pv-tls { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 760px) { .pv-tls { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.pv-tl[hidden] { display: none; }
.pv-tl h3 { font-size: var(--step-0); margin-bottom: .4rem; }
.pv-tl ul { list-style: none; margin: 0; padding: 0; }
.pv-tl li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: var(--step--1); }
.pv-tl li span { color: var(--ink-soft); white-space: nowrap; }
.pv-places { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: .3rem var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pv-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pv-places { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-places li { display: grid; grid-template-columns: 28px 1fr; column-gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.pv-places li.is-off { opacity: .45; }
.pv-num { grid-row: span 2; }
.pv-pname { font-weight: 700; line-height: 1.3; }
.pv-pline { font-size: var(--step--2); color: var(--ink-soft); line-height: 1.4; }

/* ---- proof strip ---- */
.pv-proof { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .pv-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pv-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pv-quote { margin: 0; padding-left: var(--s3); border-left: 3px solid var(--accent); }
.pv-quote blockquote { margin: 0 0 .6rem; font-size: var(--step-0); line-height: 1.5; color: #fff; }
.pv-quote figcaption { font-size: var(--step--1); color: color-mix(in srgb, #fff 82%, transparent); }

/* ---- stay, FAQ, articles ---- */
.pv-home .hotel-grid { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .pv-home .hotel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-faq details { border-top: 1px solid var(--line); padding: .2rem 0; }
.pv-faq details:last-child { border-bottom: 1px solid var(--line); }
.pv-faq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 800; font-size: var(--step-0); color: var(--ink); }
.pv-faq p { margin: 0 0 var(--s3); color: var(--ink-soft); }
.pv-articles { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .pv-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-ag h3 { font-size: var(--step-0); margin-bottom: .5rem; }
.pv-ag ul { list-style: none; margin: 0; padding: 0; }
.pv-ag li { padding: .4rem 0; border-top: 1px solid var(--line); font-size: var(--step--1); line-height: 1.35; }
.pv-ag a { text-decoration: none; color: var(--brand); }
.pv-ag a:hover { text-decoration: underline; }
.pv-alt .pv-ag a { color: var(--accent-text, var(--ink)); }

.pv-home .ex-chip.is-on { background: var(--brand-fixed, var(--ink)); border-color: var(--brand-fixed, var(--ink)); color: #fff; }
@media (max-width: 639px) {
  .pk-top .pk-item { flex-direction: row; align-items: stretch; }
  .pk-top .pk-img { aspect-ratio: auto; width: 6.5rem; flex: 0 0 6.5rem; }
  .pk-top .pk-body { padding: .7rem .9rem; }
}

/* month + site comparison: wide tables scroll sideways inside their own frame with a pinned first column */
.pv-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.pv-table th, .pv-table td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pv-table thead th { background: var(--paper-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); white-space: nowrap; border-bottom: 2px solid var(--line); }
.pv-table tbody th { font-weight: 700; color: var(--ink); background: var(--surface); white-space: nowrap; position: sticky; left: 0; box-shadow: 1px 0 0 var(--line); }
.pv-table .site-cmp-table tbody th, .site-cmp-table tbody th { white-space: normal; min-width: 9rem; }
.pv-table td.num, .pv-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pv-table tbody tr:last-child > * { border-bottom: 0; }
.pv-home .table-scroll > table { min-width: 680px; }

/* comparison table on a phone: each tour becomes a compact row (name, length and meeting point, price, rating, button)
   instead of a sideways scroll that hides the price and the button */
@media (max-width: 719px) {
  .pv-home .tour-explorer .table-wrap { overflow: visible; border: 0; background: transparent; }
  .pv-home .tour-explorer .ex-table { min-width: 0; display: block; }
  .pv-home .tour-explorer .ex-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pv-home .tour-explorer .ex-table tbody { display: block; }
  .pv-home .tour-explorer .ex-table tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem; padding: .85rem .9rem; margin-bottom: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .pv-home .tour-explorer .ex-table tbody tr[hidden] { display: none; }
  .pv-home .tour-explorer .ex-table tbody th { display: block; flex: 1 0 100%; max-width: none; padding: 0; border: 0; }
  .pv-home .tour-explorer .ex-table tbody td { display: block; padding: 0; border: 0; }
  .pv-home .tour-explorer .ex-table tbody td:last-child { flex: 1 0 100%; margin-top: .5rem; }
}

/* ---- season ribbon (build/home-ribbon.mjs documents the likelihood mapping) ----------------
   Animal rows are text-free: 4 steps of the brand copper (s1 lightest .. s4 darkest) over the page
   ground, each distinguishable in the legend. Text only sits on the visibility track, where every
   step pairs its own ink colour (AA checked: v1/v2 ink on pale, v3 near-black on mid, v4 white on deep). */
.rb { --rb-1: color-mix(in srgb, var(--accent, #c8325a) 22%, #fff); --rb-2: color-mix(in srgb, var(--accent, #c8325a) 50%, #fff); --rb-3: var(--accent, #c8325a); --rb-4: color-mix(in srgb, var(--accent, #c8325a) 55%, #000); --rb-now: var(--brand-deep); --rb-col: 2.9rem; --rb-lab: 9.5rem; }
.rb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .5rem; overscroll-behavior-x: contain; }
.rb-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rb-grid { display: grid; gap: 4px; min-width: calc(var(--rb-lab) + 12 * (var(--rb-col) + 4px)); }
.rb-row { display: grid; grid-template-columns: var(--rb-lab) repeat(12, minmax(var(--rb-col), 1fr)); gap: 4px; align-items: stretch; }
.rb-lab { position: sticky; left: 0; z-index: 2; background: var(--surface); display: flex; align-items: center; font-size: var(--step--1); font-weight: 700; color: var(--ink); padding-right: .4rem; line-height: 1.2; }
.rb-m { font: inherit; font-size: var(--step--1); font-weight: 800; min-height: 44px; min-width: 40px; border: 2px solid transparent; border-radius: 8px; background: var(--paper-2); color: var(--ink); cursor: pointer; padding: 0; }
.rb-m:hover { border-color: var(--line); }
.rb-m:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.rb[data-sel="1"] .rb-m[data-m="1"], .rb[data-sel="2"] .rb-m[data-m="2"], .rb[data-sel="3"] .rb-m[data-m="3"], .rb[data-sel="4"] .rb-m[data-m="4"],
.rb[data-sel="5"] .rb-m[data-m="5"], .rb[data-sel="6"] .rb-m[data-m="6"], .rb[data-sel="7"] .rb-m[data-m="7"], .rb[data-sel="8"] .rb-m[data-m="8"],
.rb[data-sel="9"] .rb-m[data-m="9"], .rb[data-sel="10"] .rb-m[data-m="10"], .rb[data-sel="11"] .rb-m[data-m="11"], .rb[data-sel="12"] .rb-m[data-m="12"] { background: var(--ink); color: #fff; }
.rb-c { min-height: 34px; border-radius: 6px; background: transparent; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rb-c.rb-none { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--paper-2) 5px 6px); border: 1px dashed var(--line); }
.rb-c.s1 { background: var(--rb-1); } .rb-c.s2 { background: var(--rb-2); } .rb-c.s3 { background: var(--rb-3); } .rb-c.s4 { background: var(--rb-4); }
/* current-month column: a ring on every cell of that month (attribute driven; script only rewrites data-now) */
.rb[data-now="1"] .rb-c[data-m="1"], .rb[data-now="2"] .rb-c[data-m="2"], .rb[data-now="3"] .rb-c[data-m="3"], .rb[data-now="4"] .rb-c[data-m="4"],
.rb[data-now="5"] .rb-c[data-m="5"], .rb[data-now="6"] .rb-c[data-m="6"], .rb[data-now="7"] .rb-c[data-m="7"], .rb[data-now="8"] .rb-c[data-m="8"],
.rb[data-now="9"] .rb-c[data-m="9"], .rb[data-now="10"] .rb-c[data-m="10"], .rb[data-now="11"] .rb-c[data-m="11"], .rb[data-now="12"] .rb-c[data-m="12"] { box-shadow: 0 0 0 2px var(--rb-now); }
.rb[data-now="1"] .rb-m[data-m="1"], .rb[data-now="2"] .rb-m[data-m="2"], .rb[data-now="3"] .rb-m[data-m="3"], .rb[data-now="4"] .rb-m[data-m="4"],
.rb[data-now="5"] .rb-m[data-m="5"], .rb[data-now="6"] .rb-m[data-m="6"], .rb[data-now="7"] .rb-m[data-m="7"], .rb[data-now="8"] .rb-m[data-m="8"],
.rb[data-now="9"] .rb-m[data-m="9"], .rb[data-now="10"] .rb-m[data-m="10"], .rb[data-now="11"] .rb-m[data-m="11"], .rb[data-now="12"] .rb-m[data-m="12"] { border-color: var(--accent-deep); }
.rb-track .rb-c { min-height: 52px; }
.rb-t { align-items: flex-end; justify-content: center; background: var(--paper-2); overflow: hidden; }
.rb-t::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 50%); background: color-mix(in srgb, var(--brand, #0b5d68) 30%, var(--paper-2)); }
.rb-tv { position: relative; font-size: .78rem; font-weight: 800; color: var(--ink); padding-bottom: .15rem; }
.rb-v { font-size: .72rem; font-weight: 800; line-height: 1.1; text-align: center; padding: 0 .1rem; }
.rb-v.v1 { background: color-mix(in srgb, var(--brand, #0b5d68) 10%, #fff); color: var(--ink); } .rb-v.v2 { background: color-mix(in srgb, var(--brand, #0b5d68) 30%, var(--paper-2)); color: var(--ink); } .rb-v.v3 { background: color-mix(in srgb, var(--brand, #0b5d68) 50%, #fff); color: #0e2a30; } .rb-v.v4 { background: var(--brand-deep, #0b5d68); color: #fff; }
.rb-vv { display: block; }
.rb-v { font-size: .66rem; letter-spacing: -.01em; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rb-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: var(--s2) 0 0; padding: 0; font-size: var(--step--1); color: var(--ink-soft); }
.rb-legend li { display: flex; align-items: center; gap: .4rem; }
.rb-sw { width: 1.1rem; height: .9rem; border-radius: 3px; display: inline-block; }
.rb-sw.s1 { background: var(--rb-1); } .rb-sw.s2 { background: var(--rb-2); } .rb-sw.s3 { background: var(--rb-3); } .rb-sw.s4 { background: var(--rb-4); }
.rb-sw-none { border: 1px dashed var(--ink-soft); } .rb-sw-now { box-shadow: 0 0 0 2px var(--rb-now); background: var(--surface); }
.rb-details { margin-top: var(--s3); }
.rb-detail { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent-deep); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .5rem; }
.rb-detail p { margin: 0 0 .3rem; font-size: var(--step--1); color: var(--ink); }
.rb-d-h { font-size: var(--step-0); margin: 0 0 .25rem; }
.rb-d-site { display: block; }
.rb-d-extra { color: var(--ink-soft); }
.js .rb-detail { display: none; }
.js .rb[data-sel="1"] .rb-detail[data-m="1"], .js .rb[data-sel="2"] .rb-detail[data-m="2"], .js .rb[data-sel="3"] .rb-detail[data-m="3"], .js .rb[data-sel="4"] .rb-detail[data-m="4"],
.js .rb[data-sel="5"] .rb-detail[data-m="5"], .js .rb[data-sel="6"] .rb-detail[data-m="6"], .js .rb[data-sel="7"] .rb-detail[data-m="7"], .js .rb[data-sel="8"] .rb-detail[data-m="8"],
.js .rb[data-sel="9"] .rb-detail[data-m="9"], .js .rb[data-sel="10"] .rb-detail[data-m="10"], .js .rb[data-sel="11"] .rb-detail[data-m="11"], .js .rb[data-sel="12"] .rb-detail[data-m="12"] { display: block; }
.rb-full { margin-top: var(--s3); }
.rb-full > summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; color: var(--ink); }
.rb-full[open] > summary { margin-bottom: var(--s2); }
/* scroll-in animation (reduced-motion safe) */
@media (prefers-reduced-motion: no-preference) {
  /* design fix r1 (2026-10-20): cells are NOT hidden until the IntersectionObserver fires any more;
     a missed observer (headless capture, fast scroll, print) left the Best Months heatmap with only
     its hatched "not named" cells visible, which read as "not offered". Data always shows. */
  .rb-c.s1, .rb-c.s2, .rb-c.s3, .rb-c.s4, .rb-v { transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 40ms); transform-origin: left center; }
  .rb-t::before { transition: transform .6s ease; transition-delay: calc(var(--i, 0) * 40ms); transform-origin: bottom; }
}
/* ---- trend chart ---- */
.sc { margin-top: var(--s5); }
.sc-h { font-size: var(--step-1); margin: 0 0 var(--s2) !important; }
.sc-grid { display: grid; gap: .5rem; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.sc-row { display: grid; grid-template-columns: 9.5rem repeat(var(--cols, 6), minmax(3.4rem, 1fr)); gap: .4rem; align-items: center; min-width: calc(9.5rem + var(--cols, 6) * 3.8rem); }
.sc-lab { font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.2; }
.sc-mh { display: flex; flex-direction: column; font-size: var(--step--1); color: var(--ink); line-height: 1.2; }
.sc-n { font-size: .72rem; color: var(--ink-soft); }
.sc-c { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 2rem; }
.sc-bar { display: block; height: .7rem; border-radius: 3px; background: var(--paper-2); position: relative; overflow: hidden; }
.sc-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%); background: var(--accent-deep); border-radius: 3px; }
.sc-v { font-size: .75rem; font-weight: 700; color: var(--ink); }
.sc-note { margin: var(--s2) 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.sc-note a { color: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .js .sc:not(.is-in) .sc-bar::after { transform: scaleX(0); }
  .sc-bar::after { transform-origin: left; transition: transform .7s ease; transition-delay: calc(var(--i, 0) * 60ms); }
}
.pv-home .fresh-season { margin: var(--s5) 0 0; padding: 0; background: transparent; border-radius: 0; }
.pv-home .fresh-season .fresh-title { font-size: var(--step-1); margin-bottom: var(--s2); }
.pv-home .fresh-season .fresh-head { margin-bottom: var(--s2); }
.fresh-season .fresh-tiles { align-items: stretch; }
.fresh-season .fresh-tile { height: 100%; }
.fresh-season .fresh-src, .fresh .fresh-src { margin-top: auto; padding-top: .35rem; font-size: 13px; font-weight: 700; color: var(--brand); display: inline-block; min-height: 24px; }

/* ---- OPT-IN blocks (home-extras.mjs): partner lead card, legs chart, elevation profile ---- */
.pv-lead { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); overflow: hidden; margin: 0 0 var(--s5); }
@media (min-width: 820px) { .pv-lead { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.pv-lead-img { background: var(--paper-2); min-height: 12rem; }
.pv-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-lead-body { padding: var(--s4); display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.pv-lead-body h3 { font-size: var(--step-2, 1.6rem); line-height: 1.15; }
.pv-lead-line { margin: 0; font-size: var(--step-0); color: var(--ink); }
.pv-lead-proof { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.pv-lead-facts { margin: 0; padding-left: 1.15rem; display: grid; gap: .4rem; font-size: var(--step--1); color: var(--ink); }
.pv-lead-caveat { margin: 0; font-size: var(--step--1); color: var(--ink-soft); border-left: 3px solid var(--line); padding-left: .8rem; }
.pv-lead .btn { margin-top: .3rem; }

.lg { margin-top: var(--s4); }
.pv-h2-2 + .lg, .lg:first-child { margin-top: var(--s3); }
.lg-h { font-size: var(--step-1); margin: 0 0 var(--s2) !important; }
.lg-key { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 var(--s2); padding: 0; font-size: var(--step--1); color: var(--ink-soft); }
.lg-key li { display: flex; align-items: center; gap: .4rem; }
.lg-sw { width: 1.1rem; height: .7rem; border-radius: 3px; display: inline-block; }
.lg-sw.s1, .lg-track.s1 .lg-bar { background: var(--brand); }
.lg-sw.s2, .lg-track.s2 .lg-bar { background: var(--accent); }
.lg-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .75rem .9rem; border-top: 1px solid var(--line); }
.lg-row:first-child { border-top: 0; }
@media (min-width: 760px) { .lg-row { grid-template-columns: 13rem minmax(0, 1fr); align-items: center; gap: 1rem; } }
.lg-lab { display: flex; flex-direction: column; font-size: var(--step--1); line-height: 1.25; color: var(--ink); }
.lg-lab span { color: var(--ink-soft); font-size: var(--step--2); }
.lg-tracks { display: grid; gap: .3rem; }
.lg-line { display: grid; grid-template-columns: minmax(0, 1fr) 8.6rem; gap: .6rem; align-items: center; }
@media (min-width: 760px) { .lg-line { grid-template-columns: minmax(0, 1fr) 11.5rem; } }
.lg-track { position: relative; height: 1.1rem; background: var(--paper-2); border-radius: 6px; overflow: hidden; }
.lg-bar { position: absolute; top: 0; bottom: 0; left: var(--l, 0%); width: var(--w, 10%); border-radius: 6px; min-width: 6px; }
.lg-v { font-size: .78rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.lg-axis { display: flex; justify-content: space-between; font-size: var(--step--2); color: var(--ink-soft); padding: .25rem .2rem 0; }
.lg-note { margin: var(--s2) 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.lg-full { margin-top: var(--s3); }
.lg-full > summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; color: var(--ink); }
.lg-full[open] > summary { margin-bottom: var(--s2); }

.ep { margin-top: var(--s5); }
.ep-h { font-size: var(--step-1); margin: 0 0 var(--s2) !important; }
.ep-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .8rem .8rem .6rem; }
.ep-scroll:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.ep-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(5.2rem, 1fr)); gap: .5rem; min-width: calc(var(--n, 7) * 5.7rem); align-items: end; }
.ep-s { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 14.5rem; text-align: center; gap: .25rem; }
.ep-v { font-size: .78rem; font-weight: 800; color: var(--ink); }
.ep-bar { display: block; width: 62%; height: calc(var(--h, 5) * .11rem); background: var(--c, var(--brand)); border-radius: 6px 6px 0 0; }
.ep-n { font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.2; }


/* ---- home visuals (2026-10-03): photos inside text blocks. Wroclaw patterns: mosaic-grid, mood-card, stay-card, guide-card2 ---- */
.hv-mosaic, .hv-strip { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; margin: 0 0 var(--s4); }
.hv-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 170px; }
.hv-ph, .hv-season, .hv-faq-img { margin: 0; overflow: hidden; border-radius: var(--radius); }
.hv-ph img, .hv-faq-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 761px) {
  .hv-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; }
}
@media (max-width: 560px) { .hv-strip { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 180px; } }
.hv-seasons { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s4); }
@media (min-width: 761px) { .hv-seasons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hv-season { background: var(--surface); border: 1px solid var(--line); }
.hv-season img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hv-season figcaption { padding: .5rem .75rem; font-weight: 800; font-size: var(--step--1); color: var(--ink); }
.hv-faq { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
.hv-faq-img { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .hv-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; }
  .hv-faq .pv-faq { grid-column: 1; grid-row: 1; }
  .hv-faq-img { grid-column: 2; grid-row: 1; aspect-ratio: 3 / 4; position: sticky; top: 90px; }
}
.pv-ag .hv-gl { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
.pv-ag li.hv-gc { padding: 0; border-top: 0; }
.pv-ag .hv-gc a { display: flex; align-items: center; gap: .75rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; min-height: 44px; }
.pv-ag .hv-gc img { flex: 0 0 auto; width: 88px; height: 64px; object-fit: cover; border-radius: calc(var(--radius) / 1.5); display: block; }
.pv-ag .hv-gc span { min-width: 0; font-weight: 700; line-height: 1.3; }
.pv-ag .hv-gc a:hover span { text-decoration: underline; }
@media (min-width: 761px) { .pv-articles:has(.hv-gl) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .pv-ag .hv-gl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hv-hc-img { margin: 0 0 .7rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--radius) / 1.5); }
.hv-hc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rb-d-lead { margin: 0 0 .3rem; font-size: var(--step--1); color: var(--ink); opacity: .8; }
.rb-c.s3 .rb-tv, .rb-c.s4 .rb-tv { color: #fff; }

/* last homepage band: no extra paper strip between the final list and the footer */
main > .pv-sec:last-child { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.pv-articles { align-items: start; }


/* ---- design-fix round 2 (2026-10-21) ---- */
/* photo mosaic and trip cards: columns follow the card count so no quarter of the row is empty */
.hv-mosaic > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .hv-mosaic > :last-child:nth-child(odd) { grid-column: auto; }
  .hv-mosaic:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hv-mosaic:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .pv-trips { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .pv-trips[style*="--cols:5"], .pv-trips[style*="--cols: 5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pv-trips[style*="--cols:5"] > *, .pv-trips[style*="--cols: 5"] > * { grid-column: span 2; }
  .pv-trips[style*="--cols:5"] > :nth-child(n+4), .pv-trips[style*="--cols: 5"] > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 900px) {
  .pv-facts:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pv-facts:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .pv-facts:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
  .pv-facts:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* guides and answers: full-width stack, guides in columns, answers in two columns (no empty right column) */
@media (min-width: 761px) {
  .pv-articles:has(.hv-gl) { grid-template-columns: minmax(0, 1fr); }
  .pv-ag .hv-gl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-articles .pv-ag:not(:has(.hv-gl)) > ul { columns: 2; column-gap: var(--s5); }
  .pv-articles .pv-ag:not(:has(.hv-gl)) > ul > li { break-inside: avoid; }
}
@media (min-width: 1100px) { .pv-ag .hv-gl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* map: never an empty box; the hint is centred and the offline state says so */
.pv-map.is-offline .pv-map-hint, .pv-map.tiles-failed:not(.is-live) .pv-map-hint { display: flex; }
/* month ribbon on a phone: visible scroll cue (edge shadows that follow the scroll position + a one-line hint) */
@media (max-width: 719px) {
  .rb::before { content: "Swipe sideways to see every month \2192"; display: block; margin: 0 0 .4rem; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
  .rb-scroll {
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left center / 28px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, transparent) right center / 28px 100% no-repeat local,
      linear-gradient(to right, rgba(0,0,0,.22), transparent) left center / 12px 100% no-repeat scroll,
      linear-gradient(to left, rgba(0,0,0,.22), transparent) right center / 12px 100% no-repeat scroll,
      var(--surface);
  }
}
/* comparison cards on a phone: dedicated rows (name / facts / price + rating / button), folded after 8 */
@media (max-width: 719px) {
  .pv-home .tour-explorer .ex-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .25rem .9rem; align-items: baseline; }
  .pv-home .tour-explorer .ex-table tbody th, .tour-explorer .ex-table tbody td:not(.ex-num):not(:last-child) { grid-column: 1 / -1; flex: none; }
  .pv-home .tour-explorer .ex-table tbody td:last-child { grid-column: 1 / -1; margin-top: .5rem; }
  .pv-home .tour-explorer .ex-table tbody td.ex-num { grid-column: auto; }
  .pv-home .tour-explorer .ex-table tbody td.ex-num + td.ex-num { text-align: right; }
  .pv-home .tour-explorer .ex-table tbody tr[data-fold] { display: none; }
  .pv-home .tour-explorer.ex-all .ex-table tbody tr[data-fold]:not([hidden]) { display: grid; }
  .pv-home .ex-more { display: block; width: 100%; margin: .2rem 0 0; min-height: 44px; font: inherit; font-weight: 700; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
}
@media (min-width: 720px) { .pv-home .ex-more { display: none; } }

.ex-more[hidden] { display: none !important; }

/* round 3: the Sail/Dinner/Party/Private compare block sits in its own full-bleed band, not in the month section's tan */
.pv-home .pv-subband { --pv-tint: color-mix(in srgb, var(--accent) 14%, var(--paper)); background: var(--pv-tint); box-shadow: 0 0 0 100vmax var(--pv-tint); clip-path: inset(0 -100vmax); margin-top: var(--s6); padding-block: clamp(2rem, 4vw, 3rem); margin-bottom: calc(-1 * clamp(2.5rem, 5vw, 4.25rem)); }
.pv-home .pv-subband .pv-h2-2 { margin-top: 0; }

/* ---- design fix round 2 (2026-10-22) ---- */
.pv-hero h1, .pv-hero .lede, .pv-hero p { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.pv-hero .booking-panel, .pv-hero .booking-panel * { text-shadow: none; }
/* month table: long visibility labels wrap inside their cell instead of clipping */
/* Opus r2: no mid-word splits ("Humpb / acks"): whole words only, and the month columns are wide enough to hold the longest word */
.rb { --rb-col: 4.8rem; }
.rb-v { overflow: hidden; overflow-wrap: normal; hyphens: manual; word-break: normal; }
.rb-vv { padding: .1rem .15rem; }
.rb-track .rb-c { min-height: 74px; }
/* the three fold controls read as controls, not bold body text */
.pk-more > summary, .rb-full > summary, .lg-full > summary { display: inline-flex; padding: 0 1.1rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); width: fit-content; gap: .5rem; }
.pk-more > summary::after, .rb-full > summary::after, .lg-full > summary::after { content: "+"; color: var(--accent); font-weight: 800; }
.pk-more[open] > summary::after, .rb-full[open] > summary::after, .lg-full[open] > summary::after { content: "\2212"; }
.pk-more > summary::-webkit-details-marker, .rb-full > summary::-webkit-details-marker, .lg-full > summary::-webkit-details-marker { display: none; }
.pk-more > summary:hover, .rb-full > summary:hover, .lg-full > summary:hover { background: var(--paper-2); }
/* homepage FAQ: the same + / minus affordance as /faq/ */
.pv-faq summary { justify-content: space-between; gap: 1rem; list-style: none; }
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--accent); font-weight: 800; }
.pv-faq details[open] summary::after { content: "\2212"; }
/* all-tours cards on a phone: price and rating share one row */
@media (max-width: 719px) {
  .pv-home .tour-explorer .ex-table tbody tr { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 1.1rem; }
  .pv-home .tour-explorer .ex-table tbody td.ex-num + td.ex-num { text-align: left; }
}