/* ------------------------------------------------------------------
   Блоки информационных страниц: /turistam/*, /contacts/, /extra-service/.

   Раньше страницы собирались инлайновыми стилями, <br> вместо отступов
   и картинками-галочками, которые грузились с intourist.ru. Здесь
   несколько общих кирпичей, чтобы страницы выглядели одинаково:

   .info-lead   — вводный абзац крупнее основного текста;
   .info-cards  — карточки условий с крупной цифрой (рассрочка, страховка);
   .info-steps  — нумерованные шаги (как оформить, как вернуть);
   .info-note   — выделенное примечание;
   .info-links  — плитки-ссылки (доп. услуги);
   .info-offices — карточки офисов (контакты).
   ------------------------------------------------------------------ */

.info-page {
    color: var(--it-ink);
    font-size: 16px;
    line-height: 1.6;
}

.info-page > * + * {
    margin-top: 20px;
}

.info-page h2 {
    margin-top: 36px;
    margin-bottom: 0;
    color: var(--it-blue-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.info-page h2:first-child {
    margin-top: 0;
}

/* Только нижний отступ: margin: 0 перебивал отступ между блоками из
   «.info-page > * + *», и примечание прилипало к карточкам. */
.info-page p {
    margin-bottom: 0;
}

.info-page p + p {
    margin-top: 12px;
}

.info-page a {
    color: var(--it-blue);
}

/* Картинки в тексте не шире блока: баннер страхования стоял с
   width="980" и на телефоне уезжал за карточку. */
/* То же для любого текста в белой карточке: старые тексты из визуального
   редактора несут width="980" у картинок (страхование у агентств). */
.info-page img,
.list-single-main-item img[width] {
    max-width: 100%;
    height: auto;
}

.info-page__banner {
    display: block;
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* .list-single-main-item ul/ol в styles.css ставят маркер-точку и
   margin-left: 1rem пунктам — для наших списков это лишнее. Селекторы
   с .info-page, чтобы перевесить. */
.info-page .info-steps,
.info-page .info-card ul {
    list-style: none;
}

.info-page .info-steps > li,
.info-page .info-card li {
    margin-left: 0;
}

.info-lead {
    font-size: 18px;
    color: #3d3f6e;
}

/* ---------- карточки условий ---------- */

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.info-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid rgba(3, 5, 114, .1);
    border-radius: 16px;
    background: var(--it-white);
    box-shadow: 0 6px 20px rgba(3, 5, 114, .06);
}

.info-card--accent {
    border-color: transparent;
    background: var(--it-blue);
    color: var(--it-white);
}

.info-card__label {
    font-size: 14px;
    font-weight: 500;
    color: #6b6d8f;
}

.info-card--accent .info-card__label {
    color: rgba(255, 255, 255, .75);
}

.info-card__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--it-blue-dark);
}

.info-card--accent .info-card__value {
    color: var(--it-white);
}

.info-card__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--it-blue-dark);
}

.info-card--accent .info-card__title {
    color: var(--it-white);
}

.info-card ul {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.info-card li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
}

.info-card li + li {
    margin-top: 4px;
}

.info-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--it-orange);
}

/* ---------- шаги ---------- */

.info-steps {
    counter-reset: step;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-steps > li {
    counter-increment: step;
    position: relative;
    min-height: 36px;
    padding: 6px 0 0 52px;
}

.info-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--it-cream);
    color: var(--it-orange);
    font-weight: 700;
}

/* ---------- примечание ---------- */

.info-note {
    padding: 16px 20px;
    border-left: 4px solid var(--it-orange);
    border-radius: 0 12px 12px 0;
    background: var(--it-cream);
    color: #3d3f6e;
    font-size: 15px;
}

/* ---------- плитки-ссылки ---------- */

.info-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.info-links a,
.info-links .info-links__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 18px 20px;
    border: 1px solid rgba(3, 5, 114, .1);
    border-radius: 14px;
    background: var(--it-white);
    color: var(--it-blue-dark);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.info-links a:hover {
    border-color: var(--it-blue);
    box-shadow: 0 6px 20px rgba(3, 5, 114, .1);
}

.info-links strong {
    font-size: 17px;
    font-weight: 600;
}

