/* ═══════════════════════════════════════════════════════════════
   blog.css — публічний блог: стрічка (blog.php) і стаття (blog_post.php).
   Кольори лише через токени, тож розділ живе в активній темі сайту.
═══════════════════════════════════════════════════════════════ */

.blg { --blg-max: 1140px; }

/* ── Шапка розділу ───────────────────────────────────────────── */
.blg-head { max-width: var(--blg-max); margin: 0 auto; padding: 64px 24px 34px; }
.blg-h1 {
  font-size: clamp(34px,5vw,60px); font-weight: 900; letter-spacing: -0.033em;
  line-height: 1.02; color: var(--ink); margin: 0 0 14px;
}
.blg-lead { font-size: clamp(15px,1.5vw,18px); color: var(--text2); max-width: 640px; margin: 0; }

/* ── Пошук у стрічці ───────────────────────────────────────── */
.blg-search { position: relative; max-width: 520px; margin: 22px 0 0; }
.blg-search-ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text3); pointer-events: none;
}
.blg-search input[type="search"] {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px 13px 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--sep); background: var(--glass-white); color: var(--ink);
  font: inherit; font-size: 16px;     /* 16px — щоб iOS не наближав сторінку на фокусі */
  box-shadow: var(--glass-shadow); transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.blg-search input[type="search"]::placeholder { color: var(--text3); }
.blg-search input[type="search"]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.blg-search-empty { margin-top: 8px; }
/* картки й порожній стан мають власний display — без цього hidden не ховав би їх */
.blg-card[hidden], .blg-empty[hidden] { display: none !important; }

/* ── Стрічка ─────────────────────────────────────────────────── */
.blg-list { max-width: var(--blg-max); margin: 0 auto; padding: 0 24px 76px; }
.blg-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media(max-width:980px){ .blg-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px){ .blg-grid { grid-template-columns: 1fr; } }

.blg-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-white); border: 1px solid var(--sep);
  border-radius: var(--radius-xl); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.blg-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.blg-card-img {
  position: relative;            /* під замок, який тепер лежить на обкладинці */
  aspect-ratio: 16/10; overflow: hidden;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 16%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent));
  display: grid; place-items: center;
}
/* Картинка прибита до країв рамки, а не «height: 100%»: цей відсоток
   залежить від того, як рушій рахує aspect-ratio, і в Safari картинка
   лишалась нижчою за рамку — з-під неї прозирала підкладка. */
.blg-card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.blg-card:hover .blg-card-img img { transform: scale(1.04); }
/* Заглушка, поки обкладинки немає — перша літера заголовка */
.blg-card-ph { font-size: 44px; font-weight: 900; color: var(--accent-dark); opacity: .35; }

.blg-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.blg-card-meta { font-size: 12px; color: var(--text3); margin-bottom: 8px; }
.blg-card-title {
  font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ink);
  letter-spacing: -.3px; margin-bottom: 8px;
}
.blg-card-exc { font-size: 14px; color: var(--text2); line-height: 1.55; flex: 1; }
.blg-card-more {
  margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--accent-dark);
}

