/* Блог /blog и темы /blog/{slug} в стиле главной (d30, шаблоны site/articles/index и items, docs/DESIGN_CODE.md раздел 15).
   Грузится после home.css: белый фон и воздух главной, плашки без рамок и линий. Своё у блога:
   первый экран широкой полосой --gts-hero во всю ширину, как на главной: текст в ширине сайта слева, справа до края
   экрана фото самой новой статьи с белой подписью сверху (на обложках дом обычно внизу кадра, подпись его не закрывает);
   темы блога чипами с числом статей вместо меню слева; сетка статей по три без подложек.
   Значения только --gts-*. */

main.bl{display:block;padding-bottom:var(--gts-s-7)}
.bl_list{width:calc(100% - 40px);max-width:var(--gts-container);margin-left:auto;margin-right:auto}
.bl p{margin:0}
.bl a{width:auto}

/* ---------- Первый экран: полоса во всю ширину ---------- */
.bl_hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:560px;background:var(--gts-hero)}
.bl_hero_text{align-self:center;min-width:0;padding:var(--gts-s-7) var(--gts-s-7) var(--gts-s-7) max(20px, calc((100vw - var(--gts-container)) / 2))}
.bl_hero_text > *{animation:hm-up .6s cubic-bezier(.2,.7,.2,1) both}
.bl_hero_text > :nth-child(2){animation-delay:.06s}.bl_hero_text > :nth-child(3){animation-delay:.12s}.bl_hero_text > :nth-child(4){animation-delay:.18s}

.bl_crumbs ol{display:flex;flex-wrap:wrap;gap:var(--gts-s-1) 0;margin:0 0 var(--gts-s-4);padding:0;list-style:none;font-size:13px;line-height:1.4;color:var(--gts-text-3)}
.bl_crumbs li{display:inline-flex;align-items:center}
.bl_crumbs li + li::before{content:"";width:5px;height:5px;margin:0 10px;border-radius:50%;background:var(--gts-text-3);opacity:.5}
.bl_crumbs a{color:var(--gts-text-2)!important}
.bl_crumbs a:hover{color:var(--gts-green)!important}

.bl_h1{font-size:44px;line-height:1.1;font-weight:700;letter-spacing:-.025em;margin:0 0 var(--gts-s-4);color:var(--gts-text);text-wrap:balance}
.bl_lead{max-width:540px;font-size:17px;line-height:1.55;color:var(--gts-text-2)}
.bl_lead p{margin:0 0 var(--gts-s-2)}
.bl_lead p:last-child{margin-bottom:0}
.bl_lead a{color:var(--gts-green)!important}
.bl_lead a:hover{text-decoration:underline}

/* Темы чипами: на плашке белые, выбранная зелёная, число статей рядом мельче */
.bl_topics{display:flex;flex-wrap:wrap;gap:var(--gts-s-2);margin-top:var(--gts-s-6)}
.bl_topics a{display:inline-flex;align-items:center;gap:var(--gts-s-2);height:36px;padding:0 var(--gts-s-3) 0 14px;border-radius:var(--gts-r-control);background:var(--gts-surface);font-size:14px;color:var(--gts-text)!important;box-shadow:inset 0 0 0 1px transparent;transition:background-color .15s,color .15s,box-shadow .15s}
.bl_topics span{font-size:12px;font-weight:600;color:var(--gts-text-3);font-variant-numeric:tabular-nums;transition:color .15s}
.bl_topics a:hover{box-shadow:inset 0 0 0 1px var(--gts-green);color:var(--gts-green)!important}
.bl_topics a.is-on{background:var(--gts-green);color:#fff!important;box-shadow:none}
.bl_topics a.is-on span{color:rgba(255,255,255,.75)}
.bl_topics a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gts-green-ring)}

