/* =============================================================================
   Главная, вторая итерация полировки. Подключается после home-2026.css
   и до mobile-2026.css: мобильные правила перекрывают эти на телефоне.
   ========================================================================== */

/* --- Единый фон ---------------------------------------------------------------
   Секции чередовались чёрным и фиолетовым, и страница читалась как собранная
   из кусков. Фон один на всю страницу, секции разделяет ритм отступов. */
.speakers-section,
.testimonial-section,
.portfolio-section,
.contact-section {
   background: transparent !important;
}

.testimonial-section::before { opacity: 0.35; }

/* Ритм: было по полному шагу сверху и снизу у каждой секции — между
   блоками копилось до 290px пустоты. Теперь ~170px на широком экране. */
.speakers-section,
.welcome-message-section,
.sessions-2026,
.testimonial-section,
.portfolio-section,
.contact-section {
   padding-block: calc(var(--space-section) * 0.6) !important;
}

/* Пустой блок гостей — строка текста, а не 500px экрана. */
.speakers-section--empty { padding-block: clamp(48px, 2rem + 3vw, 88px) !important; }
.speakers-section--empty .section-header { margin-bottom: 20px; }

/* --- Первый экран: ключевые цифры ------------------------------------------ */
.hero-2026__facts {
   display: flex;
   flex-wrap: wrap;
   gap: 12px 32px;
   margin: 36px 0 0;
   padding: 24px 0 0;
   border-top: 1px solid var(--c-hairline);
   list-style: none;
}

.hero-2026__fact {
   display: flex;
   align-items: baseline;
   gap: 8px;
}

.hero-2026__fact-number {
   font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
   font-weight: 600;
   line-height: 1;
   letter-spacing: -0.03em;
   font-variant-numeric: tabular-nums;
   color: var(--c-text);
}

.hero-2026__fact-label { font-size: var(--fs-body); color: var(--c-text-2); }

/* --- Приветствие: свёрнутый текст ------------------------------------------ */
/* Класс ставит скрипт в _welcome-message: без JS текст виден целиком. */
.welcome-slide__text.is-collapsed {
   max-height: 340px;
   overflow: hidden;
   -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
   mask-image: linear-gradient(to bottom, #000 62%, transparent);
}

.welcome-slide__toggle {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   margin-top: 12px;
   padding: 0 22px;
   border: 1px solid var(--c-hairline-strong);
   border-radius: 999px;
   background: var(--c-surface-2);
   color: var(--c-text);
   font-size: var(--fs-small);
   font-weight: 600;
   transition: background-color 0.2s ease;
}

.welcome-slide__toggle:hover { background: rgba(255, 255, 255, 0.12); }

@media (min-width: 768px) {
   /* Кнопка — под текстом, во второй колонке. Без этого она становилась
      третьим элементом сетки и уезжала под фотографию. */
   /* Фото с подписью занимает обе строки сетки слайда, текст и кнопка
      идут одна под другой во второй колонке, без пустоты между ними. */
   .welcome-slide { grid-template-rows: auto 1fr; }
   .welcome-slide__person { grid-row: 1 / span 2; }
   .welcome-slide__text { grid-column: 2; grid-row: 1; }
   .welcome-slide__toggle { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin-top: 4px; }
}

/* --- Гостиницы: компактный список -------------------------------------------
   Шесть гостиниц — короткий список, а не витрина: фото-миниатюра, название
   и адрес. Два ряда на широком экране, три на узком. Активный город — класс
   на кнопке, а не подложка, которую двигал скрипт: та до полной загрузки
   страницы накрывала все кнопки, и фильтр выглядел нерабочим. */
.hotels { text-align: center; }

.hotels__filter {
   display: inline-flex;
   gap: 4px;
   max-width: 100%;
   padding: 4px;
   border-radius: 999px;
   background: var(--c-surface-2);
   box-shadow: inset 0 0 0 1px var(--c-hairline);
}

.hotels__tab {
   min-height: 44px;
   padding: 0 22px;
   border: 0;
   border-radius: 999px;
   background: transparent;
   color: var(--c-text-2);
   font-size: var(--fs-small);
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
   transition: background-color 0.2s ease, color 0.2s ease;
}

.hotels__tab:hover { color: var(--c-text); }
.hotels__tab:active { transform: scale(0.97); }

.hotels__tab.is-active {
   background: var(--c-accent-fill);
   color: #fff;
}

.hotels__tab:focus-visible {
   outline: 2px solid var(--c-focus);
   outline-offset: 2px;
}

.hotels__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   margin: 28px 0 0;
   padding: 0;
   list-style: none;
   text-align: left;
}

.hotel-card {
   position: relative;
   display: grid;
   grid-template-columns: 116px minmax(0, 1fr);
   align-items: center;
   gap: 16px;
   padding: 10px;
   border-radius: var(--r-md);
   background: var(--c-surface);
   box-shadow: inset 0 0 0 1px var(--c-hairline);
   transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.hotel-card[hidden] { display: none; }

.hotel-card:hover {
   background: var(--c-surface-2);
   box-shadow: inset 0 0 0 1px var(--c-hairline-strong), 0 20px 48px -24px rgba(0, 0, 0, 0.6);
}

.hotel-card__image {
   display: block;
   width: 116px;
   height: 88px;
   border-radius: var(--r-sm);
   object-fit: cover;
}

.hotel-card__title {
   margin: 0 0 4px;
   font-size: 1.0625rem;
   font-weight: 600;
   line-height: 1.3;
   color: var(--c-text);
}

/* Адрес — не больше двух строк: карточки одной высоты, полный адрес —
   в подробностях гостиницы. */
.hotel-card__address {
   display: -webkit-box;
   margin: 0;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   font-size: 0.875rem;
   line-height: 1.4;
   color: var(--c-text-2);
}

/* Нажимается вся карточка: кнопка «Подробнее» растянута на неё целиком. */
.hotel-card__link {
   position: absolute;
   inset: 0;
   padding: 0;
   border: 0;
   border-radius: inherit;
   background: none;
   cursor: pointer;
}

.hotel-card__link:focus-visible {
   outline: 2px solid var(--c-focus);
   outline-offset: 2px;
}

@media (min-width: 992px) {
   .hotels__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
   }
}

/* Телефон: в две колонки строке «фото + текст» тесно — фото уходит наверх. */
@media (max-width: 575.98px) {
   .hotels__filter { display: flex; }
   .hotels__tab { flex: 1 1 0; padding: 0 8px; }

   .hotel-card {
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      gap: 10px;
      padding: 8px 8px 12px;
   }

   .hotel-card__image {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 10;
   }

   .hotel-card__body { padding-inline: 4px; }
   .hotel-card__title { font-size: 0.9375rem; }
   .hotel-card__address { font-size: 0.8125rem; }
}

/* --- Мягкое появление при прокрутке -----------------------------------------
   Класс is-reveal ставит reveal.js: без JS и при «уменьшить движение»
   всё видно сразу. */
.is-reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.is-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
   .is-reveal { opacity: 1; transform: none; transition: none; }
}