/* ==========================================================================
   SMASH Blog — стили страницы блога и шаблона статьи
   Наследует токены из colors_and_type.css и утилиты из landing/site.css
   (.container, .display, .subhead, .mini-label, .reveal, .nav, footer.ink)
   ========================================================================== */

/* site.css ставит html/body overflow-x:hidden ради лендинга — это делает body
   скролл-контейнером и ломает position:sticky у панели фильтров. На страницах
   блога горизонтального выноса нет, поэтому возвращаем visible. */
html,body{overflow-x:visible;overflow-y:visible}

/* ── Nav для подстраниц ─────────────────────────────────────────────────── */
.nav.subpage{position:relative;padding:32px 40px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav.subpage .smash-logo{font-size:28px;color:var(--off-white);overflow:visible;text-decoration:none}
.nav-links{display:flex;align-items:center;gap:28px;font-family:var(--font-body);font-size:14px;letter-spacing:0}
.nav-links a{color:rgba(250,250,247,0.62);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:color var(--dur-micro) var(--ease-standard),border-color var(--dur-micro) var(--ease-standard)}
.nav-links a:hover{color:var(--off-white)}
.nav-links a.active{color:var(--ball-yellow);border-bottom-color:var(--ball-yellow)}
.nav-cta-pill{display:inline-flex;align-items:center;gap:8px;background:var(--ball-yellow);color:var(--yellow-ink);border-radius:var(--r-full);padding:10px 18px;font-family:var(--font-body);font-size:14px;font-weight:500;text-decoration:none;transition:background var(--dur-micro) var(--ease-standard)}
.nav-cta-pill:hover{background:var(--yellow-700);color:var(--yellow-ink)}
@media(max-width:720px){.nav.subpage{padding:24px 20px 16px;flex-wrap:wrap;gap:16px}.nav-links{gap:20px;font-size:13px}}

/* ── Тёмный герой ───────────────────────────────────────────────────────── */
.blog-hero{background:var(--court-green);color:var(--off-white);position:relative;overflow:hidden;padding:0}
.blog-hero-body{padding:56px 0 72px;max-width:820px}
.blog-hero .display{color:var(--off-white)}
/* colors_and_type.css задаёт h1.display{font-weight:700} — сбиваем до 500, как все заголовки. */
.blog-hero h1.display{font-weight:500}
.blog-hero .subhead{color:var(--green-200);max-width:620px;margin-top:24px}
.blog-hero-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:36px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em;color:rgba(250,250,247,0.7)}
.blog-hero-meta span{display:inline-flex;align-items:center;gap:8px}
.blog-hero-meta b{color:var(--ball-yellow);font-weight:400}
@media(max-width:860px){.blog-hero-body{padding:36px 0 48px}}

/* ── Панель управления ──────────────────────────────────────────────────── */
.blog-controls{position:sticky;top:0;z-index:20;background:rgba(250,250,247,0.94);backdrop-filter:none;border-bottom:1px solid var(--mist);transition:box-shadow var(--dur-base) var(--ease-standard)}
.blog-controls.stuck{box-shadow:0 1px 2px rgba(15,15,15,0.05)}
.controls-row{display:flex;align-items:center;gap:20px;padding:16px 0;flex-wrap:wrap}
.search-wrap{position:relative;flex:0 0 260px;display:flex;align-items:center}
.search-wrap svg{position:absolute;left:14px;color:var(--stone);pointer-events:none}
.search-input{width:100%;font-family:var(--font-body);font-size:14px;color:var(--deep-ink);background:var(--off-white);border:1px solid var(--mist);border-radius:var(--r-full);padding:10px 38px 10px 40px;outline:none;transition:border-color var(--dur-micro) var(--ease-standard)}
.search-input::placeholder{color:var(--stone)}
.search-input:focus{border-color:var(--court-green)}
.search-clear{position:absolute;right:12px;background:none;border:0;padding:2px;color:var(--stone);cursor:pointer;display:flex;line-height:0}
.search-clear:hover{color:var(--deep-ink)}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.chip{font-family:var(--font-body);font-size:13px;font-weight:400;letter-spacing:0;color:var(--slate);background:transparent;border:1px solid var(--mist);border-radius:var(--r-full);padding:7px 15px;cursor:pointer;transition:background var(--dur-micro) var(--ease-standard),border-color var(--dur-micro) var(--ease-standard),color var(--dur-micro) var(--ease-standard)}
.chip:hover{background:var(--green-100);border-color:var(--green-100);color:var(--court-green)}
.chip.on{background:var(--court-green);border-color:var(--court-green);color:var(--off-white)}
.chip.on:hover{background:var(--green-400);border-color:var(--green-400);color:var(--off-white)}
.chip .n{font-family:var(--font-mono);font-size:11px;opacity:0.55;margin-left:6px}
.sort-toggle{display:flex;border:1px solid var(--mist);border-radius:var(--r-full);overflow:hidden;flex:0 0 auto}
.sort-toggle button{font-family:var(--font-body);font-size:13px;color:var(--slate);background:transparent;border:0;padding:7px 15px;cursor:pointer;transition:background var(--dur-micro) var(--ease-standard),color var(--dur-micro) var(--ease-standard)}
.sort-toggle button+button{border-left:1px solid var(--mist)}
.sort-toggle button:hover{background:var(--green-100);color:var(--court-green)}
.sort-toggle button.on{background:var(--cream);color:var(--deep-ink);font-weight:500}
@media(max-width:720px){.controls-row{gap:14px}.search-wrap{flex:1 1 100%}.sort-toggle{flex:1 1 100%}.sort-toggle button{flex:1}}

