/*
 * Секции страницы «Блог» (шаблон page-blog). Грузится после base.css.
 *
 * @package easy-peasy
 */

/* ==========================================================================
   БЛОГ (/blog/)
   ========================================================================== */

/* --- Hero ленты ---
   Задача блога — увести человека в статью, поэтому первый экран отдаём не
   представлению раздела, а карточкам. Базовый .hero--page рассчитан на страницы,
   где после шапки идёт длинный текст; здесь он оставлял ленту ниже сгиба.
   Ужимаем сам hero и стык «фильтры → лента»: отступ между ними задавала сумма
   двух секционных паддингов, и она вырастала до ~120px на десктопе.
   Поле поиска убрано из разметки — стили .blog-search удалены вместе с ним. */
.hero--blog{padding-block:clamp(10px,1.8vw,20px) clamp(12px,2vw,24px)}
/* Базовые 28ch считаются от кегля самого h1, а он тут крупный — мера выходила
   ~615px при контейнере в 820 и ломала заголовок на четыре строки. Отдаём всю
   ширину контейнера и снижаем потолок кегля: заголовок раздела не обязан спорить
   в весе с заголовком статьи, ради которой сюда пришли. */
.hero--blog h1{max-width:none;font-size:clamp(1.5rem,1.05rem + 1.9vw,2.25rem)}
.hero--blog .hero-lede{margin-top:10px;font-size:var(--fs-body)}
.hero--blog + #blog-filters.section--tight{padding-block:clamp(20px,2.8vw,32px)}
#blog-filters + .section{padding-block:clamp(24px,3.4vw,40px) clamp(40px,6vw,72px)}

/* --- Двухосевые рубрики (по языку + по теме) --- */
.blog-filters{display:flex;flex-direction:column;gap:16px}
.filter-axis{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;justify-content:center}
.filter-axis-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);flex:none}
.blog-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.blog-chip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-family:var(--font-body);font-weight:600;font-size:.85rem;color:var(--text);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;min-height:40px;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease,box-shadow .16s ease}
.blog-chip .bc-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--bc-accent,var(--primary))}
.blog-chip svg{width:15px;height:15px;color:var(--text-muted);transition:color .16s ease}
.blog-chip:hover{border-color:var(--primary);color:var(--primary)}
.blog-chip:hover svg{color:var(--primary)}
.blog-chip:focus-visible{outline:none;box-shadow:var(--ring)}
.blog-chip[aria-pressed="true"],.blog-chip[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.blog-chip[aria-pressed="true"] svg,.blog-chip[aria-current="true"] svg{color:var(--paper)}
.blog-chip[aria-pressed="true"] .bc-dot,.blog-chip[aria-current="true"] .bc-dot{background:#fff}
[data-theme="dark"] .blog-chip[aria-pressed="true"],[data-theme="dark"] .blog-chip[aria-current="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
[data-theme="dark"] .blog-chip[aria-pressed="true"] svg,[data-theme="dark"] .blog-chip[aria-current="true"] svg{color:var(--on-primary)}
.blog-chip[data-lang="polish"]{--bc-accent:#DC2647}
.blog-chip[data-lang="english"]{--bc-accent:var(--blue)}
.blog-chip[data-lang="german"]{--bc-accent:#C7920A}
.blog-chip[data-lang="spanish"]{--bc-accent:var(--violet)}
.blog-chip[data-lang="french"]{--bc-accent:var(--green)}

/* --- Featured (бенто: 1 крупная + 2 компактные) --- */
.feat-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){.feat-grid{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}}
.feat-post{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-sm);min-height:220px;padding:24px;color:#fff;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.feat-post:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);color:#fff}
.feat-post:focus-visible{box-shadow:var(--ring),var(--sh-md)}
.feat-post::before{content:"";position:absolute;inset:0;background:var(--fp-bg,linear-gradient(135deg,#28244a,#1e1b3a));z-index:0}
.feat-post::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(12,10,30,.82));z-index:1}
.feat-post > *{position:relative;z-index:2}
.feat-post.is-lead{grid-row:1 / span 2;min-height:300px}
.fp-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:auto}
.fp-badge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px)}
.fp-badge .bc-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.feat-post h3{color:#fff;font-size:1.15rem;font-weight:800;line-height:1.25;margin-top:14px}
.feat-post.is-lead h3{font-size:clamp(1.3rem,1.1rem + 1.2vw,1.75rem)}
.feat-post p{color:rgba(255,255,255,.9);font-size:.9rem;line-height:1.5;margin-top:8px;display:none}
.feat-post.is-lead p{display:block;max-width:46ch}
.fp-meta{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.85);margin-top:14px}
.fp-meta svg{width:15px;height:15px}
.fp-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.88rem;color:#fff;margin-top:14px}
.fp-arrow svg{width:17px;height:17px;transition:transform .2s ease}
.feat-post:hover .fp-arrow svg{transform:translateX(4px)}

/* --- Сетка карточек статей --- */
.blog-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:600px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--primary) 26%,var(--line))}
.post-card:focus-within{border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.post-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--pc-bg,linear-gradient(135deg,#7C5CFC,#6E97FF))}
.post-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 55%)}
/* Блик рассчитан на градиентную заглушку. На настоящей обложке он размывает
   как раз верхний левый угол, где лежат бейджи языка и рубрики. */
