/* Блог: сторінка розділу + сторінка статті. Підключається лише на цих двох
   сторінках, щоб не важчити спільний lelia.css заради 2 екранів. */

/* ---------- спільне ---------- */
.art,.blog{max-width:820px;padding-block:clamp(22px,4vw,46px) 64px}
.art .crumb,.blog .crumb{font-size:13.5px;opacity:.55;margin-bottom:14px}
.art .crumb a,.blog .crumb a{border-bottom:1px solid currentColor}
.art h1,.blog h1{font-family:var(--f-disp);font-weight:800;font-size:clamp(30px,5vw,54px);letter-spacing:-.04em;margin:0;line-height:1.04}

/* ---------- стаття ---------- */
.art-lead{opacity:.72;font-size:16px;margin:16px 0 24px;line-height:1.55;max-width:62ch}
.art-cover{width:100%;height:auto;border-radius:var(--radius);display:block;margin:0 0 30px;object-fit:cover}
.art-body{font-size:16.5px;line-height:1.68}
.art-body p{margin:0 0 17px;opacity:.9}
.art-body h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(21px,2.8vw,27px);letter-spacing:-.02em;margin:34px 0 13px;line-height:1.2}
.art-body img{width:100%;height:auto;border-radius:16px;display:block;margin:22px 0}
.art-body a{border-bottom:1px solid currentColor}
.art-body strong{font-weight:600}
.art-body ul,.art-body ol{margin:0 0 17px;padding-left:22px}
.art-body li{margin-bottom:7px;opacity:.9}

.art-cta{margin-top:44px;padding:26px 28px;background:var(--soft,rgba(8,8,8,.04));border-radius:var(--radius)}
.art-cta h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(20px,2.6vw,25px);letter-spacing:-.02em;margin:0 0 8px}
.art-cta p{margin:0 0 18px;opacity:.78;font-size:15.5px;line-height:1.55}

/* ---------- список статей ---------- */
.blog .lead{opacity:.7;font-size:15.5px;margin:14px 0 32px;line-height:1.5;max-width:60ch}
.blog-list{display:grid;gap:22px}
.blog-card{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center;
  padding:16px;border:1px solid var(--line);border-radius:var(--radius);transition:background .2s}
.blog-card:hover{background:rgba(8,8,8,.03)}
.blog-card img{width:100%;height:100%;max-height:150px;object-fit:cover;border-radius:14px;display:block}
.blog-card h2{font-family:var(--f-disp);font-weight:700;font-size:19px;letter-spacing:-.02em;margin:0 0 8px;line-height:1.25}
.blog-card p{margin:0;font-size:14.5px;line-height:1.5;opacity:.72}
@media (max-width:640px){
  .blog-card{grid-template-columns:1fr;gap:14px}
  .blog-card img{max-height:190px}
}