/* Акции (новая витрина, часть 5а) — по эталону `docs/design/reference/layout.css` («Разделы сайта»: `.posts`,
   `.post-card`, `.post`). Размеры — токенами, цвета — ролями темы. Ширина — по адресу (Р39): список акций — широкая
   страница, акция с номером — колонка для чтения. */

.screen[data-screen='promo'] {
  max-width: var(--page-max); padding: var(--space-4) var(--gutter) var(--space-7);
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text); color: var(--ink);
}
.screen[data-screen='promo'][data-slug] { max-width: calc(var(--column-max) + var(--gutter) * 2); }

.promo-page { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.promo-page h1 { margin: 0; font-family: var(--font-title); font-size: var(--title-lg); line-height: var(--leading-title); text-align: start; }

/* Сетка карточек: от 320 в ширину, сколько поместится. Карточка — четыре строки общей сетки ряда (подсетка): фото,
   срок, заголовок и выдержка стоят на одних высотах во всех карточках ряда, как бы ни различалась длина текста (Р36). */
.promo-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-8) * 5)), 1fr));
}
.promo-card {
  grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: var(--space-2); min-width: 0; overflow: hidden;
  padding-bottom: var(--space-5); border: 1px solid var(--border2); border-radius: var(--radius-lg);
  background: var(--panel); color: var(--ink); text-decoration: none;
  transition: box-shadow var(--motion-fast) var(--ease);
}
.promo-card:hover { box-shadow: var(--shadow-1); }
.promo-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.promo-card__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--cream); }
.promo-card .promo-period, .promo-card__title, .promo-card__excerpt { margin: 0 var(--space-5); align-self: start; }
.promo-card .promo-period { margin-top: var(--space-2); }
.promo-card__title { font-family: var(--font-title); font-size: var(--title-sm); line-height: var(--leading-title); }
.promo-card__excerpt { color: var(--muted); }

/* Плашка срока: у карточки и у самой акции — одна. */
.promo-period {
  justify-self: start; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--cream); color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-medium);
}

/* Акция — колонка для чтения: всё у левого края колонки, фото во всю ширину. */
.promo-page--one { justify-items: start; gap: var(--space-4); }
.promo-photo { width: 100%; max-height: calc(var(--space-8) * 7); object-fit: cover; border-radius: var(--radius-lg); background: var(--cream); }
.promo-text { display: grid; gap: var(--space-3); width: 100%; line-height: var(--leading-text); }
.promo-text p { margin: 0; }
.promo-to-menu { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .promo-card { transition: none; }
}