/* ==========================================================================
   Главная страница
   Подключается только здесь и только после tokens.css: сетки этой страницы
   больше нигде не встречаются, и держать их в общем файле значило бы
   грузить их на шестнадцати тысячах листингов.

   Все цвета, отступы и радиусы берутся из переменных tokens.css. Своих
   значений тут ровно два вида: пропорции картинок и точки перелома сеток.
   ========================================================================== */

/* ==========================================================================
   Ритм секций
   Раньше секции набирались утилитами по месту: одна была full-bleed белой,
   вторая белым контейнером без вертикальных отступов, третья белой
   карточкой со скруглением. Между заголовком на белой полосе и карточками
   под ним на сером фоне шел видимый шов.

   Три типа по весу, а не один: обычная, с собственным фоном и акцентная.
   Восемь одинаковых секций подряд читаются как один длинный список.
   ========================================================================== */

.tp-section { padding-block: var(--tp-7); }

.tp-section--surface {
    background: var(--tp-surface);
    border-block: 1px solid var(--tp-border);
}

.tp-section--accent {
    background: var(--tp-surface-accent);
    border-block: 1px solid var(--tp-border);
}

.tp-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tp-2) var(--tp-4);
    margin-bottom: var(--tp-5);
}

.tp-section__title {
    margin: 0;
    font-size: var(--tp-fs-2xl);
    font-weight: 600;
    color: var(--tp-ink);
    text-wrap: balance;
}

.tp-section__note {
    margin: var(--tp-1) 0 0;
    max-width: 60ch;
    color: var(--tp-ink-muted);
    font-size: var(--tp-fs-sm);
}

.tp-section__link {
    /* Ссылка рядом с заголовком - самостоятельная цель, а не слово в строке:
       без своей высоты она была 21 пиксель. */
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--tp-link);
    font-size: var(--tp-fs-sm);
    font-weight: 500;
    text-decoration: none;
}
.tp-section__link:hover { text-decoration: underline; }

.tp-subhead {
    margin: var(--tp-7) 0 var(--tp-3);
    font-size: var(--tp-fs-lg);
    font-weight: 600;
    color: var(--tp-ink);
}

/* ==========================================================================
   Первый экран
   ========================================================================== */

.tp-hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--tp-7) var(--tp-6);
    background: #0e1a20;
    color: #fff;
    overflow: hidden;
}

.tp-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Затемнение считано по худшему случаю, а не подобрано на глаз: фотография
   меняется каждый день, и проверить каждую нельзя. Если снимок окажется
   сплошь белым, при 0.62 подложка выходит около #66 6a 6d, и белый текст
   дает на ней 5.0:1 - выше требуемых 4.5. При прежних 0.52 было 4.1.
   Снизу сильнее: там стоят виджет и числа. */
.tp-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(8, 16, 20, .62), rgba(8, 16, 20, .82)),
        radial-gradient(120% 80% at 50% 0%, rgba(8, 16, 20, .18), rgba(8, 16, 20, .62));
}

.tp-hero__inner { position: relative; text-align: center; }

.tp-hero__title {
    margin: 0 0 var(--tp-3);
    /* Один кегль на всех ширинах давал на 360px четыре строки из пяти
       видимых. */
    font-size: clamp(1.75rem, 1.05rem + 2.9vw, 3rem);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.015em;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 1px 24px rgba(8, 16, 20, .45);
}

.tp-hero__lead {
    max-width: 52ch;
    margin: 0 auto var(--tp-6);
    /* 0.88 по расчету дает 4.7:1 на самой светлой возможной подложке */
    color: rgba(255, 255, 255, .88);
    font-size: var(--tp-fs-lg);
    text-wrap: pretty;
}

.tp-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tp-3) var(--tp-6);
    margin: var(--tp-6) 0 0;
    padding: 0;
    list-style: none;
}

.tp-hero__stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, .88);
    font-size: var(--tp-fs-sm);
}

