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

/* --- Hero: билет-образец ------------------------------------------------- */
.bl-hero__visual { display: flex; flex-direction: column; justify-content: center; }
.bl-hero__facts { grid-column: 1 / -1; }

.bl-ticket { position: relative; z-index: 2; display: grid; grid-template-columns: 1.55fr .9fr; max-width: 460px; margin: 0 auto; background: var(--white); border-radius: 14px; box-shadow: 0 24px 60px rgba(4, 24, 31, .45); transform: rotate(-1.6deg); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; animation: bl-drift 7s ease-in-out infinite alternate; }
.bl-ticket:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 30px 70px rgba(4, 24, 31, .55); }

@keyframes bl-drift {
  from { transform: rotate(-1.6deg) translateY(0); }
  to { transform: rotate(-.6deg) translateY(-7px); }
}

.bl-ticket__main { display: flex; flex-direction: column; padding: 1.35rem 1.5rem 1.2rem; }

.bl-ticket__brand { color: var(--river-950); font-size: .56rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.bl-ticket__kind { margin-top: .25rem; color: var(--muted); font-size: .6rem; }

.bl-ticket__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem 1.2rem; margin: 1.2rem 0; padding: 1.05rem 0 0; border-top: 2px dashed var(--line); }
.bl-ticket__fields div { display: flex; flex-direction: column; }
.bl-ticket__fields dt { margin-bottom: .25rem; color: var(--coral); font-size: .52rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bl-ticket__fields dd { margin: 0; color: var(--ink); font-family: var(--display); font-size: .98rem; font-weight: 600; }

.bl-ticket__hint { margin-top: auto; padding-top: .8rem; color: var(--muted); font-size: .58rem; }

/* Контрольный корешок: перфорация + «проколы» + штрихкод + QR */
.bl-ticket__stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem 1rem; border-left: 2px dashed var(--line); border-radius: 0 14px 14px 0; background: var(--paper); }
.bl-ticket__stub::before, .bl-ticket__stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--river-950); }
.bl-ticket__stub::before { top: -11px; }
.bl-ticket__stub::after { bottom: -11px; }
.bl-ticket__stub-label { color: var(--muted); font-size: .52rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.bl-ticket__barcode { width: 100%; height: 42px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 14px, var(--ink) 14px 17px, transparent 17px 19px); }
.bl-ticket__qr { width: 54px; height: 54px; padding: 5px; border: 2px solid var(--ink); background: repeating-conic-gradient(var(--ink) 0% 25%, var(--white) 0% 50%) 0 0 / 7px 7px; background-clip: content-box; }
.bl-ticket__series { color: var(--river-800); font-size: .58rem; font-weight: 700; letter-spacing: .2em; }

.bl-hero__links { justify-content: center; margin-top: 1.2rem; }
.bl-hero__note { margin: .9rem 0 0; color: rgba(255, 255, 255, .5); font-size: .64rem; text-align: center; }
.bl-hero__note i { margin-right: .35rem; color: var(--sun); }

