/* ============================================================
   Budapest River Cruises - Phase 3 Design System
   IDENTITY: "Danube Gilt" (Design Director, V3.1 blueprint, 2026-09-03; research/design-blueprint.json).
   Palette family: heritage-culture. Limestone-parchment ground, warm ink, a Danube-night indigo
   for links and the deep bands, verdigris green (the patinated copper of the city's domes and the
   river's own grey-green) for the one CTA, antique brass for real ratings and section marks, and
   a brighter gilt used only on the night bands (Parliament lit after dark).
   Homepage: chooser-first on a split hero (H1 beside a gilt-framed image, the decision panel over
   the image's lower edge) on a night band. Nav: the site's
   own cruise categories as the primary row, a slim utility row above. Cards: split-media
   (image beside copy). Type: serif display over a system sans body. Mobile-first, zero heavy deps.
   ============================================================ */
/* ---- COLOR TOKENS (light ground, night bands) ---- */
:root {
  /* ---- Palette "Danube Gilt" ---- */
  --ink:        #211D1B;   /* primary text: warm near-black */
  --ink-soft:   #5B534D;   /* secondary text (~6.5:1 on --paper) */
  --paper:      #F5F0E4;   /* page ground: limestone parchment */
  --paper-2:    #EBE3D1;   /* raised panels, table headers, mist band */
  --surface:    #FFFCF6;   /* cards */
  --surface-2:  #FAF6EC;   /* inputs, alternate surfaces */
  --line:       #D9CFBB;   /* hairline borders on light */
  --brand:      #2C3757;   /* Danube-night indigo: links (underlined), structural fills */
  --brand-deep: #1E2640;   /* deeper indigo: btn-brand hover */
  --accent:     #2F6B58;   /* verdigris green: the CTA (white text, 6.2:1) */
  --accent-deep:#24523F;
  --accent-ink: #FFFFFF;   /* text colour that sits on --accent */
  --sea:        #35705F;   /* verdigris mid: rules, hovers, icons on light */
  --sea-deep:   #28564A;
  --gold:       #B48A2C;   /* antique brass: real ratings, section marks, chips */
  --gold-soft:  #F0E3C2;   /* brass wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #5A4410;   /* text colour that sits on --gold-soft */
  --gilt:       #D9B75C;   /* bright gilt: text and rules on the night bands only (8.8:1 on --night) */
  --slate:      #6B6A62;   /* Danube stone grey: tertiary borders and tints */
  --night:      #151A2B;   /* the night band: hero, stat band, closing CTA */
  --footer:     #151A2B;   /* footer fill (same night indigo) */
  --ok:         #3E6E4C;
  --warn:       #9A5A1C;

  /* ---- TYPE: serif display (heritage, editorial) over a plain system sans body. System stacks,
     no webfont (protects LCP). Inverts the pipeline's recent sans-display sites. ---- */
  --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* modular scale */
  --step--1: clamp(.83rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2.1rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.8vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

  /* spacing scale */
  --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --maxw: 72rem;
  /* squared corners: a printed card, not a pill */
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 1px 0 rgba(33,29,27,.04);
  --shadow-lift: 0 8px 22px rgba(21,26,43,.10);
  --nav-h: 5.6rem; /* two-row header on desktop; anchors scroll under it */
}

/* ---- RESET-ISH ---- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
h1,h2 { font-family: var(--display); line-height: 1.08; letter-spacing: -.012em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h3 { font-family: var(--display); line-height: 1.2; letter-spacing: -.005em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); margin-top: var(--s6); }
h3 { font-size: var(--step-1); margin-top: var(--s4); }
p { margin: 0 0 var(--s3); max-width: 64ch; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
section[id], .cat-block[id], div[id] { scroll-margin-top: calc(var(--nav-h) + .5rem); }

/* ---- LAYOUT ---- */
.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, 50rem); margin-inline: auto; }
.section { padding-block: var(--s6); }
.section + .section { padding-top: 0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:.6rem 1rem; z-index:50; font-weight:700; }
.skip-link:focus { left:8px; top:8px; }

/* ---- CTA (squared) ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family: var(--body); font-weight:700; font-size: var(--step-0);
  padding: .85rem 1.4rem; border-radius: var(--radius); text-decoration:none; border:0; cursor:pointer;
  min-height: 48px; transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); color:var(--accent-ink); }
.btn-brand { background: var(--brand); color:#fff; }
.btn-brand:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border:1px solid var(--ink-soft); }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }

/* ---- HEADER / NAV (archetype: destination-category-nav) ----
   A slim utility row (Guides / Answers / FAQ / About) above a main row whose links ARE the
   site's own cruise categories, with the CTA separated at the far right. Under 960px the
   utility row hides and its items reappear inside the hamburger dropdown (li.nav-util-item),
   so the single #nav-links list that base.html's toggle script controls holds everything. ---- */