/* ── Лента ──────────────────────────────────────────────────────────────── */
.feed{padding:56px 0 88px;background:var(--off-white)}
.feed-count{font-family:var(--font-mono);font-size:12px;color:var(--stone);letter-spacing:0.02em;margin-bottom:24px}

/* Закреплённый пост: фото слева, текст справа */
/* Закреплённый пост: креатив слева (квадрат 1:1, как в соцсетях), текст справа */
.featured{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1fr);gap:0;border:1px solid var(--mist);border-radius:var(--r-card);background:var(--off-white);text-decoration:none;color:inherit;transition:background var(--dur-base) var(--ease-standard);margin-bottom:56px}
.featured:hover{background:var(--green-100);color:inherit}
.featured-media{position:relative;aspect-ratio:1;max-height:440px;background:var(--cream);overflow:hidden;border-radius:var(--r-card) 0 0 var(--r-card)}
.featured-media>.cover-img,.featured-media>.cover-graphic{position:absolute;inset:0;width:100%;height:100%}
.featured-body{padding:40px 44px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.featured-title{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3vw,42px);line-height:1.06;letter-spacing:-0.03em;color:var(--deep-ink);margin:0;text-wrap:pretty}
.featured-excerpt{font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--slate);margin:0;max-width:44ch}
@media(max-width:900px){.featured{grid-template-columns:minmax(0,1fr)}.featured-media{aspect-ratio:1;max-height:none;border-radius:var(--r-card) var(--r-card) 0 0}.featured-body{padding:28px 24px}}

/* Тема в квадратных скобках */
.tag-bracket{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--court-green);display:inline-flex;gap:2px}
.tag-bracket::before{content:'['}
.tag-bracket::after{content:']'}
.tag-bracket.on-dark{color:var(--ball-yellow)}

.post-meta{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--stone);letter-spacing:0.02em}
.post-meta i{width:3px;height:3px;border-radius:50%;background:var(--mist);flex:0 0 auto}

/* Сетка карточек */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.post-grid{grid-template-columns:1fr}}

.post-card{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--mist);border-radius:var(--r-lg);background:var(--off-white);text-decoration:none;color:inherit;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.post-card:hover{background:var(--green-100);border-color:var(--green-200);color:inherit}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.card-index{font-family:var(--font-mono);font-size:12px;color:var(--stone);letter-spacing:0.04em;padding-top:2px}
.card-thumb{flex:0 0 auto;width:104px;height:104px;border-radius:var(--r-sm);overflow:hidden;background:var(--cream);position:relative}
.card-thumb>.cover-img,.card-thumb>.cover-graphic{position:absolute;inset:0;width:100%;height:100%}

/* Собранная обложка — для тем без готового креатива. Тот же язык, что у постов:
   Court Green, линии корта, моношрифт. Масштаб задаёт font-size контейнера. */
