/* Раздел "Чем заняться": карточки событий.
   Отдельный файл, потому что style.css собирается из LESS-проекта
   (d:\my_projects\helpingersLESS) и правки в нём затрутся при следующей сборке.
   Оформление намеренно повторяет карточки каталога: та же рамка
   1px rgba(188,188,188,.3), радиус 7px, белый фон, кнопка цвета #3ebde6. */

.events {
  padding: 0 15px 40px;
}

.events__wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.events__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* меню категорий над списком */
.events__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.events__cats-link {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  color: #222161;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(65, 146, 239, 0.4);
  border-radius: 5px;
  transition-duration: 0.2s;
}

.events__cats-link:hover {
  color: #ffffff;
  background-color: rgba(65, 146, 239, 0.9);
}

.events__cats-link--active {
  color: #ffffff;
  background-color: rgba(65, 146, 239, 0.9);
  border-color: transparent;
}

/* категория в карточке события */
.events__cat-badge {
  font-size: 12px;
  line-height: 18px;
  color: #222161;
  text-decoration: none;
  padding: 2px 8px;
  background-color: #eef4fb;
  border-radius: 4px;
}

.events__cat-badge:hover {
  background-color: #dbe7f7;
}

/* прямоугольное окошко события */
.events__item {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid rgba(188, 188, 188, 0.3);
  border-radius: 7px;
  overflow: hidden;
}

.events__img-wrapper {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f2f4f6;
}

.events__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.events__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 18px 20px 20px;
}

/* дата и время - первым делом, это главное в событии */
.events__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.events__date {
  font-size: 15px;
  font-weight: 700;
  color: #222161;
}

.events__time {
  font-size: 15px;
  font-weight: 400;
  color: #3ebde6;
}

.events__past {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a2424;
}

.events__title {
  font-size: 19px;
  line-height: 25px;
  font-weight: 400;
  margin: 0 0 10px;
}

.events__title-link {
  color: #000000;
  text-decoration: none;
}

.events__title-link:hover {
  color: #3ebde6;
}

.events__desc {
  font-size: 14px;
  line-height: 22px;
  font-weight: 100;
  color: #000000;
  margin: 0 0 14px;
}

/* адрес и цена - строкой, мелким */
.events__meta {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
  color: #484b4e;
}

.events__meta-item {
  display: flex;
  gap: 6px;
}

.events__meta-label {
  color: #8a8f94;
  flex-shrink: 0;
}

/* иконка вместо подписи «Где» / «Стоимость» (как .event-page__facts-icon) */
.events__meta-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #8a8f94;
}

/* у общей .link строка 26px и отступы - строка адреса выходила выше иконки,
   и иконка стояла выше текста; здесь - строка как у остальных полей (20px) */
.events__meta-link {
  overflow-wrap: anywhere;
  line-height: inherit;
  padding: 0;
}

.events__price {
  font-weight: 700;
  color: #222161;
}

/* кнопка "Читать далее" прижата к низу карточки, чтобы окошки были ровными */
.events__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  background-color: #3ebde6;
  border-radius: 5px;
  padding: 8px 22px;
  transition-duration: 0.2s;
}

.events__more:hover {
  background-color: #36a2c7;
}

.events__empty {
  font-size: 16px;
  color: #484b4e;
}

/* ---------- страница события ---------- */

.event-page__when {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 14px;
}

/* картинка слева, факты (когда / где / сколько) справа; на телефоне - столбиком */
.event-page__top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;   /* текст описания - пониже блока */
}

.event-page__top .event-page__img,
.event-page__top .event-page__facts {
  margin-bottom: 0;
}

/* на компьютере - небольшой картинкой рядом с фактами (не выше 180px) */
.event-page__top .event-page__img {
  flex: none;
  max-width: 25%;
  max-height: 180px;
}

.event-page__top .event-page__facts {
  flex: 1;
  min-width: 0;
}

@media (max-width: 700px) {
  .event-page__top {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .event-page__top .event-page__img {
    max-width: 100%;
    align-self: flex-start;
    max-height: 480px;   /* на телефоне - крупно, как раньше */
  }
}

/* описание события - на всю ширину страницы (у статей строка ограничена 44em) */
.article-text.event-page__text {
  max-width: none;
  margin-top: 0;
}

/* не больше своего размера (маленькая картинка не растягивается и не мылится)
   и не выше 480px (квадрат или афиша не занимают весь экран компьютера) */
.event-page__img {
  width: auto;
  max-width: min(100%, 900px);
  max-height: 480px;
  height: auto;
  object-fit: contain;
  border-radius: 7px;
  margin-bottom: 20px;
  display: block;
}

.event-page__facts {
  margin: 0 0 24px;
  padding: 16px 20px;
  list-style: none;
  background-color: #f7f9fa;
  border: 1px solid rgba(188, 188, 188, 0.3);
  border-radius: 7px;
  font-size: 15px;
  line-height: 24px;
}

.event-page__facts-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Подпись заменена иконкой: у иконки фиксированная ширина, чтобы значения
   в строках выстраивались по одной вертикали, как было с текстовыми подписями. */
.event-page__facts-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #8a8f94;
}

/* подпись в списках карточек осталась текстом - там места меньше */
.event-page__facts-label {
  color: #8a8f94;
  min-width: 90px;
}

/* карта идёт последней, под описанием - поэтому отбивка сверху */
.event-page__map {
  margin: 24px 0;
}

/* width: 1px + min-width: 100% - не причуда, а обход поведения Safari на iPhone:
   там iframe растягивается по ширине своего содержимого и игнорирует width: 100%,
   из-за чего карта уводила всю страницу вбок. С этой парой ширина считается
   от контейнера. max-width страхует от того же в других браузерах. */
.event-page__map-frame {
  display: block;
  width: 1px;
  min-width: 100%;
  max-width: 100%;
  height: 340px;
  border: 1px solid rgba(188, 188, 188, 0.3);
  border-radius: 7px;
}

.event-page__map-link {
  display: inline-block;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .event-page__map-frame {
    height: 260px;
  }
}

.event-page__notice {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 7px;
  background-color: #fcf3f3;
  border: 1px solid #f0c7c7;
  color: #8a2424;
  font-size: 14px;
}

@media (max-width: 600px) {
  .events__list {
    grid-template-columns: 1fr;
  }

  .events__body {
    padding: 16px;
  }
}

/* Длинное слово без пробелов в заголовке или кратком описании растягивало
   карточку и уводило страницу вправо - переносим по любому месту. */
.events__title,
.events__desc,
.event-page__facts {
  overflow-wrap: anywhere;
}