/* ==========================================================
   winpix — раздел «Блог» (site/blog/page.css)
   Свои стили раздела: карточки статей, фильтр рубрик, разметка статьи.
   Подключается после /_assets/styles.css на blog/ и blog/<slug>/.
   03.10, v2 по дизайн-аудиту: компактная шапка, фильтр в одну строку, лонгрид в одну колонку ~680px.
   Кандидаты в общее (_assets): .posts/.post (карточка статьи), .art--col (колонка статьи), .callout, .nextc.
   ========================================================== */

/* ---------- Компактная шапка раздела и статьи (как .phead--ceny) ---------- */
.phead--blog,.phead--art{padding-bottom:clamp(24px,3vw,40px)}
.phead--blog .phead__grid{grid-template-columns:1.2fr .8fr;gap:24px 48px;align-items:end}
.phead--blog .sub{max-width:44ch;font-size:clamp(17px,1.3vw,20px);line-height:1.4;padding-bottom:.35em}
.phead--art .phead__grid{grid-template-columns:1.15fr .85fr;gap:24px 48px;align-items:end}
.phead--art .sub{max-width:46ch;font-size:clamp(17px,1.3vw,20px);line-height:1.4}
.art__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--small);color:var(--mute-d);margin-top:16px}
.art__meta b{font-weight:400;color:var(--milk)}

/* ---------- Фильтр рубрик: одна строка чипов + счётчик справа ---------- */
.posts-all{padding-top:0}
.wfilter--blog{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.5vw,32px);padding-top:4px}
.wfilter--blog .wfilter__row{gap:6px}
.wfilter--blog .opt span{padding:9px 15px;font-size:14.5px;min-height:42px}
.wfilter--blog .wfilter__count{margin:0;white-space:nowrap}
.wfilter--blog .wfilter__count b{font-weight:400;color:var(--milk)}

/* ---------- Лента статей ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{display:grid;gap:14px;position:relative;align-content:start}
.post.is-hidden{display:none}
.post__media{position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--night-2)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-soft)}
.post:hover .post__media img{transform:scale(1.04)}
.post__media .tag{position:absolute;left:14px;top:14px;background:rgba(26,20,18,.55);color:var(--milk);box-shadow:none;backdrop-filter:blur(8px);font-size:14px;padding:8px 13px}
.post h2,.post h3{font-weight:400;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.015em;line-height:1.2;max-width:22ch}
.post h2 a::after,.post h3 a::after{content:"";position:absolute;inset:0}
.post p{color:var(--mute-d);font-size:15px;max-width:40ch}
.post__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--small);color:var(--mute-d)}
.post--wide{grid-column:span 2}
.post--wide .post__media{aspect-ratio:16/8}
.post--wide h2,.post--wide h3{font-size:clamp(24px,2.4vw,36px);max-width:20ch}
.posts__note{margin-top:clamp(28px,3vw,40px);padding-top:18px;border-top:1px solid var(--line-d);font-size:var(--small);color:var(--mute-d);max-width:70ch}
@media (max-width:1100px){.posts{grid-template-columns:1fr 1fr}.post--wide{grid-column:span 2}}
@media (max-width:700px){.posts{grid-template-columns:1fr}.post--wide{grid-column:auto}.post--wide .post__media{aspect-ratio:16/10}}

/* ---------- Статья: лонгрид в одну колонку ~680px ---------- */
.art--col{display:block;padding:clamp(8px,1vw,16px) var(--gutter) 0}
.art__sec{max-width:680px;margin:0 auto;padding:clamp(40px,5vw,64px) 0 0}
.art__sec:first-child{padding-top:0}
.art__sec h2{font-size:clamp(26px,2.8vw,40px);letter-spacing:-.03em;line-height:1.04;max-width:none;margin-bottom:clamp(18px,2vw,26px)}
.art__lead{color:var(--mute-d);font-size:clamp(17px,1.3vw,19px);line-height:1.5;margin-bottom:clamp(20px,2.4vw,32px)}
.art .prose{max-width:none}
.art .prose p{color:var(--milk);font-size:17px;line-height:1.55}
.art .prose p+p{margin-top:1em}
.art .prose p.lead{font-weight:300;font-size:clamp(20px,1.7vw,24px);line-height:1.35;letter-spacing:-.015em}
.art .prose p.mute{color:var(--mute-d);font-size:15.5px}
.art .prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(244,238,230,.4)}
.art .prose a:hover{text-decoration-color:currentColor}
.art .steps{margin:0}
.art .steps+.prose,.art .callout+.prose{margin-top:clamp(20px,2.4vw,32px)}
.art .steps li{grid-template-columns:44px 1fr;padding:18px 0 20px}
.art .steps b{font-size:18px}
.art .steps p{max-width:none;font-size:15.5px;line-height:1.5}
.art .roles{margin-top:0;gap:14px}
.art .roles>div{padding:20px 20px 22px;background:rgba(244,238,230,.06)}
.art .roles>div:last-child{background:var(--bone);color:var(--ink)}
.art .roles li{border-top-color:var(--line-d);font-size:15.5px;padding:10px 0}
.art .roles>div:last-child li{border-top-color:var(--line-l)}
.art .co__line{margin-top:clamp(28px,3.5vw,44px);max-width:none;font-size:clamp(20px,1.8vw,26px)}

