/*
 * hub.css — оформление хаба раздела «Круизы» (/kruizy).
 *
 * Слой дополняет редакционную систему styles.css (.home-*) и каркас
 * маршрутных страниц route.css (.rt-*): здесь только то, чего нет в общих
 * файлах, под префиксом kh-. Токены, шрифты и палитра — из styles.css,
 * новых цветов и шрифтов не вводим.
 */

/* --- Hero: факты, длительности направлений, примечание ------------------- */
.kh-hero-facts { grid-column: 1 / -1; }
.kh-hero__graph .rt-hero__stop small { letter-spacing: .12em; }
.kh-hero-note { margin: 1.4rem 0 0; color: rgba(255, 255, 255, .5); font-size: .66rem; }
.kh-hero-note i { margin-right: .35rem; color: var(--sun); }

/* --- Подпись «Куда уходят теплоходы» над сеткой направлений -------------- */
.kh-grid-title { display: flex; align-items: center; gap: 1.2rem; margin: 0 0 1.7rem; font-size: clamp(1.12rem, 1.9vw, 1.55rem); }
.kh-grid-title span { display: inline-flex; align-items: center; gap: .65rem; }
.kh-grid-title span::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; background: var(--coral); border-radius: 50%; }
.kh-grid-title::after { content: ""; flex: 1; min-width: 2rem; height: 1px; background: var(--line); }

/* --- Сетка направлений: нумерация карточек счётчиком -------------------- */
.kh-routes { counter-reset: kh-card; }
.kh-card { counter-increment: kh-card; }
.kh-card::before { content: "0" counter(kh-card); display: block; margin-bottom: 1.15rem; color: var(--coral); font-size: .62rem; font-weight: 700; letter-spacing: .15em; }
.kh-card--featured::before { color: var(--sun); }
.kh-card:hover::before { color: var(--river-800); }
.kh-card--featured:hover::before { color: var(--white); }
.kh-card:focus-visible,
.kh-hub-tile a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* Восьмая ячейка сетки — не карточка-ссылка, а справка о навигации. */
.kh-hub-tile { position: relative; min-height: 245px; display: flex; flex-direction: column; justify-content: center; gap: .85rem; padding: 2.4rem 2rem; background: var(--foam); }
.kh-hub-tile::before { content: ""; position: absolute; inset: .85rem; border: 1px dashed rgba(23, 52, 59, .26); pointer-events: none; }
.kh-hub-tile__label { color: var(--river-700); font-size: .59rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.kh-hub-tile p { max-width: 240px; margin: 0; color: var(--muted); font-size: .74rem; }
.kh-hub-tile .home-text-link { align-self: flex-start; font-size: .7rem; }

/* --- Форматы: ссылка внутри карточки-плитки ----------------------------- */
.kh-formats .kh-formats__link { margin: .1rem 0 .7rem; font-size: .68rem; }

/* --- Что входит в путёвку ---------------------------------------------- */
.kh-includes .rt-compare > div { transition: background .3s; }
.kh-includes .rt-compare > div:last-child:hover { background: var(--white); }
.kh-includes .rt-compare dl > div { grid-template-columns: .85fr 1.15fr; }
.kh-includes__aside { max-width: 560px; margin-top: 2.2rem; }

/* --- Плашка «пример недели» перед таблицей расписания ------------------- */
.kh-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: 1.1rem; }
.kh-tag { display: inline-flex; align-items: center; padding: .32rem .75rem; border: 1px dashed rgba(233, 118, 93, .5); color: var(--coral); font-size: .57rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

/* --- Цены: лид перед таблицей ------------------------------------------ */
.kh-price-lead { max-width: 640px; margin: -1.4rem 0 2.4rem; color: var(--muted); font-size: .86rem; }

/* --- Причал: ссылки ---------------------------------------------------- */
.kh-station-links { display: flex; flex-wrap: wrap; gap: .9rem 1.8rem; }

/* --- Офферы -------------------------------------------------------------
   Карточки офферов переведены на компактный спек: стили живут в scoped-<style>
   шаблона kruizy.html (.kh-offer*). */

/* --- Появление сетки направлений -------------------------------------- */
@keyframes kh-rise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

.kh-routes > * { animation: kh-rise .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.kh-routes > *:nth-child(1) { animation-delay: .03s; }
.kh-routes > *:nth-child(2) { animation-delay: .07s; }
.kh-routes > *:nth-child(3) { animation-delay: .11s; }
.kh-routes > *:nth-child(4) { animation-delay: .15s; }
.kh-routes > *:nth-child(5) { animation-delay: .19s; }
.kh-routes > *:nth-child(6) { animation-delay: .23s; }
.kh-routes > *:nth-child(7) { animation-delay: .27s; }
.kh-routes > *:nth-child(8) { animation-delay: .31s; }

@media (max-width: 991px) {
  .kh-includes__aside { max-width: none; }
}

@media (max-width: 767px) {
  .kh-grid-title { margin-bottom: 1.2rem; }
}

@media (max-width: 575px) {
  .kh-hero-note { font-size: .62rem; }
  .kh-hub-tile { min-height: 210px; padding: 2rem 1.5rem; }
  .kh-hub-tile p { font-size: .71rem; }
  .kh-includes .rt-compare dl > div { grid-template-columns: 1fr; }
  .kh-price-lead { margin-top: -1rem; font-size: .82rem; }
}