.tp-hero__stats b {
    font-size: var(--tp-fs-2xl);
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tp-hero__stats span { max-width: 22ch; text-wrap: balance; }

.tp-hero__credit {
    margin: var(--tp-5) 0 0;
    font-size: var(--tp-fs-xs);
    color: rgba(255, 255, 255, .88);
}
.tp-hero__credit a { color: #fff; }

/* На телефоне первый экран короткий, а над героем стоит еще и шапка в 148
   пикселей: логотип и поиск там встают друг под друга. Без этого сжатия
   кнопка «Найти» уходила за нижнюю границу экрана. */
@media (max-width: 575.98px) {
    .tp-hero { padding-block: var(--tp-5); }
    .tp-hero__lead { margin-bottom: var(--tp-5); font-size: var(--tp-fs-md); }
    .tp-hero__stats { margin-top: var(--tp-5); gap: var(--tp-2) var(--tp-5); }
    .tp-hero__stats b { font-size: var(--tp-fs-xl); }
    .tp-hero__credit { margin-top: var(--tp-4); }
}

/* ==========================================================================
   Поисковый виджет
   ========================================================================== */

.tp-find {
    max-width: 62rem;
    margin: 0 auto;
    text-align: left;
}

.tp-find__tabs {
    display: flex;
    gap: var(--tp-1);
    padding: var(--tp-1);
    margin: 0 auto var(--tp-2);
    width: fit-content;
    border-radius: var(--tp-r-pill);
    /* Подложка темная, а не светлая: светлая осветляет и без того светлое
       место под текстом, и белая надпись на невыбранной вкладке падала до
       3.7:1. На темной выходит 9.5:1, а выбранная вкладка белая и читается
       темным текстом. */
    background: rgba(8, 16, 20, .38);
    backdrop-filter: blur(6px);
}

.tp-find__tab {
    min-height: 40px;
    padding: 0 var(--tp-5);
    border: 0;
    border-radius: var(--tp-r-pill);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: var(--tp-fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.tp-find__tab[aria-selected="true"] {
    background: var(--tp-surface);
    color: var(--tp-ink);
}

.tp-find__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tp-find__panel {
    padding: var(--tp-4);
    border-radius: var(--tp-r-lg);
    background: var(--tp-surface);
    /* Цвет задан здесь, а не только у полей: панель лежит внутри героя, где
       текст белый, и все, что не назначило себе цвет само, наследовало белый
       на белом. Так пропало название города в подсказке - на месте строки
       была видна одна страна, у нее цвет стоял явно. */
    color: var(--tp-ink);
    box-shadow: var(--tp-shadow-lg);
}

.tp-find__form {
    display: grid;
    gap: var(--tp-2);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .tp-find__form {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
        align-items: end;
    }
}

.tp-find__field { position: relative; display: grid; gap: var(--tp-1); min-width: 0; }

.tp-find__label {
    font-size: var(--tp-fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tp-ink-muted);
}

.tp-find__input {
    width: 100%;
    /* 48 по высоте: поле первого экрана, промахнуться по нему пальцем
       нельзя. */
    min-height: 48px;
    padding: 0 var(--tp-3);
    border: 1px solid var(--tp-border-strong);
    border-radius: var(--tp-r-md);
    background: var(--tp-surface);
    color: var(--tp-ink);
    font: inherit;
}

.tp-find__input::placeholder { color: var(--tp-ink-faint); }
.tp-find__input:focus-visible {
    outline: 2px solid var(--tp-link);
    outline-offset: 1px;
    border-color: var(--tp-link);
}

#daterange { cursor: pointer; }

.tp-find__submit {
    min-height: 48px;
    padding: 0 var(--tp-6);
    border: 0;
    border-radius: var(--tp-r-md);
    background: var(--tp-link);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tp-find__submit:hover { background: #084298; }
.tp-find__submit:focus-visible { outline: 2px solid var(--tp-ink); outline-offset: 2px; }

/* --- подсказки городов --- */

.tp-find__suggest {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 20;
    margin: var(--tp-1) 0 0;
    padding: var(--tp-1);
    max-height: 17rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-r-md);
    background: var(--tp-surface);
    box-shadow: var(--tp-shadow-md);
}

.tp-find__suggest li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tp-3);
    min-height: 40px;
    padding: var(--tp-2) var(--tp-3);
    border-radius: var(--tp-r-sm);
    color: var(--tp-ink);
    font-size: var(--tp-fs-sm);
    cursor: pointer;
}
.tp-find__suggest li[aria-selected="true"],
.tp-find__suggest li:hover { background: var(--tp-surface-accent); }
.tp-find__suggest .muted { color: var(--tp-ink-muted); }

/* --- частые запросы --- */

.tp-find__quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tp-2);
    margin: var(--tp-4) 0 0;
    padding: 0;
    list-style: none;
}

.tp-find__quick-label {
    color: rgba(255, 255, 255, .88);
    font-size: var(--tp-fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}

.tp-find__quick a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--tp-3);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--tp-r-pill);
    color: #fff;
    font-size: var(--tp-fs-sm);
    text-decoration: none;
}
.tp-find__quick a:hover { background: rgba(255, 255, 255, .18); }

