/*
 * Плитки входов в решения (templates/route-tiles.php) и ссылка со стрелкой
 * .route-card__link, общая у плиток с карточками маршрутов. Плитки стоят не
 * только на страницах маршрутов, но и на главной, поэтому живут отдельно от
 * css/routes.css: главной незачем грузить всё оформление маршрутов ради одного
 * блока. Подключается там, где ffj_needs_route_styles() (functions.php), — прямо
 * перед css/routes.css, то есть в том же месте каскада, где эти правила стояли
 * внутри него.
 */

/*
 * Эти три правила — копия начала css/routes.css (зачем они там — см. его
 * комментарии). Главная получала их вместе с ним, пока грузила routes.css
 * целиком, и здесь они, чтобы она и без него вела себя как раньше: якоря
 * прокручиваются плавно, а main не становится скролл-контейнером. Стрелки
 * слайдера проектов на части ширин между 768 и 1199px выступают за край main
 * на 10–30px, и с overflow: hidden из global.css такой main можно было бы
 * сдвинуть вбок скриптом или фокусом; clip режет так же, но сдвинуть не даёт.
 */
main {
    overflow: clip;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Ссылка со стрелкой
   ------------------------------------------------------------------------ */

/*
 * Текст и стрелка — два флекс-элемента, а не строка с иконкой: в узкой
 * карточке строка переносилась по пробелу перед <i>, и стрелка уезжала одна
 * на следующую строку. Теперь переносится только сам текст, а стрелка стоит
 * справа от него. Ссылка везде — элемент флекс-колонки карточки, так что
 * inline-flex здесь ничего не меняет в её собственном месте в карточке.
 */
.route-card__link {
    align-items: center;
    color: var(--ffj-red-01);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 700;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
}

.route-card__link i {
    flex: 0 0 auto;
    font-size: .75rem;
    transition: transform .2s ease;
}

.route-tile:hover .route-card__link i {
    transform: translateX(4px);
}

/* Плитки с иконкой: роли и типологии на «Soluciones» и на главной, быстрые
   входы на маршрутах
   ------------------------------------------------------------------------ */

/*
 * Два входа в решения рядом: по роли и по типу проекта. Списки разной длины
 * (четыре роли и пять типологий), поэтому столбцы не выравниваются по низу —
 * каждый заканчивается там, где заканчивается его набор.
 */
.route-groups {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Каждый набор — на своей подложке. Плитки в обоих столбцах одинаковые, и без
 * подложки десять строк читаются как один длинный список, а не как два входа
 * на выбор; линии в зазоре для этого мало, а панель видно с любого расстояния.
 *
 * Подложка светлее плиток не бывает, поэтому секция под блоком должна быть
 * белой: на сером фоне панель пропадёт (см. front-page.php — там у секции
 * поэтому нет bg-grey).
 */
.route-group {
    background: var(--ffj-grey-02);
    border-radius: 16px;
    padding: 22px;
}

/*
 * Граница плитки внутри панели: на сером #eef1f4 почти не видно, и карточки
 * теряют края. Тот же цвет, что у прочих границ темы, на полтона темнее.
 */
.route-group .route-tile {
    border-color: #e7ecf2;
}

/* Подпись столбца — метка, а не заголовок раздела: над блоком уже есть свой. */
.route-group__title {
    color: var(--ffj-red-01);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.route-tiles {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Столбиком, в половину ширины. Плитка разворачивается в строку: иконка слева
 * от текста, а не над ним — вертикальной она заняла бы вдвое больше высоты, и
 * пять типологий уехали бы далеко ниже четырёх ролей.
 */
.route-tiles--stack {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
}

.route-tiles--stack .route-tile {
    align-items: flex-start;
    flex-direction: row;
    gap: 16px;
    padding: 16px 18px;
}

.route-tiles--stack .route-tile__icon {
    font-size: 1.125rem;
    height: 44px;
    margin-bottom: 0;
    width: 44px;
}

/*
 * Обёртка текста нужна только строке: без неё название, обещание и ссылка стали
 * бы соседями иконки в том же ряду. В вертикальной плитке она ничего не меняет
 * — это та же колонка, что и сама плитка.
 */
.route-tile__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/*
 * Плитка — не обложка, а иконка и две строки, поэтому в отличие от .route-card
 * медиа-блока у неё нет и всё содержимое лежит в общем padding. Модификаторы:
 * --accent — красная круглая иконка вместо серой квадратной,
 * --soon    — плитка без ссылки (маршрут ещё не опубликован).
 */
.route-tile {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: 22px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/*
 * :not(.route-tile--soon) — маршрут без опубликованной страницы выводится тем же
 * <a>, но без href: это уже не ссылка, и отзываться на наведение ей нечем.
 */
.route-tile:not(.route-tile--soon):hover {
    border-color: var(--ffj-red-01);
    box-shadow: 0 12px 28px rgba(13, 20, 49, .1);
    color: inherit;
    transform: translateY(-2px);
}

.route-tile__icon {
    align-items: center;
    background: var(--ffj-grey-02);
    border-radius: 12px;
    color: #4a5073;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.375rem;
    height: 64px;
    justify-content: center;
    margin-bottom: 16px;
    transition: background-color .25s ease, color .25s ease;
    width: 64px;
}

.route-tile:not(.route-tile--soon):hover .route-tile__icon {
    background: var(--ffj-red-01);
    color: #fff;
}

/*
 * Быстрые входы маршрута: та же плитка, но иконка сразу красная и круглая.
 * Цвет здесь несёт смысл: серая квадратная плитка ведёт в раздел, красная
 * круглая — конкретное действие монтажника.
 *
 * :not(.route-tile--soon) — не ради «скоро», а ради веса: без него правило выше
 * оказывается специфичнее и на наведении гасит красный обратно.
 */
.route-tile--accent .route-tile__icon {
    background: var(--ffj-red-01);
    border-radius: 50%;
    color: #fff;
}

.route-tile--accent:not(.route-tile--soon):hover .route-tile__icon {
    background: var(--ffj-red-02);
    color: #fff;
}

/*
 * Тег на месте иконки (узлы на маршруте монтажника). Плитка — флекс-колонка,
 * поэтому без align-self тег растягивается на всю её ширину и перестаёт быть
 * тегом. Отступ снизу — тот же, что у иконки, чтобы заголовок стоял на месте.
 */
.route-tile > .route-tag {
    align-self: flex-start;
    margin-bottom: 14px;
}

.route-tile__title {
    color: #24262b;
    font-size: 1.0625rem;
    font-weight: 700;
}

/*
 * Обещание маршрута — между «кому» и «что внутри». Тон темнее, чем у списка
 * ниже: это фраза, которую читают, а summary — перечисление, которое сканируют.
 */
.route-tile__lead {
    color: #4a5073;
    font-size: .9375rem;
    line-height: 1.45;
    margin-top: 8px;
}

/* Серый подобран под контраст AA на белой плитке: 4.8:1 при 13px, у прежнего
   #8a90a8 было 3.2:1. */
.route-tile__meta {
    color: #6b7287;
    font-size: .8125rem;
    line-height: 1.5;
    margin-top: 6px;
}

/*
 * Пометка на месте ссылки: margin-top: auto прижимает её к низу так же, как
 * .route-card__link в готовых карточках, — ряд остаётся ровным независимо от
 * того, сколько маршрутов уже открыто.
 *
 * Серый тот же, что у .route-tile__meta: «скоро» отличает от ссылки цвет, а
 * совсем бледная пометка (#b6bacb, 1.9:1) просто не читалась.
 */
.route-tile__note {
    color: #6b7287;
    font-size: .875rem;
    font-weight: 700;
    margin-top: auto;
    padding-top: 10px;
}

/* Адаптив
   ------------------------------------------------------------------------ */

@media (max-width: 1199.98px) {
    /*
     * :not(--stack) — столбик остаётся столбиком на любой ширине: он и так уже
     * в половину контейнера, вторая колонка внутри него не поместилась бы.
     */
    .route-tiles:not(.route-tiles--stack) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    /* Два набора рядом перестают помещаться: сначала роли, потом типологии. */
    .route-groups {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    /*
     * :not(--stack) — ради веса, а не ради столбика: правило «две колонки» в
     * блоке до 1199.98px написано с тем же :not() и без него перебивало это,
     * так что на телефоне плитки монтажника стояли по две в ряд шириной
     * ~125px текста — подписи ссылок в них не помещались.
     */
    .route-tiles:not(.route-tiles--stack) {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Отступы контейнера, панели и плитки складываются, и на узком экране текст
     * остаётся в колодце. Панель отдаёт свою половину плиткам.
     */
    .route-group {
        padding: 16px;
    }
}