/*
 * vechernie.css — страница «Вечерние прогулки» (/progulki/vechernie).
 *
 * Каркас и токены берутся из route.css и styles.css; здесь только локальные
 * надстройки с префиксом .ve-: примечание в hero, плашка «пример вечера»,
 * заголовок сравнения рейсов, карточки вечерних программ и карточки офферов.
 * Новых цветов и шрифтов не вводим — используем переменные сайта.
 */

/* Примечание о демонстрационных данных в схеме вечернего рейса. */
.ve-hero-note { position: relative; margin: 1.1rem 0 0; color: rgba(255, 255, 255, .55); font-size: .66rem; }
.ve-hero-note i { margin-right: .35rem; color: var(--sun); }

/* Плашка-пометка над таблицей рейсов. */
.ve-table-head { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.ve-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .75rem; border: 1px solid var(--line); background: var(--white); color: var(--river-800); font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ve-tag i { color: var(--coral); }

/* Заголовок сравнения «Дневной рейс и вечерний». */
.ve-compare-title { margin: 3.4rem 0 1.4rem; font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.ve-compare-title em { font-style: italic; color: var(--coral); }

/* Карточки вечерних программ (секция «Музыка и танцы» на тёмном фоне). */
.ve-program { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .16); }
.ve-program__card { padding: 1.7rem 1.6rem; background: rgba(8, 47, 60, .5); transition: background .25s, transform .25s; }
.ve-program__card:hover { background: var(--river-900); transform: translateY(-3px); }
.ve-program__num { display: block; margin-bottom: 1.3rem; color: var(--sun); font-size: .58rem; font-weight: 700; letter-spacing: .15em; }
.ve-program__card > i { display: block; margin-bottom: 1.2rem; color: var(--sun); font-size: 1.55rem; }
.ve-program__card h3 { margin-bottom: .6rem; color: var(--white); font-size: 1.34rem; }
.ve-program__card p { margin: 0; color: rgba(255, 255, 255, .62); font-size: .76rem; }

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

/* Ссылки в блоке речного вокзала и строка ссылок в подборке. */
.ve-station-links { display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; }
.ve-links { display: flex; flex-wrap: wrap; gap: .8rem 2rem; }

@media (max-width: 991px) {
  .ve-program { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .ve-program { grid-template-columns: 1fr; }
  .ve-compare-title { margin-top: 2.4rem; }
}