.cover-graphic{background:var(--court-green);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:0.55em;padding:1.5em;font-size:20px}
.cover-graphic>i{position:absolute;background:rgba(217,243,120,0.15)}
.cover-graphic>i:nth-of-type(1){left:16%;top:0;bottom:0;width:1px}
.cover-graphic>i:nth-of-type(2){right:24%;top:0;bottom:0;width:1px}
.cover-graphic>i:nth-of-type(3){left:0;right:0;top:76%;height:1px}
.cg-label{position:relative;font-family:var(--font-body);font-size:0.62em;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(250,250,247,0.55)}
.cg-label.cg-accent{color:var(--ball-yellow)}
.cg-score{position:relative;display:flex;flex-direction:column;gap:0.08em;font-family:var(--font-mono);font-size:2.5em;font-weight:500;line-height:1.06;letter-spacing:-0.02em;color:var(--off-white);font-variant-numeric:tabular-nums}
.card-thumb .cover-graphic{font-size:7px;padding:1em;gap:0;justify-content:center;align-items:center}
.card-thumb .cover-graphic .cg-label{display:none}
.card-thumb .cover-graphic>i{display:none}
.featured-media .cover-graphic{font-size:28px}
.card-title{font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.2;letter-spacing:-0.02em;color:var(--deep-ink);margin:0;text-wrap:pretty;position:relative}
/* Жёлтая точка проявляется при ховере — сигнатурный акцент, без сдвигов текста */
.card-title::before,.featured-title::before{content:'';position:absolute;left:-14px;top:0.52em;width:6px;height:6px;border-radius:50%;background:var(--ball-yellow);opacity:0;transform:scale(0.4);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out-smooth)}
.post-card:hover .card-title::before,.featured:hover .featured-title::before{opacity:1;transform:scale(1)}
.card-excerpt{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--slate);margin:0;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.card-arrow{color:var(--court-green);opacity:0;transform:translateX(-4px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.post-card:hover .card-arrow{opacity:1;transform:translateX(0)}

/* Показать ещё */
.more-wrap{display:flex;justify-content:center;margin-top:44px}
.more-btn{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--off-white);background:var(--court-green);border:0;border-radius:var(--r-full);padding:15px 34px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background var(--dur-micro) var(--ease-standard)}
.more-btn:hover{background:var(--green-400)}
.more-btn:active{background:var(--green-700)}
.more-btn .n{font-family:var(--font-mono);font-size:13px;opacity:0.6}

.empty-state{border:1px solid var(--mist);border-radius:var(--r-card);padding:56px 32px 64px;text-align:center}
.empty-state img{display:block;margin:0 auto 18px;height:auto}
.empty-state h3{font-family:var(--font-display);font-weight:500;font-size:32px;letter-spacing:-0.03em;margin:0 0 10px;color:var(--deep-ink)}
.empty-state p{font-size:15px;color:var(--slate);margin:0 0 24px}
.reset-btn{font-family:var(--font-body);font-size:14px;color:var(--court-green);background:transparent;border:1px solid var(--mist);border-radius:var(--r-full);padding:10px 20px;cursor:pointer}
.reset-btn:hover{background:var(--green-100);border-color:var(--green-100)}

/* ── Полоса «читай в соцсетях» ──────────────────────────────────────────── */
.channels{background:var(--cream);border-top:1px solid var(--mist);border-bottom:1px solid var(--mist)}
.channels-row{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:40px 0;flex-wrap:wrap}
.channels-row p{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--slate);margin:0;max-width:46ch}
.channels-row strong{color:var(--deep-ink);font-weight:500;display:block;font-family:var(--font-display);font-size:26px;letter-spacing:-0.025em;margin-bottom:8px}
.channel-links{display:flex;flex-wrap:wrap;gap:12px}
.channel-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--court-green);background:var(--off-white);border:1px solid var(--mist);border-radius:var(--r-full);padding:11px 20px;text-decoration:none;transition:background var(--dur-micro) var(--ease-standard),border-color var(--dur-micro) var(--ease-standard)}
.channel-link:hover{background:var(--green-100);border-color:var(--green-100);color:var(--court-green)}

/* ==========================================================================
   ШАБЛОН СТАТЬИ
   ========================================================================== */
.article-hero{background:var(--court-green);color:var(--off-white);padding:0}
.article-hero-body{max-width:760px;padding:44px 0 60px}
.crumbs{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em;color:rgba(250,250,247,0.66);margin-bottom:28px}
.crumbs a{color:rgba(250,250,247,0.78);text-decoration:none}
.crumbs a:hover{color:var(--ball-yellow)}
.article-title{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,5.2vw,68px);line-height:1.02;letter-spacing:-0.035em;color:var(--off-white);margin:16px 0 0;text-wrap:pretty}
.article-lede{font-family:var(--font-body);font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--green-200);margin:24px 0 0;max-width:56ch}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:32px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em;color:rgba(250,250,247,0.74)}
.article-meta i{width:3px;height:3px;border-radius:50%;background:rgba(250,250,247,0.4);flex:0 0 auto}

.article-wrap{padding:56px 0 80px}
.channels{padding:0}
.feed{padding:56px 0 88px}