/* кадр внутри колонки (петля из /media) */
.art__fig{margin:clamp(24px,3vw,40px) 0 0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;position:relative;background:var(--night-2)}
.art__fig img,.art__fig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art__fig video{opacity:0;transition:opacity .8s}
.art__fig video.is-ready{opacity:1}
.art__fig+.steps{margin-top:clamp(24px,3vw,40px)}
html.flat .art__fig video{display:none}

/* врезка-кейс внутри статьи */
.callout{margin:clamp(20px,2.4vw,32px) 0 0;border-radius:var(--r-card);padding:20px 22px 22px;background:rgba(244,238,230,.06);box-shadow:inset 0 0 0 1px var(--line-d);display:grid;gap:10px}
.callout__k{font-size:var(--small);color:var(--mute-d);line-height:1.4}
.callout b{font-weight:500;font-size:18px;letter-spacing:-.01em;display:block}
.callout p{font-size:15.5px;line-height:1.5;color:var(--milk)}
.callout .facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.callout .link{font-size:15px}

/* «Что читать дальше»: подпись + два компактных ряда «кадр — заголовок» */
.art__more{padding-top:clamp(40px,5vw,64px);margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-d);padding-top:clamp(24px,3vw,36px)}
.art__k{font-size:var(--small);color:var(--mute-d);margin-bottom:14px}
.next--row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nextc{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center;padding:10px;border-radius:var(--r-card);background:rgba(244,238,230,.05);box-shadow:inset 0 0 0 1px var(--line-d);transition:background .3s,box-shadow .3s;min-width:0}
.nextc:hover{background:rgba(244,238,230,.09);box-shadow:inset 0 0 0 1px rgba(244,238,230,.3)}
.nextc img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;border-radius:calc(var(--r-card) - 6px);display:block;background:var(--night-2)}
.nextc span{display:grid;gap:4px;min-width:0}
.nextc small{font-size:12.5px;color:var(--mute-d);line-height:1.3}
.nextc b{font-weight:400;font-size:16px;letter-spacing:-.01em;line-height:1.25}

@media (max-width:900px){
  .phead--blog{padding-bottom:18px}
  .phead--blog .phead__grid,.phead--art .phead__grid{grid-template-columns:1fr;gap:12px}
  .phead--blog .sub,.phead--art .sub{padding-bottom:0;font-size:16px;max-width:none}
  .art__meta{margin-top:12px}
  .wfilter--blog{gap:10px;margin-bottom:20px}
  .wfilter--blog .wfilter__row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;margin:0 calc(-1*var(--gutter));padding:2px var(--gutter);scrollbar-width:none;width:calc(100% + 2*var(--gutter))}
  .wfilter--blog .wfilter__row::-webkit-scrollbar{display:none}
  .wfilter--blog .opt{flex:0 0 auto}
  .wfilter--blog .opt span{white-space:nowrap;min-height:40px;padding:9px 14px;font-size:14px}
  .art__sec{padding-top:40px}
  .art__sec h2{font-size:clamp(24px,6.8vw,28px)}
  .art .prose p{font-size:16px}
  .art .prose p.lead{font-size:19px}
  .art .roles{grid-template-columns:1fr}
  .art .steps li{grid-template-columns:40px 1fr}
  .callout{padding:16px 16px 18px}
  .next--row{grid-template-columns:1fr}
  .nextc{grid-template-columns:96px 1fr}
}