.post-cover.has-img::after{display:none}
.post-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.post-cover .pc-glyph{position:absolute;right:-8px;bottom:-14px;color:rgba(255,255,255,.28)}
.post-cover .pc-glyph svg{width:104px;height:104px}
.post-badges{position:absolute;top:12px;left:12px;z-index:1;display:flex;flex-wrap:wrap;gap:6px}
.post-badge{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:#1E1B3A;box-shadow:var(--sh-sm)}
.post-badge .bc-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--bc-accent,var(--primary))}
.post-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.post-cat{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary)}
.post-title{font-family:var(--font-head);font-weight:800;font-size:1.1rem;line-height:1.3;color:var(--text)}
.post-title a{color:var(--text);text-decoration:none}
.post-title a::after{content:"";position:absolute;inset:0}
.post-title a:hover{color:var(--primary)}
.post-excerpt{font-size:.9rem;line-height:1.55;color:var(--text-muted);flex:1}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--text-muted)}
.post-meta .pm-item{display:inline-flex;align-items:center;gap:6px}
.post-meta svg{width:14px;height:14px;flex:none;opacity:.75}
.post-meta .pm-dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);opacity:.5;flex:none}

/* --- Инлайн-CTA внутри ленты --- */
.blog-cta-inline{grid-column:1 / -1;position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;border-radius:var(--r-xl);background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand);padding:clamp(24px,3.5vw,34px)}
.blog-cta-inline::after{content:"";position:absolute;right:-70px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.blog-cta-inline .bci-ico{position:relative;z-index:1;width:56px;height:56px;border-radius:var(--r-md);background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.blog-cta-inline .bci-ico svg{width:28px;height:28px}
.blog-cta-inline .bci-text{position:relative;z-index:1;flex:1;min-width:220px}
.blog-cta-inline .bci-text b{font-family:var(--font-head);font-weight:800;font-size:1.2rem;display:block}
.blog-cta-inline .bci-text span{color:rgba(255,255,255,.92);font-size:.94rem;line-height:1.5;margin-top:4px;display:block}
.blog-cta-inline .bci-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:520px){.blog-cta-inline .bci-actions{width:100%}.blog-cta-inline .bci-actions .btn{flex:1;white-space:normal;text-wrap:balance}}

/* --- Пустое состояние ленты / поиска блога --- */
.blog-empty{display:none;text-align:center;padding:clamp(32px,6vw,60px) 24px;border:1px dashed var(--line);border-radius:var(--r-xl);background:var(--surface-2)}
.blog-empty.is-shown{display:block}
.blog-empty .be-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:var(--surface);color:var(--primary);box-shadow:var(--sh-sm)}
.blog-empty .be-ico svg{width:30px;height:30px}
.blog-empty h3{font-size:1.2rem;font-weight:800;margin-bottom:8px}
.blog-empty p{color:var(--text-muted);max-width:46ch;margin:0 auto 20px}
.post-card.blog-hidden,.blog-cta-inline.blog-hidden{display:none}
.blog-empty .btn+.btn{margin-left:10px}
@media(max-width:520px){.blog-empty .btn{display:block;width:100%}.blog-empty .btn+.btn{margin:10px 0 0}}

