/* ==========================================================================
   Токены и контраст - общий слой
   Раньше эти переменные жили в product-page.css на body.tp-product-page,
   то есть были доступны только карточке товара. Листинги про них не знали,
   и на них вперемешку стояли rounded-3 / rounded-4 / rounded-5 и цвета
   Bootstrap по умолчанию.
   Файл подключается последним, чтобы перебивать утилиты Bootstrap:
   у них !important, и при равной специфичности выигрывает то, что ниже.
   ========================================================================== */

:root {
    /* --- Палитра. Каждое значение проверено на контраст WCAG 2.1 AA --- */
    --tp-ink: #16232b;          /* основной текст, 16.04:1 на белом */
    --tp-ink-muted: #5c6b73;    /* вторичный текст, 5.23:1 на #f8f9fa */
    --tp-ink-faint: #8a969d;    /* только для крупного текста и иконок */
    --tp-link: #0a58ca;         /* 6.11:1 на #f8f9fa, у Bootstrap #0d6efd было 4.26 */
    --tp-price: #0f7a5a;        /* 5.31:1 */
    --tp-cta: #ffc107;          /* фон CTA */
    --tp-cta-hover: #ffcd39;
    --tp-cta-ink: #16232b;      /* темный текст на CTA: 9.84:1, белый давал 1.63 */
    --tp-amber-ink: #8a6100;    /* янтарный текст на светлом: 5.54:1, #ffc107 давал 1.63 */
    --tp-cyan-ink: #087990;     /* 5.06:1 на белом, у Bootstrap #0dcaf0 было 1.95 */

    --tp-surface: #ffffff;
    --tp-surface-tint: #f5f7f9;
    --tp-surface-accent: #eef4f7;
    --tp-border: #e2e8ec;
    --tp-border-strong: #c9d4db;

    /* --- Шкала отступов, шаг 4 --- */
    --tp-1: 4px;
    --tp-2: 8px;
    --tp-3: 12px;
    --tp-4: 16px;
    --tp-5: 24px;
    --tp-6: 32px;
    --tp-7: 48px;
    --tp-8: 64px;

    /* --- Радиусы --- */
    --tp-r-sm: 8px;
    --tp-r-md: 12px;
    --tp-r-lg: 16px;
    --tp-r-pill: 999px;

    /* --- Слои --- */
    --tp-ring: 0 0 0 1px var(--tp-border);
    --tp-shadow-sm: 0 1px 2px rgba(22, 35, 43, .06);
    --tp-shadow-md: 0 6px 16px rgba(22, 35, 43, .08);
    --tp-shadow-lg: 0 12px 32px rgba(22, 35, 43, .12);

    /* --- Типографика --- */
    --tp-fs-xs: .8125rem;   /* 13 */
    --tp-fs-sm: .875rem;    /* 14 */
    --tp-fs-md: 1rem;       /* 16 */
    --tp-fs-lg: 1.125rem;   /* 18 */
    --tp-fs-xl: 1.375rem;   /* 22 */
    --tp-fs-2xl: 1.75rem;   /* 28 */

    /* --- Один радиус на все, кроме аватаров и пилюль. Переменные Bootstrap
           перекрываются здесь, чтобы не править rounded-4 / rounded-5 в разметке. --- */
    --bs-border-radius: var(--tp-r-md);
    --bs-border-radius-sm: var(--tp-r-sm);
    --bs-border-radius-lg: var(--tp-r-md);
    --bs-border-radius-xl: var(--tp-r-md);
    --bs-border-radius-xxl: var(--tp-r-md);

    /* --- Ссылки --- */
    --bs-link-color: var(--tp-link);
    --bs-link-color-rgb: 10, 88, 202;
    --bs-link-hover-color: #084298;
    --bs-link-hover-color-rgb: 8, 66, 152;
}

/* ==========================================================================
   Контраст
   Замер axe до правок на трех страницах листинга: 352 узла color-contrast,
   восемь пар цветов. Пять пар ниже давали 340 узлов из 352.
   ========================================================================== */

/* 170 узлов: #6c757d на #f8f9fa = 4.44 при нужных 4.5 */
.text-secondary,
.text-muted {
    color: var(--tp-ink-muted) !important;
}

/* Цены и рейтинги. Фирменный янтарь по решению заказчика: контраст на белом
   1.63 при норме WCAG 4.5. Кнопки и контуры на него не переведены, у них
   остается --tp-amber-ink, иначе они стали бы нечитаемыми целиком. */