/* 07.10 D2 (B12): класс post--wide в разметке снят (статей три). Раскладка без «широкой» карточки:
   ≥1101 — три равные колонки (styles.css, раздел «07.10 ритм»); 701–1100 — первая карточка на всю строку, две под ней (без пустой ячейки);
   ≤700 — одна колонка, все карточки одинаковые; превью 16:7 (было 16:10), чтобы список был короче (цель «Блог» ≤ 4,6 экрана на 390). */
@media (min-width:701px) and (max-width:1100px){
  .posts:has(>.post:nth-child(3):last-of-type)>.post:first-child{grid-column:1 / -1}
  .posts:has(>.post:nth-child(3):last-of-type)>.post:first-child .post__media{aspect-ratio:16/8}
}
@media (max-width:700px){ .posts .post__media{aspect-ratio:16/7} }

/* 08.10 волна 2: статей 7. Первая — .post--lead на всю строку: ≥701 кадр слева, заголовок и анонс справа (по центру по вертикали);
   под ней 6 карточек — 2 ряда по 3 (≥1101) или 3 ряда по 2 (701–1100), пустых ячеек нет. ≤700 — одна колонка, все одинаковые. */
.posts>.post--lead{grid-column:1 / -1;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(24px,3vw,48px);row-gap:14px;align-content:stretch}
.post--lead .post__media{grid-column:1;grid-row:1 / -1;aspect-ratio:16/9}
.post--lead h2{grid-column:2;grid-row:2;font-size:clamp(24px,2.4vw,36px);line-height:1.12;max-width:18ch}
.post--lead p{grid-column:2;grid-row:3;font-size:16px;max-width:44ch}
.post--lead .post__meta{grid-column:2;grid-row:4}
@media (max-width:1100px){ .posts>.post--lead{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} .post--lead h2{font-size:clamp(22px,2.8vw,28px)} }
@media (max-width:700px){
  .posts>.post--lead{grid-template-columns:1fr;grid-template-rows:none}
  .post--lead .post__media,.post--lead h2,.post--lead p,.post--lead .post__meta{grid-column:auto;grid-row:auto}
  .post--lead .post__media{aspect-ratio:16/7}
  .post--lead h2{font-size:clamp(19px,1.6vw,23px);max-width:22ch}
  .post--lead p{font-size:15px}
}

/* 1007l обложки «Свет» (site/_tools/blog_covers): в .post__media теперь <picture> (на ≤700 своя версия 16:7 — <slug>_m.webp).
   display:contents — img остаётся прямым ребёнком рамки, прежние правила (object-fit, hover-зум) работают без изменений. */
.post__media picture{display:contents}

/* 07.10: обложки «Свет» в ленте — без кадрирования (знак winpix стоит на равных отступах от верха и правого края; обрезка его сдвигала) */
@media (min-width:701px){ .posts .post__media:has(img[src*="/blog/covers/"]){aspect-ratio:16/10} }

/* 08.10 волна 3: статей 15 = лид + 14. ≥1101: сетка 6 колонок, обычная карточка занимает 2 (визуально те же 3 в ряд);
   если в последнем ряду остаются две карточки (14 = 4×3 + 2), они делят ряд пополам — по 3 колонки, пустых ячеек нет.
   При включённом фильтре рубрики (есть .is-hidden) правило «последний ряд» не применяется. 701–1100: 2 колонки (14 = 7×2), ≤700: одна. */
@media (min-width:1101px){
  .posts{grid-template-columns:repeat(6,minmax(0,1fr))}
  .posts>.post{grid-column:span 2}
  .posts>.post--lead{grid-column:1 / -1}
  .posts:not(:has(>.post.is-hidden))>.post:not(.post--lead):nth-child(3n+2):nth-last-child(2),
  .posts:not(:has(>.post.is-hidden))>.post:not(.post--lead):nth-child(3n+2):nth-last-child(2)+.post{grid-column:span 3}
}

/* 09.10 (Алексей): на мобильном заголовки карточек блога были 19 px — мелко и незаметно. ≤700: 24–28 px (≈26 px на 390), для первой статьи тоже */
@media (max-width:700px){
  .post h2,.post h3,.post--lead h2{font-size:clamp(24px,6.6vw,28px);line-height:1.14;letter-spacing:-.02em;max-width:none}
}