/* Узкая AI-форма внутри виджета своей подложки не имеет: подложка тут уже
   есть, и вторая делала бы рамку в рамке. */
.tp-find__panel .tp-ai-form {
    padding: 0;
    border: 0;
    background: transparent;
    gap: var(--tp-2);
}

/* Две строки вместо одной: на телефоне подсказка в одну строку не
   помещалась и обрезалась на двадцать пикселей по высоте. */
.tp-find__panel .tp-ai-form__input { min-height: 4.75rem; }

/* ==========================================================================
   Полоса идей
   Единственная секция с боковым заголовком. Она стоит там, где начинается
   монотонность, и ломает ее сменой формы, а не цветом.
   ========================================================================== */

.tp-ideas {
    background: var(--tp-surface-tint);
    border-block: 1px solid var(--tp-border);
}

.tp-ideas__layout { display: grid; gap: var(--tp-5); }

@media (min-width: 992px) {
    .tp-ideas__layout {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: var(--tp-6);
        align-items: center;
    }
}

.tp-ideas__intro .tp-section__note { margin-top: var(--tp-2); }

/* Дорожка прокручивается вбок: шесть карточек в столбик это шесть экранов
   до следующего блока. Полоса прокрутки живет внутри дорожки, тело
   страницы вбок не едет. */
/* Последняя карточка обрезается краем дорожки - это и есть подсказка, что
   вбок есть еще. Без растушевки она читается не как прокрутка, а как
   поломка, поэтому край гасится маской. */
.tp-ideas__track {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 17rem);
    gap: var(--tp-3);
    margin: 0;
    padding: 0 0 var(--tp-2);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.tp-ideas__track.is-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.tp-idea { scroll-snap-align: start; }

.tp-idea__link {
    position: relative;
    display: block;
    height: 100%;
    min-height: 13rem;
    overflow: hidden;
    border-radius: var(--tp-r-lg);
    background: var(--tp-surface-accent);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--tp-shadow-sm);
}

.tp-idea__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.tp-idea__link:hover .tp-idea__photo,
.tp-idea__link:focus-visible .tp-idea__photo { transform: scale(1.06); }
.tp-idea__link:focus-visible { outline: 2px solid var(--tp-link); outline-offset: 2px; }

.tp-idea__body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--tp-1);
    height: 100%;
    min-height: 13rem;
    padding: var(--tp-7) var(--tp-4) var(--tp-4);
    background: linear-gradient(rgba(9, 15, 19, 0) 20%, rgba(9, 15, 19, .55) 58%, rgba(9, 15, 19, .9));
}

.tp-idea__title { font-weight: 600; line-height: 1.25; text-wrap: balance; }
.tp-idea__count { font-size: var(--tp-fs-xs); color: rgba(255, 255, 255, .82); }

/* ==========================================================================
   Полоса городов
   ========================================================================== */

.tp-citybar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-citybar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--tp-2);
    /* 36 по высоте плюс зазор в 8: цель не меньше 24x24 с учетом отступов */
    min-height: 36px;
    padding: 0 var(--tp-4);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-r-pill);
    background: var(--tp-surface);
    color: var(--tp-ink);
    font-size: var(--tp-fs-sm);
    font-weight: 500;
    cursor: pointer;
}

.tp-citybar__btn:hover {
    border-color: var(--tp-border-strong);
    background: var(--tp-surface-tint);
}
.tp-citybar__btn:focus-visible { outline: 2px solid var(--tp-link); outline-offset: 2px; }

.tp-citybar__btn[aria-pressed="true"] {
    background: var(--tp-ink);
    border-color: var(--tp-ink);
    color: #fff;
}

/* Счетчик стоял в <sup> курсивом - на телефоне это девять пикселей над
   строкой. */
