/* Блог — окрема сторінка, та сама конструкція що й /cases/: звичайний
   responsive-флоу (а не абсолютний Figma-canvas), з однаковим header/
   nav-drawer/формою/footer зі style.css. Тут лише контент сторінки:
   hero, фільтри по категоріях та стрічка карток-акордеонів. */

.blog-page{ background:#fff; color:#060608; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.blog-page *{ box-sizing:border-box; }
.blog-page img{ display:block; max-width:100%; }
.blog-page a{ color:inherit; text-decoration:none; }

.blog-wrap{ max-width:820px; margin:0 auto; padding:0 24px; }

/* ---------- Hero ---------- */
.blog-hero{ padding:64px 0 36px; }
.blog-hero__eyebrow{ display:inline-block; width:26px; height:3px; background:#f00b0f; border-radius:2px; margin-bottom:16px; }
.blog-hero h1{ font-family:'Unbounded',sans-serif; font-weight:600; font-size:40px; line-height:1.15; margin:0 0 16px; }
.blog-hero h1 span{ color:#f00b0f; }
.blog-hero p{ font-family:'Manrope',sans-serif; font-size:16px; line-height:1.6; color:#61636b; max-width:640px; margin:0; }
@media (max-width:640px){
  .blog-hero{ padding:40px 0 24px; }
  .blog-hero h1{ font-size:28px; }
  .blog-hero p{ font-size:14.5px; }
}

/* ---------- Category filter pills ---------- */
.blog-filters{ display:flex; flex-wrap:wrap; gap:10px; padding-bottom:36px; }
.blog-filter{
  font-family:'Unbounded',sans-serif; font-weight:500; font-size:12.5px; color:#61636b;
  background:#fff; border:1px solid #e4e3e0; border-radius:999px; padding:10px 18px;
  cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.blog-filter:hover{ border-color:#cfcecb; }
.blog-filter.is-active{ background:#060608; border-color:#060608; color:#fff; }

/* ---------- Card list ---------- */
.blog-list{ display:flex; flex-direction:column; gap:14px; padding-bottom:28px; }
.blog-card{
  border:1px solid #e4e3e0; border-radius:16px; overflow:hidden; background:#fff;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.blog-card[open]{ border-color:#f00b0f; box-shadow:0 20px 44px -26px rgba(0,0,0,.2); }
.blog-card summary{
  list-style:none; cursor:pointer; padding:22px 24px; display:flex; flex-direction:column; gap:10px;
}
.blog-card summary::-webkit-details-marker{ display:none; }
.blog-card__meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.blog-card__tag{
  font-family:'Unbounded',sans-serif; font-weight:600; font-size:10.5px; color:#f00b0f;
  text-transform:uppercase; letter-spacing:.03em;
}
.blog-card__date{ font-family:'Manrope',sans-serif; font-size:12px; color:#9a9ca3; }
.blog-card__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.blog-card__title{ font-family:'Unbounded',sans-serif; font-weight:600; font-size:16.5px; line-height:1.3; color:#060608; margin:0; }
.blog-card__plus{
  flex:none; width:32px; height:32px; border-radius:50%; border:1px solid #cfcecb; margin-top:1px;
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.blog-card__plus svg path{ transition:stroke .2s ease; }
.blog-card[open] .blog-card__plus{ transform:rotate(45deg); background:#f00b0f; border-color:#f00b0f; }
.blog-card[open] .blog-card__plus svg path{ stroke:#fff; }
.blog-card__excerpt{ font-family:'Manrope',sans-serif; font-size:13.5px; line-height:1.55; color:#61636b; }
.blog-card[open] .blog-card__excerpt{ display:none; }
.blog-card__body{ padding:0 24px 26px; font-family:'Manrope',sans-serif; font-size:14px; line-height:1.75; color:#3a3c42; }
.blog-card__body p{ margin:0 0 14px; }
.blog-card__body p:last-child{ margin-bottom:0; }

.blog-empty{ font-family:'Manrope',sans-serif; font-size:14px; color:#8a8d94; padding:20px 0 40px; }

/* ---------- Load more ---------- */
.blog-more{ display:flex; justify-content:center; padding-bottom:80px; }
.blog-more-btn{
  font-family:'Unbounded',sans-serif; font-weight:500; font-size:13px; color:#060608;
  background:#fff; border:1px solid #e4e3e0; border-radius:999px; padding:14px 28px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.blog-more-btn:hover{ border-color:#060608; }
.blog-more-btn[hidden]{ display:none; }