/* Блок «Блог» (06.10.2026): четыре статьи блога в ряд перед «Вопросами». Карточка = обложка 3:2 + заголовок статьи,
   вся карточка — ссылка на боевой /blog/<слаг>/. Шапка как у «Портфолио»: заголовок слева, «Все статьи» справа по нижней линии.
   Скругления, кегль названия, стрелка и ховер — как у карточек «Разделов каталога» (razdely.css). Своих вертикальных отступов
   у секции нет: их задаёт .sek страницы (--sek-gap), зазор заголовок→содержимое — --zag-sod. JS не нужен. */
.bl-sek{--bl-gap:clamp(14px,1.4vw,20px);--bl-ease:cubic-bezier(0.23,1,0.32,1)}
.bl-verh{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:nowrap}
.bl-verh>:first-child{min-width:0}
.bl-vse{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font:600 15.5px/1.2 var(--txt,"Onest",system-ui,sans-serif);
 color:var(--petrol,#0F3D47);text-decoration:none;border-bottom:1px solid var(--latun,#D9A441);padding-bottom:3px;margin-top:0}
.bl-vse:hover{color:var(--petrol-s,#246E7F)}
.bl-vse:focus-visible{outline:3px solid var(--latun,#D9A441);outline-offset:3px}
.bl-grid{list-style:none;margin:var(--zag-sod,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bl-gap)}
.bl-it{min-width:0}
.bl-card{display:block;height:100%;color:inherit;text-decoration:none;border-radius:14px;-webkit-tap-highlight-color:transparent}
.bl-ph{position:relative;display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#EEF1F1}
.bl-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--bl-ease)}
.bl-ph:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(18,38,43,.06);pointer-events:none}
.bl-name{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:14px;padding-right:2px;
 font:600 17px/1.3 var(--txt,"Onest",system-ui,-apple-system,sans-serif);color:var(--noch,#12262B);text-wrap:pretty}
.bl-name svg{flex:none;margin-top:2px;color:var(--petrol,#0F3D47);transition:transform .2s var(--bl-ease)}
.bl-card:focus-visible{outline:none}
.bl-card:focus-visible .bl-ph{outline:3px solid var(--latun,#D9A441);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 .bl-card:hover .bl-ph img{transform:scale(1.035)}
 .bl-card:hover .bl-name svg{transform:translateX(4px)}
 .bl-card:hover .bl-name>span{text-decoration:underline;text-decoration-color:var(--latun,#D9A441);text-decoration-thickness:2px;text-underline-offset:5px}}
/* планшет: две колонки; на 1100 остаются четыре, как ширина карточки «Разделов» (232 px) */
@media(max-width:900px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(var(--bl-gap) * 2)}}
/* телефон (мобильную версию Евгения отложила): лента со свайпом внутри секции, страницу вбок не раздвигает */
@media(max-width:767px){
 .bl-verh{display:block}.bl-vse{margin-top:16px}
 .bl-grid{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
 .bl-grid::-webkit-scrollbar{display:none}
 .bl-it{flex:0 0 min(72vw,300px);scroll-snap-align:start}
 .bl-name{font-size:16px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.bl-ph img,.bl-name svg{transition:none}.bl-card:hover .bl-ph img{transform:none}}