/* Креатив поста в начале статьи — квадратом, без обрезки */
.post-creative{margin:0 0 38px;max-width:430px}
.pc-frame{display:block;position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--mist);background:var(--cream)}
.pc-frame>.cover-img,.pc-frame>.cover-graphic{position:absolute;inset:0;width:100%;height:100%}
.pc-frame .cover-graphic{font-size:24px}
.post-creative figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--stone);margin-top:12px}

/* Карусель поста целиком */
.gallery{margin:48px 0 8px}
.gallery h4{font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-0.03em;color:var(--deep-ink);margin:0 0 20px}
.gallery-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;overscroll-behavior-x:contain}
.gallery-row figure{flex:0 0 236px;margin:0;scroll-snap-align:start}
.gallery-row img{display:block;width:236px;height:236px;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--mist);opacity:0;transition:opacity 480ms var(--ease-out-smooth)}
.gallery-row img.loaded{opacity:1}
.gallery-row figcaption{font-family:var(--font-body);font-size:13px;line-height:1.4;color:var(--slate);margin-top:10px}
@media(max-width:620px){.gallery-row figure{flex:0 0 200px}.gallery-row img{width:200px;height:200px}}
.article-layout{display:grid;grid-template-columns:1fr minmax(0,680px) 1fr;gap:32px}
.article-body{grid-column:2}
.article-aside{grid-column:3;position:sticky;top:24px;align-self:start}
@media(max-width:1040px){.article-layout{grid-template-columns:1fr}.article-body{grid-column:1;max-width:680px;margin:0 auto}.article-aside{grid-column:1;position:static;margin:48px auto 0;max-width:680px;width:100%}}

.article-body p{font-family:var(--font-body);font-size:18px;line-height:1.65;color:var(--ink);margin:0 0 26px;text-wrap:pretty}
.article-body h3{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.15;letter-spacing:-0.03em;color:var(--deep-ink);margin:44px 0 18px}
.article-body ul{margin:0 0 30px;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.article-body li{position:relative;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ink);padding-left:26px}
.article-body li::before{content:'';position:absolute;left:2px;top:0.62em;width:7px;height:7px;border-radius:50%;background:var(--ball-yellow)}
.pull-quote{border-left:2px solid var(--court-green);padding:4px 0 4px 26px;margin:0 0 34px}
.pull-quote p{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.28;letter-spacing:-0.02em;color:var(--court-green);margin:0}

.share-box{border:1px solid var(--mist);border-radius:var(--r-lg);padding:22px}
.share-box h4{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--stone);margin:0 0 16px}
.share-row{display:flex;flex-direction:column;gap:10px}
.share-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:14px;color:var(--court-green);background:transparent;border:1px solid var(--mist);border-radius:var(--r-full);padding:10px 16px;cursor:pointer;text-decoration:none;transition:background var(--dur-micro) var(--ease-standard),border-color var(--dur-micro) var(--ease-standard)}
.share-btn:hover{background:var(--green-100);border-color:var(--green-100);color:var(--court-green)}
.share-btn.done{background:var(--yellow-100);border-color:var(--yellow-700);color:var(--yellow-900)}
@media(max-width:1040px){.share-row{flex-direction:row;flex-wrap:wrap}}

.tg-cta{margin-top:48px;border:1px solid var(--mist);border-radius:var(--r-card);padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--cream)}
.tg-cta div strong{display:block;font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:-0.025em;color:var(--deep-ink);margin-bottom:6px}
.tg-cta div p{font-family:var(--font-body);font-size:15px;color:var(--slate);margin:0}
.tg-cta .channel-link{background:var(--court-green);color:var(--off-white);border-color:var(--court-green)}
.tg-cta .channel-link:hover{background:var(--green-400);border-color:var(--green-400);color:var(--off-white)}

.related{background:var(--cream);border-top:1px solid var(--mist);padding:64px 0 80px}
.related h2{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,44px);letter-spacing:-0.03em;color:var(--deep-ink);margin:0 0 32px}
.related .post-card{background:var(--off-white)}
.related .post-card:hover{background:var(--green-100)}

.not-found{padding:120px 0;text-align:center}
.not-found h1{font-family:var(--font-display);font-weight:500;font-size:48px;letter-spacing:-0.035em;margin:0 0 14px}
.not-found p{font-size:16px;color:var(--slate);margin:0 0 28px}

/* Уважаем системную настройку «меньше анимации» */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .gallery-row img{opacity:1;transition:none}
  .card-title::before,.featured-title::before{transition:none}
}

/* Обложка-картинка вместо image-slot из хендоффа */
.cover-img{object-fit:cover;display:block}