/* ── Порожня стрічка ─────────────────────────────────────────── */
.blg-empty {
  max-width: 560px; margin: 0 auto; padding: 56px 30px; text-align: center;
  background: var(--glass-white); border: 1px solid var(--sep); border-radius: var(--radius-xl);
}
.blg-empty-t { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.blg-empty-d { font-size: 14.5px; color: var(--text2); line-height: 1.6; }

/* ── Стаття ──────────────────────────────────────────────────── */
.blg-article { max-width: 760px; margin: 0 auto; padding: 44px 24px 76px; }
.blg-back {
  display: inline-block; margin-bottom: 22px; font-size: 13.5px; font-weight: 600;
  color: var(--text2); text-decoration: none;
}
.blg-back:hover { color: var(--text); }
.blg-art-meta { font-size: 13px; color: var(--text3); margin-bottom: 12px; }
.blg-art-title {
  font-size: clamp(28px,4.4vw,46px); font-weight: 900; letter-spacing: -0.030em;
  line-height: 1.08; color: var(--ink); margin: 0 0 18px;
}
/* Лід: раніше — сірий текст із тонкою рискою, майже не відрізнявся від
   тіла. Тепер більший кегль, темніший колір і власний ритм — це анонс,
   а не цитата. */
.blg-art-exc {
  font-size: clamp(17px,1.9vw,21px); color: var(--text); line-height: 1.5;
  font-weight: 500; letter-spacing: -.2px;
  margin: 0 0 30px; padding: 0 0 22px; border-left: 0;
  border-bottom: 1px solid var(--sep);
  max-width: 720px;
}
.blg-art-cover {
  border-radius: var(--radius-xl); overflow: hidden; margin: 0 0 32px;
  box-shadow: 0 16px 44px rgba(0,0,0,.12);
}
/* max-height — щоб вертикальне фото не розтягнуло екран на два оберти скролу.
   object-position зміщено вгору: на портретних кадрах обличчя зазвичай у
   верхній третині, і центральний кроп зрізав би голову. */
.blg-art-cover img {
  width: 100%; height: auto; max-height: 520px;
  object-fit: cover; object-position: center 22%; display: block;
}

/* Тіло статті з візуального редактора: типографіка задається тут,
   бо редактор віддає чистий HTML без класів. */
.blg-body { font-size: 16.5px; line-height: 1.75; color: var(--text); }
.blg-body > *:first-child { margin-top: 0; }
/* ── Вирівнювання по ширині ─────────────────────────────────
   Разом із переносами: без них рівний правий край доводиться купувати
   розтягнутими проміжками, і в тексті проступають «річки» — особливо на
   телефоні, де в рядок влазить ~38 знаків. Мова сторінки — uk (атрибут
   lang на <html>), саме за ним рушій бере словник переносів.
   Цитати й висновки лишаємо з рваним краєм: там короткі рядки великим
   кеглем, вирівнювання рвало б їх пробілами. */
.blg-body p, .blg-body li {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto; hyphens: auto;
}
.blg-body blockquote p, .blg-body blockquote li {
  text-align: left;
  -webkit-hyphens: manual; hyphens: manual;
}
.blg-body p { margin: 0 0 18px; }
.blg-body h2 { font-size: clamp(22px,2.6vw,30px); font-weight: 800; letter-spacing: -0.020em; line-height: 1.2; margin: 36px 0 14px; color: var(--ink); }
.blg-body h3 { font-size: clamp(18px,2vw,23px); font-weight: 800; line-height: 1.25; margin: 30px 0 12px; color: var(--ink); }
.blg-body ul, .blg-body ol { margin: 0 0 18px; padding-left: 22px; }
.blg-body li { margin-bottom: 8px; }
.blg-body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: 22px 0; display: block; }
.blg-body a { color: var(--accent-dark); text-decoration: underline; }
/* ── Блоки всередині статті ───────────────────────────────────
   Три різні речі раніше виглядали однаково: врізка про «Щоденник з
   Бостона», цитата й висновок. Тепер у кожної свій вигляд, а редактор
   ставить клас на <blockquote>: note | quote | take. Без класу —
   попередній вигляд, щоб старі статті не поїхали. */
.blg-body blockquote {
  margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text2);
}

/* Цитата: великі лапки збоку, без плашки — має читатись як голос, а не як
   виноска. Лапка намальована шрифтом, тож масштабується разом із текстом. */
.blg-body blockquote.quote {
  position: relative; margin: 34px 0; padding: 4px 0 4px 72px;
  border-left: 0; background: none; border-radius: 0;
  font-size: clamp(19px, 2.1vw, 25px); font-weight: 700; line-height: 1.35;
  letter-spacing: -.4px; color: var(--ink);
}
.blg-body blockquote.quote::before {
  content: "“"; position: absolute; left: 0; top: -18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 96px; line-height: 1; color: var(--accent); opacity: .9;
}
.blg-body blockquote.quote p { margin: 0 0 10px; }
.blg-body blockquote.quote p:last-child { margin-bottom: 0; }
@media(max-width:560px){
  .blg-body blockquote.quote { padding-left: 46px; }
  .blg-body blockquote.quote::before { font-size: 66px; top: -10px; }
}

