/* ==========================================================================
   Первый экран всех страниц мероприятий (/calendar/<код>/) — и будущих, и прошедших.
   Подключать вместе с event-header.css (общая шапка сайта).

   Затемнение. У шаблона на фото один ровный слой (.hero-club__bg::before, чёрный 42%),
   а фото у мероприятий любые: лампы, окна, светлые рубашки в зале. Второй слой кладём
   туда, где лежит текст: сверху — под шапку, слева — под крошки, дату, заголовок и
   описание, снизу — под кнопку. Правая часть фото остаётся живой.
   ========================================================================== */
.hero-club__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(21, 21, 21, .7) 0, rgba(21, 21, 21, 0) 200px),
    linear-gradient(90deg, rgba(21, 21, 21, .8) 0%, rgba(21, 21, 21, .62) 36%, rgba(21, 21, 21, .22) 64%, rgba(21, 21, 21, 0) 82%),
    linear-gradient(0deg, rgba(21, 21, 21, .55) 0%, rgba(21, 21, 21, 0) 45%);
}

/* на телефоне текст идёт во всю ширину — затемняем снизу вверх, где он и стоит */
@media (max-width: 768px) {
  .hero-club__bg::after {
    background:
      linear-gradient(180deg, rgba(21, 21, 21, .7) 0, rgba(21, 21, 21, 0) 140px),
      linear-gradient(0deg, rgba(21, 21, 21, .88) 0%, rgba(21, 21, 21, .66) 55%, rgba(21, 21, 21, .3) 100%);
  }
}

/* Строка «дата | место»: если место не заполнено, шаблон выводит пустой пункт,
   и после даты висит разделитель «|». Лучше не выводить пустой <li> в шаблоне. */
.hero-club__info-item:empty { display: none; }
.hero-club__info-item:has(+ .hero-club__info-item:empty)::after { content: none; }