/* ==========================================================================
   Блог. Підключається лише на сторінках /blog/ — решта сайту не тягне
   зайвих байтів. Усе, що вже є в components.css/sections.css (.card,
   .accordion, .prose, .page-hero), тут не дублюється: нижче тільки те,
   чого на сайті ще не було.
   ========================================================================== */

/* --- Вітрина блога -------------------------------------------------------
   Базовий .cards — це auto-fit minmax(17rem), і на 76rem контейнера він
   дає чотири колонки. Для блога потрібні рівно три, тому сітка задається
   явно, а не «як вийде»: 12 статей лягають у 4 рівні ряди.
   Точки перелому — ті самі 63.99em/37.49em, що вже вживані на сайті,
   щоб блог ламався одночасно з рештою сторінок, а не окремо. */

.cards--blog {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 63.99em) {
  .cards--blog {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 37.49em) {
  .cards--blog {
    grid-template-columns: 1fr;
  }
}

/* Мітка над заголовком картки: місто або тема. Колір узятий змінною
   --accent, тож при наведенні він інвертується разом з рештою тіла
   картки правилом .card:hover .card__body — окреме правило не потрібне. */
.card__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--dur) var(--ease-out);
}

/* Заголовок картки в блозі — H2 (стаття в списку), а не H3 як в послугах.
   Розмір лишаємо картковий: .card__title вже його задає, але h2 має
   власний font-size від base.css, тож перебиваємо явно. */
.cards--blog .card__title {
  font-size: 1.1875rem;
  line-height: 1.3;
}

/* --- Фото в статті -------------------------------------------------------
   Один ряд із 1–3 знімків одразу після вступу. Модифікатор задає кількість
   колонок на десктопі, нижче фото стають у стовпчик. Точки слому різні:
   три знімки на планшеті дають колонку близько 230 px і читаються як
   смужки, тому ряд із трьох розпадається вже на 64em, а ряд із двох
   тримається до 48em — там ширини ще вистачає. */

.post-figures {
  display: grid;
  gap: var(--sp-4);
  margin: var(--block-y) 0 0;
  padding: 0;
  list-style: none;
}

.post-figures--1 {
  grid-template-columns: 1fr;
}

.post-figures--2 {
  grid-template-columns: repeat(2, 1fr);
}

.post-figures--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 63.99em) {
  .post-figures--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 47.99em) {
  .post-figures--2 {
    grid-template-columns: 1fr;
  }
}

.post-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--concrete-100);
}

/* Кожен знімок — кнопка, що відкриває лайтбокс (gallery.js). Скидаємо
   всю кнопкову подобу, лишаючи саме фото; курсор і фокусне кільце
   лишаються, бо це єдине, що підказує клікабельність. */
.post-figure__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: inherit;
}

.post-figure__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* aspect-ratio + object-fit тримають однакову висоту всіх знімків у ряду
   незалежно від їхніх реальних пропорцій, тож ряд не «зубчиться». */
.post-figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.post-figure__btn:hover img,
.post-figure__btn:focus-visible img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .post-figure__btn:hover img,
  .post-figure__btn:focus-visible img {
    transform: none;
  }
}

/* Одиночне фото не розтягуємо на всі 76rem: занадто широкий кадр
   вибиває ритм сторінки, де текст обмежений 68ch. */
.post-figures--1 {
  max-width: 46rem;
}

/* --- Заголовок статті ----------------------------------------------------
   .page-hero з кнопкою центрує вміст (правило :has у sections.css),
   тож надрядкову мітку теж треба відцентрувати — інакше риска
   .eyebrow::before тягнеться від лівого краю. */

.page-hero .eyebrow {
  justify-content: center;
  color: var(--accent-text);
}

/* H1 статті довший за заголовок сторінки послуг, 22ch ріже його
   на надто багато рядків. */
.page-hero h1 {
  max-width: 30ch;
}

/* --- H2 всередині статті -------------------------------------------------
   .section-head має max-width 46rem і великий нижній відступ, розрахований
   на пару «мітка + заголовок + лід». Тут у ньому лише H2, тож відступ
   зменшуємо, щоб заголовок тримався свого абзацу, а не висів окремо. */

.section--tight .section-head.block-gap {
  margin-bottom: var(--sp-6);
}