/* Висновок: темна плашка з підписом — інша вага, ніж у цитати, і видно
   здалеку при прокручуванні. */
.blg-body blockquote.take {
  margin: 32px 0; padding: 22px 26px 24px; border-left: 0; border-radius: var(--radius-lg);
  background: var(--ink); color: #fff;
  font-size: clamp(16px, 1.7vw, 18.5px); font-weight: 600; line-height: 1.5;
}
.blg-body blockquote.take::before {
  content: "Головне"; display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); opacity: .95;
}
.blg-body blockquote.take p { margin: 0 0 10px; }
.blg-body blockquote.take p:last-child { margin-bottom: 0; }
.blg-body blockquote.take b, .blg-body blockquote.take strong { font-weight: 800; }

/* Врізка «з Бостона»: фото квадратом зі скругленням ліворуч, текст праворуч.
   Фото необовʼязкове — без нього блок просто вужчий. */
.blg-body blockquote.note {
  margin: 30px 0; padding: 20px 22px; border-left: 0; border-radius: var(--radius-lg);
  background: var(--glass-white); border: 1px solid var(--sep);
  box-shadow: var(--glass-shadow);
  display: flex; gap: 18px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.6; color: var(--text2);
}
.blg-body blockquote.note img {
  flex: 0 0 auto; width: 116px; height: 116px; margin: 0;
  border-radius: var(--radius-md); object-fit: cover; display: block;
}
.blg-body blockquote.note p { margin: 0 0 8px; }
.blg-body blockquote.note p:last-child { margin-bottom: 0; }
.blg-body blockquote.note::before {
  content: "Щоденник з Бостона"; position: absolute; margin-top: -34px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent-dark); opacity: 0;
}
@media(max-width:560px){
  .blg-body blockquote.note { flex-direction: column; gap: 14px; }
  .blg-body blockquote.note img { width: 100%; height: 190px; }
}
.blg-body iframe { max-width: 100%; border-radius: var(--radius-lg); }

/* ── Фотокарусель у статті ────────────────────────────────────
   Основа — нативний scroll-snap: пальцем і трекпадом гортається саме
   так, як очікуєш, і якщо JS не завантажиться, стрічка лишиться робочою.
   Кадри портретні, тож рамка фіксована 4:5 — інакше кожен знімок
   розтягував би сторінку на пів-оберту скролу. */
.blg-gal { position: relative; margin: 30px 0; }
.blg-gal-track {
  display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}
.blg-gal-track::-webkit-scrollbar { display: none; }
.blg-gal-item {
  flex: 0 0 100%; scroll-snap-align: start; margin: 0;
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--sep2);
}
.blg-gal-item img {
  position: absolute; inset: 0;          /* без відсоткової висоти: у Safari
                                            вона не завжди резолвиться */
  width: 100%; height: 100%; object-fit: cover; display: block;
  margin: 0; border-radius: 0;
}
.blg-gal-btn {
  position: absolute; top: calc(50% - 40px); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--sep); background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px); color: var(--ink);
  font-size: 19px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.14);
  transition: opacity .2s ease, background .15s ease;
}
.blg-gal-btn.prev { left: 10px; }
.blg-gal-btn.next { right: 10px; }
.blg-gal-btn[disabled], .blg-gal-btn[hidden] { opacity: 0; pointer-events: none; }
.blg-gal-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.blg-gal-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sep); cursor: pointer; transition: background .2s ease, width .2s ease;
}
.blg-gal-dots button[aria-current="true"] { background: var(--accent); width: 20px; border-radius: 100px; }
.blg-gal-cap {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text3);
  text-align: center; text-wrap: pretty;
}
/* Один кадр — гортати нема чого: прибираємо прилипання й залишковий
   горизонтальний скрол, щоб блок поводився як звичайна ілюстрація. */
