/* Список записів — сторінка блогу та архіви (index.php).
   Картка — .icard із блока insights (підключений залежністю marichka-blog);
   тут лише розкладка сторінки й доповнення картки під справжні записи.
   Токени (--ink, --line, --section-gap…) — з глобального style.css. */

.blist {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: var(--section-gap)
}

/* Заголовок ліворуч, як і сітка: сітка тече зліва, і з однією-двома
   картками центрований заголовок над нею виглядав би перекошеним. */
.blist-lead {
  max-width: 60ch;
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted)
}

.blist-lead p {
  margin: 0
}

/* auto-fill + minmax, а не медіазапити: колонок рівно стільки, скільки
   влазить у КОНТЕЙНЕР (на проді Neve звужує секцію — база 8f95f633).
   Саме auto-fill, не auto-fit: дві картки лишаються шириною колонки, а не
   розтягуються на весь ряд. min(100%, …) — щоб на вузькому екрані мінімум
   колонки не вилазив за контейнер. */
.blist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 1.8vw, 22px);
  margin-top: clamp(28px, 4vw, 44px)
}

/* ---------- картка запису ---------- */

/* Щит від Neve: на внутрішніх сторінках вона жива й фарбує кожне <a> своїм
   синім (a{color:var(--nv-primary-accent)}). Картка — посилання, тож без
   цього заголовок став би синім. */
.icard--post,
.icard--post:hover,
.icard--post:focus {
  color: var(--ink);
  text-decoration: none
}

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

/* Фото запису заповнює мініатюру. В insights .ithumb розрахований на
   ілюстрацію по центру (img висотою 150px) — для фото це дрібна марка. */
.icard--post .ithumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* Без мініатюри — той самий емодзі-плейсхолдер .ph, що й у phFallback, але
   фіксованого розміру (глобальний має width:100% і розрісся б на всю картку)
   і білий: фон мініатюри теж --mint, і коло злилося б із ним. */
.icard--post .ithumb .ph {
  width: 112px;
  background: #fff;
  font-size: 48px
}

/* Тіло тягнеться на всю висоту: у ряду картки однакові, навіть коли в
   одній є витяг, а в іншій — ні. */
.icard--post .ibody {
  flex: 1
}

/* h2, а не h4, як в insights: h1 тут — назва блогу. Вигляд той самий. */
.icard-title {
  margin: 0;
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.35
}

.icard-excerpt {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted)
}

/* ---------- порожньо ---------- */

.blist-empty {
  margin: clamp(28px, 4vw, 44px) 0 0;
  font-size: 17px;
  text-align: center;
  color: var(--muted)
}

/* ---------- пагінація ---------- */

.blist-pager {
  margin-top: clamp(32px, 4vw, 48px)
}

.blist-pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px
}

/* Вигляд — як у навігації слайдерів (біле коло, рамка --line); колір
   задаємо явно з тієї ж причини, що й у картки: інакше Neve зробить
   посилання синіми. */
.blist-pager .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none
}

.blist-pager a.page-numbers:hover {
  border-color: var(--ink);
  color: var(--ink)
}

.blist-pager a.page-numbers:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.blist-pager .page-numbers.current {
  border-color: transparent;
  background: var(--ink);
  color: #fff
}

.blist-pager .page-numbers.dots {
  border-color: transparent;
  background: none
}