.site-header { position: sticky; top:0; z-index:40; background: rgba(245,240,228,.94); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.nav-util { display:flex; justify-content:flex-end; gap:1.3rem; padding:.28rem 0; border-bottom:1px solid var(--line); }
.nav-util a { color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.nav-util a:hover { color:var(--sea); }
.nav { display:flex; align-items:center; gap:1rem; padding-block:.6rem; }
.brand { font-family:var(--display); font-weight:700; font-size:var(--step-1); color:var(--ink); text-decoration:none; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; }
.brand-logo { width:34px; height:34px; border-radius:50%; display:block; }
.brand b { color: var(--sea); font-weight:700; }
@media (max-width: 344px) { .site-header .brand { font-size: .92rem; } }
.nav-links { display:flex; flex:1; gap:1.15rem; align-items:center; list-style:none; margin:0 0 0 .6rem; padding:0; }
.nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--step--1); padding:.35rem 0; border-bottom:2px solid transparent; }
.nav-links a:hover { color:var(--brand); border-bottom-color:var(--gold); }
.nav-links .nav-cta { margin-left:auto; }
.nav-links .nav-cta a, .nav-links a.btn-primary, .nav-links a.btn-brand { color:#fff; border-bottom:0; padding:.6rem 1.1rem; min-height:42px; font-size:var(--step--1); }
.nav-links .nav-util-item { display:none; }
.nav-toggle { display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); min-height:44px; min-width:44px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; padding:0; }
.nav-toggle svg { width:22px; height:22px; }
@media (max-width: 960px) {
  :root { --nav-h: 3.9rem; }
  .nav-util { display:none; }
  .nav-toggle { display:inline-flex; margin-left:auto; }
  .nav-links { position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch; background:var(--paper-2); border-bottom:1px solid var(--line); padding:.6rem 1rem 1rem; gap:0; margin:0; display:none; }
  .nav-links[data-open="true"] { display:flex; }
  .nav-links li a { display:block; padding:.75rem .2rem; border-bottom:1px solid var(--line); }
  .nav-links li a:hover { border-bottom-color:var(--gold); }
  .nav-links .nav-util-item { display:block; }
  .nav-links .nav-util-item a { color:var(--ink-soft); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
  .nav-links .nav-cta { margin:.9rem 0 0; }
  .nav-links .nav-cta a { display:flex; border:0; }
}

/* ---- BREADCRUMB ---- */
.crumbs { font-size: var(--step--1); color: var(--ink-soft); padding-block: var(--s3); }
.crumbs a { color: var(--ink-soft); }
.crumbs span[aria-current] { color: var(--ink); font-weight:600; }

/* ---- HERO: SPLIT MEDIA + CHOOSER PANEL ON A NIGHT BAND (archetype: hero-split-media-panel,
        homepage: chooser-first). Left: eyebrow, H1, lede, one real proof line. Right: the hero
        image as a gilt-framed postcard with the decision panel (two questions, answer chips that
        route to the category anchors, one primary CTA) overlapping its lower edge. Under 900px the
        order becomes copy, panel, image, so the H1 and the chooser hold the first screen. ---- */
.hero-split { background:var(--night); color:#fff; padding-block:var(--s6) var(--s5); border-bottom:3px double var(--gilt); }
.hero-split .hs-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"copy media" "copy panel"; column-gap:var(--s5); row-gap:0; align-items:start; }
.hero-split .hs-copy { grid-area:copy; align-self:center; }
.hero-split .hs-media { grid-area:media; }
.hero-split .chooser-panel { grid-area:panel; margin:-2.4rem 1.2rem 0; position:relative; z-index:1; }
.hero-split h1 { color:#fff; max-width:12ch; margin-bottom:var(--s3); }
.hero-split .eyebrow { color:var(--gilt); }
.hero-split .lede { color:rgba(255,255,255,.86); max-width:46ch; }
.hero-split .cta-proof { color:rgba(255,255,255,.8); margin-top:var(--s3); }
.hero-split .cta-proof .gold { color:var(--gilt); }
.hero-split .checked-date { color:rgba(255,255,255,.6); }
.hero-split .hs-media img { width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--gilt); padding:4px; background:var(--night); }
.chooser-panel { background:var(--paper); color:var(--ink); border:1px solid var(--gilt); outline:1px solid rgba(217,183,92,.4); outline-offset:4px; border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow-lift); }
.chooser-panel .ch-title { font-family:var(--display); font-size:var(--step-2); font-weight:700; line-height:1.1; margin:0 0 var(--s3); max-width:none; }
.chooser-panel .ch-q { margin:0 0 var(--s3); }
.chooser-panel .ch-label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; }
.ch-chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.ch-chips a { display:inline-flex; align-items:center; min-height:40px; padding:.45rem .85rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--brand); font-weight:600; font-size:var(--step--1); text-decoration:none; }
.ch-chips a:hover { border-color:var(--sea); color:var(--sea); background:var(--surface-2); }
.chooser-panel .ch-actions { margin:var(--s3) 0 0; display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; max-width:none; }
.chooser-panel .ch-featured { font-size:var(--step--1); color:var(--brand); font-weight:600; }
@media (max-width: 900px) {
  .hero-split { padding-block:var(--s5) var(--s4); }
  .hero-split .hs-grid { grid-template-columns:1fr; grid-template-areas:"copy" "panel" "media"; row-gap:var(--s4); }
  .hero-split h1 { max-width:none; }
  .hero-split .chooser-panel { margin:0; }
  .chooser-panel .ch-actions .btn { width:100%; }
  .hero-split .hs-media img { aspect-ratio:16/9; }
}

/* ---- HERO (generic, article and money pages) - asymmetric split ---- */
.hero { display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--s5); align-items:center; padding-top: var(--s5); }
.hero--flip { grid-template-columns: .9fr 1.1fr; }
.hero--flip .hero-media { order:-1; }
.eyebrow { font-family:var(--body); text-transform:uppercase; letter-spacing:.14em; font-size:var(--step--1); color:var(--gold); font-weight:700; margin-bottom:var(--s2); }
.hero h1 { margin-bottom: var(--s3); }
.hero .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-bottom:var(--s4); }
.hero .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.hero-media { aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.hero-media img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 820px){ .hero{ grid-template-columns:1fr; align-items:start; } .hero--flip .hero-media { order:0; } }