.blg-gal.is-single .blg-gal-track { overflow: visible; scroll-snap-type: none; }
@media(max-width:560px){
  .blg-gal-btn { display: none; }   /* на телефоні гортають пальцем */
}

.blg-body table { width: 100%; border-collapse: collapse; margin: 22px 0; display: block; overflow-x: auto; }
.blg-body td, .blg-body th { border: 1px solid var(--sep); padding: 8px 12px; text-align: left; }

/* ── Закрита частина: замок для незареєстрованих ──────────────
   Текст обривається затуханням, далі — картка з пропозицією.
   Саму закриту частину сервер у HTML не віддає взагалі. */
.blg-body.is-cut { position: relative; }
.blg-body.is-cut::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg) 92%);
}

/* ── «Печатка» на межі безкоштовної частини ───────────────────
   Бейдж навмисно сидить верхи на краю картки: так він читається як
   штамп видання, а не як ще один заголовок усередині статті.
   Один блок обслуговує два стани — замок для гостя і подяку для
   зареєстрованого, тож вони гарантовано виглядають однаково. */
.blg-stamp { max-width: 660px; margin: 8px auto 0; }
.blg-stamp-badge {
  position: relative; z-index: 2;
  display: flex; width: fit-content; max-width: calc(100% - 24px);
  margin: 0 auto -20px; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--glass-white); border: 1px solid var(--sep);
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
  font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
/* Зірка має бути в кольорі теми і при цьому читатись на картці: лаймовий
   акцент на білому дає 1.47:1, тому для кожної теми — свій тон. */
