/* =========================================================================
   helsinkidaytrip.com — best-time.css
   Components for the best-time-to-visit page only: answer box, decision
   list, figure strip, contents, date checker (cvd-), month table, choice
   cards. Uses the colour and spacing tokens from styles.css.
   ========================================================================= */

/* Hero deck link: inherit the cream deck colour, underline it back in. */
.hero-lede a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hero-lede a:hover { color: var(--c-white); }
.hero-lede--second { font-size: clamp(0.98rem, 1.4vw, 1.08rem); }

/* ---------- article column ---------- */
.bt-body { width: var(--w-read); margin: 0 auto; padding-block: var(--space-xl) var(--section-py); }
.bt-body > h2 { margin: var(--space-2xl) 0 var(--space-md); }
.bt-body > h3 { margin: var(--space-lg) 0 var(--space-sm); }
.bt-body > p, .bt-body > ul { margin-bottom: var(--space-md); }
.bt-body > ul { list-style: none; }
.bt-body > ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.45rem; }
.bt-body > ul li::before { content: "✓"; position: absolute; left: 0; color: var(--c-primary); font-weight: 700; }
.bt-body h2[id], .bt-body section[id] { scroll-margin-top: 5.5rem; }

/* ---------- answer box ---------- */
.guide-answer {
  background: var(--c-white); border: 1px solid var(--c-travertine);
  border-left: 5px solid var(--c-primary); border-radius: var(--radius-md);
  padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--shadow-sm);
}
.guide-answer__head { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: var(--space-sm); }
.guide-answer__text { font-size: 1.04rem; }
.guide-decide { margin: var(--space-md) 0; border-top: 1px solid var(--c-travertine); }
.guide-decide__row {
  display: grid; grid-template-columns: 1fr; gap: 0.1rem 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--c-travertine);
}
.guide-decide__row dt { font-size: 0.92rem; color: var(--c-charcoal-mute); }
.guide-decide__row dd { margin: 0; font-weight: 700; color: var(--c-primary-deep); }
@media (min-width: 640px) { .guide-decide__row { grid-template-columns: 1.3fr 1fr; align-items: baseline; } }
.guide-figs { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin: 0 0 var(--space-md); }
@media (min-width: 640px) { .guide-figs { grid-template-columns: repeat(3, 1fr); } }
.guide-figs li { background: var(--c-cream-soft); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.1rem; }
.guide-figs__k { font-size: 0.82rem; color: var(--c-charcoal-mute); line-height: 1.3; }
.guide-figs__v { font-family: var(--font-display); font-size: 1.45rem; color: var(--c-primary-deep); line-height: 1.1; }
.guide-figs__n { font-size: 0.8rem; color: var(--c-charcoal-mute); line-height: 1.3; }
.guide-answer__cta-row { margin: 0; }

/* ---------- availability widget + auto widget ---------- */
.bt-widget { margin: var(--space-lg) 0; }
.auto-intro { margin-top: var(--space-md); }

/* ---------- contents ---------- */
.guide-toc { background: var(--c-cream-soft); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; }
.guide-toc__head { font-weight: 700; color: var(--c-primary-deep); margin-bottom: 0.4rem; }
.guide-toc ul { list-style: none; columns: 1; }
@media (min-width: 640px) { .guide-toc ul { columns: 2; column-gap: 2rem; } }
.guide-toc li { margin-bottom: 0.3rem; break-inside: avoid; }

/* ---------- date checker ---------- */
.cvd {
  background: var(--c-charcoal); color: var(--c-cream);
  border-radius: var(--radius-lg); padding: clamp(1.2rem, 3vw, 2rem); margin: var(--space-xl) 0;
}
.cvd h2 { color: var(--c-white); margin-bottom: var(--space-sm); }
.cvd-lead { color: #D9E0E3; }
.cvd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: var(--space-md); }
.cvd-label { font-weight: 700; }
.cvd-date { font: inherit; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid #8FA3AD; background: var(--c-white); color: var(--c-charcoal); max-width: 100%; }
.cvd-source { font-size: 0.85rem; color: #C3CED3; flex-basis: 100%; }
.cvd-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: var(--space-md); }
@media (min-width: 720px) { .cvd-strip { grid-template-columns: repeat(4, 1fr); } }
.cvd-stat { background: rgba(255,255,255,0.07); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; display: flex; flex-direction: column; min-width: 0; }
.cvd-stat__k { font-size: 0.78rem; color: #C3CED3; }
.cvd-stat__v { font-weight: 700; color: var(--c-white); font-size: 1rem; overflow-wrap: anywhere; }
.cvd-panels { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 760px) { .cvd-panels { grid-template-columns: 1fr 1fr; } }
.cvd-panel { background: var(--c-white); color: var(--c-charcoal); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; }
.cvd-panel__h { font-size: 1.5rem; margin-bottom: 0.1rem; }
.cvd-panel__sub { font-size: 0.86rem; color: var(--c-charcoal-mute); margin-bottom: 0.6rem; }
.cvd-checklist { list-style: none; margin-bottom: 0.8rem; }
.cvd-checklist li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.4rem 0; border-bottom: 1px solid var(--c-travertine); font-size: 0.92rem; }
.cvd-k { color: var(--c-charcoal-mute); }
.cvd-v { font-weight: 600; text-align: right; }
.cvd-verdict { font-weight: 500; margin-bottom: 0.9rem; }
.cvd-cta { margin-top: auto; align-self: flex-start; }
.cvd-compare { color: #E7ECEE; margin: var(--space-md) 0 0; }
.cvd-compare:empty { display: none; }
.cvd-note { font-size: 0.82rem; color: #B9C5CA; margin: var(--space-sm) 0 0; }

/* ---------- month table ---------- */
.guide-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-md) 0 var(--space-lg); border: 1px solid var(--c-travertine); border-radius: var(--radius-md); }
.guide-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; background: var(--c-white); }
.guide-table caption { text-align: left; padding: 0.7rem 0.8rem; font-weight: 700; color: var(--c-primary-deep); }
.guide-table th, .guide-table td { padding: 0.5rem 0.6rem; border-top: 1px solid var(--c-travertine); text-align: left; vertical-align: top; }
.guide-table thead th { background: var(--c-cream-soft); font-size: 0.82rem; color: var(--c-charcoal-mute); }
.guide-table tbody th { color: var(--c-primary-deep); white-space: nowrap; }

/* ---------- choice cards ---------- */
.choice-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg); }
@media (min-width: 720px) { .choice-cards { grid-template-columns: repeat(3, 1fr); } }
.choice-card { background: var(--c-white); border: 1px solid var(--c-travertine); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.choice-card__when { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-accent); font-weight: 700; margin-bottom: 0.3rem; }
.choice-card h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.choice-card p { font-size: 0.94rem; }
.choice-card__meta { font-size: 0.86rem; color: var(--c-charcoal-mute); }
.choice-card .btn { margin-top: auto; align-self: flex-start; }

.guide-updated { font-size: 0.88rem; color: var(--c-charcoal-mute); }

/* Hero overlay on this page only: dark on the left, fading to transparent on the right */
.hero--bt::after {
  background: linear-gradient(90deg,
    rgba(16,20,16,0.88) 0%,
    rgba(16,20,16,0.72) 45%,
    rgba(16,20,16,0.35) 78%,
    rgba(16,20,16,0) 100%);
}