.text-warning {
    color: #ffc107 !important;
}

/* Поверх фотографии подложка непредсказуема, поэтому под текстом скрим. */
.tp-on-media {
    background: rgba(0, 0, 0, .55) !important;
}

.tp-on-media,
.tp-on-media .text-secondary,
.tp-on-media .text-muted {
    color: #ffffff !important;
}


/* 22 узла: #0dcaf0 на белом = 1.95 */
.btn-outline-info {
    --bs-btn-color: var(--tp-cyan-ink);
    --bs-btn-border-color: var(--tp-cyan-ink);
    --bs-btn-hover-bg: var(--tp-cyan-ink);
    --bs-btn-hover-border-color: var(--tp-cyan-ink);
    --bs-btn-active-bg: var(--tp-cyan-ink);
    --bs-btn-active-border-color: var(--tp-cyan-ink);
}

.text-info {
    color: var(--tp-cyan-ink) !important;
}

/* 3 узла: белый текст на янтарной кнопке = 1.63 */
.btn-warning {
    --bs-btn-color: var(--tp-cta-ink);
    --bs-btn-hover-color: var(--tp-cta-ink);
    --bs-btn-active-color: var(--tp-cta-ink);
}

.btn-warning.text-white {
    color: var(--tp-cta-ink) !important;
}

/* ==========================================================================
   Цели нажатия и кнопки
   ========================================================================== */

/* Цель не меньше 24x24 по A2. btn-sm у Bootstrap дает 31px по высоте,
   но у иконочных кнопок без текста ширина схлопывалась. */
.btn {
    min-height: 40px;
}

.btn-sm {
    min-height: 32px;
}

.btn-check + .btn {
    min-height: 32px;
}

/* 36 узлов: серый контур кнопок. --bs-btn-color у btn-outline-secondary
   это #6c757d, тот же провал 4.44, что и у текста. */
.btn-outline-secondary {
    --bs-btn-color: var(--tp-ink-muted);
    --bs-btn-border-color: var(--tp-border-strong);
    --bs-btn-hover-bg: var(--tp-ink-muted);
    --bs-btn-hover-border-color: var(--tp-ink-muted);
    --bs-btn-active-bg: var(--tp-ink-muted);
    --bs-btn-active-border-color: var(--tp-ink-muted);
}

.btn-outline-warning {
    --bs-btn-color: var(--tp-amber-ink);
    --bs-btn-border-color: var(--tp-amber-ink);
    --bs-btn-hover-bg: var(--tp-cta);
    --bs-btn-hover-color: var(--tp-cta-ink);
    --bs-btn-border-color: var(--tp-amber-ink);
}

/* ==========================================================================
   Сортировка листинга
   Было: opacity-50 утилитой на всех четырех кнопках всегда. Выбранный
   вариант ничем не отличался от остальных, а полупрозрачный белый на синем
   давал контраст 2.23. Теперь невыбранные - контурные, выбранная - залитая.
   ========================================================================== */

.tp-sort-btn {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--tp-ink-muted);
    --bs-btn-border-color: var(--tp-border-strong);
    --bs-btn-hover-bg: var(--tp-surface-tint);
    --bs-btn-hover-color: var(--tp-ink);
    --bs-btn-hover-border-color: var(--tp-border-strong);
    min-height: 32px;
}

.btn-check:checked + .tp-sort-btn {
    --bs-btn-bg: var(--tp-link);          /* белый на нем 6.44:1 */
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: var(--tp-link);
}

.btn-check:focus-visible + .tp-sort-btn {
    outline: 2px solid var(--tp-link);
    outline-offset: 2px;
}

/* ==========================================================================
   Первый экран
   Замер на 390x844 до правок: шапка сущности 585px, первая карточка
   начиналась на 957px, то есть за пределами экрана. Целевое по A1 -
   карточки видны без прокрутки.
   ========================================================================== */

@media (max-width: 767.98px) {
    .hero-section {
        padding: var(--tp-4) 0 var(--tp-5);
        margin-bottom: var(--tp-4);
    }

    .hero-section h1 {
        font-size: 1.35rem;
        line-height: 1.25;
        margin-bottom: var(--tp-2);
    }

    /* Ответ-абзац остается в разметке целиком: его читают и его извлекают
       генеративные системы. На мобильном он просто набран мельче. */
    .hero-section .container > .container {
        font-size: var(--tp-fs-sm);
        line-height: 1.4;
        margin-bottom: var(--tp-3) !important;
    }

    .hero-section .categories-container {
        margin-bottom: var(--tp-3) !important;
    }

    .hero-section .categories-container .d-flex {
        gap: var(--tp-2) !important;
    }

    .hero-section .categories-container .btn {
        min-height: 32px;
        padding: 4px 10px !important;
        font-size: var(--tp-fs-sm);
    }
}