.blg-stamp-star { font-size: 13px; line-height: 1; color: var(--accent-label); }
[data-theme="red"]      .blg-stamp-star,
[data-theme="fire"]     .blg-stamp-star { color: #CC1C1C; }
[data-theme="daylight"] .blg-stamp-star { color: #B35E1F; }
[data-theme="athletic"] .blg-stamp-star { color: #FF5A5A; }

.blg-stamp-card {
  padding: 40px 34px 34px; text-align: center;
  background: var(--glass-white); border: 1px solid var(--sep);
  border-radius: 22px; box-shadow: 0 10px 34px rgba(0,0,0,.07);
}
.blg-stamp-msg {
  margin: 0; font-size: clamp(17px,2.3vw,22px); line-height: 1.45;
  letter-spacing: -.4px; font-weight: 500; color: var(--ink);
  /* без балансування останній рядок лишається з одним словом-сиротою */
  text-wrap: balance;
}
.blg-stamp-msg b { font-weight: 800; }
.blg-stamp-sub {
  margin: 14px auto 0; max-width: 430px;
  font-size: 14px; line-height: 1.6; color: var(--text2);
}
.blg-stamp-btns {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px;
}
/* Текст на кнопці: на лаймі та бурштині читається темний, на червоному — білий. */
.blg-stamp-btn {
  display: inline-block; padding: 13px 30px; border-radius: var(--radius-pill);
  background: var(--accent); color: #1A1A1A; font-size: 15px; font-weight: 700;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
[data-theme="red"]      .blg-stamp-btn,
[data-theme="fire"]     .blg-stamp-btn,
[data-theme="athletic"] .blg-stamp-btn { color: #fff; }
.blg-stamp-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.blg-stamp-alt { font-size: 13.5px; font-weight: 600; color: var(--text2); text-decoration: none; }
.blg-stamp-alt:hover { color: var(--text); text-decoration: underline; }

/* Подяка стоїть УСЕРЕДИНІ тексту — там свої відступи. */
.blg-body .blg-stamp { margin: 38px auto; max-width: 100%; }
.blg-body .blg-stamp-card { padding: 34px 30px 30px; }
.blg-body .blg-stamp-msg { margin: 0; }

@media(max-width:520px){
  .blg-stamp-card, .blg-body .blg-stamp-card { padding: 32px 18px 26px; }
  .blg-stamp-badge { font-size: 12.5px; padding: 8px 14px; }
}

/* Позначка на картці у стрічці */
/* Замок перенесено з рядка метаданих на обкладинку: у метаданих він ліз
   третім елементом і ламав рядок на дві частини. */
.blg-card-lock {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 9px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.blg-card-lock svg { width: 11px; height: 11px; }

/* ── Банер продукту ВСЕРЕДИНІ тексту ─────────────────────────
   Світлий, на відміну від темних карток у кінці: усередині статті
   великий чорний блок читався б як кінець матеріалу.
   Селектори з .blg-body — щоб перебити типографіку посилань статті
   (підкреслення й колір), яка інакше застосувалась би до всієї картки. */
.blg-body .blg-inpromo {
  display: block; margin: 32px 0; padding: 22px 24px 24px;
  border: 1px solid var(--sep); border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 7%, var(--glass-white));
  text-decoration: none; color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.blg-body .blg-inpromo:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.blg-inpromo-tag {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text2); margin-bottom: 6px;
}
.blg-inpromo-title {
  display: block; font-size: 20px; font-weight: 900; letter-spacing: -.4px;
  line-height: 1.2; color: var(--ink); margin-bottom: 8px;
}
.blg-inpromo-lead {
  display: block; font-size: 14.5px; line-height: 1.55; color: var(--text2); margin-bottom: 16px;
}
.blg-inpromo-cta { display: inline-block; }
@media(max-width:520px){
  .blg-body .blg-inpromo { padding: 18px 18px 20px; }
  .blg-inpromo-title { font-size: 18px; }
}

/* ── Реклама продуктів у кінці статті ────────────────────────── */
.blg-promo { max-width: 760px; margin: 0 auto; padding: 0 24px 8px; }
.blg-promo-h {
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text2); margin: 44px 0 16px; padding-top: 28px; border-top: 1px solid var(--sep);
}
.blg-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:680px){ .blg-promo-grid { grid-template-columns: 1fr; } }

.blg-promo-card {
  display: flex; flex-direction: column; padding: 24px 24px 26px;
  border-radius: var(--radius-xl); background: var(--ink); color: #fff;
  /* Темна картка навмисно: у стрічці білого тексту вже вдосталь, і блок
     має читатись як пропозиція, а не як ще один абзац статті. */
}
.blg-promo-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
/* Червоний акцент на майже чорній картці дає лише ~3.5:1 — для дрібного
   тексту й галочок беремо освітлений відтінок. Лаймова та бурштинова теми
   на чорному читаються самі по собі. */
[data-theme="red"]      .blg-promo-kicker, [data-theme="red"]      .blg-promo-list li::before,
[data-theme="fire"]     .blg-promo-kicker, [data-theme="fire"]     .blg-promo-list li::before,
[data-theme="athletic"] .blg-promo-kicker, [data-theme="athletic"] .blg-promo-list li::before { color: #FF6B6B; }
.blg-promo-title {
  font-size: 22px; font-weight: 900; letter-spacing: -.5px; line-height: 1.15; margin-bottom: 10px;
}
.blg-promo-lead { font-size: 14px; line-height: 1.6; color: #C8C8CE; margin: 0 0 16px; }
.blg-promo-list { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.blg-promo-list li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 13.5px; line-height: 1.5; color: #E4E4E8;
}
.blg-promo-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 800; font-size: 13px;
}
/* Текст на кнопці: на лаймі та бурштині читається темний, на червоному —
   білий (темний дав би 3.4:1). Тому колір задається на рівні теми. */
.blg-promo-btn {
  align-self: flex-start; padding: 11px 22px; border-radius: var(--radius-pill);
  background: var(--accent); color: #1A1A1A; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
[data-theme="red"]  .blg-promo-btn,
[data-theme="fire"] .blg-promo-btn,
[data-theme="athletic"] .blg-promo-btn { color: #fff; }
.blg-promo-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.3); }

/* ── Інші статті ─────────────────────────────────────────────── */
.blg-more { max-width: var(--blg-max); margin: 0 auto; padding: 0 24px 76px; }
.blg-more-h {
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text2); margin-bottom: 18px;
}

/* ── Чернетка: видно лише адміну ─────────────────────────────── */
.blg-draft {
  display: inline-block; margin-bottom: 14px; padding: 5px 13px;
  border-radius: var(--radius-pill); background: var(--warning); color: #1A1A1A;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* ── Номер частини серії ──────────────────────────────────────
   Читач може зайти одразу на третю частину — і має відразу бачити, де він
   у серії. Живе в рядку мета тим самим шрифтом, що й дата: окремий капсовий
   надзаголовок дублював би обкладинку, на якій усе це вже написано. */
.blg-art-part { font-weight: 700; color: var(--text2); }
/* Номер частини живе в рядку мета тим самим шрифтом, що й дата: назву серії
   вже несе обкладинка, і другий її напис нашим шрифтом поруч читався б як
   зайвий гарнітурний голос на картці. */
.blg-card-part { font-weight: 700; color: var(--text2); }

/* ── Картка автора («закріплене біо») ─────────────────────────
   Стоїть під обкладинкою: спершу хто пише, потім що пише. */
.blg-author {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 0 0 30px; padding: 18px 20px;
  background: var(--glass-white); border: 1px solid var(--sep);
  border-radius: var(--radius-xl);
}
.blg-author-ph {
  /* Квадрат зі скругленням замість кола: у круглій масці портрет обрізало
     по вухах, а тут кадр лишається цілим.
     Червоне кільце з білим просвітом — щоб фото автора читалося як акцент,
     а не як ще одна ілюстрація в тексті. Тінь, а не рамка: рамка забрала б
     у кадру 4px з кожного боку. */
  border: 1px solid var(--accent); padding: 2px; background: var(--glass-white);
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 12px;
  overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--glass-white));
  color: var(--ink); font-size: 26px; font-weight: 900;
}
.blg-author-ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.blg-author-txt { min-width: 0; }
.blg-author-name {
  font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; color: var(--ink);
}
.blg-author-en { font-weight: 500; color: var(--text3); font-size: 13.5px; margin-left: 6px; }
.blg-author-role { font-size: 13px; font-weight: 600; color: var(--text2); margin-top: 2px; }
.blg-author-bio { font-size: 13.5px; line-height: 1.6; color: var(--text2); margin: 8px 0 0; }
/* ── Картка автора на телефоні ────────────────────────────────
   Рядком фото+текст тут не працює: на 390px колонка тексту лишається
   ~250px, посада ламається посеред назви школи, а біо йде на шість
   рядків. Тому перебудовуємо на два поверхи: угорі фото з іменем,
   під ними біо на всю ширину картки.

   `display: contents` на .blg-author-txt розчиняє обгортку, і імʼя,
   посада та біо стають власними клітинками сітки — інакше біо лишилося б
   замкненим у тій самій вузькій колонці. */
@media(max-width:520px){
  .blg-author {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    /* УВАГА: скорочення gap іде ПІСЛЯ column-gap і обнулило б його —
       саме через це фото впритул налазило на імʼя. Тому спершу gap. */
    padding: 0; gap: 0;
    column-gap: 13px;
    overflow: hidden;
  }
  .blg-author::before {           /* шапка картки */
    content: ""; grid-area: 1 / 1 / 3 / -1;
    background: var(--accent);
    /* align-items: center у контейнера робить кожен елемент по центру,
       а не на всю клітинку. Порожній ::before від цього виходив нульової
       висоти — смуга була, але заввишки 0. */
    align-self: stretch;
  }
  .blg-author-txt { display: contents; }

  .blg-author-ph {
    grid-area: 1 / 1 / 3 / 2; position: relative; z-index: 1;
    width: 60px; height: 60px; margin: 14px 0 14px 16px;
    /* На червоній шапці червона рамка зникає — тут кільце біле. */
    border: 1px solid var(--glass-white); padding: 2px; background: var(--glass-white);
    border-radius: 11px;
  }
  .blg-author-name {
    grid-area: 1 / 2 / 2 / 3; position: relative; z-index: 1;
    align-self: end; padding-right: 16px; font-size: 16px; line-height: 1.2;
    color: #fff;                 /* на червоному тлі */
  }
  .blg-author-en { display: none; }   /* латиниця на телефоні лише додає рядок */
  .blg-author-role {
    grid-area: 2 / 2 / 3 / 3; position: relative; z-index: 1;
    align-self: start; padding-right: 16px; margin-top: 3px;
    font-size: 12.5px; line-height: 1.35;
    color: rgba(255,255,255,.86);
  }
  .blg-author-bio {
    grid-area: 3 / 1 / 4 / -1; position: relative; z-index: 1;
    margin: 0; padding: 14px 16px 16px;
  }
}

/* ── Ілюстрація з підписом у тілі статті ─────────────────────── */
.blg-body figure { margin: 26px 0; }
.blg-body figure img { margin: 0; }
.blg-body figcaption {
  margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--text3);
  padding-left: 12px; border-left: 2px solid var(--sep);
}

/* ── Частини серії в кінці статті ─────────────────────────────
   Світлий блок навмисно: одразу під ним ідуть темні картки програм,
   і два чорні прямокутники поспіль читались би як один банер. */
.blg-series { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.blg-series-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 44px 0 16px; padding-top: 28px; border-top: 1px solid var(--sep);
}
.blg-series-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3);
}
.blg-series-name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.blg-series-count { font-size: 12.5px; color: var(--text3); }