/* Новая статья: фото до правого края экрана, скругление слева сверху и снизу, как фото главной */
.bl_feat{position:relative;display:block;min-height:100%;border-radius:var(--gts-r-section) 0 0 var(--gts-r-section);overflow:hidden;background:var(--gts-stone);color:var(--gts-text)!important}
.bl_feat_img{position:absolute;inset:0;display:block}
.bl_feat_img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;animation:hm-settle 1.6s cubic-bezier(.2,.7,.2,1) both;transition:transform .6s ease}
.bl_feat:hover .bl_feat_img img{transform:scale(1.03)}
.bl_feat_tag{position:absolute;left:var(--gts-s-5);top:var(--gts-s-5);z-index:2;max-width:min(440px, calc(100% - 48px));padding:var(--gts-s-3) var(--gts-s-4);border-radius:var(--gts-r-control);background:var(--gts-surface);box-shadow:var(--gts-shadow-float);animation:hm-up .6s .6s cubic-bezier(.2,.7,.2,1) both}
.bl_feat_k{font-size:13px;font-weight:600;color:var(--gts-green);margin-bottom:2px!important}
.bl_feat_t{font-size:16px;line-height:1.35;font-weight:700;margin:0 0 var(--gts-s-1);color:var(--gts-text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:color .15s}
.bl_feat:hover .bl_feat_t{color:var(--gts-green)}
.bl_feat:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--gts-green-ring)}

/* дата и время чтения: серым, разделены точкой */
.bl_meta{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;line-height:1.4;color:var(--gts-text-3)}
.bl_meta span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 var(--gts-s-2);border-radius:50%;background:currentColor;vertical-align:middle;opacity:.6}

/* ---------- Сетка статей ---------- */
.bl_list{margin-top:var(--gts-s-7)}
.bl_grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gts-s-7) var(--gts-s-5)}
.bl_card{display:flex;flex-direction:column;color:var(--gts-text)!important}
.bl_card_img{display:block;margin-bottom:var(--gts-s-4);border-radius:var(--gts-r-card);overflow:hidden;background:var(--gts-stone)}
.bl_card_img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.bl_card:hover .bl_card_img img{transform:scale(1.04)}
.bl_card .bl_meta{margin-bottom:var(--gts-s-2)}
.bl_card_t{font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em;margin:0 0 var(--gts-s-2);color:var(--gts-text);text-wrap:balance;transition:color .15s}
.bl_card:hover .bl_card_t{color:var(--gts-green)}
.bl_card_d{font-size:15px;line-height:1.5;color:var(--gts-text-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.bl_card:focus-visible{outline:none;border-radius:var(--gts-r-card);box-shadow:0 0 0 3px var(--gts-green-ring)}

.bl_more{display:flex;margin:var(--gts-s-7) auto 0}

/* ---------- Адаптив ---------- */
@media screen and (max-width:1199px){
    .bl_h1{font-size:38px}
}
@media screen and (max-width:992px){
    .bl_hero{grid-template-columns:1fr;min-height:0}
    .bl_hero_text{padding:var(--gts-s-6) 20px}
    .bl_feat{border-radius:0}
    .bl_feat_img{position:relative;inset:auto;aspect-ratio:4/3}
    .bl_grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gts-s-6) var(--gts-s-4)}
}
@media screen and (max-width:767px){
    .bl_list{width:calc(100% - 32px)}
    .bl_hero_text{padding:var(--gts-s-5) 16px var(--gts-s-6)}
    .bl_h1{font-size:28px}
    .bl_lead{font-size:16px}
    .bl_topics{margin-top:var(--gts-s-5)}
    /* на телефоне подпись строкой под фото, внутри той же полосы */
    .bl_feat{overflow:visible;background:none}
    .bl_feat_tag{position:static;max-width:none;padding:var(--gts-s-4) 16px var(--gts-s-5);border-radius:0;background:none;box-shadow:none}
    .bl_feat_t{font-size:18px;-webkit-line-clamp:3}
    .bl_list{margin-top:var(--gts-s-6)}
    .bl_grid{grid-template-columns:1fr;gap:var(--gts-s-6)}
    .bl_card_t{font-size:18px}
    .bl_more{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
    .bl_hero_text > *, .bl_feat_img img, .bl_feat_tag{animation:none}
    .bl_feat:hover .bl_feat_img img, .bl_card:hover .bl_card_img img{transform:none}
}