/* Per-site design variants. Loaded after the family stylesheet; the body
   carries hdr-*, hero-*, cards-*, rad-* and bg-* classes from the site's
   design, and :root carries its palette and fonts (--f-display, --f-body,
   --f-clock, --radius). Selectors start at body.has-design so they win over
   family defaults without !important. */

/* --- type ------------------------------------------------------------------ */
body.has-design { font-family: var(--f-body); background: var(--bg); color: var(--ink); }
body.has-design h1, body.has-design h2, body.has-design .hero-h1, body.has-design .section-h,
body.has-design .faq-title, body.has-design .article-head h1, body.has-design .g-brand,
body.has-design .r-wordmark { font-family: var(--f-display); font-weight: var(--f-display-w); letter-spacing: -.01em; }
body.has-design h3, body.has-design .stat-v, body.has-design .tool-card-label, body.has-design .art-title { font-family: var(--f-display); }
body.has-design .lc-time, body.has-design .city-time, body.has-design .conv-out { font-family: var(--f-clock); font-variant-numeric: tabular-nums; }

/* --- radius ---------------------------------------------------------------- */
body.has-design .lc-card, body.has-design .fact, body.has-design .tool-card, body.has-design .art-card,
body.has-design .city-card, body.has-design .chip, body.has-design .stat, body.has-design .note,
body.has-design .btn, body.has-design .conv-form input, body.has-design .g-drop-menu,
body.has-design .hs-facts { border-radius: var(--radius); }

