/* 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: #ffffff; }
.pv-sec.pv-dark h2 { color: #ffffff; }
.pv-sec.pv-dark .pv-intro { color: color-mix(in srgb, #ffffff 82%, transparent); }

/* ---- hero ---- */
.pv-hero { position: relative; overflow: hidden; background: var(--brand-deep); color: #ffffff; 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, #0a3f3a) 94%, transparent) 0%, color-mix(in srgb, var(--brand-deep, #0a3f3a) 84%, transparent) 55%, color-mix(in srgb, var(--brand-deep, #0a3f3a) 62%, 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: #ffffff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); margin: 0 0 var(--s3); }
.pv-lede { color: color-mix(in srgb, #ffffff 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, #ffffff 40%, transparent); border-radius: var(--radius); background: color-mix(in srgb, #ffffff 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: #ffffff; }
.pv-pills span { font-size: var(--step--2); line-height: 1.3; color: #ffffff; }
.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: #ffffff; }
.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, 1fr)); } .pv-trips[style*="--cols:1"], .pv-trips[style*="--cols:2"] { grid-template-columns: repeat(var(--cols), minmax(0, 28rem)); } }
.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: #ffffff; }
.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(3, minmax(0, 1fr)); } }
.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: #ffffff; }
.pv-map { position: relative; height: 30rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: 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); }
.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: #333333; }
.pv-map .leaflet-control-attribution a { color: var(--brand, #0f5e55); }
.pv-map .leaflet-popup-content { font-family: inherit; color: var(--ink, #10261f); }
.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: #ffffff; font-weight: 800; font-size: 13px; line-height: 1; }
.pv-pin span { border: 2px solid #ffffff; box-shadow: 0 1px 4px color-mix(in srgb, var(--ink, #10261f) 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(3, minmax(0, 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: #ffffff; }
.pv-quote figcaption { font-size: var(--step--1); color: color-mix(in srgb, #ffffff 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: #ffffff; }
@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, #e0674a) 22%, #ffffff); --rb-2: color-mix(in srgb, var(--accent, #e0674a) 50%, #ffffff); --rb-3: color-mix(in srgb, var(--accent, #e0674a) 72%, #ffffff); --rb-4: color-mix(in srgb, var(--accent, #e0674a) 45%, #000000); --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: #ffffff; }
.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, #0f5e55) 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, #0f5e55) 10%, #ffffff); color: var(--ink); } .rb-v.v2 { background: color-mix(in srgb, var(--brand, #0f5e55) 30%, var(--paper-2)); color: var(--ink); } .rb-v.v3 { background: color-mix(in srgb, var(--brand, #0f5e55) 52%, #ffffff); color: #10261f; } .rb-v.v4 { background: var(--brand-deep, #0f5e55); color: #ffffff; }
.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) {
  .js .rb:not(.is-in) .rb-c.s1, .js .rb:not(.is-in) .rb-c.s2, .js .rb:not(.is-in) .rb-c.s3, .js .rb:not(.is-in) .rb-c.s4, .js .rb:not(.is-in) .rb-v { opacity: 0; transform: scaleX(.4); }
  .js .rb:not(.is-in) .rb-t::before { transform: scaleY(0); }
  .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: stretch; }
  .hv-faq .pv-faq { grid-column: 1; grid-row: 1; }
  .hv-faq-img { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-height: 20rem; position: relative; }
  .hv-faq-img img { position: absolute; inset: 0; }
}
.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.s4 .rb-tv { color: #ffffff; }

/* 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; }

/* ---- Lane 1 fixes 2026-10-20 ---- */
/* numbers grid: an odd last row stretches its last card instead of leaving a hole */
@media (min-width: 900px) { .pv-facts > div:last-child:nth-child(3n + 2) { grid-column: span 2; } }
@media (min-width: 560px) and (max-width: 899px) { .pv-facts > div:last-child:nth-child(2n + 1) { grid-column: span 2; } }
/* hero booking CTA on one line */
.pv-hero .booking-panel .btn-xl { white-space: nowrap; font-size: var(--step-0); padding: 1rem 1.1rem; }
/* mobile comparison cards: no frame around the cards, rating sits with the other facts */
@media (max-width: 640px) {
  .pv-home .tour-explorer .table-wrap { border: 0; background: none; padding: 0; box-shadow: none; border-radius: 0; }
  .pv-home .tour-explorer .ex-table tbody td.ex-num { display: inline-flex; flex-direction: row; align-items: baseline; gap: .35rem; }
  .pv-home .tour-explorer .ex-table tbody td.ex-num .ex-sub { display: inline; margin: 0; }
}

/* phones: the stacked-card reset must beat the 680px floor above (equal-or-higher specificity, later in the cascade) */
@media (max-width: 640px) {
  .pv-home .table-scroll > table[data-stack] { min-width: 0; width: 100%; }
}


/* Opus design review round 2 (2026-10-21) */
/* number tiles: two per row on phones instead of twelve stacked cards */
@media (max-width:559px){
  .pv-facts { grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem; }
  .pv-facts > div { padding:.7rem; }
  .pv-facts .lbl { font-size:.78rem; }
}
/* picker: idle state shows only the three questions; the shortlist, hint and Start over appear once an answer is picked
   (the idle shortlist used to repeat the trip-type cards directly above) */
.pk[data-state="idle"] .pk-top, .pk[data-state="idle"] .pk-more, .pk[data-state="idle"] .pk-summary, .pk[data-state="idle"] .pk-controls { display:none; }
#option-comparison-sec .pv-h2-2 { margin-top: 0; }

/* month ribbon: word-track swatches inherit the cell colours; the fold summary reads as clickable */
.rb-legend .rb-sw.rb-v { font-size:0; }
.rb-full > summary { gap:.5rem; list-style:none; }
.rb-full > summary::-webkit-details-marker { display:none; }
.rb-full > summary::after { content:""; width:.55rem; height:.55rem; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; flex:0 0 auto; }
.rb-full[open] > summary::after { transform:rotate(-135deg) translateY(-2px); }

/* home 390: guide cards two-up and compact; an odd last stat card spans both columns */
@media (max-width: 560px) {
  .pv-facts > div:last-child:nth-child(2n + 1) { grid-column: span 2; }
  .pv-ag .hv-gl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .pv-ag .hv-gc a { flex-direction: column; align-items: stretch; gap: .35rem; padding: .35rem; height: 100%; }
  .pv-ag .hv-gc img { width: 100%; height: 72px; }
  .pv-ag .hv-gc span { font-size: .8rem; }
}
/* map tour lists: fill the row whatever the group count (two groups no longer leave a third column empty) */
@media (min-width: 760px) { .pv-tls { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

/* a month-table fold that closes the section: no second band of dead padding under the collapsed summary */
.pv-sec:has(> .wrap > .rb > details.rb-full:last-child) { padding-bottom: 2.25rem; }
/* season ribbon: edge fades only while there is more to scroll in that direction, plus a swipe cue (design-fix lane 2026-10-21) */
.rb-scroll.is-ovf-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); }
.rb-scroll.is-ovf-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%); }
.rb-scroll.is-ovf-l.is-ovf-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.rb.has-ovf::after { content: "Swipe sideways for all 12 months"; display: block; margin-top: .4rem; font-size: .78rem; color: var(--ink-soft); text-align: center; }