.tp-citybar__count {
    color: var(--tp-ink-muted);
    font-size: var(--tp-fs-xs);
    font-variant-numeric: tabular-nums;
}
.tp-citybar__btn[aria-pressed="true"] .tp-citybar__count { color: rgba(255, 255, 255, .78); }

/* Во всю ширину контейнера это поле выглядело как главный поиск страницы,
   хотя фильтрует десять кнопок над собой. */
.tp-city-search { max-width: 22rem; }

/* ==========================================================================
   Форматы
   ========================================================================== */

.tp-formats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) { .tp-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tp-formats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tp-formats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tp-format__link {
    position: relative;
    display: block;
    overflow: hidden;
    /* Пропорция задана здесь, а не высотой картинки: место занято до того,
       как картинка доехала, и сетка не прыгает. */
    aspect-ratio: 16 / 11;
    border-radius: var(--tp-r-md);
    background: var(--tp-surface-tint);
    color: #fff;
    text-decoration: none;
}

.tp-format__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.tp-format__link:hover .tp-format__photo { transform: scale(1.07); }
.tp-format__link:focus-visible { outline: 2px solid var(--tp-link); outline-offset: 2px; }

.tp-format__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--tp-6) var(--tp-3) var(--tp-3);
    background: linear-gradient(rgba(9, 15, 19, 0) 15%, rgba(9, 15, 19, .55) 55%, rgba(9, 15, 19, .9));
}

.tp-format__name { font-weight: 600; font-size: var(--tp-fs-sm); line-height: 1.25; }
.tp-format__count { font-size: var(--tp-fs-xs); color: rgba(255, 255, 255, .8); }

/* Категория без картинки. Их 25 из 145, и заглушка вместо фотографии
   выглядела бы поломкой - типографская плитка выглядит решением. */
.tp-format--plain .tp-format__link {
    display: flex;
    align-items: flex-end;
    background: var(--tp-surface-accent);
    color: var(--tp-ink);
    box-shadow: var(--tp-ring);
}
.tp-format--plain .tp-format__body { position: static; padding: var(--tp-3); background: none; }
.tp-format--plain .tp-format__name { font-size: var(--tp-fs-md); }
.tp-format--plain .tp-format__count { color: var(--tp-ink-muted); }

/* Достопримечательности города. Раньше они были второй вкладкой над стеной
   ссылок; вкладка ушла, ссылки остались - это живые страницы. */
.tp-sights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-sights a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--tp-3);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-r-pill);
    background: var(--tp-surface);
    color: var(--tp-link);
    font-size: var(--tp-fs-sm);
    text-decoration: none;
}
.tp-sights a:hover { border-color: var(--tp-border-strong); background: var(--tp-surface-tint); }

/* ==========================================================================
   Направления
   ========================================================================== */

.tp-countries { display: grid; gap: var(--tp-5); }

@media (min-width: 992px) {
    .tp-countries {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: var(--tp-6);
        align-items: start;
    }
}

.tp-countries__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-country {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: var(--tp-r-md);
    background: var(--tp-surface-tint);
    color: #fff;
    text-decoration: none;
}

.tp-country__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.tp-country:hover .tp-country__photo { transform: scale(1.07); }
.tp-country:focus-visible { outline: 2px solid var(--tp-link); outline-offset: 2px; }

.tp-country__label {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--tp-6) var(--tp-3) var(--tp-3);
    background: linear-gradient(rgba(9, 15, 19, 0) 15%, rgba(9, 15, 19, .55) 55%, rgba(9, 15, 19, .9));
    font-weight: 600;
    line-height: 1.25;
}

.tp-country__count {
    display: block;
    font-size: var(--tp-fs-xs);
    font-weight: 400;
    color: rgba(255, 255, 255, .82);
    font-variant-numeric: tabular-nums;
}

/* Остальные страны текстом: так их влезает вчетверо больше, чем плитками,
   и секция перестает быть третьей подряд сеткой картинок. */
.tp-countries__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--tp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) and (max-width: 991px) {
    .tp-countries__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tp-countries__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-3);
    border-bottom: 1px solid var(--tp-border);
    font-size: var(--tp-fs-sm);
}

/* Отступ на ссылке, а не на строке: иначе цель высотой 21 пиксель внутри
   строки высотой 37. */