.blg-series-next {
  display: block; padding: 18px 20px 20px; margin-bottom: 14px;
  border: 1px solid var(--sep); border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 7%, var(--glass-white));
  text-decoration: none; color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.blg-series-next:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.blg-series-next-lbl {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text2); margin-bottom: 8px;
}
.blg-series-next-t {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; color: var(--ink);
}
.blg-series-next-go {
  display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink);
}

.blg-series-list { list-style: none; margin: 0; padding: 0; }
.blg-series-list li + li { border-top: 1px solid var(--sep); }
.blg-series-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  text-decoration: none; color: var(--text);
}
a.blg-series-item:hover .blg-series-t { color: var(--ink); text-decoration: underline; }
.blg-series-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #1A1A1A;
  font-size: 12.5px; font-weight: 800;
}
/* На червоних темах темний текст на акценті дає ~3.4:1 — беремо білий. */
[data-theme="red"]      .blg-series-n,
[data-theme="fire"]     .blg-series-n,
[data-theme="athletic"] .blg-series-n { color: #fff; }
.blg-series-t { font-size: 14.5px; line-height: 1.45; color: var(--text2); }
.blg-series-list li.is-current .blg-series-t { color: var(--ink); font-weight: 700; }
.blg-series-list li.is-current .blg-series-n {
  background: color-mix(in srgb, var(--accent) 22%, var(--glass-white));
  color: var(--ink);
}
.blg-series-now {
  margin-left: auto; flex: 0 0 auto; padding: 2px 9px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, var(--glass-white));
  color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap;
}
@media(max-width:520px){
  .blg-series-next-t { font-size: 16px; }
  .blg-series-t { font-size: 13.5px; }
}

/* ── Текстовий перехід на наступну частину в кінці тіла статті ──
   Дублює блок серії нижче навмисно: частину читають до кінця саме
   в тексті, і обірвати думку на «далі буде» без клікабельного
   продовження означає втратити читача на паузі. */
.blg-body .blg-nextlink { margin: 30px 0 0; }
.blg-body .blg-nextlink a {
  display: inline-block; font-size: 16px; font-weight: 800; letter-spacing: -.2px;
  line-height: 1.35; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.blg-body .blg-nextlink a:hover { border-bottom-color: var(--ink); }