/* ---- QUICK ANSWER (answer-first, compiler-emitted on articles) ---- */
.quick-answer { background: var(--surface); border:1px solid var(--line); border-left:5px solid var(--gold); color: var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s5); }
.quick-answer p { color:var(--ink); font-size: var(--step-1); max-width: 60ch; margin:0; }
.quick-answer .qa-label { font-family:var(--body); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold-ink); margin-bottom:var(--s2); font-weight:700; }

/* ---- KEY FACTS TABLE ---- */
.keyfacts { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.keyfacts th, .keyfacts td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.keyfacts th { width:42%; font-family:var(--display); font-weight:700; color:var(--ink); background:var(--paper-2); }
.keyfacts tr:last-child th, .keyfacts tr:last-child td { border-bottom:0; }
@media (max-width:640px){
  .keyfacts { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .keyfacts th { min-width: 9rem; }
}

/* ---- PRODUCT CARD (money component): split media, flat hairline ---- */
.product-card { display:grid; grid-template-columns: 1fr 1.2fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.product-card .pc-media { background:var(--paper-2); overflow:hidden; }
.product-card .pc-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-card .pc-body { padding: var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.pc-tag { align-self:flex-start; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:var(--radius-sm); }
.pc-rating { font-weight:700; color:var(--ink); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.pc-rating .src { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); }

/* ---- STAR RATING (dependency-free) - set fill width inline: ratingValue/5*100% ---- */
.stars { position:relative; display:inline-block; vertical-align:middle; line-height:1; white-space:nowrap; font-size:1.05em; }
.stars::before { content:"★★★★★"; color:var(--line); letter-spacing:2px; }
.stars .stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; }
.stars .stars-fill::before { content:"★★★★★"; color:var(--gold); letter-spacing:2px; }
.stars-num { font-weight:700; color:var(--ink); }
.trust .stars { font-size:1.15rem; margin-top:.2rem; }
.pc-price { font-family:var(--display); font-size:var(--step-2); font-weight:700; color:var(--ink); }
.pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; font-family:var(--body); }
@media (max-width:680px){ .product-card{ grid-template-columns:1fr; } .product-card .pc-media{ aspect-ratio:4/3; } }

/* ---- PRICING & INCLUSIONS ---- */
.incl { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.incl ul { list-style:none; padding:0; margin:0; }
.incl li { padding:.35rem 0 .35rem 1.6rem; position:relative; }
.incl .yes::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; }
.incl .no::before  { content:"✕"; position:absolute; left:0; color:var(--warn); font-weight:800; }
@media (max-width:600px){ .incl{ grid-template-columns:1fr; } }

/* ---- ITINERARY ---- */
.timeline { list-style:none; margin:0; padding:0; border-left:3px solid var(--line); }
.timeline li { position:relative; padding:0 0 var(--s4) var(--s4); }
.timeline li::before { content:""; position:absolute; left:-9px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--gold); border:3px solid var(--paper); }
.timeline .t { font-family:var(--display); font-weight:700; }

/* ---- PROS / CONS ---- */
.proscons { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.proscons .col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.proscons h3 { margin-top:0; }
.proscons ul { padding-left:1.1rem; margin:0; }
.proscons li { margin-bottom:.5rem; }
.proscons .pros { border-top:4px solid var(--ok); }
.proscons .cons { border-top:4px solid var(--warn); }
@media (max-width:600px){ .proscons{ grid-template-columns:1fr; } }

/* ---- AUTHOR EXPERIENCE ---- */
.author-block { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5); display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; }
.author-block img.avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--surface); }
.author-block .updated { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
@media (max-width:600px){ .author-block{ grid-template-columns:1fr; } }

/* ---- TRUST STRIP ---- */
.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); text-align:center; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.trust .num { font-family:var(--display); font-size:var(--step-2); font-weight:700; color:var(--gold-ink); }
.trust .lbl { font-size:var(--step--1); color:var(--ink-soft); }
@media (max-width:640px){ .trust{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } }

/* ---- FAQ (FAQPage) ---- */
.faq details { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:.4rem 1rem; margin-bottom:.7rem; }
.faq summary { font-family:var(--display); font-weight:700; cursor:pointer; padding:.6rem 0; list-style:none; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after { content:"+"; float:right; color:var(--gold); font-weight:800; font-family:var(--body); }
.faq details[open] summary::after { content:"−"; }

/* ---- RELATED TOURS ---- */
.related { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.related .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.related .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.related .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.related .rcard .rc-body { padding:var(--s3) var(--s4); }
@media (max-width:600px){ .related{ grid-template-columns:1fr; } }
/* 3-up card grid (homepage / hubs): vertical 3-col on desktop per the strict tour-card layout
   rule; under 820px each card turns into a split-media row (image beside copy), the card_style. */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.cards-3 .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.cards-3 .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.cards-3 .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.cards-3 .rcard .rc-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.cards-3 .rcard .rc-body .btn { margin-top:auto; }
@media (max-width:820px){
  .cards-3{ grid-template-columns:1fr; }
  .cards-3 .rcard { display:grid; grid-template-columns:38% 1fr; }
  .cards-3 .rcard .rc-media { aspect-ratio:auto; min-height:100%; }
  .cards-3 .rcard .rc-body { padding:var(--s3); }
}
@media (max-width:480px){ .cards-3 .rcard { grid-template-columns:1fr; } .cards-3 .rcard .rc-media { aspect-ratio:16/10; } }

/* Product card upgrades: "best for" frame, benefit bullets, social proof, popular badge */
.pc-reviews { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); }
.pc-bestfor { align-self:flex-start; margin:0; background:var(--gold-soft); color:var(--gold-ink);
  font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .65rem; border-radius:var(--radius-sm); }
.pc-points { list-style:none; padding:0; margin:.15rem 0 0; display:flex; flex-direction:column; gap:.4rem; }
.pc-points li { position:relative; padding-left:1.45rem; font-size:var(--step--1); color:var(--ink); line-height:1.4; }
.pc-points li::before { content:"✓"; position:absolute; left:0; top:-.02em; color:var(--sea); font-weight:800; }
.rc-media, .pc-media { position:relative; }
.pc-badge { position:absolute; top:.6rem; left:.6rem; z-index:1; background:var(--gold-soft); color:var(--gold-ink);
  font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:var(--radius-sm); }
.cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft); }

