/*
Theme Name: Velocity News
Theme URI: https://trauto.ru
Author: trauto.ru
Description: Классическая новостная тема-газета: крупные конденс-заголовки, красный акцент, бегущая строка, hero-блок, лента и сайдбар. Адаптивная.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: velocity
*/

:root{
  --ink:#14161a; --ink-2:#3a3f47; --mute:#7c828c;
  --line:#e6e8ec; --line-2:#d3d7dd; --bg:#ffffff; --bg-2:#f5f6f8;
  --red:#d7263d; --red-dk:#a71028;
  --wrap:1200px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Roboto',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.12;margin:0;letter-spacing:.01em}

/* placeholder visual */
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:100%;
  background:linear-gradient(135deg,var(--c),#111 180%);position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 22px)}
.ph b{font-family:'Oswald',sans-serif;font-size:clamp(2.4rem,7vw,5rem);color:#fff;opacity:.92;z-index:1}

/* topbar */
.topbar{background:var(--ink);color:#c9ced6;font-size:.8rem}
.tb{display:flex;justify-content:space-between;align-items:center;height:40px;text-transform:capitalize}
.tb-links a{margin-left:18px;color:#c9ced6}
.tb-links a:hover{color:#fff}

/* masthead */
.masthead{border-bottom:3px solid var(--ink)}
.mh{display:flex;align-items:center;gap:20px;padding:26px 24px}
.brand{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.01em;text-transform:uppercase}
.brand i{color:var(--red);font-style:normal}
.mh .tagline{color:var(--mute);font-size:.9rem;border-left:1px solid var(--line-2);padding-left:20px;margin:0;flex:1}
.mh-cta{background:var(--red);color:#fff;font-weight:700;font-size:.85rem;padding:11px 20px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em}
.mh-cta:hover{background:var(--red-dk)}

/* nav */
.mainnav{background:var(--ink);position:sticky;top:0;z-index:50}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.nav-list li a{display:block;color:#fff;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;font-size:.86rem;letter-spacing:.04em;padding:14px 16px}
.nav-list li a:hover{background:var(--red)}
.nav-home a{background:var(--red)}

/* ticker */
.ticker{background:var(--bg-2);border-bottom:1px solid var(--line)}
.tk{display:flex;align-items:center;gap:0;height:46px;overflow:hidden}
.tk-label{background:var(--red);color:#fff;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em;padding:6px 16px;white-space:nowrap;position:relative}
.tk-label::after{content:"";position:absolute;right:-10px;top:0;border:23px solid transparent;border-left-color:var(--red);border-right:0}
.tk-track{display:flex;align-items:center;gap:0;white-space:nowrap;overflow:hidden;padding-left:26px;font-size:.9rem}
.tk-track a{color:var(--ink-2);font-weight:500}.tk-track a:hover{color:var(--red)}
.tk-track i{color:var(--line-2);margin:0 14px;font-style:normal;font-size:.6rem}

/* hero grid */
.hero-grid{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:1fr;gap:2px;margin-top:28px}
.hero-card{position:relative;overflow:hidden;background:#000;min-height:210px}
.hero-card.lead{grid-row:span 2;min-height:432px}
.hero-card .thumb{position:absolute;inset:0}
.hero-card .thumb img,.hero-card .thumb .ph{width:100%;height:100%;object-fit:cover}
.hero-card .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,15,.92) 8%,rgba(10,12,15,.15) 60%,transparent)}
.hc-body{position:absolute;left:0;bottom:0;padding:22px 24px;z-index:2}
.hero-card.lead .hc-body{padding:30px}
.chip{display:inline-block;background:var(--c,var(--red));color:#fff;font-family:'Oswald',sans-serif;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:4px 11px;border-radius:2px;margin-bottom:10px}
.hc-body h2{color:#fff}
.hero-card.lead h2{font-size:clamp(1.6rem,2.6vw,2.5rem)}
.hero-card.sub h2{font-size:1.15rem}
.hc-body p{color:#d8dbe0;font-size:.98rem;margin:.5em 0 0;max-width:44ch}
.hc-body .meta{color:#aeb3bb;font-size:.78rem;margin-top:10px;font-family:'Roboto Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.hc-body a{color:inherit}.hc-body h2 a:hover{color:#fff;opacity:.85}

/* layout */
.layout{display:grid;grid-template-columns:1fr 330px;gap:44px;margin:44px auto}
.section-title{position:relative;margin:0 0 22px;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;border-bottom:2px solid var(--ink)}
.section-title span{display:inline-block;background:var(--red);color:#fff;padding:7px 16px}

/* post list */
.pl-item{display:grid;grid-template-columns:230px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}
.pl-item:first-child{padding-top:0}
.pl-item .thumb{aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#111}
.pl-item .thumb img,.pl-item .thumb .ph{width:100%;height:100%;object-fit:cover}
.pl-body h2{font-size:1.4rem;margin:.35em 0 .3em}
.pl-body h2 a:hover{color:var(--red)}
.pl-body p{color:var(--ink-2);margin:0;font-size:.96rem}
.pl-body .meta{color:var(--mute);font-size:.78rem;margin-top:12px;font-family:'Roboto Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.noposts{color:var(--mute)}

/* pagination */
.pagination{margin-top:30px;display:flex;gap:6px;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line-2);font-family:'Oswald',sans-serif;font-weight:500}
.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination a.page-numbers:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* sidebar */
.widget{margin-bottom:34px}
.widget h4{font-size:1.15rem;text-transform:uppercase;border-left:5px solid var(--red);padding-left:12px;margin-bottom:16px}
.pop{list-style:none;counter-reset:p;margin:0;padding:0}
.pop li{counter-increment:p;display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.pop li::before{content:counter(p);font-family:'Oswald',sans-serif;font-weight:700;font-size:1.5rem;color:var(--line-2);line-height:1}
.pop li a{font-weight:500;display:block}.pop li a:hover{color:var(--red)}
.pop li span{display:block;color:var(--mute);font-size:.75rem;margin-top:3px}
.cats{list-style:none;margin:0;padding:0}
.cats li{border-bottom:1px solid var(--line)}
.cats li a{display:inline-block;padding:11px 0;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;font-size:.9rem}
.cats li a:hover{color:var(--red)}
.widget.cta{background:var(--ink);color:#fff;padding:26px;border-radius:6px}
.widget.cta h4{color:#fff;border-color:var(--red)}
.widget.cta p{color:#b9bec6;font-size:.9rem;margin:.4em 0 16px}
.sub-form{display:flex;flex-direction:column;gap:9px}
.sub-form input{padding:12px 14px;border:0;border-radius:4px;font-size:.92rem}
.sub-form button{background:var(--red);color:#fff;border:0;padding:12px;border-radius:4px;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.sub-form button:hover{background:var(--red-dk)}

/* single */
.single-head{max-width:820px;margin-top:40px;text-align:center}
.single-head h1{font-size:clamp(2rem,4.4vw,3.2rem);margin:.25em auto;max-width:16ch}
.single-head .chip{margin:0 auto}
.single-head .meta{color:var(--mute);font-size:.85rem;font-family:'Roboto Condensed',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.single-hero{max-width:1000px;margin:30px auto 0;aspect-ratio:16/8;overflow:hidden;border-radius:8px;background:#111}
.single-hero img,.single-hero .ph{width:100%;height:100%;object-fit:cover}
.single-body{max-width:760px;margin:36px auto}
.content{font-size:1.12rem;line-height:1.8;color:#23262b}
.content p{margin:0 0 1.3em}
.content h2,.content h3{margin:1.6em 0 .5em}
.content a{color:var(--red);text-decoration:underline}
.content blockquote{border-left:4px solid var(--red);margin:1.5em 0;padding:.4em 0 .4em 22px;font-size:1.25rem;font-style:italic;color:var(--ink)}
.content img{border-radius:8px;margin:1.5em 0}
.tags{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.tags a{display:inline-block;background:var(--bg-2);padding:5px 12px;border-radius:3px;font-size:.8rem;margin:0 6px 6px 0;color:var(--ink-2)}

/* related */
.related{margin:20px auto 60px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rel-card .thumb{aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#111;margin-bottom:12px}
.rel-card .thumb img,.rel-card .thumb .ph{width:100%;height:100%;object-fit:cover}
.rel-card h3{font-size:1.15rem;margin-top:8px}.rel-card h3 a:hover{color:var(--red)}

/* footer */
.site-footer{background:var(--ink);color:#aeb3bb;margin-top:50px}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:48px 24px}
.ft-brand{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.8rem;color:#fff;text-transform:uppercase}
.ft-brand i{color:var(--red);font-style:normal}
.ft-about p{margin:.6em 0 0;max-width:40ch;font-size:.9rem}
.ft-col h5{color:#fff;font-size:1rem;text-transform:uppercase;margin:0 0 14px}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col li{padding:6px 0}
.ft-col li a:hover{color:#fff}
.ft-bottom{border-top:1px solid #262a30;font-size:.82rem;padding:18px 0}
.ft-bottom .wrap{color:#7c828c}

@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-card.lead{grid-row:auto;min-height:300px}
  .mh .tagline{display:none}
}
@media(max-width:640px){
  .pl-item{grid-template-columns:1fr}
  .pl-item .thumb{aspect-ratio:16/9}
  .rel-grid{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr;gap:28px}
  .mh{flex-wrap:wrap}
  .mh-cta{margin-left:auto}
}