/* blog.css — общие стили раздела «Катан в деталях» (blog.html + статьи).
   Отдельный файл, чтобы не трогать общий styles.css сайта. */

.bl-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}

/* --- Хиро листинга (blog.html) --- */
.bl-intro{max-width:560px;color:var(--text);font-size:.92rem;font-weight:300;line-height:1.7;margin-top:16px}
.bl-h1{font-family:var(--fb);font-size:clamp(2rem,4vw,3.3rem);font-weight:400;letter-spacing:-.025em;line-height:1.15;margin:18px 0 24px;border-left:2px solid var(--accent);padding-left:22px}
.bl-h1 em{font-style:normal;color:inherit}
.bl-sign{margin-top:28px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.bl-portrait{position:relative;overflow:hidden;aspect-ratio:4/3;cursor:pointer}
.bl-portrait img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s;filter:grayscale(10%)}
.bl-portrait:hover img{transform:scale(1.05)}
.bl-portrait-acc{position:absolute;bottom:-16px;right:-16px;width:140px;height:140px;border:1px solid var(--accent);opacity:.3;z-index:1}

/* --- Фильтры листинга --- */
.bl-filters{display:flex;flex-wrap:wrap;gap:28px;margin-bottom:44px}
.bl-filter-btn{position:relative;padding:4px 0;font-family:var(--fb);font-size:.75rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .3s}
.bl-filter-btn::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--accent);transition:width .4s var(--ease)}
.bl-filter-btn:hover{color:var(--text)}
.bl-filter-btn.active{color:var(--accent)}
.bl-filter-btn.active::after{width:100%}
.bl-hidden{display:none!important}

/* --- Карточки статей (листинг + "Похожие статьи") --- */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.bl-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);overflow:hidden;transition:border-color .3s,transform .3s}
.bl-card:hover{border-color:var(--border-l);transform:translateY(-4px)}
.bl-cover{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg3)}
.bl-cover img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%);transition:transform .8s var(--ease),filter .6s}
.bl-card:hover .bl-cover img{transform:scale(1.06);filter:grayscale(0%)}
.bl-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.bl-tag{align-self:flex-start;font-size:.64rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(212,165,116,.35);padding:4px 12px;border-radius:20px}
.bl-title{font-family:var(--fb);font-size:1.3rem;font-weight:400;letter-spacing:-.01em;color:#fff;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-excerpt{font-size:.82rem;font-weight:300;color:var(--text);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-meta{font-size:.7rem;color:var(--muted);letter-spacing:.05em;display:flex;gap:8px;align-items:center;margin-top:4px}

/* --- Страница статьи --- */
.art-meta-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:28px 0;border-bottom:1px solid var(--border);margin-bottom:48px}
.art-tag{font-size:.64rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(212,165,116,.35);padding:5px 14px;border-radius:20px}
.art-meta-info{font-size:.75rem;color:var(--muted);letter-spacing:.05em}
.art-wrap{max-width:860px;margin:0 auto}
.art-lead{font-family:var(--fb);font-size:1.25rem;font-weight:400;font-style:normal;color:var(--text);border-left:2px solid var(--accent);padding-left:24px;margin:0 0 44px;line-height:1.55}
.art-brief{background:var(--card);border:1px solid var(--border);padding:28px 32px;margin-bottom:44px}
.art-brief-t{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.art-brief ul{display:grid;gap:11px;list-style:none}
.art-brief li{font-size:.85rem;color:var(--text);font-weight:300;line-height:1.6}
.art-brief li strong{color:#fff;font-weight:500}
.art-body p{font-size:.95rem;font-weight:300;color:var(--text);line-height:1.9;margin-bottom:28px}
.art-body h2{font-family:var(--fb);font-size:1.65rem;font-weight:400;letter-spacing:-.015em;color:#fff;margin:56px 0 24px;line-height:1.25}
.art-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.art-body ul,.art-body ol{margin:0 0 28px;padding-left:0;list-style:none;display:grid;gap:15px}
.art-body ul li,.art-body ol li{font-size:.92rem;font-weight:300;color:var(--text);line-height:1.75;padding-left:26px;position:relative}
.art-body ul li::before{content:'';position:absolute;left:0;top:.65em;width:6px;height:6px;background:var(--accent);border-radius:50%}
.art-body ol{counter-reset:artnum}
.art-body ol li::before{counter-increment:artnum;content:counter(artnum);position:absolute;left:0;top:0;font-family:var(--fb);font-size:.85rem;color:var(--accent)}
.art-body ul li strong,.art-body ol li strong{color:#fff;font-weight:500}
.art-figure{margin:44px 0;border:1px solid var(--border);aspect-ratio:16/9;overflow:hidden}
.art-figure img{width:100%;height:100%;object-fit:cover}
.art-outro{font-size:.88rem;color:var(--muted);font-style:italic;border-top:1px solid var(--border);padding-top:32px;margin-top:8px}
.art-outro.art-outro-plain{font-style:normal;font-size:.85rem}
.art-outro em{font-style:italic}
.art-outro a{color:var(--accent)}
.art-back{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .3s;margin-bottom:32px}
.art-back:hover{color:var(--accent)}

/* Запас снизу, чтобы плавающая кнопка "наверх" не перекрывала текст на мобильной */
.bl-section-pad{padding-bottom:0}

@media(max-width:1024px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .bl-grid{grid-template-columns:1fr}
  .bl-filters{gap:18px}
  .art-brief{padding:22px 20px}
  .bl-section-pad{padding-bottom:64px!important}
}