/* ---- CTA BANNER (night band, gilt double frame) ---- */
.cta-banner { background:var(--night); border:1px solid var(--gilt); box-shadow:inset 0 0 0 4px var(--night), inset 0 0 0 5px rgba(217,183,92,.5); color:#fff; border-radius:var(--radius); padding:var(--s5); text-align:center; }
.cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; }
.cta-banner p { color:rgba(255,255,255,.84); max-width:52ch; margin-inline:auto; }

/* ---- AVAILABILITY WIDGET (date -> affiliate check) ---- */
.availability { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.availability .av-label { font-family:var(--display); font-weight:700; color:var(--ink); }
.availability .av-date { padding:.7rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; min-height:48px; background:var(--surface-2); color:var(--ink); color-scheme:light; }
.availability .av-go, .availability .av-check { margin-left:auto; }
.availability .av-msg { width:100%; margin:.3rem 0 0; color:var(--ok); font-weight:600; }
@media (max-width:560px){ .availability .av-go, .availability .av-check { margin-left:0; width:100%; } }
/* live GetYourGuide availability calendar wrapper ({{ gyg_widget:<slug> }}) */
.gyg-avail { margin:var(--s4) 0; border:1px solid var(--line); border-top:3px double var(--gold); border-radius:var(--radius); background:var(--surface); padding:var(--s3); }

/* ---- FOOTER (night band) ---- */
.site-footer { background:var(--footer); color:#C9C4B8; margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:3px double var(--gilt); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); }
.site-footer a { color:#E8E1D2; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; color:var(--gilt); }
.site-footer h4, .site-footer .footer-h { font-family:var(--display); font-weight:700; font-size:var(--step-0); color:#fff; margin:0 0 var(--s2); }
.footer-nav ul { list-style:none; margin:0; padding:0; }
.footer-nav li { margin-bottom:.4rem; }
.socials { display:flex; gap:.8rem; margin-top:var(--s3); }
.socials a { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(217,183,92,.35); border-radius:50%; }
.socials a:hover { border-color:var(--gilt); color:var(--gilt); }
.disclosure { font-size:var(--step--1); color:#A9A398; border-top:1px solid rgba(217,183,92,.25); margin-top:var(--s5); padding-top:var(--s3); }
.disclosure p { max-width:none; }
@media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---- BLOG ---- */
.blog-hero { margin:var(--s5) 0 0; }
.blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); }
.blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
.blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.prose { margin-top:var(--s5); }
.prose > * { max-width:64ch; }
.prose h2 { margin-top:var(--s6); }
.prose h3 { margin-top:var(--s5); }
.prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; border:1px solid var(--line); }
.prose figure { margin:var(--s4) 0; }
.prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li { margin-bottom:.4rem; }
.prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--gold); color:var(--ink-soft); font-style:italic; font-family:var(--display); }
.prose table { width:100%; max-width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--s4) 0; font-size:var(--step--1); }
.prose th, .prose td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose thead th { background:var(--paper-2); font-family:var(--display); color:var(--ink); border-bottom:3px double var(--gold); }
.prose tbody tr:last-child td { border-bottom:0; }
@media (max-width:640px){
  .prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > table { min-width: 640px; }
}
.prose a { color:var(--brand); }
/* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a
   button inside an article body renders accent-on-accent = INVISIBLE TEXT. */
.prose a.btn-primary, .prose a.btn-primary:hover { color:#fff; }
.prose a.btn-brand { color:#fff; }
.prose a.btn-ghost { color:var(--ink); }
/* Hotel affiliate pill (Expedia via Travelpayouts): brass + dark text so it reads as a secondary
   lodging action, distinct from the verdigris tour buttons. Explicit colors defeat the .prose a
   override trap above. */
.hotel-cta, .prose a.hotel-cta { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--body); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:var(--radius-sm); border:1px solid var(--gold); color:var(--gold-ink); background:var(--gold-soft); text-decoration:none; white-space:nowrap; }
.hotel-cta:hover, .prose a.hotel-cta:hover { background:var(--gold); color:#fff; text-decoration:none; }
.hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.hotel-row .hr-name { font-weight:700; color:var(--ink); }
.blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; }
.blog-cta h2 { margin-top:0; }
.blog-cta p { margin-bottom:var(--s3); }
.blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* ---- INFOGRAPHIC (generated SVG) ---- */
.infographic { margin:var(--s4) 0; }
.infographic img, .infographic svg { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); display:block; }
.infographic figcaption { margin-top:.6rem; text-align:center; color:var(--ink-soft); }
.embed + p, .embed + p.small, .video-grid + p { max-width:none; }

