/* ===== LIST ( /blog ) ===== */
li {
  list-style: none;
}

.b-hero{margin:10px 0 18px;background:linear-gradient(90deg,#0b1020 0%,#1f2a44 100%);border-radius:16px;color:#fff}
.b-hero__wrap{padding:18px}
.b-hero h1{margin:0 0 6px;font-size:clamp(20px,3.2vw,30px);line-height:1.15}
.b-hero__sub{margin:0;color:#e5e7eb}

.b-list{margin:10px 0 24px}
.b-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px}
@media (min-width: 700px){.b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width: 1100px){.b-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.b-card{display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;transition:transform .2s ease, box-shadow .2s ease; height: 100%}
.b-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,6,23,.06)}
.b-card__thumb{position:relative;display:block;aspect-ratio:16/9;background:#f1f5f9;overflow:hidden}
.b-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.b-card:hover .b-card__thumb img{transform:scale(1.03)}
.b-badge{position:absolute;left:12px;top:12px;background:#f59e0b;color:#111827;font-weight:700;border-radius:999px;padding:6px 10px;font-size:12px}
.b-badge--pin{background:#fde68a}

.b-card__body {
  padding:12px 12px 14px;
  display: flex;
    flex-direction: column;
    flex: 1;
}
.b-card__title{margin:0 0 6px;font-size:18px;line-height:1.25}
.b-card__title a{text-decoration:none;color:#0f172a}
.b-card__title a:hover{text-decoration:underline}
.b-card__meta{color:#64748b;font-size:12px;margin-bottom:6px}
.b-card__excerpt{color:#334155;font-size:14px;line-height:1.45;margin:0 0 10px}
.b-card__more {
    margin: auto 12px 12px;

    display: block;
    text-align: center;

    padding: 10px 14px;
    border-radius: 10px;

    background: #2563eb;
    color: #fff;
    font-weight: 600;
    text-decoration: none;

    transition: all .2s ease;
}

.b-card__more:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

/* Пагінація */
.b-pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:18px}
.b-pager__link{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 8px;border-radius:8px;background:#eef2ff;color:#1e3a8a;text-decoration:none;font-weight:600;border:1px solid #c7d2fe}
.b-pager__link:hover{background:#e0e7ff}
.b-pager__link--active{background:#1e3a8a;color:#fff;border-color:#1e3a8a}
.b-pager__link--disabled{background:#f1f5f9;color:#94a3b8;border-color:#e2e8f0;cursor:not-allowed}
.b-pager__dots{color:#94a3b8;padding:0 4px}

/* ===== ARTICLE ( /blog/{slug} ) ===== */
.b-article{max-width:860px;margin:0 auto;padding:10px}
.b-article__head h1{margin:4px 0 8px;font-size:clamp(22px,3.4vw,34px);line-height:1.15;color:#0b1020}
.b-article__meta{color:#64748b;font-size:13px;margin-bottom:8px}
.b-article__cover{margin:8px 0 14px}
.b-article__cover img{width:100%;height:auto;border-radius:12px;display:block}

/* типографіка контенту */
.b-article__content{color:#0f172a;line-height:1.75;font-size:16px}
.b-article__content h2,
.b-article__content h3,
.b-article__content h4{color:#0b1020;margin:18px 0 8px;line-height:1.25}
.b-article__content p{margin:10px 0}
.b-article__content ul{margin:10px 0 10px 20px}
.b-article__content li{margin:4px 0}
.b-article__content blockquote{margin:12px 0;padding:10px 14px;border-left:4px solid #60a5fa;background:#f8fafc;color:#0b1020;border-radius:8px}
.b-article__content img{max-width:100%;height:auto;border-radius:10px}
.b-article__content code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:2px 6px;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
.b-article__content pre{background:#0b1020;color:#e5e7eb;border-radius:10px;padding:12px;overflow:auto}
.b-article__content table{width:100%;border-collapse:collapse;margin:12px 0;border:1px solid #e5e7eb}
.b-article__content th,.b-article__content td{border:1px solid #e5e7eb;padding:8px;text-align:left}
.b-article__content a{color:#2563eb;text-decoration:none}
.b-article__content a:hover{text-decoration:underline}

/* ===== HERO (обкладинка) ===== */
.ba-hero{position:relative;border-radius:16px;overflow:hidden;margin:10px 0 16px;background:#0b1020;color:#fff}
.ba-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.8) saturate(1.05);transform:scale(1.02)}
.ba-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.65) 0%,rgba(2,6,23,.35) 45%,rgba(2,6,23,.15) 100%)}
.ba-hero__inner{position:relative;padding:22px}
.ba-hero__title{margin:6px 0 10px;font-size:clamp(22px,3.6vw,36px);line-height:1.15}
.ba-hero__chips{display:flex;gap:8px;flex-wrap:wrap}
.ba-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:999px;font-weight:600}

/* ===== Хлібні крихти ===== */
.ba-breadcrumb{color:#cbd5e1;margin-bottom:6px}
.ba-breadcrumb a{color:#e5e7eb;text-decoration:none}
.ba-breadcrumb a:hover{text-decoration:underline}

/* ===== Сторінка статті (обтікання сайдбара) ===== */
.ba-article{display:block;max-width:1100px;margin:0 auto;gap:0} /* flow-root додамо нижче */
@media (min-width: 980px){
  .ba-article{display:flow-root;} /* clearfix для float */
  .ba-article__side{
    float:right;
    width:300px;
    margin-left:16px;
    position:sticky;
    top:12px;
  }
  .ba-article__content{min-width:0;}
}
@media (max-width: 979.98px){
  .ba-article__side{
    float:none;width:auto;margin:0 0 12px 0;position:static;top:auto;
  }
}

/* Контент і сайдбар */
.ba-article__content{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px}
.ba-article__side{display:flex;flex-direction:column;gap:14px}

/* Автор */
.ba-author{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.ba-author__avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0b1020;color:#fff;font-weight:800}
.ba-author__name{font-weight:700}
.ba-author__role{color:#64748b;font-size:12px}

/* Навігація */
.ba-nav{display:grid;gap:10px}
.ba-nav__link{display:block;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;background:#fff;text-decoration:none;color:#0f172a}
.ba-nav__link span{display:block;color:#64748b;font-size:12px;margin-bottom:4px}
.ba-nav__link b{display:block;font-weight:700}
.ba-nav__link:hover{background:#f8fafc}

/* Типографіка */
.ba-article__content h2,.ba-article__content h3,.ba-article__content h4{color:#0b1020;margin:18px 0 8px}
.ba-article__content p{margin:10px 0;line-height:1.75}
.ba-article__content ul{margin:10px 0 10px 20px}
.ba-article__content li{margin:4px 0}
.ba-article__content blockquote{margin:12px 0;padding:12px 14px;border-left:4px solid #60a5fa;background:#f8fafc;border-radius:10px;color:#0b1020}
.ba-article__content img{max-width:100%;height:auto;border-radius:12px}
.ba-article__content pre{background:#0b1020;color:#e5e7eb;border-radius:12px;padding:12px;overflow:auto}
.ba-article__content code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:2px 6px}

/* Share */
.ba-share{display:flex;gap:8px;align-items:center;margin-top:18px;flex-wrap:wrap}
.ba-share__btn{background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a;border-radius:10px;padding:6px 10px;text-decoration:none;font-weight:700}
.ba-share__btn:hover{background:#e0e7ff}

/* Схожі матеріали */
.ba-rel{margin:20px 0}
.ba-rel__head{margin:0 0 10px}
.ba-rel__grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px}
@media (min-width: 900px){.ba-rel__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ba-rel__card{display:block;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:#0f172a;transition:transform .2s ease, box-shadow .2s ease}
.ba-rel__card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,6,23,.06)}
.ba-rel__thumb{aspect-ratio:16/9;background:#f1f5f9}
.ba-rel__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ba-rel__title{padding:10px 10px 4px;font-weight:700}
.ba-rel__meta{padding:0 10px 10px;color:#64748b;font-size:12px}



/* ---------- HERO: варіант без фото ---------- */
.ba-hero--plain{
  background:#fff;
  color:#0f172a;
  border:1px solid #e5e7eb;
  border-radius:16px;
  margin:10px 0 16px;
}
.ba-hero--plain .ba-hero__inner{padding:18px}
.ba-hero__title{margin:6px 0 10px;font-size:clamp(22px,3.6vw,36px);line-height:1.15}
.ba-hero__chips{display:flex;gap:8px;flex-wrap:wrap}
.ba-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;font-weight:700;color:#1e3a8a}
.ba-breadcrumb{color:#64748b}
.ba-breadcrumb a{color:#2563eb;text-decoration:none}
.ba-breadcrumb a:hover{text-decoration:underline}

/* ---------- ARTICLE з обтіканням фото і редакції ---------- */
.ba-article--floats{max-width:1100px;margin:40px auto}
.ba-article--floats .ba-article__content{
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px; font-size: 19px;
}

/* ЛІД-фото зліва (перший червоний квадрат) */
.ba-lead{
  float:left;
  width:min(42%, 460px);
  margin:0 16px 10px 0;
  border-radius:12px; overflow:hidden;
  background:#f1f5f9;
}
.ba-lead img{display:block;width:100%;height:auto}

/* Картка редакції справа (другий червоний квадрат → перенесено праворуч) */
.ba-editor{
  float:right;
  width:280px;
  margin:0 0 12px 16px;
  border:1px solid #e5e7eb;border-radius:12px;background:#fff;
  padding:12px; text-align:left;
}
.ba-editor__avatar{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:#0b1020;color:#fff;font-weight:800;margin-bottom:6px;
}
.ba-editor__name{font-weight:800}
.ba-editor__role{color:#64748b;font-size:12px}

/* Очищення потоків внизу статті */
.ba-clear{clear:both}

/* Типографіка (щоб текст гарно «обтікав») */
.ba-article__content p{margin:10px 0;line-height:1.75;}
.ba-article__content h2,.ba-article__content h3,.ba-article__content h4{margin:18px 0 8px;line-height:1.25}
.ba-article__content ul{margin:10px 0 10px 20px}
.ba-article__content li{margin:4px 0}
.ba-article__content blockquote{margin:12px 0;padding:10px 14px;border-left:4px solid #60a5fa;background:#f8fafc;border-radius:10px;color:#0b1020}
.ba-article__content img{max-width:100%;height:auto;border-radius:10px}


/* Схожі матеріали (як було) */
.ba-rel{margin:20px 0}
.ba-rel__head{margin:0 0 10px}
.ba-rel__grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px}
@media (min-width: 900px){.ba-rel__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ba-rel__card{display:block;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:#0f172a;transition:transform .2s ease, box-shadow .2s ease}
.ba-rel__card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,6,23,.06)}
.ba-rel__thumb{aspect-ratio:16/9;background:#f1f5f9}
.ba-rel__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ba-rel__title{padding:10px 10px 4px;font-weight:700}
.ba-rel__meta{padding:0 10px 10px;color:#64748b;font-size:12px}

/* Мобільна адаптація: прибираємо float, елементи йдуть зверху вниз */
@media (max-width: 900px){
  .ba-lead, .ba-editor{float:none;width:auto;margin:0 0 12px 0}
}


.ba-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin:35px 0 20px;

    padding-top:20px;

    border-top:1px solid #e5e7eb;

    flex-wrap:wrap;
}

.ba-like-wrap{
    display:flex;
    align-items:center;
}

.ba-like-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    border:none;

    background:#f3f4f6;

    color:#111827;

    padding:10px 16px;

    border-radius:12px;

    cursor:pointer;

    transition:.2s ease;

    font-size:14px;

    font-weight:600;

    line-height:1;
}

.ba-like-btn:hover{
    background:#e5e7eb;
    transform:translateY(-1px);
}

.ba-like-btn.loading{
    opacity:.7;
    pointer-events:none;
}

.ba-like-btn.liked{
    background:#fee2e2;
    color:#dc2626;
}

.ba-like-btn__icon{
    font-size:18px;
}

.ba-like-btn__count{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:24px;
    height:24px;

    border-radius:999px;

    background:rgba(255,255,255,.7);

    padding:0 8px;

    font-size:13px;

    font-weight:700;
}

.ba-share__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 14px;

    border-radius:10px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.2s ease;
}

.ba-share__btn:hover{
    transform:translateY(-1px);
}

@media (max-width:640px){

    .ba-actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .ba-share{
        width:100%;
    }
}


.ba-chip--like{
    border:none;
    cursor:pointer;

    transition:.2s ease;
}

.ba-chip--like:hover{
    transform:translateY(-1px);
}

.ba-chip--like.liked{
    background:#fee2e2;
    color:#dc2626;
}

.ba-chip-like-count{
    font-weight:700;
}

.b-card__meta{
    display:flex;
    align-items:center;
    gap:12px;

    flex-wrap:wrap;

    margin-bottom:10px;

    color:#6b7280;

    font-size:13px;
}

.b-card__meta-item{
    display:flex;
    align-items:center;
    gap:4px;
}