/* --- Постраничная навигация ленты --- */
.blog-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:clamp(28px,4vw,44px)}
.blog-pager-num,.blog-pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:0 13px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface);color:var(--text);font-family:var(--font-body);font-weight:600;font-size:.9rem;text-decoration:none;transition:border-color .16s ease,color .16s ease,background .16s ease}
.blog-pager-num:hover,.blog-pager-btn:hover{border-color:var(--primary);color:var(--primary)}
.blog-pager-num:focus-visible,.blog-pager-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.blog-pager-num.is-current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
[data-theme="dark"] .blog-pager-num.is-current{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.blog-pager-gap{color:var(--text-muted);padding:0 2px}

/* --- Подписка на рассылку (double opt-in) ---
   Сама форма и её состояния — общий компонент .subf из base.css (он живёт на
   трёх страницах). Здесь только обрамление блока на /blog/: копирайт слева,
   карточка с формой справа. */
.subscribe{position:relative;overflow:hidden;display:grid;gap:clamp(24px,3.2vw,40px);align-items:start;
  border-radius:var(--r-xl);background:var(--surface-2);border:1px solid var(--line);
  padding:clamp(26px,4vw,44px)}
/* Мягкое коралловое свечение по левому верху — блок «дышит» и не читается
   как серая плашка; в тёмной теме токен свечения уже пересчитан. */
.subscribe::before{content:"";position:absolute;top:-120px;left:-90px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,var(--brand-soft-glow),transparent 70%);
  pointer-events:none}
/* minmax у карточки: колонка формы не должна уезжать ниже 320px, иначе строка
   «поле + кнопка» ломается уже на 1024. */
@media(min-width:900px){.subscribe{grid-template-columns:1fr minmax(320px,.92fr);align-items:center}}
.subscribe > *{position:relative;z-index:1}
/* Крупный контурный конверт как «водяной знак» — только на широких, где есть место */
.subscribe-deco{display:none}
@media(min-width:1200px){
  .subscribe-deco{display:block;position:absolute;right:-26px;bottom:-46px;z-index:0;
    color:var(--primary);opacity:.07;pointer-events:none}
  .subscribe-deco svg{width:230px;height:230px}
}
.subscribe-copy .eyebrow{margin-bottom:12px}
.subscribe-copy .eyebrow svg{width:16px;height:16px}
.subscribe-copy h2{font-size:var(--fs-h2);font-weight:800;max-width:16ch;text-wrap:balance}
.subscribe-copy p{color:var(--text-muted);margin-top:12px;font-size:var(--fs-body);max-width:46ch}
.subscribe-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.subscribe-list li{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;line-height:1.5;color:var(--text)}
.subscribe-list .sl-ico{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--badge-green-text);margin-top:1px}
.subscribe-list .sl-ico svg{width:13px;height:13px}
.subscribe-social{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.86rem;
  line-height:1.45;color:var(--text-muted)}
.subscribe-social svg{width:18px;height:18px;color:var(--badge-green-text);flex:none}

.subscribe-card{display:flex;flex-direction:column;gap:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px);box-shadow:var(--sh-md)}
.subscribe-card-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.subscribe-freq{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;
  letter-spacing:.03em;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--surface-soft);color:var(--badge-coral-text)}
.subscribe-freq svg{width:14px;height:14px;flex:none}
.subscribe-card-title{font-family:var(--font-head);font-weight:800;font-size:1.08rem;
  line-height:1.25;color:var(--text)}
/* После успеха «Подпишитесь за 10 секунд» становится ложным призывом — шапку
   карточки убираем. :has() держит логику в CSS: developer по-прежнему ставит
   единственный класс на форму. */
.subscribe-card:has(.subf.is-success) .subscribe-card-head{display:none}