/* information-gain block: fresh, sourced data competitors don't carry */
.infogain { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius); padding:var(--s4) var(--s4) var(--s3); margin:var(--s5) 0; }
.infogain .infogain-h { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; font-family:var(--display); font-weight:700; font-size:var(--step-1); line-height:1.1; margin:0 0 var(--s3); max-width:none; color:var(--ink); }
.infogain .tag { font-family:var(--body); font-size:var(--step--1); font-weight:700; color:var(--gold-ink); background:var(--gold-soft); padding:.18rem .55rem; border-radius:var(--radius-sm); letter-spacing:.03em; text-transform:uppercase; }
.infogain ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.infogain li { position:relative; padding-left:1.5rem; max-width:66ch; }
.infogain li::before { content:""; position:absolute; left:0; top:.5em; width:.55rem; height:.55rem; background:var(--gold); transform:rotate(45deg); }
.infogain .src { display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:.2rem; }
.infogain .src a { color:var(--ink-soft); }
.infogain .infogain-note { font-size:var(--step--1); color:var(--ink-soft); margin:var(--s3) 0 0; max-width:none; }

/* ---- EMBEDS (interactive map + videos) ---- */
.embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:820px){ .video-grid{ grid-template-columns:1fr; } }

/* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */
.btn-xl { font-size: var(--step-1); padding: 1.05rem 1.9rem; }
@media (max-width: 430px) { .btn-xl { font-size: var(--step-0); padding: .95rem 1.2rem; } }
.cta-proof { display:block; font-size:var(--step--1); color:var(--ink-soft); margin:.55rem 0 0; max-width:none; }
.cta-proof .gold { color: var(--gold-ink); font-weight:700; }
.cta-box { background:var(--paper-2); border:1px solid var(--line); border-top:3px double var(--gold);
  border-radius:var(--radius); padding:var(--s5); margin:var(--s5) 0; max-width:none; text-align:center; }