.tp-countries__list a {
    flex: 1 1 auto;
    padding: var(--tp-2) 0;
    color: var(--tp-link);
    text-decoration: none;
}
.tp-countries__list a:hover { text-decoration: underline; }
.tp-countries__num { color: var(--tp-ink-muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Почему Tripse
   ========================================================================== */

.tp-why {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) { .tp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tp-why { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tp-why__item {
    display: grid;
    gap: var(--tp-2);
    align-content: start;
    padding: var(--tp-5);
    border-radius: var(--tp-r-lg);
    background: var(--tp-surface);
    box-shadow: var(--tp-ring);
}

.tp-why__item .bi { font-size: 1.5rem; color: var(--tp-link); line-height: 1; }
.tp-why__item h3 { margin: 0; font-size: var(--tp-fs-lg); font-weight: 600; text-wrap: balance; }
.tp-why__item p { margin: 0; color: var(--tp-ink-muted); font-size: var(--tp-fs-sm); }

/* ==========================================================================
   Отзывы
   ========================================================================== */

.tp-reviews__head { align-items: center; }

.tp-score {
    display: flex;
    align-items: baseline;
    gap: var(--tp-3);
    margin: 0;
    padding: var(--tp-2) var(--tp-4);
    border-radius: var(--tp-r-md);
    background: var(--tp-surface-accent);
}

.tp-score b {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--tp-ink);
    font-variant-numeric: tabular-nums;
}

.tp-score span {
    max-width: 14ch;
    color: var(--tp-ink-muted);
    font-size: var(--tp-fs-sm);
}

/* Заголовок у карусели свой, поэтому в ее шапке остаются одни стрелки. */
.tp-section .reviews-section .section-header { justify-content: flex-end; }

/* ==========================================================================
   Как это работает и вопросы
   ========================================================================== */

.tp-how {
    display: grid;
    gap: var(--tp-5) var(--tp-4);
    grid-template-columns: 1fr;
    margin: 0 0 var(--tp-7);
    padding: 0;
    list-style: none;
}

/* Колонки заданы явно, а не через auto-fit: на широком экране auto-fit
   нарезал пять дорожек под четыре шага, и справа оставалась пустая. */
@media (min-width: 576px) { .tp-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tp-how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tp-how__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 32px auto;
    gap: var(--tp-2) var(--tp-3);
    align-items: start;
    /* Иначе лишняя высота растекается по строкам: у шага с текстом на три
       строки первая строка выросла с 32 до 42.5, и его заголовок встал на
       пять пикселей ниже, чем у шага с текстом на четыре строки. */
    align-content: start;
}

.tp-how__num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--tp-r-pill);
    background: var(--tp-surface-accent);
    color: var(--tp-link);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tp-how__title {
    margin: 0;
    align-self: center;
    font-size: var(--tp-fs-md);
    font-weight: 600;
    color: var(--tp-ink);
}

.tp-how__text {
    grid-column: 2;
    margin: 0;
    color: var(--tp-ink-muted);
    font-size: var(--tp-fs-sm);
}

.tp-faq__title {
    margin: 0 0 var(--tp-4);
    font-size: var(--tp-fs-lg);
    font-weight: 600;
}

/* Две колонки на широком экране. Одной колонкой список занимал 582
   пикселя из 1320 и оставлял справа 738 пустых: ограничение ширины строки
   нужно ради чтения, но пустая половина экрана - не то, чем его платить. */
.tp-faq__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--tp-7);
    margin: 0;
}

@media (min-width: 992px) {
    .tp-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tp-faq__item { max-width: 62ch; }

.tp-faq__list dt {
    padding: var(--tp-4) 0 var(--tp-1);
    border-top: 1px solid var(--tp-border);
    font-weight: 600;
    color: var(--tp-ink);
}

.tp-faq__list dd {
    margin: 0 0 var(--tp-3);
    color: var(--tp-ink-muted);
    font-size: var(--tp-fs-sm);
}

/* ==========================================================================
   Движение
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .tp-idea__photo,
    .tp-format__photo,
    .tp-country__photo { transition: none; }
    .tp-idea__link:hover .tp-idea__photo,
    .tp-format__link:hover .tp-format__photo,
    .tp-country:hover .tp-country__photo { transform: none; }
    .tp-ideas__track { scroll-snap-type: none; }
}