/* --- Способы покупки: три «корешка» -------------------------------------- */
.bl-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 2.2rem; padding: 0; border: 1px solid var(--line); background: var(--line); list-style: none; counter-reset: bl-way; }
.bl-way { position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.7rem; background: var(--white); transition: background .25s, box-shadow .25s, transform .25s; }
.bl-way:hover { z-index: 1; background: var(--foam); box-shadow: 0 14px 34px rgba(8, 47, 60, .12); transform: translateY(-3px); }
.bl-way__code { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.15rem; padding-bottom: .8rem; border-bottom: 2px dashed var(--line); color: var(--coral); font-size: .57rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bl-way__code i { font-size: 1.05rem; color: var(--river-700); }
.bl-way h3 { margin: 0 0 .6rem; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.bl-way p { margin: 0; color: var(--muted); font-size: .76rem; }
.bl-way p a { color: var(--river-800); font-weight: 600; border-bottom: 1px solid var(--river-500); }
.bl-way p a:hover { color: var(--coral); border-color: var(--coral); }
.bl-way:focus-within { outline: 2px solid var(--coral); outline-offset: -2px; }

.bl-table-lead { max-width: 640px; margin: 0 0 1.4rem; color: var(--muted); font-size: .8rem; }

/* --- Детские билеты: памятка-квитанция ----------------------------------- */
.bl-kidfacts { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.bl-kidfacts__row { padding: 1.25rem 1.4rem; background: var(--white); transition: background .25s; }
.bl-kidfacts__row:hover { background: var(--foam); }
.bl-kidfacts__row small { display: block; margin-bottom: .35rem; color: var(--coral); font-size: .55rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.bl-kidfacts__row b { display: block; color: var(--ink); font-family: var(--display); font-size: 1.12rem; font-weight: 600; }
.bl-kidfacts__row span { display: block; margin-top: .3rem; color: var(--muted); font-size: .7rem; }
.bl-kidfacts__row--accent { background: var(--river-950); }
.bl-kidfacts__row--accent:hover { background: var(--river-900); }
.bl-kidfacts__row--accent small { color: var(--sun); }
.bl-kidfacts__row--accent b { color: var(--white); }
.bl-kidfacts__row--accent span { color: rgba(255, 255, 255, .6); }

/* --- Возврат: шаги на тёмной бумаге -------------------------------------- */
.bl-returns li { background: var(--white); }

/* --- Электронный билет: шаги --------------------------------------------- */
.bl-el-steps li { background: var(--white); }

/* --- Карточки рейсов: компактные карточки-ссылки -------------------------- */
/* Компактные карточки офферов по единому спеку: маленькое фото сверху
   (120px) и короткий текстовый блок; размеры — строго по спеку. */
.bl-offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.bl-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;
}
.bl-offer:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 30, 51, .08); }
.bl-offer img { width: 100%; height: 120px; object-fit: cover; display: block; }
.bl-offer__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.bl-offer__badge { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.bl-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;
}
.bl-offer__meta { font-size: .78rem; opacity: .75; display: flex; gap: 10px; flex-wrap: wrap; }
.bl-offer__place { font-size: .78rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-offer__price { font-size: .95rem; font-weight: 600; margin-top: auto; }
@media (max-width: 575px) { .bl-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bl-offer img { height: 96px; } }
@media (max-width: 380px) { .bl-offers { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bl-offer { transition: none; } .bl-offer:hover { transform: none; } }

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bl-ticket { transform: rotate(-.8deg); animation: none; }
  .bl-ways { grid-template-columns: 1fr; }
  .bl-way { flex-direction: column; }
}

@media (max-width: 768px) {
  .bl-ticket { grid-template-columns: 1fr; max-width: 380px; }
  .bl-ticket__stub { flex-direction: row; justify-content: space-between; padding: .9rem 1.1rem; border-left: 0; border-top: 2px dashed var(--line); border-radius: 0 0 14px 14px; }
  .bl-ticket__stub::before { top: -11px; left: -11px; }
  .bl-ticket__stub::after { left: auto; right: -11px; bottom: auto; top: -11px; }
  .bl-ticket__barcode { width: 34%; }
  .bl-ticket__qr { width: 40px; height: 40px; }
  .bl-kidfacts__row { padding: 1.1rem 1.2rem; }
}

@media (max-width: 390px) {
  .bl-ticket__main { padding: 1.15rem 1.2rem 1rem; }
  .bl-ticket__fields { gap: .75rem .9rem; }
  .bl-ticket__fields dd { font-size: .9rem; }
  .bl-ticket__stub { flex-wrap: wrap; gap: .6rem; }
  .bl-ticket__barcode { width: 100%; }
  .bl-way { padding: 1.3rem 1.15rem 1.4rem; }
}

/* --- Доступность: без движения -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bl-ticket { animation: none; transform: rotate(-.8deg); }
  .bl-ticket:hover, .bl-way, .bl-way:hover, .bl-kidfacts__row { transition: none; transform: none; }
}