.cta-box .cb-h { font-family:var(--display); font-weight:700; font-size:var(--step-2); color:var(--ink); margin:0 0 .5rem; max-width:none; }
.cta-box p { max-width:44ch; margin-inline:auto; }
.cta-box p:last-child { margin-bottom:0; max-width:none; }
.cta-box .btn { margin-top:.5rem; }
.cta-box a.btn-primary, .cta-box a.btn-primary:hover { color:var(--accent-ink); }
@media (max-width:640px){ .cta-box { padding:var(--s4); } .cta-box .btn { width:100%; } }
/* sticky bar: fixed overlay (zero CLS), thin, revealed after first screen */
.sticky-cta { position:fixed; z-index:45; left:0; right:0; bottom:0; display:flex; align-items:center;
  justify-content:center; gap:.9rem; padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(255,252,246,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .25s ease; }
.sticky-cta.visible { transform:translateY(0); }
.sticky-cta .sc-proof { font-size:var(--step--1); color:var(--ink); white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .sc-proof .gold { color:var(--gold-ink); font-weight:700; }
.sticky-cta .btn { min-height:44px; padding:.6rem 1.3rem; white-space:nowrap; flex:0 0 auto; }
@media (min-width: 761px) {
  .sticky-cta { left:auto; right:1.2rem; bottom:1.2rem; border:1px solid var(--gold);
    border-radius:var(--radius); padding:.5rem .6rem .5rem 1.1rem; box-shadow:var(--shadow-lift); }
  /* article pages (blog/guides): full-width bottom bar on desktop too, like mobile */
  body.article .sticky-cta { left:0; right:0; bottom:0; border-radius:0; border:0;
    border-top:1px solid var(--line); box-shadow:none; padding:.55rem .9rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition:none; } }

/* ---- TESTIMONIALS (real GetYourGuide/Tripadvisor reviews, verbatim) ---- */
.reviews { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.review-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.review-card .stars { font-size:.95rem; }
.review-card blockquote { margin:0; font-size:var(--step-0); color:var(--ink); max-width:none; font-family:var(--display); }
.review-card blockquote p { max-width:none; margin:0; }
.review-meta { margin-top:auto; font-size:var(--step--1); color:var(--ink-soft); }
.review-meta strong { color:var(--ink); }
@media (max-width:760px){ .reviews{ grid-template-columns:1fr; } }

/* utility */
.lede { font-size:var(--step-1); color:var(--ink-soft); }
.small { font-size:var(--step--1); color:var(--ink-soft); }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.text-center{text-align:center}

/* ============================================================
   SITE-SPECIFIC LAYER , "Danube Gilt" additions for budapestrivercruises.org
   ============================================================ */

/* ---- Section heading signature: a short DOUBLE brass rule under the serif H2 (the printed-
        card detail). The donor's dashed hairline and the recent sites' bar-above are not reused. */
.section > h2:first-child, .rule-h2 { padding-bottom:0; border-bottom:0; }
.section > h2:first-child::after, .rule-h2::after { content:""; display:block; width:4.5rem; border-top:3px double var(--gold); margin-top:.6rem; }
.cta-banner h2::after { display:none; }

/* ---- FULL-BLEED BANDS on a constrained .section.wrap (markup contract untouched):
        the box-shadow spread + horizontal clip-path paints the band edge to edge. ---- */
.band-mist { background:var(--paper-2); box-shadow:0 0 0 100vmax var(--paper-2); clip-path:inset(0 -100vmax); }
.band-night { background:var(--night); color:#fff; box-shadow:0 0 0 100vmax var(--night); clip-path:inset(0 -100vmax); }
.section.band-mist, .section.band-night { padding-block:var(--s6); }
.band-mist + .section, .band-night + .section { padding-top:var(--s6); }
.band-night h2, .band-night h3 { color:#fff; }
.band-night p { color:rgba(255,255,255,.86); }
.band-night .rule-h2::after, .band-night > h2:first-child::after { border-top-color:var(--gilt); }
.band-night a:not(.btn) { color:var(--gilt); }

/* ---- CATEGORY GRID (the five cruise kinds on the homepage): card-split-media.
        Image in the left column spanning the rows, name / meta / who-for stacked beside it. ---- */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.cat-card { display:grid; grid-template-columns:38% 1fr; column-gap:var(--s3); row-gap:.25rem; align-content:start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3); text-decoration:none; color:var(--ink); overflow:hidden;
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.cat-card:hover { border-color:var(--sea); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.cat-card .cc-media { grid-column:1; grid-row:1 / span 4; margin:0; align-self:stretch; }
.cat-card .cc-media img { width:100%; height:100%; min-height:110px; object-fit:cover; display:block; border-radius:var(--radius-sm); }
.cat-card .cc-name { grid-column:2; font-family:var(--display); font-weight:700; font-size:var(--step-0); line-height:1.2; }
.cat-card .cc-meta { grid-column:2; font-size:var(--step--1); color:var(--ink-soft); }
.cat-card .cc-who { grid-column:2; display:block; margin-top:.2rem; color:var(--ink-soft); font-size:var(--step--1); font-weight:600; }
.cat-card:not(:has(.cc-media)) { grid-template-columns:1fr; }
.cat-card:not(:has(.cc-media)) .cc-name, .cat-card:not(:has(.cc-media)) .cc-meta, .cat-card:not(:has(.cc-media)) .cc-who { grid-column:1; }
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---- PLATFORM PILL (which marketplace a listing lives on) ---- */
.pc-platform { font-size:var(--step--1); font-weight:700; color:var(--ink-soft); }
.pc-platform .pf { display:inline-block; padding:.12rem .5rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:.72rem;
  letter-spacing:.03em; text-transform:uppercase; }

/* ---- HONESTY CALLOUT (used wherever the site corrects a common claim) ---- */
.honesty { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--gold);
  border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; }
.honesty .h-h { font-family:var(--display); font-weight:700; font-size:var(--step-1);
  margin:0 0 var(--s2); max-width:none; color:var(--ink); }
.honesty p:last-child { margin-bottom:0; }
.prose .honesty p { max-width:none; }

/* ---- TOUR LIST (category blocks: a split-media row per product) ---- */
.tour-list { display:grid; gap:var(--s3); }
.tour-row { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.tour-row.is-lead { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft); }
.tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); }
.tour-row h3 a { color:var(--ink); text-decoration:none; }
.tour-row h3 a:hover { color:var(--sea); }
.tour-row .tr-meta { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .5rem; max-width:none; }
.tour-row .tr-desc { margin:0; max-width:58ch; }
.tour-row .tr-cta { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; text-align:right; }
.tour-row .tr-price { font-family:var(--display); font-weight:700; font-size:var(--step-1); white-space:nowrap; }
.tour-row .tr-price small { display:block; font-family:var(--body); font-size:var(--step--1); font-weight:500; color:var(--ink-soft); white-space:normal; }
@media (max-width:760px){
  .tour-row { grid-template-columns:1fr; }
  .tour-row .tr-cta { align-items:stretch; text-align:left; }
  .tour-row .tr-cta .btn { width:100%; }
}

/* ============================================================
   TOUR-PICKS GRID (depth-cro conversion layer). A 3-card grid dropped into an article body
   before its FAQ. Whole card converts: image, title and button all carry the sponsored link.
   ============================================================ */
.tour-picks {
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); margin:var(--s5) 0;
}
.tour-picks .tp-season {
  font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3);
  border-left:3px solid var(--gold); padding-left:.7rem;
}
.tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } }
.tour-picks .tp-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; display:flex; flex-direction:column;
}
.tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; }
.tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; }
.tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; }
.pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em;
  padding:.2rem .55rem; border-radius:var(--radius-sm); background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--line); }
.tour-picks .tp-chips .pc-chip { white-space:nowrap; }
.tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); }
.tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; font-family:var(--display); }
.tour-picks .tp-title a { color:var(--ink); text-decoration:none; }
.tour-picks .tp-title a:hover { color:var(--sea); text-decoration:underline; }
.tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.tour-picks .tp-proof .gold { color:var(--gold-ink); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); }
.tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; }
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#fff; }
/* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width,
   so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure
   (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */
.wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks {
  max-width:none;
  width:min(100vw - 2rem, 68rem);
  margin-left:50%;
  transform:translateX(-50%);
}
@media (max-width:700px) {
  .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; }
}

