/* =============================================================================
   Журнал — секція 13.

   Ритм за art-direction §7: панель, одна велика картка і дві малі; підпис під
   зображенням, не поверх. Сусіди — FAQ зі списком і фінальна форма, тож сітка
   з нерівними картками тут єдина.
   ============================================================================= */

.journal__grid {
  display: grid;
  gap: var(--space-lg);
}

.post {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

.post__cover {
  border-radius: var(--radius-card);
  transition: border-color var(--dur-base) var(--ease-out);
}

.post:hover .post__cover { border-color: var(--accent); }

.post__meta {
  display: flex;
  gap: var(--space-md);
  color: var(--text-muted);
}

.post__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) var(--ease-out);
}

.post:hover .post__title { color: var(--accent); }

@media (min-width: 64rem) {
  .journal__grid {
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--gutter);
  }
  /* Перша стаття веде: сім колонок проти п'яти, і заголовок на щабель більший.
     Селектори прив'язані до .journal__grid навмисно: цей ритм розрахований
     рівно на три картки, а той самий .post стоїть ще й в архіві журналу, де
     карток довільна кількість і нерівна сітка читалася б як збій. */
  .journal__grid > .post:nth-child(1) { grid-column: span 7; }
  .journal__grid > .post:nth-child(1) .post__title { font-size: var(--fs-h3); }
  .journal__grid > .post:nth-child(2) { grid-column: span 5; }
  /* Одним оголошенням, не двома: grid-column-start після grid-column скидає
     кінець у auto, і картка схлопувалась у смужку 75px замість п'яти колонок. */
  .journal__grid > .post:nth-child(3) { grid-column: 8 / span 5; }
}

@media (prefers-reduced-motion: reduce) {
  .post__cover,
  .post__title { transition: none; }
}