.info-links small {
    color: #6b6d8f;
    font-size: 14px;
    line-height: 1.45;
}

/* ---------- офисы ---------- */

.info-offices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.info-office {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border: 1px solid rgba(3, 5, 114, .1);
    border-radius: 16px;
    background: var(--it-white);
}

.info-office__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--it-blue);
    color: var(--it-white);
    font-size: 14px;
    font-weight: 600;
}

.info-office__addr {
    color: var(--it-blue-dark);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.info-office__meta {
    color: #6b6d8f;
    font-size: 14px;
}

.info-office__phone {
    font-weight: 500;
    text-decoration: none;
}

.info-office__route {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
}

@media (max-width: 767px) {
    /* Белая карточка текста на телефоне: поля 25px съедали ширину,
       строка выходила в 4–5 слов. Касается и новостей, и инфостраниц. */
    .list-single-main-item {
        padding: 18px 16px;
    }

    .info-page {
        font-size: 15px;
    }

    .info-card {
        padding: 16px;
    }

    .info-page h2 {
        margin-top: 28px;
        font-size: 21px;
    }

    .info-lead {
        font-size: 16px;
    }

    .info-card__value {
        font-size: 24px;
    }
}

/* ------------------------------------------------------------------
   Подстраницы стран и инфостраницы на телефоне: меню раздела лентой.

   Было: на ширине до 767px левая колонка (col-md-3) вставала над
   контентом целиком — меню разделов, «Специалисты по продаже»,
   «Города и курорты», «Это интересно», «Блог». До заголовка страницы
   нужно было пролистать два-три экрана.

   Стало:
   - меню раздела — горизонтальная лента «таблеток» над контентом;
     текущий раздел залит, лента сама докручивается до него
     (js/mobile-menu.js, блок «Ленты разделов»);
   - остальная колонка уходит под контент (order).

   Всё — строго до 767px. Прилипание колонок на десктопе не трогаем:
   у /tours/* его делает JS checkFixedScrollMenu (от 768px), у
   инфостраниц — .row--with-sidebar из K5 (от 992px).

   Страны, города, достопримечательности: шаблоны travelsoft.news.detail
   (country, resort, sight, page, visa, tourist-guide) и списки sights,
   resorts выводят меню второй раз в .section-chips, а ряду дают класс
   .row--section-side. Инфостраницы: то же меню left_menu, что в колонке,
   просто перекладывается в ленту.
   ------------------------------------------------------------------ */

.section-chips {
    display: none;
}

@media (max-width: 767px) {
    .section-chips {
        display: block;
        margin: 0 -15px 16px;
    }

    /* У страны без разделов меню пустое — не оставляем пустой отступ. */
    .section-chips:empty,
    .section-chips:not(:has(a)) {
        display: none;
    }

    .row--section-side > .col-md-9 {
        order: 1;
    }

    .row--section-side > .col-md-3 {
        order: 2;
        margin-top: 8px;
    }

    /* Меню в колонке дублирует ленту — прячем вместе с карточкой.
       Только его: у «Городов и курортов» и «Это интересно» та же обёртка
       .faq-nav, но перед ней заголовок, а меню разделов стоит в
       карточке первым. :has — чтобы не оставалась пустая карточка;
       без его поддержки прячется только сам список. */
    .row--section-side > .col-md-3 .box-widget-content > .faq-nav:first-child,
    .row--section-side > .col-md-3 .box-widget:has(> .box-widget-content > .faq-nav:first-child) {
        display: none;
    }


    .section-chips ul,
    .row--with-sidebar > .header-column .menu-vertical-01 {
        display: flex;
        gap: 8px;
        margin: 0;
        padding: 2px 15px 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        list-style: none;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    .section-chips ul::-webkit-scrollbar,
    .row--with-sidebar > .header-column .menu-vertical-01::-webkit-scrollbar {
        display: none;
    }

    /* width: auto — left_menu/style.css даёт пункту и ссылке 100%,
       и в ленте первый пункт растягивался на весь экран. */
    .section-chips li,
    .row--with-sidebar > .header-column .menu-vertical-01 > .nav-item {
        flex: none;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        scroll-snap-align: start;
    }

    .section-chips a,
    .row--with-sidebar > .header-column .menu-vertical-01 .nav-link {
        width: auto;
        overflow: visible;
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 8px 16px;
        border: 1px solid rgba(3, 5, 114, .14);
        border-radius: 999px;
        background: var(--it-white);
        color: var(--it-blue-dark);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .section-chips a::after,
    .section-chips a svg,
    .row--with-sidebar > .header-column .menu-vertical-01 .nav-link::after {
        display: none;
    }

    /* Текущий раздел: у /tours/* это act-faq-link, у left_menu —
       ссылка без href (Bitrix не ставит его выбранному пункту). */
    .section-chips a.act-faq-link,
    .section-chips a:not([href]),
    .row--with-sidebar > .header-column .menu-vertical-01 .nav-link:not([href]),
    .row--with-sidebar > .header-column .menu-vertical-01 .nav-link.active {
        border-color: var(--it-blue);
        background: var(--it-blue);
        color: var(--it-white);
    }

    /* Инфостраницы: колонка с лентой сама по себе без карточки
       и без отступа снизу, который был под вертикальное меню. */
    .row--with-sidebar > .header-column {
        margin-bottom: 12px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- колонка подстраниц стран: виджеты одной породой ----------

   На всех ширинах (на десктопе колонка слева, на телефоне — под
   контентом): белая карточка, заголовок фирменного цвета внутри неё,
   строки-ссылки с разделителями. Раньше заголовки «Города и курорты»,
   «Это интересно», «Блог» висели над карточкой крупным серым шрифтом,
   а у меню раздела заголовка не было вовсе.

   Только оформление: position, height, top не трогаем — колонку на
   десктопе прилипает JS checkFixedScrollMenu (scripts.js). */
.row--section-side > .col-md-3 .box-widget {
    /* flow-root: внутри лежат .fl-wrap с float: left. Без него карточка
       схлопывалась до собственных полей (белая «полоска» 16px), а
       содержимое вываливалось и налезало на соседние карточки. */
    display: flow-root;
    float: none;
    width: 100%;
    margin: 0 0 12px;
    padding: 16px;
    border-radius: var(--it-radius-card, 16px);
    background: var(--it-white);
    box-shadow: 0 6px 20px rgba(3, 5, 114, .06);
}

.row--section-side > .col-md-3 .box-widget-content {
    padding: 0;
}

.row--section-side > .col-md-3 .box-widget-item-header {
    margin: 0 0 8px !important;
    padding: 0;
}

.row--section-side > .col-md-3 .box-widget-item-header::before {
    display: none;
}

.row--section-side > .col-md-3 .box-widget-item-header .h3,
.row--section-side > .col-md-3 .box-widget-item-header .h4,
.row--section-side > .col-md-3 .box-widget-item-header h3,
.row--section-side > .col-md-3 .box-widget-item-header h4 {
    margin: 0;
    color: var(--it-blue-dark);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
}

.row--section-side > .col-md-3 .box-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    box-shadow: none;
}

.row--section-side > .col-md-3 .box-widget li {
    margin: 0;
    border-bottom: 1px solid rgba(3, 5, 114, .08);
}

.row--section-side > .col-md-3 .box-widget li:last-child {
    border-bottom: 0;
}

.row--section-side > .col-md-3 .box-widget li a {
    display: block;
    padding: 11px 0;
    color: var(--it-blue);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}

.row--section-side > .col-md-3 .box-widget .center {
    margin: 6px 0 0;
    padding: 0 !important;
    text-align: left;
    font-size: 14px;
}


.row--section-side > .col-md-3 .faq-nav {
    padding: 0;
    background: none;
    box-shadow: none;
}



/* Заголовок подстраницы страны — белый текст на фото (h1.underlay с
   background-image). Если фото не загрузилось (локально upload не
   синхронизирован, на проде — удалённый файл), белое на кремовом не
   читалось вовсе. Тёмная подложка видна только без картинки. */
.flat-title-wrap h1.underlay {
    background-color: var(--it-blue-dark);
}

/* ---------- страница контактов ---------- */

.contacts-page {
    padding: 8px 0 24px;
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.contacts-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 4px 0 0;
}

.contacts-hours dt {
    color: #6b6d8f;
    font-weight: 400;
}

.contacts-hours dd {
    margin: 0;
    color: var(--it-blue-dark);
    font-weight: 600;
}

.contacts-page .contacts-lines {
    display: grid;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.contacts-page .contacts-lines li {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
}

.contacts-page .contacts-lines li::before {
    display: none;
}

.contacts-lines a {
    color: var(--it-blue-dark);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.contacts-lines small {
    color: #6b6d8f;
    font-size: 13px;
}

.contacts-messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.contacts-messengers a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(3, 5, 114, .15);
    border-radius: 12px;
    color: var(--it-blue);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.contacts-map-box {
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(3, 5, 114, .06);
}

.contacts-map-box iframe {
    display: block;
    border: 0;
}

.contacts-page .contacts-gallery {
    margin-top: 24px;
}

@media (max-width: 991px) {
    .contacts-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .contacts-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .info-offices {
        gap: 12px;
    }

    .info-office {
        padding: 16px;
    }

    .contacts-map-box iframe {
        height: 340px;
    }
}

/* ---------- карточки новостей и блога (.card-post) ----------

   Стили карточки жили в css/style.css, а он давно отключён в header.php:
   карточка осталась без фона, рамки и тени и на белой подложке списка
   сливалась с соседними. Подложку убрали (components/bitrix/news/news/
   news.php), карточку оформляем заново.

   Только внутри .news-list (обёртка списка в том же news.php): класс
   card-post стоит ещё в десятке шаблонов — например, у картинки в
   «Предложениях дня» на главной, — и там эти стили ломали карточку. */
.news-list .card-post {
    display: flex;
    flex-direction: column;
    height: calc(100% - 24px);
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(3, 5, 114, .08);
    border-radius: 16px;
    background: var(--it-white);
    box-shadow: 0 6px 20px rgba(3, 5, 114, .06);
    transition: box-shadow .2s ease, transform .2s ease;
}

.news-list .card-post:hover {
    box-shadow: 0 12px 28px rgba(3, 5, 114, .12);
    transform: translateY(-2px);
}

.news-list .card-post .card-post-img {
    float: none;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #dfe3ee;
}

.news-list .card-post .card-post-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-list .card-post .card-post-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    float: none;
    padding: 18px 20px 20px;
}

.news-list .card-post .card-post-content .h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.news-list .card-post .card-post-content .h4 a {
    color: var(--it-blue-dark);
    text-decoration: none;
}

.news-list .card-post .card-post-content .h4 a:hover {
    color: var(--it-blue);
}

.news-list .card-post .card-post-content p {
    margin: 0;
    color: #4a4c6e;
    font-size: 15px;
    line-height: 1.5;
}

.news-list .card-post .post-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(3, 5, 114, .08);
}

.news-list .card-post .post-opt ul {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #6b6d8f;
    font-size: 13px;
}

.news-list .card-post .post-opt li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.news-list .card-post .post-opt .btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 40px;
}

@media (max-width: 767px) {
    .card-post {
        height: auto;
        margin-bottom: 16px;
    }

    .card-post .card-post-content {
        padding: 16px;
    }
}

/* Широкие таблицы (архив курсов валют и т.п.): прокрутка по горизонтали
   внутри карточки вместо вылезания за её край. */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll .table {
    min-width: 520px;
    margin-bottom: 0;
}

.table-scroll td,
.table-scroll th {
    white-space: nowrap;
}

/* ---------- карточки туров (шаблон news.list.improved/home_tours) ----------

   Страницы типов туров (/type/*). Шаблон ставит карточку строкой:
   фото 50% слева, текст 50% справа — на телефоне текст зажат в колонку
   в три слова, бейджи закрывают фото, а align-content: space-between у
   ряда раздвигает карточки пустотами. До 575px карточка вертикальная. */
@media (max-width: 575px) {
    .product-grid {
        align-content: flex-start;
    }

    .product-grid .product-grid-item {
        flex-direction: column;
        height: 100%;
        margin-bottom: 0;
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(3, 5, 114, .08);
    }

    .product-grid .product-grid__img {
        float: none;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .product-grid .product-grid-item .product-grid__img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }

    .product-grid .product-grid__inner {
        width: 100%;
        gap: 8px;
        padding: 14px 16px 16px;
    }

    .product-grid .product-grid__tags {
        left: 12px;
        right: 12px;
        top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
    }

    .product-grid .product-grid__tags li {
        margin: 0;
        padding: 4px 10px;
        border-radius: var(--it-radius-tag, 8px);
        font-size: 12px;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    }

    .product-grid .product-grid__title {
        font-size: 18px;
        line-height: 1.3;
    }

    .product-grid .product-grid__bottom {
        margin-bottom: 0;
    }
}

/* ---------- текущий раздел в левых меню ----------

   И в меню инфостраниц (left_menu: у выбранного пункта нет href и есть
   .active), и в меню страны (.faq-nav a.act-faq-link) текущий пункт
   раньше отличался только серым цветом или не отличался вовсе. */
/* :not([href]) — чтобы перевесить «.nav-link:not([href]):not([tabindex])
   { color: inherit }» из left_menu/style.css. */
.menu-vertical-01 .nav-item .nav-link.active,
.menu-vertical-01 .nav-item .nav-link.active:not([href]):not([tabindex]),
.row--section-side > .col-md-3 .faq-nav a.act-faq-link {
    border-radius: 10px;
    background: rgba(14, 10, 219, .07);
    color: var(--it-blue);
    font-weight: 600;
}

/* Меню разделов — строки без разделителей. С линиями между пунктами
   подложка текущего пункта обрывала их и выглядела вставленной сбоку
   (замечание оператора). Теперь все пункты — одинаковые строки с
   отступами, наведение и текущий пункт — подложкой во всю ширину. */
.row--section-side > .col-md-3 .box-widget-content > .faq-nav:first-child ul,
.menu-vertical-01 {
    display: grid;
    gap: 2px;
}

.row--section-side > .col-md-3 .box-widget-content > .faq-nav:first-child li,
.menu-vertical-01 .nav-item,
.menu-vertical-01 .nav-item:last-child {
    border: 0;
}

.row--section-side > .col-md-3 .box-widget-content > .faq-nav:first-child li a,
.menu-vertical-01 .nav-item .nav-link {
    position: relative;
    display: block;
    padding: 10px 32px 10px 12px;
    border-radius: 10px;
    transition: background-color .15s ease;
}

.row--section-side > .col-md-3 .box-widget-content > .faq-nav:first-child li a:hover,
.menu-vertical-01 .nav-item .nav-link[href]:hover {
    background: rgba(14, 10, 219, .04);
}

/* Карточка меню страны — поля как у left_menu (.5rem). */
.row--section-side > .col-md-3 .box-widget:has(> .box-widget-content > .faq-nav:first-child) {
    padding: 8px;
}

/* ---------- текст в белых блоках подстраниц ----------

   Описания городов, стран, достопримечательностей и тексты инфостраниц
   шли 14px серым #666 с межстрочным 1.2 — плотно и бледно. */
.row--section-side .list-single-main-item,
.row--with-sidebar .list-single-main-item {
    color: var(--it-ink);
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .row--section-side .list-single-main-item,
    .row--with-sidebar .list-single-main-item {
        font-size: 15px;
    }
}

/* Синий блок «Необходимые документы» на странице страны
   (.gradient-bg.ideaboxWeather) стоял вплотную к белому блоку текста:
   два скруглённых края впритык давали лишние «уголки» на стыке. */
.list-single-main-container .ideaboxWeather {
    margin-bottom: 16px;
}

/* ---------- «Другие публикации» на странице новости ----------

   Узкая правая колонка: картинка, под ней кнопка «Подробнее», справа
   заголовок крупным синим — заголовок ломался на пять строк, и каждая
   запись занимала пол-экрана. Делаем компактный список: миниатюра слева,
   дата и заголовок справа; кнопку убираем — ведёт туда же, куда заголовок. */
.widget-posts .box-widget-item-header .h4 {
    margin: 0 0 8px;
    color: var(--it-blue-dark);
    font-size: 19px;
    font-weight: 600;
}

.widget-posts .box-image-widget {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(3, 5, 114, .08);
}

.widget-posts .box-image-widget:last-child {
    border-bottom: 0;
}

.widget-posts .box-image-widget-media,
.widget-posts .box-image-widget-details {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.widget-posts .box-image-widget-media img {
    display: block;
    width: 88px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}

.widget-posts .box-image-widget-media a.color-bg {
    display: none;
}

.widget-posts .widget-posts-date {
    display: block;
    color: #6b6d8f;
    font-size: 12px;
}

.widget-posts .box-image-widget-details .h5 {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.widget-posts .box-image-widget-details .h5 a {
    color: var(--it-blue-dark);
    text-decoration: none;
}

.widget-posts .box-image-widget-details .h5 a:hover {
    color: var(--it-blue);
}

.widget-posts .box-image-widget-details p {
    display: none;
}

/* ---------- «Специалисты по продаже» (staff_detail) ----------
   Фото и имя в строку, под ними кнопки «позвонить» и WhatsApp на всю
   ширину колонки — номер больше не ломается посередине. */
.staff-side {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.staff-side__item {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--it-cream);
}

.staff-side__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.staff-side__photo {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 60% 20%;
}

.staff-side__name {
    color: var(--it-blue-dark);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.staff-side__role {
    color: #6b6d8f;
    font-size: 13px;
}

.staff-side__actions {
    display: grid;
    gap: 6px;
}

.staff-side__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(3, 5, 114, .12);
    border-radius: var(--it-radius-control, 12px);
    background: var(--it-white);
    color: var(--it-blue-dark);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.staff-side__btn:hover {
    border-color: var(--it-blue);
    color: var(--it-blue);
}

.staff-side__btn svg {
    flex: none;
    color: var(--it-blue);
}

.staff-side__btn--wa svg {
    color: #25a244;
}

/* Планшет 768–991px: col-md-3 — около 180px, в ней переносились
   телефоны специалистов и обрезались «Достопримечательности». На этих
   ширинах колонка — треть, контент — две трети. Прилипание (JS
   checkFixedScrollMenu) ширину считает сам. */
@media (min-width: 768px) and (max-width: 991px) {
    .row--section-side > .col-md-3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .row--section-side > .col-md-9 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }
}

/* ---------- «Блог» в колонке стран (include/side-blog-list.php) ----------
   Миниатюра слева, дата и заголовок справа — как «Другие публикации»
   у новостей. */
.row--section-side > .col-md-3 .side-posts .side-posts__link {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    color: var(--it-blue-dark);
    text-decoration: none;
}

.side-posts__thumb {
    display: block;
    width: 72px;
    height: 54px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--it-blue) 0%, var(--it-blue-dark) 100%);
}

.side-posts__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side-posts__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.side-posts__date {
    color: #6b6d8f;
    font-size: 12px;
    font-weight: 400;
}

.side-posts__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.side-posts__link:hover .side-posts__title {
    color: var(--it-blue);
}

/* ---------- иконки у пунктов левых меню ----------

   Линейные иконки в цвете текста пункта, масками — без внешних файлов.
   Левое меню инфостраниц (left_menu): иконка по адресу пункта, для
   прочих — «документ». Меню раздела страны: адреса у «О стране» и
   «Туры» меняются от страницы к странице (#, адрес страны или вовсе
   без href), поэтому там иконку ставит js/mobile-menu.js по названию
   пункта (data-ico). На телефоне меню — лентой, иконок там нет. */
:root {
    --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
    --ico-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='m10 13 5-5'/%3E%3C/svg%3E");
    --ico-city: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l6-3v16M11 21V10l8 3v8M8 11v.5M8 15v.5M15 15v.5M15 18v.5'/%3E%3C/svg%3E");
    --ico-hotel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19V7M3 15h18v4M21 15v-2a3 3 0 0 0-3-3h-7v5'/%3E%3Ccircle cx='7' cy='12' r='2'/%3E%3C/svg%3E");
    --ico-visa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
    --ico-sights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
    --ico-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E");
    --ico-percent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E");
    --ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
    --ico-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v5h5'/%3E%3Cpath d='M4.6 15A8 8 0 1 0 6.3 6.7L4 9'/%3E%3C/svg%3E");
    --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6z'/%3E%3C/svg%3E");
    --ico-umbrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 1 9 9H3a9 9 0 0 1 9-9zM12 12v6a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
    --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
    /* Селектор строки меню страны целиком — иначе padding перебивает
       правило «строки без разделителей» выше, и иконка ложится на текст. */
    .menu-vertical-01 .nav-item .nav-link,
    .row--section-side > .col-md-3 .box-widget-content > .faq-nav:first-child li a[data-ico] {
        padding-left: 42px;
    }

    .menu-vertical-01 .nav-item .nav-link::after,
    .row--section-side > .col-md-3 .faq-nav a[data-ico]::after {
        content: "";
        position: absolute;
        left: 13px;
        top: 50%;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        background-color: currentColor;
        opacity: .8;
        -webkit-mask: var(--ico, var(--ico-doc)) center / contain no-repeat;
        mask: var(--ico, var(--ico-doc)) center / contain no-repeat;
    }

    .menu-vertical-01 .nav-link[href*="sposoby-oplaty"] { --ico: var(--ico-card); }
    .menu-vertical-01 .nav-link[href*="rassrochka"] { --ico: var(--ico-percent); }
    .menu-vertical-01 .nav-link[href*="oferta"] { --ico: var(--ico-doc); }
    .menu-vertical-01 .nav-link[href*="cancellation"] { --ico: var(--ico-undo); }
    .menu-vertical-01 .nav-link[href*="personal_data"] { --ico: var(--ico-shield); }
    .menu-vertical-01 .nav-link[href*="strakhovanie"] { --ico: var(--ico-umbrella); }
    .menu-vertical-01 .nav-link[href*="where2buy"] { --ico: var(--ico-pin); }
    .menu-vertical-01 .nav-link[href*="vizy"] { --ico: var(--ico-visa); }
    .menu-vertical-01 .nav-link[href*="k-eta"] { --ico: var(--ico-visa); }
    .menu-vertical-01 .nav-link[href*="kontakt"] { --ico: var(--ico-pin); }
    .menu-vertical-01 .nav-link[href*="contacts"] { --ico: var(--ico-pin); }
    .menu-vertical-01 .nav-link[data-ico="card"] { --ico: var(--ico-card); }
    .row--section-side > .col-md-3 .faq-nav a[data-ico="info"] { --ico: var(--ico-info); }
    .row--section-side > .col-md-3 .faq-nav a[data-ico="plane"] { --ico: var(--ico-plane); }
    .row--section-side > .col-md-3 .faq-nav a[data-ico="city"] { --ico: var(--ico-city); }
    .row--section-side > .col-md-3 .faq-nav a[data-ico="hotel"] { --ico: var(--ico-hotel); }
    .row--section-side > .col-md-3 .faq-nav a[data-ico="visa"] { --ico: var(--ico-visa); }
    .row--section-side > .col-md-3 .faq-nav a[data-ico="sights"] { --ico: var(--ico-sights); }
    .menu-vertical-01 .nav-link[data-ico="card"] { --ico: var(--ico-card); }
    .menu-vertical-01 .nav-link[data-ico="percent"] { --ico: var(--ico-percent); }
    .menu-vertical-01 .nav-link[data-ico="doc"] { --ico: var(--ico-doc); }
    .menu-vertical-01 .nav-link[data-ico="undo"] { --ico: var(--ico-undo); }
    .menu-vertical-01 .nav-link[data-ico="shield"] { --ico: var(--ico-shield); }
    .menu-vertical-01 .nav-link[data-ico="umbrella"] { --ico: var(--ico-umbrella); }
    .menu-vertical-01 .nav-link[data-ico="pin"] { --ico: var(--ico-pin); }
    .menu-vertical-01 .nav-link[data-ico="visa"] { --ico: var(--ico-visa); }
}

/* «Это интересно» в колонке стран — иконка книги у каждого материала
   (data-ico="book" ставит js/mobile-menu.js по заголовку виджета).
   На всех ширинах: на телефоне виджет стоит под контентом. У строк
   этого списка нет боковых полей, поэтому иконка — у самого края. */
:root {
    --ico-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5M8 7h8'/%3E%3C/svg%3E");
}

.row--section-side > .col-md-3 .box-widget li a[data-ico="book"] {
    position: relative;
    padding-left: 30px;
}

.row--section-side > .col-md-3 .box-widget li a[data-ico="book"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-color: currentColor;
    opacity: .8;
    -webkit-mask: var(--ico-book) center / contain no-repeat;
    mask: var(--ico-book) center / contain no-repeat;
}