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

/* --- Hero: лестница цен «прогулка → пригород → аренда → круиз» ----------- */
.cn-hero__visual { display: flex; flex-direction: column; justify-content: center; }
.cn-hero-facts { grid-column: 1 / -1; }

.cn-scale { position: relative; z-index: 2; display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.cn-scale__row { display: grid; grid-template-columns: minmax(96px, .42fr) 1fr; gap: .35rem .9rem; align-items: center; }
.cn-scale__row b { color: var(--white); font-family: var(--display); font-size: .98rem; font-weight: 600; letter-spacing: -.02em; text-align: right; }
.cn-scale__row small { grid-column: 2; color: rgba(255, 255, 255, .55); font-size: .62rem; }
.cn-scale__bar { position: relative; height: 14px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(8, 47, 60, .5); transform-origin: left center; animation: cn-grow .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.cn-scale__bar::after { content: "₽"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); color: var(--sun); font-size: .56rem; font-weight: 700; }
.cn-scale__row:nth-child(1) .cn-scale__bar { width: var(--w, 34%); animation-delay: .1s; }
.cn-scale__row:nth-child(2) .cn-scale__bar { width: var(--w, 48%); animation-delay: .22s; }
.cn-scale__row:nth-child(3) .cn-scale__bar { width: var(--w, 70%); animation-delay: .34s; }
.cn-scale__row:nth-child(4) .cn-scale__bar { width: var(--w, 100%); background: linear-gradient(90deg, rgba(233, 118, 93, .34), rgba(22, 114, 134, .5)); animation-delay: .46s; }
@keyframes cn-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.cn-hero__visual .home-compass { position: static; display: flex; align-items: center; justify-content: flex-end; gap: .55rem; margin: .95rem 0 0; padding-bottom: .55rem; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.cn-hero__visual .home-compass i { margin: 0; font-size: 1.1rem; }
.cn-hero__visual .home-compass small { letter-spacing: .22em; }

.cn-hero-links { justify-content: flex-start; margin-top: 1.1rem; }
.cn-hero__note { margin: .95rem 0 0; color: rgba(255, 255, 255, .5); font-size: .64rem; }
.cn-hero__note i { margin-right: .35rem; color: var(--sun); }

/* --- Сводка: плашка «ориентировочно» и таблица --------------------------- */
.cn-tagrow { margin-bottom: 1.1rem; }
.cn-tag { display: inline-flex; align-items: center; gap: .4rem; 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; }

.cn-price { min-width: 860px; }
.cn-price td:first-child { width: auto; min-width: 150px; }
.cn-price th[scope="row"] { padding: 1.1rem 1rem; border-top: 1px solid var(--line); color: var(--river-800); font-size: .8rem; font-weight: 700; text-align: left; vertical-align: middle; }
.cn-price th[scope="row"] small { display: block; margin-top: .18rem; color: var(--muted); font-size: .67rem; font-weight: 500; }
.cn-price td { font-variant-numeric: tabular-nums; }
.cn-price td a { color: var(--river-800); font-weight: 600; border-bottom: 1px solid var(--river-500); padding-bottom: .1rem; white-space: nowrap; }
.cn-price td a:hover { color: var(--coral); border-color: var(--coral); }
.cn-price td b small { font-weight: 500; }

.cn-cap { padding: .8rem .2rem 0; color: var(--muted); font-size: .68rem; font-style: italic; text-align: left; caption-side: bottom; }

/* --- Карточки рейсов с точной ценой -------------------------------------- */
.cn-cards-head { margin: 3.2rem 0 1.2rem; }
.cn-cards-head h3 { margin: 0; font-size: clamp(1.35rem, 2.3vw, 1.95rem); }
/* Компактные карточки офферов по единому спеку: маленькое фото сверху
   (120px) и короткий текстовый блок; размеры — строго по спеку. */
.cn-offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.cn-offer {
  display: flex; flex-direction: column;
  border: 1px solid rgba(10, 30, 51, .12); border-radius: 12px;
  overflow: hidden; background: var(--paper, #fff);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cn-offer:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 30, 51, .08); }
.cn-offer img { width: 100%; height: 120px; object-fit: cover; display: block; }
.cn-offer__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.cn-offer__badge { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.cn-offer__title {
  font-family: var(--display, Georgia, serif);
  font-size: 1rem; line-height: 1.25; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cn-offer__meta { font-size: .78rem; opacity: .75; display: flex; gap: 10px; flex-wrap: wrap; }
.cn-offer__place { font-size: .78rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-offer__price { font-size: .95rem; font-weight: 600; margin-top: auto; }
@media (max-width: 575px) { .cn-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cn-offer img { height: 96px; } }
@media (max-width: 380px) { .cn-offers { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cn-offer { transition: none; } .cn-offer:hover { transform: none; } }

/* --- Механика цены: пять слагаемых ---------------------------------------- */
.cn-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--line); list-style: none; counter-reset: cn-factor; }
.cn-factor { position: relative; padding: 1.55rem 1.5rem; background: var(--paper); counter-increment: cn-factor; transition: background .25s; }
.cn-factor:hover { background: var(--white); }
.cn-factor:nth-child(5) { grid-column: 1 / -1; }
.cn-factor__num { display: block; margin-bottom: .9rem; color: var(--coral); font-size: .62rem; font-weight: 700; letter-spacing: .15em; }
.cn-factor__num::before { content: "0" counter(cn-factor) " / "; }
.cn-factor h3 { margin-bottom: .5rem; font-size: 1.28rem; }
.cn-factor p { max-width: 460px; margin: 0; color: var(--muted); font-size: .75rem; }

.cn-closing { max-width: 720px; margin: 2rem 0 0; color: var(--muted); font-size: .82rem; }
.cn-closing .home-text-link { margin-left: .4rem; }

/* --- Стоимость круиза: состав цены по форматам ---------------------------- */
.cn-cruise { background: var(--foam); }
.cn-cruise__text p { max-width: 780px; margin: 0 0 2rem; color: var(--ink); font-size: .88rem; }
.cn-included { min-width: 720px; }
.cn-included th[scope="row"] { padding: 1.1rem 1rem; border-top: 1px solid var(--line); color: var(--river-800); font-size: .8rem; font-weight: 700; text-align: left; vertical-align: middle; }
.cn-included th[scope="row"] small { display: block; margin-top: .18rem; color: var(--muted); font-size: .67rem; font-weight: 500; }
.cn-included td { font-size: .75rem; vertical-align: middle; }
.cn-cruise .home-table tr:hover td { background: rgba(255, 255, 255, .62); }

/* --- Детские билеты: две колонки ------------------------------------------ */
.cn-kids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.cn-kids__col { padding: 1.7rem 1.6rem; background: var(--white); }
.cn-kids__col h3 { margin-bottom: .7rem; font-size: 1.3rem; }
.cn-kids__col p { margin: 0; color: var(--muted); font-size: .78rem; }
.cn-kids__col a { color: var(--river-800); font-weight: 600; border-bottom: 1px solid var(--river-500); }
.cn-kids__col a:hover { color: var(--coral); border-color: var(--coral); }

/* --- Аренда судна ---------------------------------------------------------- */
.cn-arenda { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cn-arenda__text p:not(.rt-note) { max-width: 520px; margin-bottom: 1.4rem; color: var(--ink); font-size: .9rem; }
.cn-arenda-facts { margin-top: 0; }

/* --- Уровни цен: пунктирные лидеры, как в прейскуранте -------------------- */
.cn-tiers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cn-tier { padding: 1.6rem .2rem 1.7rem; border-bottom: 1px solid var(--line); }
.cn-tier__line { display: flex; align-items: baseline; gap: .9rem; }
.cn-tier__line b { font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 600; white-space: nowrap; }
.cn-tier__dots { flex: 1; border-bottom: 2px dotted rgba(23, 52, 59, .35); transform: translateY(-.35rem); }
.cn-tier__price { color: var(--river-800); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-tier p { max-width: 640px; margin: .7rem 0 0; color: var(--muted); font-size: .78rem; }
.cn-tier p a { display: inline-flex; align-items: center; gap: .35rem; margin-left: .35rem; color: var(--river-800); font-weight: 700; border-bottom: 1px solid var(--river-500); padding-bottom: .12rem; white-space: nowrap; }
.cn-tier p a:hover { color: var(--coral); border-color: var(--coral); }

/* --- Адаптив --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cn-arenda { grid-template-columns: 1fr; }
  .cn-arenda-facts { margin-top: .5rem; }
}

@media (max-width: 768px) {
  .cn-kids { grid-template-columns: 1fr; }
  .cn-factors { grid-template-columns: 1fr; }
  .cn-factor:nth-child(5) { grid-column: auto; }
  .cn-scale__row b { font-size: .88rem; }
}

@media (max-width: 390px) {
  .cn-scale__row { grid-template-columns: 1fr; }
  .cn-scale__row b { text-align: left; }
  .cn-scale__row small { grid-column: 1; }
  .cn-tier__line { flex-wrap: wrap; gap: .4rem .7rem; }
  .cn-tier__dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-scale__bar { animation: none; }
  .cn-factor { transition: none; }
}