/* --- headers & footers ---------------------------------------------------------- */
body.hdr-bar-dark .g-header { background: var(--head-2); box-shadow: none; }
body.hdr-bar-dark .g-brand, body.hdr-bar-dark .g-nav > a, body.hdr-bar-dark .g-drop-btn { color: #fff; }
body.hdr-bar-dark .g-nav > a.is-main { box-shadow: inset 0 -3px 0 var(--c); background: none; }

body.hdr-bar-accent .g-header { background: var(--c-d); }
body.hdr-bar-accent .g-brand, body.hdr-bar-accent .g-nav > a, body.hdr-bar-accent .g-drop-btn { color: #fff; }
body.hdr-bar-accent .g-nav > a.is-main { background: rgba(255,255,255,.16); border-radius: var(--radius); }

body.hdr-light-rule .g-header { background: var(--bg); border-bottom: 3px solid var(--ink); box-shadow: none; }
body.hdr-light-rule .g-brand, body.hdr-light-rule .g-nav > a, body.hdr-light-rule .g-drop-btn { color: var(--ink); }
body.hdr-light-rule .g-nav > a.is-main { color: var(--c); background: none; box-shadow: none; }
body.hdr-light-rule .g-brand-text small { color: var(--c); }

body.hdr-center-logo .g-header { background: var(--head); }
body.hdr-center-logo .g-bar { flex-direction: column; gap: 10px; padding-block: 18px 12px; }
body.hdr-center-logo .g-nav { justify-content: center; flex: none; }
body.hdr-center-logo .g-brand { color: #fff; font-size: 1.5rem; }
body.hdr-center-logo .g-nav > a, body.hdr-center-logo .g-drop-btn { color: rgba(255,255,255,.85); }

body.hdr-split-tint .g-header { background: var(--c-l); border-bottom: 4px solid var(--c); box-shadow: none; }
body.hdr-split-tint .g-brand { color: var(--c-d); }
body.hdr-split-tint .g-nav > a, body.hdr-split-tint .g-drop-btn { color: var(--ink); }
body.hdr-split-tint .g-nav > a.is-main { color: var(--c-d); background: none; box-shadow: inset 0 -2px 0 var(--c); }

body.has-design .g-footer { background: var(--head-2); color: rgba(255,255,255,.78); border: 0; }
body.has-design .g-footer a, body.has-design .g-footer h4, body.has-design .g-footer .g-brand { color: #fff; }
body.hdr-light-rule .g-footer, body.hdr-split-tint .g-footer { background: var(--bg); color: var(--mut); border-top: 3px solid var(--ink); }
body.hdr-light-rule .g-footer a, body.hdr-light-rule .g-footer h4, body.hdr-light-rule .g-footer .g-brand,
body.hdr-split-tint .g-footer a, body.hdr-split-tint .g-footer h4, body.hdr-split-tint .g-footer .g-brand { color: var(--ink); }
body.hdr-split-tint .g-footer { background: var(--c-l); border-top-color: var(--c); }

/* --- cards --------------------------------------------------------------------- */
body.cards-outline :is(.fact, .tool-card, .art-card, .city-card, .stat, .lc-card) { background: var(--card); border: 1.5px solid var(--line2); box-shadow: none; }
body.cards-shadow :is(.fact, .tool-card, .art-card, .city-card, .stat, .lc-card) { background: var(--card); border: 0; box-shadow: 0 10px 28px rgba(20, 24, 40, .09); }
body.cards-tint :is(.fact, .tool-card, .art-card, .city-card, .stat, .lc-card) { background: var(--tint); border: 0; box-shadow: none; }
body.cards-flat :is(.fact, .tool-card, .art-card, .city-card, .stat) { background: transparent; border: 0; border-top: 3px solid var(--c); border-radius: 0; box-shadow: none; padding-inline: 2px; }
body.cards-flat .lc-card { background: var(--card); border: 1px solid var(--line); box-shadow: none; }
body.cards-ticket :is(.fact, .tool-card, .art-card, .city-card, .stat, .lc-card) { background: var(--card); border: 1.5px dashed var(--line2); box-shadow: none; }
body.has-design .fact h3, body.has-design .faq-title { color: var(--c-d); }
body.has-design .chip:hover, body.has-design .tool-card:hover, body.has-design a.city-card:hover { border-color: var(--c); }
body.has-design .cal td.today { background: var(--c); }
body.has-design .note { background: var(--c-l); border-left-color: var(--c); }

/* --- hero: split (copy + clock card) --------------------------------------------- */
body.hero-split .hero-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
body.hero-split .hero-split .lc-time { font-size: clamp(2.8rem, 7vw, 4.4rem); }

/* --- hero: center (big clock + stat tiles) -------------------------------------- */
body.hero-center .hero-center { text-align: center; }
body.hero-center .lc-card-xl { background: linear-gradient(135deg, var(--tint), var(--card)); border: 3px solid var(--c-d); padding: 44px 24px; }
body.hero-center .lc-card-xl .lc-time { color: var(--c-d); font-size: clamp(3.4rem, 12vw, 6.2rem); }
body.hero-center .lc-card-xl .lc-date { font-size: 1.5rem; font-weight: 700; color: var(--ink); }
body.hero-center .lc-pill { background: var(--c); color: #fff; }
body.hero-center .sr-only-if-home { font-size: 1.6rem; }
body.hero-center.pt-home .sr-only-if-home { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- hero: analog (analog face + thin digital) ------------------------------------ */
body.hero-analog .hero-city { text-align: center; padding: 48px 0 24px; border-bottom: 1px solid var(--line); }
body.hero-analog .hero-sub { color: var(--mut); font-size: 1.1rem; margin: 0; }
body.hero-analog .clock-stage { text-align: center; padding: 36px 0; border-bottom: 1px solid var(--line); }
body.hero-analog .lc-analog { width: min(260px, 66vw); height: auto; display: block; margin: 0 auto 24px; }
body.hero-analog .lc-analog .face { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
body.hero-analog .lc-analog .tick { stroke: var(--ink); stroke-width: .8; }
body.hero-analog .lc-analog .num { font-size: 6.5px; text-anchor: middle; fill: var(--ink); font-family: var(--f-display); }
body.hero-analog .lc-analog .hand-h { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
body.hero-analog .lc-analog .hand-m { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
body.hero-analog .lc-analog .hand-s { stroke: var(--c); stroke-width: .6; }
body.hero-analog .lc-analog .pin { fill: var(--c); }
body.hero-analog .clock-stage .lc-time { font-weight: 300; font-size: clamp(3.4rem, 12vw, 6.4rem); }
body.hero-analog .clock-stage .lc-zone { color: var(--mut); }

/* --- hero: banner (full-width colour band) ------------------------------------------ */
body.hero-banner .hero-banner { margin-inline: calc(50% - 50vw); padding: 44px max(16px, calc(50vw - 584px)); background: var(--c-d); color: #fff; }
body.hero-banner .hb-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
body.hero-banner .hero-banner .hero-h1 { color: #fff; margin-bottom: 10px; }
body.hero-banner .hero-banner .hero-lead { color: rgba(255,255,255,.85); }
body.hero-banner .hb-zone { margin: 12px 0 0; font-weight: 600; color: var(--c-l); }
body.hero-banner .hb-clock { text-align: right; }
body.hero-banner .hb-clock .lc-time { color: #fff; font-size: clamp(3rem, 10vw, 5.6rem); }
body.hero-banner .hb-clock .lc-date { color: rgba(255,255,255,.85); margin-top: 8px; }

/* --- hero: stack (headline, then clock + key facts) --------------------------------- */
body.hero-stack .hero-stack { padding: 36px 0 20px; }
body.hero-stack .hs-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 22px; align-items: stretch; }
body.hero-stack .hs-grid .lc-card { display: grid; align-content: center; }
body.hero-stack .hs-facts { margin: 0; display: grid; gap: 0; background: var(--card); border: 1px solid var(--line); }
body.hero-stack .hs-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
body.hero-stack .hs-facts div:last-child { border-bottom: 0; }
body.hero-stack .hs-facts dt { color: var(--mut); }
body.hero-stack .hs-facts dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 860px) {
  body.hero-split .hero-split, body.hero-stack .hs-grid { grid-template-columns: 1fr; }
  body.hero-banner .hb-clock { text-align: left; }
}