/* ---- v2.1: card-style mid-article CTA (image + body) ---- */
.cta-box.cta-card { display:grid; grid-template-columns:230px 1fr; gap:var(--s4); align-items:center; max-width:none; }
.cta-box.cta-card .cb-media { display:block; }
.cta-box.cta-card .cb-media img { width:100%; height:100%; min-height:170px; object-fit:cover; border-radius:var(--radius-sm); display:block; }
.cta-box.cta-card .cb-body p { margin:0 0 var(--s2); max-width:none; margin-inline:0; text-align:left; }
.cta-box.cta-card .tp-proof { color:var(--ink-soft); font-size:var(--step--1); }
@media (max-width: 700px) { .cta-box.cta-card { grid-template-columns:1fr; } }

/* ---- v2.2: section intros span the container, rows carry images (split-media rows) ---- */
.section.wrap > p { max-width: none; }
.tour-row.has-media { grid-template-columns: 200px 1fr auto; }
.tour-row .tr-media { display:block; align-self:stretch; }
.tour-row .tr-media img { width:100%; height:100%; min-height:150px; object-fit:cover; border-radius:var(--radius-sm); display:block; }
@media (max-width: 860px) {
  .tour-row.has-media { grid-template-columns: 1fr; }
  .tour-row .tr-media img { min-height:0; max-height:210px; }
}

/* homepage per-category anchor blocks */
.cat-block { margin-top: var(--s5); }
.cat-block > h3 { margin-bottom: var(--s1); }
.cat-block > p.small { margin-top: 0; color: var(--ink-soft); }

/* single mid-article conversion card (gradual blog placements) */
.tp-solo { margin: var(--s5) 0; }
.tp-solo .tp-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }

/* ---- TOUR (MONEY) PAGES: booking panel above the fold (tour-page-cro spec) ---- */
.tour-hero { padding-top: var(--s4); }
.tour-hero-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } }
.tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); }
.booking-panel { background: var(--surface); border: 1px solid var(--line); border-top: 3px double var(--gold); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow-lift); }
.booking-panel h1 { font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; }
.booking-panel .bp-title { font-family: var(--display); font-weight: 700; font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; color: var(--ink); max-width: none; }
.bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); }
.bp-rating .gold { color: var(--gold-ink); font-weight: 700; }
.bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); }
.bp-price { margin: 0 0 var(--s3); font-size: var(--step-1); font-family: var(--display); }
.bp-price small { display: block; font-size: var(--step--1); color: var(--ink-soft); font-family: var(--body); font-weight: 400; }
.btn-block { display: block; width: 100%; text-align: center; }
.bp-next { color: var(--ink-soft); margin: var(--s2) 0 var(--s3); }
.bp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); margin: 0; border-top: 1px solid var(--line); padding-top: var(--s3); }
.bp-facts div { min-width: 0; }
.bp-facts dt { font-size: var(--step--1); color: var(--ink-soft); }
.bp-facts dd { margin: 0; font-size: var(--step--1); font-weight: 600; }

/* ============================================================
   HOMEPAGE BLUEPRINT SECTIONS (04-block-library.md 4.5, strict 13-section contract)
   ============================================================ */

/* Quick Answer / Key Takeaways: callout boxes, distinct from plain body paragraphs. */
.quick-answer-box { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius); padding:var(--s4) var(--s5); }
.quick-answer-box p { font-size:var(--step-1); max-width:62ch; }
.quick-answer-box p:first-child { margin-top:0; }
.quick-answer-box p:last-child { margin-bottom:0; }
.takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.takeaways-list li { position:relative; padding-left:1.6rem; line-height:1.5; max-width:70ch; }
.takeaways-list li::before { content:""; position:absolute; left:.15rem; top:.55em; width:.55rem; height:.55rem; background:var(--gold); transform:rotate(45deg); }
.checked-date { display:inline-block; font-size:.85rem; font-weight:500; color:var(--ink-soft); font-style:italic; }

/* Featured-tour spotlight: split-media card wrapping the real booking panel. */
.featured-tour-card { display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.featured-tour-card .ft-media { position:relative; background:var(--paper-2); min-height:100%; }
.featured-tour-card .ft-media img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.featured-tour-card .ft-badge { position:absolute; top:.8rem; left:.8rem; z-index:1; display:inline-block; background:var(--night); color:var(--gilt); border:1px solid var(--gilt); font-family:var(--body); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; padding:.34rem .7rem; border-radius:var(--radius-sm); }
.featured-tour-card .ft-panel { padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.featured-tour-card .booking-panel { border:0; border-top:0; box-shadow:none; border-radius:0; padding:0; }
.featured-tour-card .ft-more { margin:0; }
@media (max-width:820px){ .featured-tour-card{ grid-template-columns:1fr; } .featured-tour-card .ft-media img { aspect-ratio:16/10; } }

/* Comparison table (table_style: table-card-hybrid): hairline grid on desktop, parchment header
   under a double brass rule, no zebra; collapses to labeled stacked cards under 768px. CSS only. */
.compare-intro { max-width:none; color:var(--ink-soft); }
.table-hybrid { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:var(--step--1); }
.table-hybrid th, .table-hybrid td { text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table-hybrid thead th { background:var(--paper-2); color:var(--ink); font-family:var(--display); font-weight:700; font-size:var(--step-0); border-bottom:3px double var(--gold); }
.table-hybrid tbody tr:last-child td { border-bottom:0; }
.table-hybrid td:first-child { font-family:var(--display); font-weight:700; font-size:var(--step-0); }
.table-hybrid td a { font-weight:700; }
.table-hybrid .gold { color:var(--gold-ink); font-weight:700; }
@media (max-width:768px) {
  .table-hybrid thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .table-hybrid, .table-hybrid tbody, .table-hybrid tr, .table-hybrid td { display:block; width:100%; }
  .table-hybrid { border:0; border-radius:0; background:transparent; }
  .table-hybrid tr { background:var(--surface); border:1px solid var(--line); border-top:3px double var(--gold); border-radius:var(--radius); margin-bottom:var(--s3); overflow:hidden; }
  .table-hybrid tr:last-child { margin-bottom:0; }
  .table-hybrid td { border-bottom:1px solid var(--line); padding:.6rem .9rem; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); text-align:right; }
  .table-hybrid td:first-child { display:block; text-align:left; }
  .table-hybrid td:first-child::before { display:none; }
  .table-hybrid td:last-child { border-bottom:0; }
  .table-hybrid td::before { content:attr(data-label); font-weight:700; color:var(--ink-soft); text-align:left; flex:0 0 auto; font-family:var(--body); }
}

/* Destination Stat Grid ("What Makes ... "): gilt numerals with small hand-drawn line icons
   (inline SVG, never emoji), on the night band. */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); }
