/* Блог: список /blog/ і сторінка статті (scripts/blog.js). Підключається лише
   на сторінках блогу; решта — зі site.css (pagehead, crumb, idx, grid3, cta-yl). */
.blog-head .idx{display:inline-block;margin-top:.9rem}
.blog-byline{display:flex;flex-wrap:wrap;gap:.35rem .6rem;margin:1.1rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}

/* Стаття: зміст ліворуч, текст ≈ 70 знаків */
.blog-layout{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,46rem);gap:3.5rem;justify-content:center;align-items:start}
.blog-toc{position:sticky;top:calc(var(--nav) + 1.5rem);border-left:2px solid var(--y);padding:.2rem 0 .2rem 1rem}
.blog-toc-t{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 .6rem}
.blog-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.blog-toc li{counter-increment:toc;display:flex;gap:.55rem;margin:.5rem 0;font-size:.9rem;line-height:1.35}
.blog-toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.66rem;line-height:1.9;color:var(--mut)}
.blog-toc a{color:#4d4a44;text-decoration:none}
.blog-toc a:hover,.blog-toc a:focus-visible{color:var(--bk);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px}
.blog-body{min-width:0;font-size:1.06rem;line-height:1.78;color:#34322d}
.blog-body h2{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.2;margin:2.8rem 0 .9rem;color:var(--bk);scroll-margin-top:calc(var(--nav) + 1rem)}
.blog-body h3{font-size:1.18rem;line-height:1.3;margin:2rem 0 .6rem;color:var(--bk)}
.blog-body p{margin:.9rem 0}
.blog-body ul,.blog-body ol{padding-left:1.2rem;margin:.8rem 0}
.blog-body li{margin:.45rem 0}
.blog-body li::marker{color:var(--bk)}
.blog-body b{color:var(--bk)}
.blog-body a{color:var(--bk);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:3px}
.blog-body a:hover{background:#fff6cc}
.blog-cover{margin:0 0 2rem;background:var(--pap);border:1px solid var(--ln);display:flex;justify-content:center}
.blog-cover img{display:block;max-width:100%;height:auto;max-height:420px;object-fit:contain}
.blog-table{overflow-x:auto;border:1px solid var(--ln);background:#fff;margin:1.4rem 0}
.blog-table table{border-collapse:collapse;width:100%;font-size:.9rem;line-height:1.45}
.blog-table th,.blog-table td{padding:.6rem .8rem;border-bottom:1px solid var(--ln);text-align:left;vertical-align:top;font-variant-numeric:tabular-nums}
.blog-table th{font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:var(--pap)}
.blog-table tbody tr:last-child td{border-bottom:0}
.blog-note{margin:1.6rem 0;padding:1rem 1.2rem;background:var(--pap);border-left:3px solid var(--y)}
.blog-note p{margin:0}
.blog-body a.blog-calc{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;margin:2rem 0;padding:1.2rem 1.4rem;background:var(--y);color:var(--bk);text-decoration:none}
.blog-body a.blog-calc:hover{background:#ffd81f}
.blog-calc>*{grid-column:1}
.blog-calc-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.blog-calc b{font-size:1.2rem;line-height:1.3}
.blog-calc>span:not(.blog-calc-k){font-size:.92rem;line-height:1.5}
.blog-calc>.blog-calc-go{grid-column:2;grid-row:1 / span 3;align-self:center;font-size:1.6rem}
/* {{request:photo}} — фото старого верстата для підбору заміни */
.blog-photo{display:grid;grid-template-columns:1fr auto;gap:1rem 1.6rem;align-items:center;margin:2.2rem 0;padding:1.3rem 1.4rem;border:1px solid var(--bk);background:#fff}
.blog-photo-k{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.blog-photo b{display:block;font-size:1.15rem;line-height:1.3;margin:.25rem 0 .35rem}
.blog-photo p{margin:0;font-size:.92rem;line-height:1.5}
@media(max-width:640px){.blog-photo{grid-template-columns:1fr}.blog-photo .btn{justify-self:start}}
.blog-models{margin-top:3rem}
.blog-models .grid3{margin-top:1rem}
.blog-all{margin-top:1.2rem}

/* Список статей і «Схожі статті» (05.10.2026). Обкладинки — фото станків на
   білому або прозорому тлі різних пропорцій: однакова рамка 4:3 на --pap, фото
   з відступами й multiply (біле тло зливається з рамкою, без сірих смуг).
   Фото стоїть абсолютно — висоту картки задає рамка, а не пропорції кадру
   (раніше вертикальне фото розтягувало першу картку до ~770 px). */
.blog-index{padding:2.2rem 0 4.5rem}
.blog-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.blog-filter button{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .95rem;border:1px solid var(--ln);background:#fff;color:#4d4a44;font:600 .86rem/1.2 var(--sans);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.blog-filter button:hover{border-color:var(--bk);color:var(--bk)}
.blog-filter button.on{background:var(--bk);border-color:var(--bk);color:#fff}
.blog-filter-n{font-family:var(--mono);font-size:.7rem;color:var(--mut)}
.blog-filter button.on .blog-filter-n{color:var(--y)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.4rem}
@media(min-width:1000px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ln);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.blog-card[hidden]{display:none}
.blog-card:hover,.blog-card:focus-visible{border-color:var(--bk);transform:translateY(-2px)}
.blog-card-img{position:relative;display:block;flex:none;background:var(--pap);aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--ln)}
/* width/height у розмітці ставить збірка (img-dimensions.js) — розмір задає рамка */
.blog-card-img img{position:absolute;inset:0;display:block;width:100%;height:100%;box-sizing:border-box;padding:7% 9%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s}
.blog-card:hover .blog-card-img img{transform:scale(1.03)}
.blog-card-bd{display:flex;flex-direction:column;gap:.55rem;padding:1.2rem 1.3rem 1.4rem}
.blog-card-meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.blog-card-t{font-size:1.2rem;line-height:1.28;margin:0;color:var(--bk)}
.blog-card-lead{color:#4d4a44;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-go{align-self:flex-start;margin-top:.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--bk);border-bottom:2px solid var(--y)}
/* Перша стаття — широка, поки не вибрано рубрику; висота 20–24rem */
@media(min-width:900px){
  .blog-grid:not(.is-filtered) .blog-card--wide{grid-column:1/-1;flex-direction:row}
  .blog-grid:not(.is-filtered) .blog-card--wide .blog-card-img{flex:0 0 44%;aspect-ratio:auto;min-height:20rem;max-height:24rem;border-bottom:0;border-right:1px solid var(--ln)}
  .blog-grid:not(.is-filtered) .blog-card--wide .blog-card-img img{padding:4% 7%}
  .blog-grid:not(.is-filtered) .blog-card--wide .blog-card-bd{flex:1;justify-content:center;gap:.8rem;padding:2.2rem 2.8rem}
  .blog-grid:not(.is-filtered) .blog-card--wide .blog-card-t{font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1.18}
  .blog-grid:not(.is-filtered) .blog-card--wide .blog-card-lead{font-size:1.05rem;-webkit-line-clamp:4}
}
.blog-grid.is-filtered .blog-card-go{display:none}
@media(max-width:640px){
  .blog-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 -1rem 1.2rem;padding:0 1rem .2rem;scrollbar-width:none}
  .blog-filter::-webkit-scrollbar{display:none}
  .blog-filter button{flex:0 0 auto}
  .blog-card-img{aspect-ratio:16/10}
}
.blog-related h2{margin:0 0 1.2rem}
@media(max-width:1023px){
  .blog-layout{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .blog-toc{position:static;background:var(--pap);border-left:0;border-top:2px solid var(--y);padding:1rem 1.1rem}
}
@media(prefers-reduced-motion:reduce){.blog-card,.blog-card-img img{transition:none}.blog-card:hover,.blog-card:hover .blog-card-img img{transform:none}}