/* ==========================================================================
   Фильтр листинга
   ========================================================================== */

/* Строка фильтра липнет к верху при прокрутке листинга на десктопе.
   На мобильном не липнет: там она разворачивается и заняла бы полэкрана. */
@media (min-width: 992px) {
    .tp-filter-sticky {
        position: sticky;
        top: 0;
        z-index: 3;
    }
}

/* Popover цены теперь живет внутри фильтра, а не в body. Ему нужен
   свой слой, иначе он уезжает под соседние карточки. */
.tp-filter .popover {
    z-index: 5;
}

#filter-chips .btn {
    min-height: 32px;
}

/* ==========================================================================
   Факт-блок листинга
   Было: dl.row row-cols-lg-3 внутри одной карточки. При пяти фактах третья
   колонка второго ряда оставалась пустой, и блок читался как оборванный,
   а сами пары «подпись - значение» висели в воздухе без разделителей.
   Стало: плитки. Ряд остается ровным при любом числе фактов.
   ========================================================================== */

.tp-facts {
    display: grid;
    /* На мобильном ровно две колонки: восемь фактов в столбик занимали
       больше экрана, чем первая карточка листинга. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tp-2);
}

@media (min-width: 576px) {
    .tp-facts {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

.tp-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--tp-3) var(--tp-4);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-r-md);
}

.tp-fact dt {
    font-size: var(--tp-fs-xs);
    font-weight: 400;
    line-height: 1.3;
    color: var(--tp-ink-muted);
}

.tp-fact dd {
    margin: 0;
    font-size: var(--tp-fs-lg);
    font-weight: 600;
    line-height: 1.25;
    color: var(--tp-ink);
    /* Цифры в соседних плитках должны стоять в одной сетке, иначе диапазон
       цен выглядит набранным вручную. */
    font-variant-numeric: tabular-nums;
}

/* Служебные слова внутри значения: «до», «из 5». Они часть факта, но не
   его суть, поэтому не спорят с цифрой по весу. */
.tp-fact-sep {
    font-weight: 400;
    color: var(--tp-ink-muted);
}

.tp-fact-note {
    display: block;
    margin-top: 2px;
    font-size: var(--tp-fs-xs);
    font-weight: 400;
    color: var(--tp-ink-muted);
}

/* Диапазон цен вдвое длиннее остальных значений и иначе переносится. */
.tp-fact-wide {
    grid-column: span 2;
}

/* ==========================================================================
   Списки «Выбор туристов»
   Было: ol с маркерами по умолчанию и синими подчеркнутыми ссылками в две
   строки. Номер и текст не выравнивались, колонки разъезжались.
   ========================================================================== */

.tp-toplist-card {
    padding: var(--tp-4);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-r-md);
}

.tp-toplist-title {
    margin: 0 0 var(--tp-2);
    font-size: var(--tp-fs-sm);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--tp-ink-muted);
}

.tp-toplist {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tp-top;
}

.tp-toplist li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: start;
    gap: var(--tp-3);
    padding: var(--tp-2) 0;
    border-top: 1px solid var(--tp-border);
    counter-increment: tp-top;
}

.tp-toplist li:first-child {
    border-top: 0;
    padding-top: 0;
}

.tp-toplist li::before {
    content: counter(tp-top);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tp-surface-accent);
    color: var(--tp-ink-muted);
    font-size: var(--tp-fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tp-toplist a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tp-ink);
    text-decoration: none;
    line-height: 1.35;
}

.tp-toplist a:hover,
.tp-toplist a:focus-visible {
    color: var(--tp-link);
    text-decoration: underline;
}

.tp-toplist-meta {
    white-space: nowrap;
    font-size: var(--tp-fs-sm);
    font-weight: 600;
    color: var(--tp-ink);
    font-variant-numeric: tabular-nums;
}

.tp-toplist-meta .bi {
    color: #ffc107;
}

/* В колонке без оценок третья дорожка сетки не нужна. */
.tp-toplist-plain li {
    grid-template-columns: 24px 1fr;
}