/* =========================================================================
   ІНФО24 — main.css
   Один файл на весь сайт: менше запитів, краще кешування браузером/CDN.
   ========================================================================= */

/* ============ TOKENS ============ */
:root{
  --paper:#ffffff; --bg:#f5f6f7; --raise:#ffffff; --ubar:#15181c;
  --ink:#15181c; --ink-soft:#4a525b; --ink-mute:#828b93;
  --line:#e4e7ea; --line-soft:#eef0f2;
  --brand:#0d9488; --brand-strong:#0b7a70; --brand-tint:#e6f5f3;
  --live:#e23d2e; --live-tint:#fdecea;
  --shadow:0 1px 2px rgba(20,24,28,.04), 0 8px 24px -12px rgba(20,24,28,.12);
  --page-grad:
    radial-gradient(85% 55% at 96% -8%, rgba(13,148,136,.14), transparent 58%),
    radial-gradient(70% 48% at 2% 2%,  rgba(13,148,136,.07), transparent 55%),
    linear-gradient(180deg, #f8f9fa 0%, #eef1f2 100%);
  --f-display:"Golos Text",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1240px; --gap:24px; --r:14px;
}
[data-theme="dark"]{
  --paper:#14171b; --bg:#0d1013; --raise:#181c21; --ubar:#000;
  --ink:#edeff1; --ink-soft:#aeb6be; --ink-mute:#79828b;
  --line:#262b31; --line-soft:#1b2025;
  --brand:#2dd4bf; --brand-strong:#5eead4; --brand-tint:#0f2f2c;
  --live:#ff6a5a; --live-tint:#2a1512;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --page-grad:
    radial-gradient(85% 55% at 96% -8%, rgba(45,212,191,.12), transparent 58%),
    radial-gradient(70% 48% at 2% 2%,  rgba(45,212,191,.06), transparent 55%),
    linear-gradient(180deg, #0f1418 0%, #0a0d10 100%);
}

/* ============ RESET ============ */
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background-color:var(--bg); background-image:var(--page-grad); background-attachment:fixed;
  color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff; padding:10px 16px; z-index:999; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ============ UTILITY TICKER BAR ============ */
.ubar{background:var(--ubar); color:#fff; font-family:var(--f-mono); font-size:12.5px}
.ubar .wrap{display:flex; align-items:center; gap:16px; height:38px; overflow:hidden}
.ubar time{color:#fff; white-space:nowrap; letter-spacing:.02em; flex:none}
.live-badge{flex:none; display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--live); padding:4px 9px; border-radius:6px}
.live-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ticker{flex:1; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker ul{display:flex; width:max-content; list-style:none; animation:slide 60s linear infinite}
.ticker.news li{white-space:nowrap; display:flex; align-items:center}
.ticker.news li::before{content:"◆"; color:var(--brand); font-size:7px; margin:0 16px; opacity:.7}
.ticker.news a{color:#d3d6da; font-family:var(--f-body); font-weight:500; font-size:13px; transition:color .15s}
.ticker.news a:hover{color:#fff}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker:hover ul{animation-play-state:paused}

/* ============ MASTHEAD ============ */
.mast{position:sticky; top:0; z-index:70; background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow .25s ease}
.mast.scrolled{box-shadow:0 8px 28px -18px rgba(0,0,0,.35)}
.mast .wrap{display:flex; align-items:center; gap:16px; height:66px; min-width:0}
/* Логотип зліва, інструменти справа. margin-left:auto стоїть саме на
   .tools, а не на .nav: коли меню ховається на мобільному, інструменти
   інакше з'їжджають до логотипа. */
.brand{display:flex; align-items:baseline; gap:2px; font-family:var(--f-display); font-weight:900; font-size:26px; letter-spacing:-.02em; min-width:0; margin-right:auto}
.brand .n{color:var(--brand)}
/* Слоган біля логотипа прибрано — лишається лише сам логотип */
.brand small{display:none}
/* Завантажений логотип: обмежуємо висоту, щоб не розпирав шапку */
.brand-img{align-items:center; gap:0}
/* Висоту задає інлайновий CSS з налаштувань (див. inc/logo.php).
   Обидва логотипи в розмітці, потрібний показує CSS за data-theme —
   так перемикання теми миттєве, без перезавантаження. */
.brand-img img{width:auto; display:block; max-width:100%}
.brand-img .logo-dark{display:none}
[data-theme="dark"] .brand-img .logo-light{display:none}
[data-theme="dark"] .brand-img .logo-dark{display:block}

.nav{display:flex; gap:0; min-width:0; flex-wrap:nowrap}
.nav a{position:relative; font-family:var(--f-display); font-weight:600; font-size:14px; padding:9px 10px; border-radius:9px; color:var(--ink-soft); transition:color .18s; white-space:nowrap}
.nav a::after{content:""; position:absolute; left:10px; right:10px; bottom:5px; height:2px; border-radius:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .22s ease}
.nav a:hover{color:var(--ink)} .nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--brand-strong)}

.tools{display:flex; align-items:center; gap:6px; padding-left:12px; border-left:1px solid var(--line); flex:none; margin-left:auto}
.icobtn{width:38px; height:38px; display:grid; place-items:center; border-radius:9px; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; transition:.15s}
.icobtn:hover{background:var(--line-soft); color:var(--ink)}
#theme svg{transition:transform .5s ease} #theme:hover svg{transform:rotate(45deg)}

.burger{display:none; position:relative; width:40px; height:40px; border:none; background:transparent; cursor:pointer; border-radius:9px}
.burger span{position:absolute; left:10px; right:10px; height:2px; border-radius:2px; background:var(--ink); transition:transform .32s cubic-bezier(.6,.05,.3,1), opacity .2s ease}
.burger span:nth-child(1){top:13px} .burger span:nth-child(2){top:19px} .burger span:nth-child(3){top:25px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============ SEARCH BAR ============ */
.searchbar{position:sticky; top:66px; z-index:49; background:var(--paper); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .28s ease}
.searchbar.open{max-height:100px}
.searchbar .wrap{display:flex; align-items:center; gap:14px; padding:18px 20px}
.searchbar > .wrap > svg{color:var(--ink-mute); flex:none}
.searchbar input{flex:1; min-width:0; border:none; background:transparent; font-family:var(--f-display); font-size:clamp(18px,2.4vw,24px); font-weight:600; color:var(--ink); outline:none}
.searchbar input::placeholder{color:var(--ink-mute)}
.searchbar .go{font-family:var(--f-display); font-weight:700; font-size:14px; padding:10px 20px; border-radius:10px; background:var(--brand); color:#fff; border:none; cursor:pointer; flex:none; transition:background .15s}
.searchbar .go:hover{background:var(--brand-strong)}
.searchbar .close{background:transparent; border:none; color:var(--ink-soft); cursor:pointer; width:38px; height:38px; display:grid; place-items:center; border-radius:9px; flex:none}
.searchbar .close:hover{background:var(--line-soft); color:var(--ink)}

/* ============ NAV OVERLAY ============ */
.navover{position:fixed; inset:0; z-index:60; background:var(--paper); opacity:0; visibility:hidden; transform:scale(1.03); transition:opacity .34s ease, transform .34s ease, visibility .34s; overflow-y:auto}
.navover.open{opacity:1; visibility:visible; transform:none}

/* Адмінбар WordPress зафіксований зверху (32px, на вузьких екранах 46px).
   Липку шапку зсуваємо на його висоту, інакше вона їде під нього. */
body.admin-bar .mast{top:32px}
body.admin-bar .searchbar{top:98px}
body.admin-bar .navover{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .mast{top:46px}
  body.admin-bar .searchbar{top:112px}
  body.admin-bar .navover{top:46px}
}

.navover-inner{max-width:var(--wrap); margin:0 auto; min-height:100%; padding:100px 22px 40px; display:flex; flex-direction:column}
.navover-clock{font-family:var(--f-mono); font-size:15px; letter-spacing:.04em; color:var(--brand-strong); margin-bottom:22px}
.navover-search{display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--line); padding:14px 0; margin-bottom:26px; color:var(--ink-mute)}
.navover-search input{flex:1; min-width:0; border:none; background:transparent; outline:none; font-family:var(--f-display); font-weight:700; font-size:clamp(20px,6vw,30px); color:var(--ink)}
.navover-search input::placeholder{color:var(--ink-mute)}
.navover nav{display:flex; flex-direction:column}
.navover nav a{display:flex; align-items:baseline; gap:16px; font-family:var(--f-display); font-weight:800; font-size:clamp(28px,8vw,46px); line-height:1.02; letter-spacing:-.025em; color:var(--ink); padding:11px 0; border-bottom:1px solid var(--line-soft); transition:color .15s, padding-left .2s; transform:translateY(24px); opacity:0}
.navover.open nav a{transform:none; opacity:1}
.navover nav a:hover{color:var(--brand-strong); padding-left:10px}
.navover nav a.on{color:var(--brand-strong)}
.navover nav a .idx{flex:none; width:34px; font-family:var(--f-mono); font-weight:500; font-size:13px; color:var(--brand); align-self:center}
.navover.open nav a:nth-child(1){transition-delay:.06s} .navover.open nav a:nth-child(2){transition-delay:.10s}
.navover.open nav a:nth-child(3){transition-delay:.14s} .navover.open nav a:nth-child(4){transition-delay:.18s}
.navover.open nav a:nth-child(5){transition-delay:.22s} .navover.open nav a:nth-child(6){transition-delay:.26s}
.navover.open nav a:nth-child(7){transition-delay:.30s} .navover.open nav a:nth-child(8){transition-delay:.34s}
.navover.open nav a:nth-child(9){transition-delay:.38s} .navover.open nav a:nth-child(10){transition-delay:.42s}
.navover.open nav a:nth-child(11){transition-delay:.46s}
.navover-foot{margin-top:auto; padding-top:24px}

/* ============ WIDGET ICONS (курси / погода) ============ */
.cur-ico{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--brand-tint); color:var(--brand-strong); font-family:var(--f-display); font-weight:700; font-size:14px; line-height:1; flex:none}

/* Список курсів: власна сітка, незалежна від .pop (раніше вони конфліктували
   і текст назви накладався на значення). */
.rates-list{list-style:none; display:flex; flex-direction:column; margin:0; padding:0}
.rates-list li{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line-soft); padding:12px 0; margin:0}
.rates-list li:first-child{border-top:none}
.rate-l{display:flex; align-items:center; gap:10px; min-width:0}
.rate-n{font-family:var(--f-body); font-weight:600; font-size:14px; line-height:1.25; white-space:normal}
.rate-v{font-family:var(--f-mono); font-weight:500; font-size:13.5px; color:var(--ink); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; flex:none}
.dir{font-size:10px; line-height:1}
.dir.up{color:#12a150} .dir.down{color:var(--live)} .dir.flat{color:var(--ink-mute)}

/* Погода. Специфічність .panel.wxcard навмисно вища за .panel — інакше
   .panel{background:var(--raise)} нижче у файлі перебивав градієнт і на
   світлій темі виходив білий текст на білому тлі (нічого не видно). */
.panel.wxcard{background:linear-gradient(150deg,var(--brand),var(--brand-strong)); border:none; color:#fff}
.panel.wxcard .eyebrow{color:#fff}
.panel.wxcard .eyebrow::before{background:#fff}
.panel.wxcard .wxrow{display:flex; align-items:center; gap:12px; color:#fff}
.panel.wxcard .wx-ic{color:#fff}
.panel.wxcard .wx-ic .ico{width:42px; height:42px; display:block}
.panel.wxcard .wxrow .t{font-family:var(--f-display); font-weight:800; font-size:44px; line-height:1; color:#fff}
.panel.wxcard .wxrow .c{margin-left:auto; text-align:right; font-size:13px; opacity:.95; line-height:1.2; color:#fff}
.panel.wxcard .wxstat{display:flex; gap:18px; margin-top:14px; font-family:var(--f-mono); font-size:11.5px; opacity:.95; color:#fff}

/* ============ EYEBROW / SECTION HEAD ============ */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.eyebrow::before{content:""; width:20px; height:3px; background:var(--brand); border-radius:2px}
.eyebrow.live{color:var(--live)} .eyebrow.live::before{background:var(--live)}
.sechead{display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid var(--ink)}
.sechead .more{font-family:var(--f-display); font-weight:700; font-size:13px; color:var(--ink-soft)}
.sechead .more:hover{color:var(--brand-strong)}
.sechead .more span{transition:transform .15s; display:inline-block}
.sechead .more:hover span{transform:translateX(3px)}

/* ============ HOME: HERO ============ */
/* padding-top тримає відступ між шапкою і контентом */
main{padding:40px 0 48px}
.hero{display:grid; grid-template-columns:1.55fr 1fr; gap:var(--gap); margin-bottom:44px; align-items:stretch}
/* Лід — flex-колонка, зображення тягнеться на всю висоту (flex:1).
   Причина темної смуги під фото: у гріді лід розтягувався по висоті правої
   колонки з трьома мінікартками, а зображення мало жорстку пропорцію 16/10 —
   різниця висот і показувала фон карточки. aspect-ratio лишається базовим
   розміром, flex:1 добирає решту висоти. */
.lead{position:relative; display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; background:var(--raise); box-shadow:var(--shadow)}
/* Зображення обгорнуте в <a>, тому тягнемо саме посилання, а .ph всередині
   заповнює його на 100% — інакше flex не діставався до картинки. */
.lead > a{flex:1 1 auto; min-height:0; display:block}
.lead .ph{height:100%; min-height:0; aspect-ratio:16/10; background:linear-gradient(135deg,#334155,#0f172a); line-height:0; font-size:0; overflow:hidden}
.lead .ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lead .body{position:absolute; inset:auto 0 0 0; padding:26px; background:linear-gradient(transparent,rgba(8,10,12,.35) 30%,rgba(8,10,12,.9)); color:#fff}
.tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:6px; background:var(--brand); color:#fff}
.tag.live{background:var(--live)}
.tag.live::before{content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite}
.lead h1,.lead h2{font-family:var(--f-display); font-weight:800; font-size:clamp(26px,3.2vw,40px); line-height:1.08; letter-spacing:-.02em; margin:14px 0 10px}
.lead .meta{font-family:var(--f-mono); font-size:12px; color:#c9ccd0; display:flex; gap:12px}

.hero-side{display:flex; flex-direction:column; gap:var(--gap)}
.mini{display:grid; grid-template-columns:120px 1fr; gap:16px; background:var(--raise); border:1px solid var(--line); border-radius:var(--r); padding:14px; transition:border-color .15s, transform .15s; overflow:hidden}
.mini:hover{border-color:var(--brand); transform:translateY(-2px)}
.mini .ph{aspect-ratio:1; border-radius:9px; background:linear-gradient(135deg,#475569,#1e293b); overflow:hidden}
.mini .ph img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.mini-cat{display:inline-block; font-family:var(--f-display); font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--brand-strong); margin-bottom:5px}
.mini h3{font-family:var(--f-display); font-weight:700; font-size:16px; line-height:1.22; letter-spacing:-.01em}
.mini .meta{font-family:var(--f-mono); font-size:11px; color:var(--ink-mute); margin-top:8px}

/* ============ LAYOUT: content + rail ============ */
.cols{display:grid; grid-template-columns:1fr 336px; gap:44px; align-items:start}
.band{margin-bottom:40px}
.band-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:26px}
.bcard .ph{aspect-ratio:16/9; border-radius:var(--r); background:linear-gradient(135deg,#3f4b5b,#161d29); overflow:hidden}
.bcard .ph img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.bcard .tag{margin:14px 0 0}
.bcard h3{font-family:var(--f-display); font-weight:700; font-size:21px; line-height:1.18; letter-spacing:-.015em; margin:10px 0 8px}
.bcard h3 a{background-image:linear-gradient(var(--brand),var(--brand)); background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .25s}
.bcard:hover h3 a{background-size:100% 2px}
.bcard p{color:var(--ink-soft); font-size:14.5px}

.hlist{list-style:none; display:flex; flex-direction:column}
.hlist li{padding:16px 0; border-top:1px solid var(--line)}
.hlist li:first-child{border-top:none; padding-top:0}
.hlist h4{font-family:var(--f-display); font-weight:600; font-size:16px; line-height:1.28; letter-spacing:-.01em; transition:color .15s}
.hlist li:hover h4{color:var(--brand-strong)}
.hlist .meta{font-family:var(--f-mono); font-size:11px; color:var(--ink-mute); margin-top:7px; display:flex; gap:10px; align-items:center}
.hlist .meta .c{color:var(--brand-strong); font-weight:500}

/* ============ RAIL ============ */
.rail{display:flex; flex-direction:column; gap:26px}
.panel{background:var(--raise); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.panel > .eyebrow{margin-bottom:16px; display:flex}
.pop{list-style:none; display:flex; flex-direction:column}
.pop li{display:grid; grid-template-columns:30px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line-soft)}
.pop li:first-child{border-top:none}
.pop .num{font-family:var(--f-mono); font-weight:700; font-size:15px; color:var(--brand); line-height:1.3}
.pop h5{font-family:var(--f-display); font-weight:600; font-size:14.5px; line-height:1.3; letter-spacing:-.01em; transition:color .15s}
.pop li:hover h5{color:var(--brand-strong)}
.pop .meta{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-mute); margin-top:5px}

/* ============ ARTICLE ============ */
/* Повноширинний герой. Full-bleed через 100vw: працює всередині .wrap,
   тому не треба чіпати <main>. calc(50% - 50vw) зсуває блок так, щоб він
   починався від лівого краю вікна незалежно від ширини контейнера. */
.art-hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:-40px;            /* компенсуємо верхній padding <main> */
  margin-bottom:28px;
  background:#0b0e11;
  overflow:hidden;
  line-height:0;               /* прибирає паразитну смугу під зображенням */
}
.art-hero-media{position:relative; width:100%; height:clamp(340px, 58vh, 640px)}
.art-hero-media img{width:100%; height:100%; object-fit:cover; display:block}
.art-hero-body{
  position:absolute; inset:auto 0 0 0;
  display:flex; align-items:flex-end;
  padding-top:clamp(80px,16vh,220px);
  padding-bottom:clamp(22px,3.4vw,44px);
  background:linear-gradient(to top, rgba(6,8,10,.94) 0%, rgba(6,8,10,.75) 34%, rgba(6,8,10,.3) 66%, transparent 100%);
  color:#fff; line-height:1.5;
}
.art-hero-inner{max-width:var(--wrap); width:100%; margin:0 auto; padding:0 20px}
.art-hero-body .tag{background:var(--brand); color:#fff; margin-bottom:14px}
.art-hero-body h1{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(26px,3.6vw,52px); line-height:1.05; letter-spacing:-.03em;
  color:#fff; max-width:24ch; text-wrap:balance;
}
.art-hero-meta{display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-family:var(--f-mono); font-size:12.5px; color:#cfd4d8}
.art-hero-meta time{color:var(--brand); font-weight:500}

.crumbs{font-family:var(--f-mono); font-size:12px; color:var(--ink-mute); display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px}
.crumbs a:hover{color:var(--brand-strong)} .crumbs .sep{opacity:.5}

.progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--brand); z-index:80; transition:width .1s linear}

.art-head .cat{display:inline-flex; font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:6px; background:var(--brand); color:#fff}
.art-head h1{font-family:var(--f-display); font-weight:800; font-size:clamp(28px,4.2vw,44px); line-height:1.1; letter-spacing:-.02em; margin:14px 0 12px}
.byline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.byline .av{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-strong)); flex:none; overflow:hidden}
.byline .av img{width:100%; height:100%; object-fit:cover}
.byline .who{font-family:var(--f-display); font-weight:700; font-size:14px}
.byline .m{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-mute); display:flex; gap:10px; flex-wrap:wrap; margin-top:2px}
.share{display:flex; gap:8px; margin-left:auto}
.share a{width:38px; height:38px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); color:var(--ink-soft); transition:.15s}
.share a:hover,.share button:hover{color:#fff; transform:translateY(-2px)}
/* Фірмові кольори кожної мережі на ховері */
.share .s-tg:hover{background:#229ED9; border-color:#229ED9}
.share .s-fb:hover{background:#1877F2; border-color:#1877F2}
.share .s-x:hover{background:#000; border-color:#000}
.share .s-vb:hover{background:#7360F2; border-color:#7360F2}
.share .s-copy:hover{background:var(--brand); border-color:var(--brand)}
/* Кнопка копіювання: та сама геометрія, що й посилання */
.share button.s-copy{width:38px; height:38px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; transition:.15s; padding:0}
/* Стан «скопійовано» */
.share .s-copy.done{background:#12a150; border-color:#12a150; color:#fff}
/* Підказка про копіювання — спливає знизу екрана поверх контенту.
   Раніше вона стояла в потоці й розсувала ряд кнопок. */
.copied-hint{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,16px);
  background:var(--ink); color:var(--paper);
  font-family:var(--f-body); font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:12px; white-space:nowrap;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; z-index:120;
  transition:opacity .25s ease, transform .25s ease;
}
.copied-hint.show{opacity:1; transform:translate(-50%,0)}

.figure-hero{margin:22px 0 8px}
.figure-hero .ph{aspect-ratio:16/9; border-radius:var(--r); background:linear-gradient(135deg,#3f4b5b,#161d29); overflow:hidden}
.figure-hero .ph img{width:100%; height:100%; object-fit:cover}
.figure-hero figcaption{font-family:var(--f-mono); font-size:12px; color:var(--ink-mute); margin-top:9px}

.prose{max-width:730px; font-size:18px; line-height:1.75; color:var(--ink); margin-top:26px}
.prose p{margin:0 0 20px}
.prose h2{font-family:var(--f-display); font-weight:800; font-size:26px; line-height:1.22; letter-spacing:-.018em; margin:40px 0 14px}
.prose h3{font-family:var(--f-display); font-weight:700; font-size:20px; margin:28px 0 10px}
.prose ul,.prose ol{margin:0 0 20px; padding-left:22px}
.prose li{margin:0 0 10px}
.prose li::marker{color:var(--brand)}
.prose a{color:var(--brand-strong); background-image:linear-gradient(var(--brand),var(--brand)); background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%}
.prose a:hover{background-size:100% 2px}
.prose blockquote{margin:28px 0; padding:4px 0 4px 22px; border-left:3px solid var(--brand); font-family:var(--f-display); font-weight:600; font-size:22px; line-height:1.42; color:var(--ink)}
.prose figure{margin:28px 0}
.prose figure img{border-radius:12px}
.prose figcaption{font-family:var(--f-mono); font-size:12px; color:var(--ink-mute); margin-top:9px}
.prose img{border-radius:12px}

.tags{display:flex; flex-wrap:wrap; gap:8px; margin:34px 0}
.tags a{font-family:var(--f-mono); font-size:12px; color:var(--ink-soft); background:var(--line-soft); padding:6px 12px; border-radius:20px; transition:.15s}
.tags a:hover{background:var(--brand-tint); color:var(--brand-strong)}

.related{margin-top:48px}
.related .sechead{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--ink)}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.rcard .ph{aspect-ratio:16/10; border-radius:var(--r); background:linear-gradient(135deg,#3f4b5b,#161d29); overflow:hidden}
.rcard .ph img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.rcard:hover .ph img{transform:scale(1.05)}
.rcard .cat{display:inline-block; font-family:var(--f-display); font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--brand-strong); margin:12px 0 6px}
.rcard h3{font-family:var(--f-display); font-weight:700; font-size:18px; line-height:1.22; letter-spacing:-.01em; transition:color .15s}
.rcard:hover h3{color:var(--brand-strong)}
.rcard .meta{font-family:var(--f-mono); font-size:11px; color:var(--ink-mute); margin-top:8px}

.adslot{border:1px dashed var(--line); border-radius:var(--r); min-height:250px; display:grid; place-items:center; color:var(--ink-mute); font-family:var(--f-mono); font-size:12px}

/* ============ CATEGORY ARCHIVE ============ */
.cat-head{margin-bottom:30px; padding-bottom:22px; border-bottom:2px solid var(--ink)}
.cat-head h1{font-family:var(--f-display); font-weight:900; font-size:clamp(34px,6vw,58px); line-height:1; letter-spacing:-.03em; margin:0 0 12px}
.cat-head p{font-size:16px; color:var(--ink-soft); max-width:720px}
.cat-head .count{font-family:var(--f-mono); font-size:12px; color:var(--ink-mute); margin-top:14px}

.cat-lead{display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:center; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid var(--line)}
.cat-lead .ph{aspect-ratio:16/10; border-radius:var(--r); background:linear-gradient(135deg,#3f4b5b,#161d29); overflow:hidden}
.cat-lead .ph img{width:100%; height:100%; object-fit:cover}
.cat-lead h2{font-family:var(--f-display); font-weight:800; font-size:clamp(22px,2.6vw,30px); line-height:1.14; letter-spacing:-.02em; margin-bottom:10px}
.cat-lead h2 a:hover{color:var(--brand-strong)}
.cat-lead p{font-size:15px; color:var(--ink-soft); margin-bottom:12px}
.cat-lead .meta{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-mute); display:flex; gap:12px}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.acard .ph{aspect-ratio:16/9; border-radius:var(--r); background:linear-gradient(135deg,#3f4b5b,#161d29); overflow:hidden}
.acard .ph img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.acard:hover .ph img{transform:scale(1.05)}
.acard h3{font-family:var(--f-display); font-weight:700; font-size:19px; line-height:1.22; letter-spacing:-.012em; margin:12px 0 8px; transition:color .15s}
.acard:hover h3{color:var(--brand-strong)}
.acard p{font-size:14px; color:var(--ink-soft); margin-bottom:10px}
.acard .meta{font-family:var(--f-mono); font-size:11px; color:var(--ink-mute); display:flex; gap:12px}

.pager{display:flex; gap:6px; justify-content:center; margin-top:38px; flex-wrap:wrap}
.pager a,.pager span{min-width:40px; height:40px; padding:0 8px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); font-family:var(--f-mono); font-size:14px; color:var(--ink-soft); transition:.15s}
.pager a:hover{border-color:var(--brand); color:var(--brand-strong)}
.pager .cur,.pager .current{background:var(--brand); border-color:var(--brand); color:#fff}
.pager .dots{border:none; color:var(--ink-mute)}

/* ============ 404 ============ */
.err{max-width:640px; margin:0 auto; text-align:center}
.err .code{font-family:var(--f-mono); font-weight:500; font-size:15px; letter-spacing:.1em; color:var(--brand-strong); display:inline-flex; align-items:center; gap:10px}
.err .code::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--live)}
.err h1{font-family:var(--f-display); font-weight:900; font-size:clamp(70px,14vw,128px); line-height:.9; letter-spacing:-.04em; margin:14px 0 6px; background:linear-gradient(135deg,var(--ink),var(--ink-mute)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.err h2{font-family:var(--f-display); font-weight:800; font-size:clamp(20px,3vw,28px); letter-spacing:-.015em; margin-bottom:10px}
.err p{font-size:16px; color:var(--ink-soft); max-width:46ch; margin:0 auto}
.err-search{display:flex; align-items:center; gap:12px; max-width:520px; margin:32px auto 0; padding:6px 6px 6px 20px; border:2px solid var(--line); border-radius:16px; background:var(--raise); transition:border-color .2s}
.err-search:focus-within{border-color:var(--brand)}
.err-search svg{color:var(--ink-mute); flex:none}
.err-search input{flex:1; min-width:0; border:none; background:transparent; outline:none; font-family:var(--f-display); font-size:16px; font-weight:600; color:var(--ink); padding:10px 0}
.err-search input::placeholder{color:var(--ink-mute); font-weight:500}
.err-search button{font-family:var(--f-display); font-weight:700; font-size:14px; padding:12px 22px; border-radius:11px; background:var(--brand); color:#fff; border:none; cursor:pointer; transition:background .15s}
.err-search button:hover{background:var(--brand-strong)}
.err-home{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:var(--f-display); font-weight:700; font-size:14px; color:var(--ink-soft); transition:color .15s}
.err-home:hover{color:var(--brand-strong)}
.err-home svg{transition:transform .2s ease}
.err-home:hover svg{transform:translateX(-3px)}
.quicklinks{max-width:900px; margin:56px auto 0}
.quicklinks .eyebrow{display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:18px}
.qgrid{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.qgrid a{font-family:var(--f-display); font-weight:600; font-size:14px; padding:11px 18px; border-radius:11px; border:1px solid var(--line); background:var(--raise); color:var(--ink-soft); transition:.18s}
.qgrid a:hover{border-color:var(--brand); color:var(--brand-strong); transform:translateY(-2px); box-shadow:var(--shadow)}
.fresh{max-width:1000px; margin:56px auto 0}
.fresh .sechead{display:flex; align-items:center; justify-content:center; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--ink)}
.fgrid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.fcard .ph{aspect-ratio:16/10; border-radius:var(--r); background:linear-gradient(135deg,#3f4b5b,#161d29); overflow:hidden}
.fcard .ph img{width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fcard:hover .ph img{transform:scale(1.05)}
.fcard .cat{display:inline-block; font-family:var(--f-display); font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--brand-strong); margin:12px 0 6px}
.fcard h3{font-family:var(--f-display); font-weight:700; font-size:16px; line-height:1.25; letter-spacing:-.01em; transition:color .15s}
.fcard:hover h3{color:var(--brand-strong)}
.fcard .meta{font-family:var(--f-mono); font-size:11px; color:var(--ink-mute); margin-top:8px}

/* ============ STATIC PAGES ============ */
.page-head{max-width:760px; margin-bottom:30px}
.page-head h1{font-family:var(--f-display); font-weight:900; font-size:clamp(30px,4.6vw,44px); line-height:1.06; letter-spacing:-.03em; margin-bottom:10px}
.page-head p{font-size:17px; color:var(--ink-soft); line-height:1.6}
.page-head .upd{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-mute)}

.pcols{display:grid; grid-template-columns:1fr 336px; gap:44px; align-items:start}
.page-prose{max-width:730px; font-size:17px; line-height:1.75}
.page-prose h2{font-family:var(--f-display); font-weight:800; font-size:24px; line-height:1.24; letter-spacing:-.015em; margin:38px 0 14px}
.page-prose h2:first-child{margin-top:0}
.page-prose p{margin:0 0 18px; color:var(--ink)}
.page-prose ul{margin:0 0 18px; padding-left:22px}
.page-prose li{margin:0 0 9px; color:var(--ink)}
.page-prose li::marker{color:var(--brand)}
.page-prose strong{font-weight:700}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0 8px}
.stat{background:var(--raise); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.stat b{display:block; font-family:var(--f-display); font-weight:800; font-size:26px; color:var(--brand-strong); letter-spacing:-.02em}
.stat span{font-size:12.5px; color:var(--ink-mute)}

.contacts{display:flex; flex-direction:column; gap:14px}
.ccard{display:flex; gap:14px; align-items:flex-start; background:var(--raise); border:1px solid var(--line); border-radius:var(--r); padding:18px; transition:border-color .18s, transform .18s}
.ccard:hover{border-color:var(--brand); transform:translateY(-2px)}
.ccard .ic{flex:none; width:42px; height:42px; border-radius:11px; background:var(--brand-tint); color:var(--brand-strong); display:grid; place-items:center}
.ccard h5{font-family:var(--f-display); font-weight:700; font-size:14px; margin-bottom:3px}
.ccard a.val,.ccard .val{font-family:var(--f-mono); font-size:13.5px; color:var(--ink-soft); word-break:break-word}
.ccard a.val:hover{color:var(--brand-strong)}
.ccard .note{font-size:12px; color:var(--ink-mute); margin-top:4px}

.legal{display:grid; grid-template-columns:260px 1fr; gap:44px; align-items:start}
.toc{position:sticky; top:82px; display:flex; flex-direction:column; gap:2px}
.toc a{font-family:var(--f-body); font-weight:600; font-size:13.5px; color:var(--ink-soft); padding:8px 0; border-left:2px solid var(--line); padding-left:14px; transition:color .15s, border-color .15s}
.toc a:hover{color:var(--brand-strong); border-color:var(--brand)}
.legal-prose{max-width:730px; font-size:16px; line-height:1.7}
.legal-prose section,.legal-prose h2{scroll-margin-top:96px}
.legal-prose h2{font-family:var(--f-display); font-weight:800; font-size:21px; line-height:1.28; letter-spacing:-.012em; margin:34px 0 12px}
.legal-prose h2:first-child{margin-top:0}
.legal-prose p{margin:0 0 14px; color:var(--ink)}
.legal-prose ul{margin:0 0 14px; padding-left:22px}
.legal-prose li{margin:0 0 8px; color:var(--ink)}
.legal-prose li::marker{color:var(--brand)}
.legal-prose a.inline{color:var(--brand-strong); background-image:linear-gradient(var(--brand),var(--brand)); background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%}

/* ============ FOOTER ============ */
footer{background:var(--paper); border-top:1px solid var(--line); padding:44px 0 32px; margin-top:20px}
.fgrid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px}
.fcol h6{font-family:var(--f-display); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px}
.fcol a{display:block; padding:5px 0; font-size:14px; color:var(--ink-soft)}
.fcol a:hover{color:var(--brand-strong)}
.fabout p{font-size:13.5px; color:var(--ink-soft); margin-top:12px; max-width:34ch}
.fbot{margin-top:32px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-mute); flex-wrap:wrap; gap:10px}

/* ============ ANIMATIONS / REVEAL ============ */
/* Перехід оголошено прямо в правилах .lead/.mini/.bcard .ph img вище —
   в одному блоці з самим зображенням, як у .acard. Так надійніше:
   якщо CSS обробляє мініфікатор, окреме правило легше загубити. */
.lead:hover .ph img{transform:scale(1.04)}
.bcard:hover .ph img{transform:scale(1.05)}
.mini{overflow:hidden}
.mini:hover .ph img{transform:scale(1.06)}
#search-btn svg{transition:transform .2s ease}
#search-btn:hover svg{transform:scale(1.1)}

.js .hero .lead,.js .hero .mini,.js .band,.js .rail .panel,
.js .figure-hero,.js .rel-grid .rcard,
.js .cat-lead,.js .grid .acard,
.js .err,.js .qgrid a,.js .fresh .fcard{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.js .hero .mini:nth-child(2){transition-delay:.05s}
.js .hero .mini:nth-child(3){transition-delay:.1s}
.js .in{opacity:1 !important; transform:none !important}

/* ============ RESPONSIVE ============ */
@media (min-width:961px){
  .rail{position:sticky; top:82px; align-self:start}
}
/* Слоган поруч з логотипом ховаємо раніше, ніж усе меню, —
   так навігація довше вміщується в один рядок. */
@media (max-width:1320px){
  .nav a{padding:9px 8px; font-size:13.5px}
  .nav a::after{left:8px; right:8px}
}
/* Нижче цієї ширини 11 пунктів меню фізично не вміщуються —
   перемикаємось на бургер, щоб контент не вилазив за контейнер. */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
}
@media (max-width:960px){
  .nav{display:none}
  .burger{display:block}
  .hero{grid-template-columns:1fr}
  .cols,.pcols{grid-template-columns:1fr; gap:32px}
  .rail{position:static}
  .band-grid{grid-template-columns:1fr}
  .cat-lead{grid-template-columns:1fr}
  .rel-grid,.fgrid3{grid-template-columns:1fr 1fr}
  .legal{grid-template-columns:1fr; gap:26px}
  .toc{position:static; flex-direction:row; flex-wrap:wrap; gap:8px}
  .toc a{border-left:none; border-bottom:2px solid var(--line); padding:6px 2px}
  .fgrid{grid-template-columns:1fr 1fr; gap:24px}
  .fabout{grid-column:1/-1}
}
@media (max-width:700px){
  .ubar .ticker,.ubar .live-badge{display:none}
  .ubar .wrap{justify-content:flex-start; gap:0}
  /* Логотип може бути ширшим (завантажена картинка) — дозволяємо йому
     стискатись, але кнопки праворуч не віддаємо: flex:none на .tools. */
  .mast .wrap{gap:10px}
  .brand{font-size:23px; overflow:hidden}
  .tools{padding-left:8px; gap:2px}
  .art-hero-media{height:clamp(300px, 54vh, 460px)}
  .art-hero-body{padding-top:clamp(60px,20vh,150px);
    background:linear-gradient(to top, rgba(6,8,10,.95) 0%, rgba(6,8,10,.8) 40%, rgba(6,8,10,.32) 72%, transparent 100%)}
  .art-hero-body h1{max-width:none; font-size:clamp(24px,6.2vw,34px)}
  .art-hero-meta{gap:12px; font-size:11.5px; margin-top:12px}
}
@media (max-width:560px){
  .mini{grid-template-columns:96px 1fr}
  .grid,.rel-grid,.fgrid3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  main{padding:28px 0 36px}
  .prose{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .js .hero .lead,.js .hero .mini,.js .band,.js .rail .panel,
  .js .figure-hero,.js .rel-grid .rcard,.js .cat-lead,.js .grid .acard,
  .js .err,.js .qgrid a,.js .fresh .fcard,.navover nav a{opacity:1 !important; transform:none !important}
}

@media print{
  .ubar,.mast,.searchbar,.navover,.rail,footer,.progress,.share{display:none !important}
}