.stat-tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); text-align:left; display:grid; grid-template-columns:auto 1fr; column-gap:var(--s3); align-items:start; }
.stat-tile .st-icon { grid-row:1 / span 2; width:28px; height:28px; color:var(--sea); margin-top:.35rem; }
.stat-tile .st-icon svg { width:100%; height:100%; display:block; }
.stat-tile .st-num { display:block; font-family:var(--display); font-weight:700; font-size:var(--step-3); line-height:1; color:var(--brand); letter-spacing:-.02em; }
.stat-tile .st-label { display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:.45rem; }
.band-night .stat-tile { background:rgba(255,255,255,.05); border-color:rgba(217,183,92,.35); }
.band-night .stat-tile .st-num { color:var(--gilt); }
.band-night .stat-tile .st-icon { color:var(--gilt); }
.band-night .stat-tile .st-label { color:rgba(255,255,255,.82); }
@media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .stat-grid{ grid-template-columns:1fr; } }

/* Complete-Guide Zone divider. */
.guide-zone-intro { max-width:70ch; }

/* Destination-native seasonal module (dm-seasonal-calendar): four fact tiles under double brass
   rules, and a twelve-month bar for year-round operation. */
.season-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin:var(--s4) 0; }
.season-tile { background:var(--surface); border:1px solid var(--line); border-top:3px double var(--gold); border-radius:var(--radius); padding:var(--s3) var(--s3) var(--s4); }
.season-tile .sn-k { display:block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:.4rem; }
.season-tile p { margin:0; max-width:none; font-size:var(--step--1); }
.season-year { margin:var(--s4) 0 0; }
.season-year .sy-track { display:grid; grid-template-columns:repeat(12,1fr); gap:3px; }
.season-year .sy-m { height:12px; background:var(--accent); border-radius:2px; }
.season-year .sy-labels { display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin-top:.35rem; font-size:.7rem; color:var(--ink-soft); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.season-year .sy-labels span { text-align:center; }
.season-year .sy-caption { margin:.6rem 0 0; font-size:var(--step--1); color:var(--ink-soft); max-width:none; }
@media (max-width:860px){ .season-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .season-strip{ grid-template-columns:1fr; } .season-year .sy-labels { font-size:.72rem; } }

/* Map section: real Google Maps embed + hand-authored SVG pin schematic side by side. */
.spot-map-wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s4); align-items:stretch; margin-top:var(--s3); }
.spot-map-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); }
.spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; }
.spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s3); }
.spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; }
.map-schematic-note { font-size:var(--step--1); color:var(--ink-soft); margin-top:.5rem; }
@media (max-width:820px){ .spot-map-wrap{ grid-template-columns:1fr; } }

/* Full Testimonials: individual real quotes, serif, on the mist band. */
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.testimonial-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.testimonial-card .tc-stars { color:var(--gold); letter-spacing:.1em; margin-bottom:.5rem; }
.testimonial-card blockquote { margin:0 0 .6rem; font-style:normal; font-family:var(--display); font-size:var(--step-1); line-height:1.45; max-width:none; }
.testimonial-card .tc-attr { font-size:var(--step--1); color:var(--ink-soft); font-weight:600; margin:0; }
.testimonials-disclaimer { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); max-width:none; }
@media (max-width:680px){ .testimonials-grid{ grid-template-columns:1fr; } }

/* Categorized guides/blog "Answered" grid. */
.answered-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-top:var(--s3); }
.answered-group { border-top:3px double var(--gold); padding-top:var(--s3); }
.answered-group h3 { font-size:var(--step-0); margin:0 0 .5rem; }
.answered-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.answered-group li a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.2em; }
.answered-group li a:hover { text-decoration-color:currentColor; color:var(--sea); }
@media (max-width:900px){ .answered-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .answered-grid{ grid-template-columns:1fr; } }

/* ---- PLACEHOLDER FLAG (pre-publish scaffolding only): visibly marked, never shippable.
        Every .tbd element is paired with a NOTE FOR OLEG comment in the markup. ---- */
.tbd { border:1px dashed var(--warn); background:#FFF6EC; color:var(--warn); padding:.6rem .9rem; border-radius:var(--radius-sm); font-family:var(--body); font-size:var(--step--1); max-width:none; }
.tbd::before { content:"Placeholder: "; font-weight:700; }
div.tbd ul { margin-top:.4rem; color:var(--ink); font-family:var(--body); font-size:var(--step-0); }