/* ==========================================================================
   4 Сезона — Раздел «Чем заняться» (страницы-площадки)
   Пул / Банкетные залы / Беседки / Ресторан.
   Наследует токены variables.css и типографику main.css. Блоки собираются
   рендером includes/activity.php по данным инфоблоков activity_pages/cards.
   ========================================================================== */

/* ---------- Hero ---------- */
.act-hero {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.act-hero .hero-title { max-width: 820px; }
.act-hero .hero-subtitle { max-width: 620px; color: rgba(255, 255, 255, 0.85); }

/* Заголовок раздела (центрированный: рукописный акцент + h2) */
.act-menu .section-heading p,
.act-gallery .section-heading p { color: var(--c-green-deep, #335117); }
.act-menu .section-heading h2,
.act-gallery .section-heading h2 { color: var(--c-ink); }

/* ==========================================================================
   Блок карточек (беседки / залы)
   ========================================================================== */
.act-cards__title { margin-bottom: 40px; }
@media (max-width: 767.98px) { .act-cards__title { margin-bottom: 24px; } }

.act-grid { display: flex; flex-direction: column; gap: 24px; }

/* --- Десктоп-раскладки рядов (≥992px). Ниже — мобильный горизонтальный скролл,
       поэтому display:grid держим в медиазапросе, иначе он перебьёт display:contents. --- */
@media (min-width: 992px) {
  /* 3 в ряд (залы) */
  .act-grid--grid3 .act-grid__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  /* Шахматка: 4 беседки, верхний ряд прижат влево, нижний вправо */
  .act-grid--shahmatka .act-grid__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .act-grid--shahmatka .act-grid__row--top { padding-right: 231px; }
  .act-grid--shahmatka .act-grid__row--bottom { padding-left: 231px; }
}

/* --- Мобильная раскладка: горизонтальный скролл со снапом --- */
@media (max-width: 991.98px) {
  .act-grid { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
    scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(-1 * var(--gutter-sm)); padding-inline: var(--gutter-sm); }
  .act-grid::-webkit-scrollbar { display: none; }
  .act-grid__row { display: contents; }
  .act-grid .act-card { flex: 0 0 82%; max-width: 360px; scroll-snap-align: start; }
}

/* Карточка */
.act-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border, #e3e3e3);
  border-radius: 20px;
  padding: 16px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.act-card:hover { box-shadow: var(--shadow-soft); }
.act-card__img {
  position: relative; display: block; height: 260px;
  border-radius: 14px; overflow: hidden; flex: none;
}
.act-card__img > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.act-card:hover .act-card__img > img { transform: scale(1.035); }
.act-card__badges { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 2; }
.act-card__badge {
  padding: 8px 12px; border-radius: var(--radius-pill);
  background: var(--green-600, #1e3b27); color: var(--c-white);
  font-size: 14px; font-weight: 300; line-height: 1.4;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.act-card__body { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; flex-grow: 1; }
.act-card__name { margin: 0; color: var(--c-ink); }
.act-card__meta { display: flex; flex-direction: column; gap: 8px; }
.act-card__meta-item { display: inline-flex; align-items: center; gap: 8px; color: var(--c-ink); font-size: 14px; font-weight: 300; line-height: 1.4; }
.act-card__meta-item svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.act-card__price { margin: 0; color: var(--c-ink); }
.act-card__action { margin-top: auto; padding-top: 4px; }
.act-card__action .btn { width: 100%; }
@media (max-width: 991.98px) { .act-card__img { height: 218px; } }

/* ==========================================================================
   Меню ресторана (краевая карусель высоких карточек)
   ========================================================================== */
.act-menu__carousel { margin-top: 8px; }
.act-menu-card { display: flex; flex-direction: column; gap: 12px; }
.act-menu-card__img {
  display: block; width: 100%; aspect-ratio: 23 / 34;
  border-radius: 20px; overflow: hidden; background: var(--grey-400, #e3e3e3);
}
.act-menu-card__img > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.act-menu-card:hover .act-menu-card__img > img { transform: scale(1.04); }
.act-menu-card__title { margin: 0; color: var(--c-ink); }
.act-carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
@media (max-width: 767.98px) { .act-carousel-nav { margin-top: 24px; } }

/* ==========================================================================
   Характеристики / услуги (зелёные плитки)
   ========================================================================== */
.act-features__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr); gap: 24px; align-items: start; }
.act-features__title { margin: 0; }
.act-features__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 991.98px) {
  .act-features__wrap { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 575.98px) {
  .act-features__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.feat-tile {
  display: flex; flex-direction: column; gap: 16px;
  min-height: 150px; padding: 20px;
  border-radius: 20px; background: var(--green-600, #1e3b27); color: var(--c-white);
}
.feat-tile--solo { min-height: 128px; background: linear-gradient(120.35deg, #294732 0%, #1e3b27 68.47%); }
.feat-tile__icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; background: rgba(255, 255, 255, 0.1);
}
.feat-tile__icon svg { width: 22px; height: 22px; color: var(--c-white); }
.feat-tile__text { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.feat-tile__value { color: var(--c-white); }
.feat-tile__label { color: rgba(255, 255, 255, 0.65); }
.feat-tile--solo .feat-tile__label { color: var(--c-white); font-size: 18px; line-height: 1.25; }
@media (max-width: 767.98px) {
  .feat-tile { min-height: 128px; padding: 16px; }
  .feat-tile--solo .feat-tile__label { font-size: 16px; }
}

/* ==========================================================================
   Галерея (масонри: крупное фото + сетка 2×2, повтор)
   ========================================================================== */
.act-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 16px; }
.act-gallery__cell { position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--grey-400, #e3e3e3); }
.act-gallery__cell > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.act-gallery__cell:hover > img { transform: scale(1.04); }
.act-gallery__cell:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }

@media (max-width: 991.98px) {
  .act-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 12px; }
}
@media (max-width: 575.98px) {
  .act-gallery__grid {
    display: flex; grid-auto-rows: unset; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(-1 * var(--gutter-sm)); padding-inline: var(--gutter-sm);
  }
  .act-gallery__grid::-webkit-scrollbar { display: none; }
  .act-gallery__cell { flex: 0 0 82%; height: 240px; scroll-snap-align: start; }
  .act-gallery__cell:nth-child(5n + 1) { grid-column: auto; grid-row: auto; }
}

/* ==========================================================================
   Мобильная доводка по Figma («… [Mobile]», < 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Заголовок блока характеристик по центру; плитки 2 в ряд, нечётная последняя — во всю ширину */
  .act-features__title { text-align: center; }
  .act-features__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .act-features__tiles > .feat-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .feat-tile { min-height: 144px; }

  /* Карточки (беседки / залы): одна во всю ширину контейнера, следующая выглядывает */
  .act-grid { gap: 8px; }
  .act-grid .act-card { flex: 0 0 calc(100vw - var(--gutter-sm) * 2); max-width: none; }
  .act-cards__title { margin-bottom: 32px; }

  /* Галерея: плитки 300×400 от левого края контейнера */
  .act-gallery__grid { gap: 8px; }
  .act-gallery__cell { flex: 0 0 calc(100vw - var(--gutter-sm) * 2 - 58px); max-width: 300px; height: 400px; border-radius: 20px; }
}