/* 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, #0f2e1c) 80%, transparent) 0%, color-mix(in srgb, var(--brand-deep, #0f2e1c) 62%, transparent) 55%, color-mix(in srgb, var(--brand-deep, #0f2e1c) 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: #061f36; }
.pv-map .leaflet-control-attribution a { color: var(--brand, #1d5a37); }
.pv-map .leaflet-popup-content { font-family: inherit; color: var(--ink, #16261b); }
.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, #16261b) 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; }


/* ---- 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, #7fb83a) 22%, #fff); --rb-2: color-mix(in srgb, var(--accent, #7fb83a) 50%, #fff); --rb-3: var(--accent, #7fb83a); --rb-4: color-mix(in srgb, var(--accent, #7fb83a) 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, #1d5a37) 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, #1d5a37) 10%, #fff); color: var(--ink); } .rb-v.v2 { background: color-mix(in srgb, var(--brand, #1d5a37) 30%, var(--paper-2)); color: var(--ink); } .rb-v.v3 { background: color-mix(in srgb, var(--brand, #1d5a37) 50%, #fff); color: #16261b; } .rb-v.v4 { background: var(--brand-deep, #1d5a37); color: #fff; }
.rb-vv { display: block; }
.rb-v { font-size: .78rem; letter-spacing: 0; padding: 0 .1rem; line-height: 1.15; }
.rb-v.v3 { color: #061a2e; }
.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)); }
  /* 7 cards: 4 + 3, never 3 + 3 + 1 */
  .pv-facts:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pv-facts:has(> :nth-child(7):last-child) > * { grid-column: span 3; }
  .pv-facts:has(> :nth-child(7):last-child) > :nth-child(n+5) { grid-column: span 4; }
  .pv-facts:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .pv-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .pv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .pv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pv-facts .num, .pv-facts .lbl { overflow-wrap: anywhere; }
}
@media (min-width: 560px) and (max-width: 899px) {
  /* odd count in two columns: the last card spans the row instead of standing alone */
  .pv-facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* 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);
  }
}
@media (min-width: 720px) { .pv-home .ex-more { display: none; } }
/* phone: the compare list shows the first 8 (data-fold marks the rest), no frame around the stacked cards */
@media (max-width: 719px) {
  .pv-home .tour-explorer:not(.ex-all) tbody tr[data-fold] { display: none; }
  .pv-home .tour-explorer .table-wrap { border: 0; background: transparent; border-radius: 0; }
}

.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"; }

/* ---- fix lane V r2 2026-10-22 ---- */
/* six picks are two rows of three, never 4 + 2 */
@media (min-width: 1000px) { .pk-top:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* hero booking button stays on one line */
.pv-hero .booking-panel .btn { white-space: nowrap; padding-inline: 1rem; font-size: clamp(.92rem, .85rem + .3vw, 1.05rem); }

/* round 4: the compare-list "Show all N tours" button wears the same pill as the other show-more controls */
.pv-home .ex-more:not([hidden]) { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; margin-top: var(--s3); border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; width: fit-content; }
.pv-home .ex-more::after { content: "+"; color: var(--accent); font-weight: 800; }
.pv-home .ex-more[aria-expanded="true"]::after { content: "\2212"; }

/* ---- datafix 2026-10-24: adjacent home bands must read as two surfaces (rule 37) ---- */
.pv-sec.pv-alt { border-block: 1px solid var(--line); box-shadow: inset 0 4px 0 color-mix(in srgb, var(--brand) 30%, transparent); }
.pv-sec:not(.pv-alt):not(.pv-dark) + .pv-sec:not(.pv-alt):not(.pv-dark) { border-top: 1px solid var(--line); }
.site-cmp-table thead th { white-space: normal; min-width: 7rem; }
@media (max-width: 480px) {
  /* month calendar: narrower label column and month cells so 4+ months show at 390 */
  .rb { --rb-lab: 5.25rem; --rb-col: 2.5rem; }
  .rb-lab { font-size: .75rem; padding-inline: .35rem; }
}