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

.rt-page { overflow: clip; }

/* Абсолютный .visually-hidden caption внутри таблицы иначе вырывается из
   скролл-контейнера (.home-table-wrap статичен) и создаёт горизонтальную
   прокрутку всей страницы на узких экранах. */
.rt-page .home-table-wrap { position: relative; }

/* --- Хлебные крошки ------------------------------------------------------ */
.rt-crumbs { border-bottom: 1px solid var(--line); background: var(--paper); }
.rt-crumbs .container { padding-top: .95rem; padding-bottom: .95rem; }
.rt-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .72rem; }
.rt-crumbs li { display: inline-flex; align-items: center; gap: .45rem; }
.rt-crumbs li + li::before { content: "/"; color: rgba(23, 52, 59, .3); }
.rt-crumbs a { border-bottom: 1px solid transparent; padding-bottom: .1rem; }
.rt-crumbs a:hover { color: var(--coral); border-color: var(--coral); }
.rt-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --- Hero страницы направления ------------------------------------------ */
.rt-hero { min-height: 600px; }
.rt-hero h1 { max-width: 16ch; font-size: clamp(2.6rem, 5.6vw, 4.9rem); }
.rt-hero .home-hero__lead { max-width: 560px; }
.rt-hero__badge { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem; padding: .38rem .8rem; border: 1px solid rgba(239, 200, 107, .35); color: var(--sun); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.rt-hero__badge i { font-size: .9rem; }
.rt-hero__graph { position: relative; min-height: 340px; padding: 1.4rem 0 0 2rem; }
.rt-hero__graph::before { content: ""; position: absolute; left: .36rem; top: 2rem; bottom: 1.4rem; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .32) 12%, rgba(255, 255, 255, .32) 88%, transparent); }
.rt-hero__stop { position: relative; padding: .5rem 0 .5rem .1rem; }
.rt-hero__stop::before { content: ""; position: absolute; left: -2rem; top: .95rem; width: 11px; height: 11px; border: 2px solid var(--sun); border-radius: 50%; background: var(--river-950); }
.rt-hero__stop--last::before { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 0 6px rgba(233, 118, 93, .16); }
.rt-hero__stop small, .rt-hero__stop b, .rt-hero__stop span { display: block; }
.rt-hero__stop small { color: var(--sun); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rt-hero__stop b { margin: .18rem 0 .1rem; color: var(--white); font-family: var(--display); font-size: 1.28rem; font-weight: 600; }
.rt-hero__stop span { max-width: 240px; color: rgba(255, 255, 255, .58); font-size: .7rem; }
.rt-hero__graph .home-compass { left: auto; right: 4%; top: 4%; }

/* --- Полоса фактов ------------------------------------------------------- */
.rt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 2.2rem; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .14); }
.rt-facts > div { padding: 1rem 1.15rem; background: rgba(8, 47, 60, .42); }
.rt-facts small { display: block; margin-bottom: .4rem; color: var(--sun); font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rt-facts b { display: block; color: var(--white); font-size: .95rem; font-weight: 600; }
.rt-facts span { display: block; margin-top: .25rem; color: rgba(255, 255, 255, .55); font-size: .65rem; }
.rt-facts--light { border-color: var(--line); background: var(--line); }
.rt-facts--light > div { background: var(--white); }
.rt-facts--light small { color: var(--coral); }
.rt-facts--light b { color: var(--ink); }
.rt-facts--light span { color: var(--muted); }

/* --- Навигация по разделам страницы ------------------------------------- */
.rt-subnav { position: sticky; top: 76px; z-index: 15; border-bottom: 1px solid var(--line); background: rgba(245, 241, 233, .95); backdrop-filter: blur(12px); }
.rt-subnav .container { display: flex; gap: 1.4rem; padding-top: .85rem; padding-bottom: .85rem; overflow-x: auto; white-space: nowrap; }
.rt-subnav a { color: var(--muted); font-size: .72rem; font-weight: 600; }
.rt-subnav a:hover { color: var(--coral); }

/* --- Схема маршрута: остановки с временем ------------------------------- */
.rt-timeline { margin: 0; padding: 0 0 0 1.5rem; list-style: none; border-left: 1px solid var(--line); }
.rt-timeline > li { position: relative; padding: 0 0 1.7rem; }
.rt-timeline > li:last-child { padding-bottom: 0; }
.rt-timeline > li::before { content: ""; position: absolute; left: -1.86rem; top: .28rem; width: 10px; height: 10px; border: 2px solid var(--river-500); border-radius: 50%; background: var(--white); }
.rt-timeline > li.rt-timeline__key::before { border-color: var(--coral); background: var(--coral); box-shadow: 0 0 0 5px rgba(233, 118, 93, .14); }
.rt-timeline time { display: block; margin-bottom: .2rem; color: var(--coral); font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.rt-timeline b { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.rt-timeline p { max-width: 560px; margin: .3rem 0 0; color: var(--muted); font-size: .76rem; }

/* --- Карточки городов и мест ------------------------------------------- */
.rt-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.rt-place { padding: 1.6rem 1.5rem; background: var(--white); transition: background .25s; }
.rt-place:hover { background: var(--foam); }
.rt-place__num { display: block; margin-bottom: 1.1rem; color: var(--coral); font-size: .62rem; font-weight: 700; letter-spacing: .15em; }
.rt-place h3 { margin-bottom: .6rem; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.rt-place p { margin-bottom: 0; color: var(--muted); font-size: .75rem; }
.rt-place__meta { display: block; margin-top: .9rem; color: var(--river-800); font-size: .68rem; font-weight: 700; }
.rt-place__book { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; color: var(--river-800); font-size: .7rem; font-weight: 700; border-bottom: 1px solid var(--river-500); padding-bottom: .15rem; }
.rt-place__book:hover { color: var(--coral); border-color: var(--coral); }

/* --- Сравнение судов ---------------------------------------------------- */
.rt-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.rt-compare > div { padding: 1.7rem 1.6rem; background: var(--paper); }
.rt-compare > div:first-child { background: var(--river-950); color: var(--white); }
.rt-compare__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.rt-compare__head h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.rt-compare > div:first-child .rt-compare__head h3 { color: var(--white); }
.rt-compare__head span { color: var(--sun); font-size: .6rem; font-weight: 700; letter-spacing: .14em; }
.rt-compare > div:last-child .rt-compare__head span { color: var(--coral); }
.rt-compare dl { display: grid; gap: .55rem; margin: 0; }
.rt-compare dl > div { display: grid; grid-template-columns: .95fr 1.05fr; gap: .9rem; padding-top: .55rem; border-top: 1px solid var(--line); font-size: .76rem; }
.rt-compare > div:first-child dl > div { border-color: rgba(255, 255, 255, .16); }
.rt-compare dt { color: var(--muted); } 
.rt-compare > div:first-child dt { color: rgba(255, 255, 255, .58); }
.rt-compare dd { margin: 0; color: var(--ink); font-weight: 600; }
.rt-compare > div:first-child dd { color: var(--white); }

/* --- Соседние направления ---------------------------------------------- */
.rt-neighbors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.rt-neighbor { display: flex; flex-direction: column; gap: .45rem; padding: 1.5rem 1.4rem; background: var(--paper); transition: background .25s, box-shadow .25s; }
.rt-neighbor:hover { z-index: 1; background: var(--white); box-shadow: 0 10px 28px rgba(8, 47, 60, .1); }
.rt-neighbor small { color: var(--coral); font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.rt-neighbor b { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.rt-neighbor span { color: var(--muted); font-size: .72rem; }
.rt-neighbor i { align-self: flex-end; margin-top: .4rem; color: var(--coral); }

/* --- Служебное ---------------------------------------------------------- */
.rt-note { margin: 1.2rem 0 0; color: var(--muted); font-size: .69rem; }
.rt-note i { margin-right: .35rem; color: var(--coral); }
.rt-inline-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; margin: 0 0 1.6rem; padding: 0; list-style: none; color: var(--muted); font-size: .74rem; }
.rt-inline-facts li { display: inline-flex; align-items: center; gap: .45rem; }
.rt-inline-facts i { color: var(--river-500); }
.rt-inline-facts b { color: var(--ink); }
.rt-steps { counter-reset: rt-step; display: grid; gap: 1px; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--line); list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rt-steps li { position: relative; padding: 1.4rem 1.3rem; background: var(--white); counter-increment: rt-step; }
.rt-steps li::before { content: "0" counter(rt-step); display: block; margin-bottom: .8rem; color: var(--coral); font-size: .6rem; font-weight: 700; letter-spacing: .15em; }
.rt-steps b { display: block; margin-bottom: .35rem; font-family: var(--display); font-size: 1.08rem; font-weight: 600; }
.rt-steps p { margin: 0; color: var(--muted); font-size: .73rem; }
.rt-aside { padding: 1.5rem; border: 1px solid var(--line); background: var(--foam); }
.rt-aside h3 { margin-bottom: .7rem; font-size: 1.3rem; }
.rt-aside p, .rt-aside ul { color: var(--muted); font-size: .76rem; }
.rt-aside ul { margin: 0; padding-left: 1.1rem; }
.rt-aside li { margin-bottom: .4rem; }

@media (max-width: 991px) {
  .rt-hero { min-height: auto; }
  .rt-hero__graph { min-height: 280px; padding-top: .6rem; }
  .rt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-places, .rt-steps, .rt-neighbors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-subnav { top: 0; }
}

@media (max-width: 575px) {
  .rt-crumbs { display: none; }
  .rt-hero h1 { max-width: 12ch; }
  .rt-facts { grid-template-columns: 1fr; }
  .rt-places, .rt-compare, .rt-steps, .rt-neighbors { grid-template-columns: 1fr; }
  .rt-compare dl > div { grid-template-columns: 1fr; gap: .15rem; }
  .rt-subnav .container { gap: 1rem; }
}