/* =============================================================================
   entry — сторінка одного запису: кейс, стаття, звичайна сторінка.

   Ритм. Головна відкривається повноекранним приладом і величезним дисплейним
   рядком. Якщо сторінка кейса зробить те саме, вона прочитається як друга
   головна, і перехід між ними втратить сенс. Тому тут інший хід: заголовок,
   під ним ТАБЛИЧКА ПРИЛАДУ — рядок моно-міток зі значеннями (результат, рік,
   стек, посилання), і тільки після неї повноширинний скріншот.

   Табличка — це не декор, а сама суть кейса: замовник читає число, а не епітет.
   Мова та сама, що в показниках і форматах співпраці: моно-мітка згори, значення
   під нею; єдине бурштинове на всю шапку — сам результат.
   ============================================================================= */

.entry {
  padding-block: var(--section-pad) var(--section-pad);
}

.entry__head {
  display: grid;
  gap: var(--space-md);
  max-inline-size: var(--measure);
}

.entry__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

/* Дисплейний кегль лишається за кейсом і тільки за ним. У кейса заголовок
   стоїть поруч із показником і працює як назва приладу; у статті той самий
   кегль у колонці 66ch дає шість рядків заголовка над двома рядками тексту —
   це вже не акцент, а перешкода. */
.entry--case .entry__title { font-size: var(--fs-h1); }

.entry__lead {
  max-inline-size: var(--measure);
  color: var(--text-secondary);
}

/* ---- табличка приладу -------------------------------------------------------
   Мітки стоять НАД значеннями, а не поруч: у кейсі значення різної довжини
   («2026» і «WordPress, ACF, REST»), і колонка міток фіксованої ширини або
   ріже довге, або лишає діру після короткого. */

.entry__plate {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline);
}

.entry__plate > div {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
}

.entry__plate dt {
  font-family: var(--font-readout);
  font-size: var(--fs-readout-label);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.entry__plate dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-primary);
}

.entry__plate a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: var(--space-3xs);
  transition: color var(--dur-fast) var(--ease-out);
}

.entry__plate a:hover { color: var(--accent); }

/* Результат — єдине бурштинове в шапці й єдине, що набране показниковим
   кеглем. Усе інше в табличці — довідка про нього. */
.entry__result {
  font-family: var(--font-readout);
  font-size: var(--fs-readout);
  font-weight: var(--fw-readout);
  line-height: var(--lh-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--accent);
}

/* ---- медіа ------------------------------------------------------------------
   Скріншот виходить за правий край вікна — той самий прийом, що в кейсах на
   головній, і єдиний розрив сітки на цій сторінці. Ширина росте разом із
   від'ємним полем: базове img { max-width: 100% } інакше обрізає її назад до
   контейнера, і виліт не відбувається взагалі. */

.entry__media {
  margin: 0;
  margin-block-start: var(--space-xl);
}

.entry__media img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: var(--border-hairline);
  border-radius: var(--radius-block);
}

.entry__caption {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-readout);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.entry__body { margin-block-start: var(--space-xl); }

/* ---- підвал запису ----------------------------------------------------------
   Кінець тексту — не кінець розмови. Один рядок: назад до переліку і перехід
   до сусіднього запису. */

.entry__foot {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline);
}

.entry__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
}

.entry__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.entry__nav-link:hover { color: var(--accent); }

.entry__nav-link .arrow-icon {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
}

/* Стрілка «назад» — той самий гліф, розвернутий: другого малюнка заради одного
   напрямку не потрібно. */
.entry__nav-link--prev .arrow-icon { transform: scaleX(-1); }

/* Кнопка в підвалі запису — не смуга на всю ширину: підвал це grid, і без
   цього рядка вона розтягується по всій колонці. */
.entry__foot .btn { justify-self: start; }

@media (min-width: 48rem) {
  .entry__plate {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-lg);
  }
}

@media (min-width: 64rem) {
  /* Контейнер знімає обмеження ширини, щоб виліт медіа рахувався від краю
     вікна, а не від плаваючого поля автоцентрування. Ширину тексту тримає
     власний max-inline-size. */
  .entry > .wrap { max-inline-size: none; }

  /* Табличка їде праворуч від заголовка — на широкому екрані стовпчик тексту
     в 66ch лишав праву третину вікна порожньою, а показник кейса заслуговує
     стояти поруч із назвою, а не під нею. Це та сама пара, що в приладі
     героя: назва ліворуч, показання праворуч. */
  .entry--case .entry__head {
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    column-gap: var(--gutter);
    max-inline-size: none;
    align-items: start;
  }

  .entry--case .entry__head > .eyebrow,
  .entry--case .entry__title,
  .entry--case .entry__lead { grid-column: 1 / 8; }

  .entry--case .entry__plate {
    grid-column: 9 / -1;
    grid-row: 2 / span 3;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-block-start: 0;
  }

  .entry__media {
    inline-size: calc(100% + var(--wrap-pad));
    max-inline-size: none;
    margin-inline-end: calc(var(--wrap-pad) * -1);
  }

  .entry__media img {
    max-inline-size: none;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
}

/* ---- щільність на телефоні ----------------------------------------------------
   Той самий крок, що для .section у base.css, і з тієї самої причини. Поки його
   тут не було, сайт мав два вертикальні ритми: головна на телефоні йшла по 40px
   полів, а /work/, /services/, /journal/ і сторінки кейсів — по 64px, бо .entry
   лишалась на повному --section-pad. Один сайт не може дихати двома різними
   ритмами залежно від того, головна це чи ні. Токен той самий, межа та сама. */
@media not all and (min-width: 48rem) {
  .entry { padding-block: var(--section-pad-tight); }
}

@media (prefers-reduced-motion: reduce) {
  .entry__plate a,
  .entry__nav-link { transition: none; }
}