/*
 * Свои стили сайта гимназии. Подключается шаблоном автоматически (css/custom.css),
 * при обновлении Educon II не затирается.
 */

/* ---- Шапка ----
 * Пункты меню гимназии (казахские и русские) заметно длиннее демо-меню Educon,
 * и на ширине 1200–1399 px (контейнер 1140 px) меню не помещалось в одну строку
 * с логотипом. Ниже 1200 px шаблон показывает кнопку-«бургер».
 * От 1500 px шаблон ставит отступы 25 px и шрифт 18 px — при контейнере 1320 px
 * это тоже не помещается. От 1400 px — отступы 7 px (с переключателем ҚАЗ | РУС
 * казахскому меню не хватало ~40 px при отступах шаблона 10 px).
 */
@media (min-width: 1400px) {
    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span {
        padding: 0 7px;
        font-size: 16px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span {
        padding: 0 4px;
        font-size: 13.5px;
    }

    body.ltr .sp-megamenu-parent > li.sp-has-child > a::after,
    body.ltr .sp-megamenu-parent > li.sp-has-child > span::after {
        margin-left: 4px;
    }

    .mod-languages--abbr ul.lang-inline {
        margin-left: 4px;
    }

    .mod-languages--abbr ul.lang-inline li + li::before {
        margin: 0 4px;
    }

    .mod-languages--abbr ul.lang-inline li a {
        font-size: 13.5px;
    }
}

/* Логотип гимназии (images/logo/logo-<язык>.svg) шире демо-логотипа Educon:
 * при высоте 46 px из настроек шаблона меню не помещалось в строку. */
@media (min-width: 1400px) {
    #sp-header .logo-image {
        height: 38px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    #sp-header .logo-image {
        height: 34px;
    }
}

/* В пресете ссылки меню — 40 % непрозрачности, а заголовки разделов — тёмные:
 * меню выглядело пёстрым и плохо читалось. Делаем все пункты одного цвета.
 * При смене цветовой схемы на зелёную поправить цвет здесь. */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    color: rgba(0, 35, 103, .75);
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > span,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active > span {
    color: #002367;
}

/* Заголовки разделов («О гимназии», «Коллектив», «Поступление») — это <span> без ссылки,
 * и над ними был обычный курсор-стрелка. Раскрывают подменю — значит, «палец», как у ссылок. */
.sp-megamenu-parent li > span,
.sp-megamenu-parent li > a,
.offcanvas-menu .menu-separator,
.offcanvas-menu .nav-header {
    cursor: pointer;
}

/* ---- Переключатель языков: ҚАЗ | РУС (макет html/mod_languages/abbr.php) ---- */
.mod-languages--abbr ul.lang-inline {
    display: flex;
    align-items: center;
    margin: 0 0 0 10px;
    padding: 0;
}

.mod-languages--abbr ul.lang-inline li,
div.mod-languages--abbr ul li.lang-active {
    margin: 0;
    padding: 0;
    background: none !important;   /* в шаблоне у активного — серая плашка под флаг */
    border-radius: 0;
}

.mod-languages--abbr ul.lang-inline li + li::before {
    content: "|";
    margin: 0 6px;
    color: rgba(0, 35, 103, .3);
}

.mod-languages--abbr ul.lang-inline li a {
    font-size: 15px;
    font-weight: 700;
    color: rgba(0, 35, 103, .5);
    cursor: pointer;
}

.mod-languages--abbr ul.lang-inline li a:hover,
.mod-languages--abbr ul.lang-inline li.lang-active a {
    color: #002367;
}

/* Если меню всё же перенесётся (например, после добавления пунктов), шапка растёт
 * по высоте и остаётся белой — вместо того чтобы меню вылезло на баннер. */
#sp-header {
    height: auto;
    min-height: var(--header_height, 80px);
    background-color: #fff;
}

/* ---- Информационные страницы ----
 * Подзаголовки внутри текстового блока (например, «Через приложение Halyk» на «Оплате»):
 * SP Page Builder задаёт по id блока размер и толщину ВСЕХ заголовков внутри текста
 * (16 px, 400) — правило по id перебивается только !important. */
.sppb-addon-text-block .sppb-addon-content h4 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 1.6em 0 .6em;
}

.sppb-addon-text-block .sppb-addon-content h4:first-child {
    margin-top: 0;
}

/* Карта на странице «Контакты» (виджет Яндекс.Карт, import-pages.php, тип map) */
.gym-map iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
    border-radius: 8px;
}

@media (max-width: 767.98px) {
    .gym-map iframe {
        height: 320px;
    }
}

/* Заголовок страницы (баннер под шапкой). В шаблоне line-height .84 — строки
 * наложены друг на друга; у кириллицы хвосты Ң, Қ, Д и точки Ё залезали на соседнюю строку. */
.sp-page-title .sp-page-title-heading {
    line-height: 1.02;
}

/* Шаблон ограничивает заголовок 820 px (600 px на планшете), и «Эстетика, спорт
 * и культура» ломалась на три строки. На телефоне ограничение шаблона остаётся. */
@media (min-width: 768px) {
    .sp-page-title .sp-page-title-heading {
        max-width: none;
    }
}

/* ---- Главная: слайд-шоу на главном экране (js/custom.js) ----
 * Слои с фото лежат между фоном секции и затемнением .sppb-row-overlay. */
.sppb-section.gym-hero {
    position: relative;
    overflow: hidden;
    /* в шаблоне главный экран — на всё окно (max(100vh, 900px) − 80px); нам — на пол-экрана */
    min-height: max(50vh, 380px);
}

/* Чтобы содержимое помещалось в пол-экрана: заголовок и знак с лучами мельче,
 * у правой колонки нет отступа сверху (в демо — 160 px), поля секции меньше */
@media (min-width: 992px) {
    .sp-page-builder .page-content .sppb-section.gym-hero {
        padding-top: 40px !important;
        padding-bottom: 50px !important;
    }

    .gym-hero .sppb-row-column:last-child .sppb-addon-wrapper:first-child {
        margin-top: 0 !important;
    }

    .sp-page-builder .page-content .gym-hero .sppb-row-column:first-child .sppb-addon-title {
        font-size: clamp(56px, 5.6vw, 84px) !important;
        line-height: .9 !important;
    }

    .gym-hero .sppb-row-column:first-child .sppb-addon-single-image img {
        width: auto;
        height: 96px;
    }
}

/* Подзаголовок под кнопкой: во всю ширину колонки (в демо — 87%), перевод строки в тексте
 * (lead в setup-home.php) — перенос: «Знания, которые открывают / двери в будущее» */
.gym-hero .sppb-row-column:last-child .addon-root-text-block > [id^="sppb-addon-"] {
    max-width: none !important;   /* 87% задан в настройках блока через #id */
}

.gym-hero .sppb-row-column:last-child .addon-root-text-block .sppb-addon-content {
    white-space: pre-line;
}

.gym-hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.gym-hero-slide.is-active {
    opacity: 1;
}

.sppb-section.gym-hero > .sppb-row-overlay {
    z-index: 1;
}

.sppb-section.gym-hero > .sppb-row-container {
    position: relative;
    z-index: 2;
}

/* Подпись над картой «Контактов»: метку виджета Яндекса подписать нельзя */
.gym-map__caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #002367;
}

.gym-map__pin {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50% 50% 50% 0;
    background: #1e98ff;   /* как метка Яндекса */
    transform: rotate(-45deg);
}

/* ---- Карусель «Гимназия в фотографиях» (главная; setup-home.php, js/custom.js) ----
 * Прокрутка с привязкой к кадрам: листается пальцем, колесом, стрелками и клавиатурой. */
.gym-carousel {
    position: relative;
    margin-top: 30px;
    text-align: left;
}

.gym-carousel__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.gym-carousel__track::-webkit-scrollbar {
    display: none;
}

.gym-carousel__track:focus-visible {
    outline: 2px solid #002367;
    outline-offset: 4px;
}

.gym-carousel__slide {
    flex: 0 0 calc((100% - 48px) / 2.4);
    margin: 0;
    scroll-snap-align: start;
}

.gym-carousel__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
}

.gym-carousel__slide figcaption {
    margin-top: 10px;
    font-size: 15px;
    color: #002367;
}

.gym-carousel__nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.gym-carousel__btn {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(0, 35, 103, .25);
    border-radius: 50%;
    background: #fff;
    color: #002367;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s, opacity .2s;
}

.gym-carousel__btn:hover:not(:disabled) {
    background: #002367;
    color: #fff;
}

.gym-carousel__btn:disabled {
    opacity: .35;
    cursor: default;
}

@media (max-width: 767.98px) {
    .gym-carousel__slide {
        flex-basis: 85%;
    }

    .gym-carousel__track {
        gap: 14px;
    }
}

/* Фото внутри текста информационных страниц («Инфраструктура») */
.gym-page-photo {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 6px;
}

/* Несколько фото с подписями (import-pages.php, поле photos): сетка в две колонки,
 * при нечётном числе первое фото — на всю ширину */
.gym-photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 6px;
}

.gym-photos figure {
    margin: 0;
}

.gym-photos figure:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
}

.gym-photos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
}

.gym-photos figcaption {
    margin-top: 8px;
    font-size: 15px;
    color: #002367;
}

/* на широком экране — по три фото в ряд: страница короче */
@media (min-width: 992px) {
    .gym-photos {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .gym-photos figure:first-child:nth-last-child(odd) {
        grid-column: auto;
    }

    .gym-photos figcaption {
        margin-top: 6px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .gym-photos {
        grid-template-columns: 1fr;
    }
}

/* ---- Фото крупно поверх страницы (js/custom.js): карусель главной и «Инфраструктура» ---- */
.gym-carousel__slide img,
.gym-photos img,
img.gym-page-photo {
    cursor: zoom-in;
}

.gym-zoom {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 76px;
    background: rgba(0, 18, 54, .92);
    outline: none;
}

.gym-zoom-open {
    overflow: hidden;   /* страница под фото не прокручивается */
}

.gym-zoom-open .gym-zoom {
    display: flex;
}

.gym-zoom__figure {
    margin: 0;
    text-align: center;
}

.gym-zoom__figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 100px);
    margin: 0 auto;
    border-radius: 8px;
}

.gym-zoom__figure figcaption {
    margin-top: 12px;
    font-size: 16px;
    color: #fff;
}

.gym-zoom__btn {
    position: absolute;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(0, 18, 54, .6);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.gym-zoom__btn:hover {
    background: #fff;
    color: #002367;
}

.gym-zoom__close {
    top: 16px;
    right: 16px;
    font-size: 28px;
}

.gym-zoom__prev,
.gym-zoom__next {
    top: 50%;
    margin-top: -23px;
}

.gym-zoom__prev {
    left: 16px;
}

.gym-zoom__next {
    right: 16px;
}

.gym-zoom--single .gym-zoom__prev,
.gym-zoom--single .gym-zoom__next {
    display: none;
}

@media (max-width: 767.98px) {
    .gym-zoom {
        padding: 70px 10px;
    }

    .gym-zoom__figure img {
        max-height: calc(100vh - 200px);
    }

    .gym-zoom__prev,
    .gym-zoom__next {
        top: auto;
        bottom: 14px;
        margin-top: 0;
    }
}

/* ---- Форма обратной связи («Контакты»; com_gymnasium tmpl/contact/form.php) ---- */
.gym-form {
    max-width: 640px;
    scroll-margin-top: 110px;   /* после отправки страница открывается у формы — не под шапкой */
}

.gym-form__row {
    margin-bottom: 18px;
}

.gym-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #002367;
}

.gym-form input[type="text"],
.gym-form textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 35, 103, .25);
    border-radius: 6px;
    background: #fff;
    color: #002367;
    font: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.gym-form textarea {
    resize: vertical;
    min-height: 130px;
}

.gym-form input[type="text"]:focus,
.gym-form textarea:focus {
    outline: none;
    border-color: #002367;
    box-shadow: 0 0 0 3px rgba(0, 35, 103, .12);
}

.gym-form small {
    display: block;
    margin-top: 4px;
    color: #667BA4;
}

.gym-form .gym-form__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 22px;
    font-weight: 400;
    font-size: 15px;
    color: #496389;
    cursor: pointer;
}

.gym-form__consent input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: #002367;
}

.gym-form__submit {
    padding: 13px 34px;
    border: 0;
    border-radius: 6px;
    background: #002367;
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
}

.gym-form__submit:hover,
.gym-form__submit:focus-visible {
    background: #113882;
}

.gym-form__notice {
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: 6px;
}

.gym-form__notice--ok {
    background: #e7f4ec;
    color: #1d5c34;
}

.gym-form__notice--error {
    background: #fdecec;
    color: #8a1f1f;
}

/* ловушка для роботов — за пределами экрана, не display:none (некоторые роботы это проверяют) */
.gym-form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- «Контакты» (import-pages.php, тип contacts): плитки, под ними карта и форма ---- */
.gym-contacts__tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.gym-contacts__tile {
    display: grid;
    grid-template-columns: auto 1fr;   /* иконка в строку с заголовком — плитка ниже */
    grid-template-rows: auto 1fr auto;
    column-gap: 10px;
    align-items: center;
    justify-items: start;
    padding: 16px 20px;
    border-radius: 12px;
    background: #ECF2FF;
    color: #496389;
    transition: transform .25s, box-shadow .25s;
}

.gym-contacts__tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 35, 103, .1);
}

.gym-contacts__icon {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #002367;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gym-contacts__title {
    font-size: 17px;
    font-weight: 600;
    color: #002367;
}

.gym-contacts__text,
.gym-contacts__actions {
    grid-column: 1 / -1;
}

/* кнопки плитки в строку (маршрут — Яндекс и 2ГИС), не влезают — переносятся */
.gym-contacts__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gym-contacts__text {
    align-self: start;
    margin: 8px 0 12px;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.gym-contacts__tile .gym-pill {
    padding: 7px 16px;
    background: #fff;
}

.gym-contacts__tile .gym-pill:hover,
.gym-contacts__tile .gym-pill:focus-visible {
    background: #002367;
}

.gym-contacts__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.gym-contacts__map {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gym-contacts__map .gym-map {
    flex: 1;
}

.gym-contacts__map .gym-map iframe {
    height: 100%;
    min-height: 380px;
}

/* карта одна, на всю ширину */
.gym-contacts__main--wide {
    grid-template-columns: 1fr;
}

.gym-contacts__main--wide .gym-map iframe {
    height: 440px;
}

/* фото входа рядом с картой */
.gym-contacts__entrance {
    margin: 0;
}

.gym-contacts__entrance .gym-page-photo {
    max-width: none;
    margin-top: 0;
}

.gym-contacts__entrance figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 12px;
    font-size: 17px;
    font-weight: 600;
    color: #002367;
}

.gym-contacts__entrance .gym-pill {
    padding: 7px 16px;
}

.gym-contacts__form h2 {
    margin: 0 0 6px;
    font-size: 28px;
    color: #002367;
}

.gym-contacts__form > p {
    margin: 0 0 14px;
    font-size: 15px;
}

/* форма компактнее: имя и телефон в одну строку, поля ниже */
.gym-contacts .gym-form {
    max-width: none;
}

.gym-contacts .gym-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.gym-contacts .gym-form form > * {
    grid-column: 1 / -1;
}

.gym-contacts .gym-form form > .gym-form__row:nth-of-type(1) {
    grid-column: 1;
}

.gym-contacts .gym-form form > .gym-form__row:nth-of-type(2) {
    grid-column: 2;
}

.gym-contacts .gym-form__row {
    margin-bottom: 12px;
}

.gym-contacts .gym-form input[type="text"],
.gym-contacts .gym-form textarea {
    padding: 9px 12px;
}

.gym-contacts .gym-form textarea {
    min-height: 96px;
}

.gym-contacts .gym-form .gym-form__consent {
    margin: 0 0 14px;
}

.gym-contacts .gym-form__submit {
    justify-self: start;
    padding: 11px 30px;
}

/* ==== Блоки информационных страниц (import-pages.php: lead, steps, tiles, links) ====
 * «Наш подход»: главная мысль на плашке, нумерованные карточки, плитки с иконками. */
.gym-block__title {
    margin: 18px 0 16px;
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.15;
    color: #002367;
}

/* исходная (официальная) формулировка под короткой фразой */
.gym-block__full {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #667BA4;
}

.gym-lead,
.gym-steps,
.gym-values,
.gym-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gym-lead svg,
.gym-values svg,
.gym-links svg {
    fill: none;
    stroke: #002367;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- lead: главная мысль ---- */
.gym-lead {
    padding: 34px 38px;
    border-radius: 14px;
    background: #ECF2FF;
    color: #002367;
}

.gym-lead__label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #667BA4;
}

.gym-lead__text {
    max-width: 900px;
    margin: 0 0 26px;
    font-family: 'Brygada 1918', serif;
    font-size: clamp(24px, 2.8vw, 36px);
    line-height: 1.2;
}

.gym-lead__points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 28px;
    list-style: none;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(0, 35, 103, .15);
}

.gym-lead__points li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: center;
}

.gym-lead__icon {
    width: 28px;
    height: 28px;
}

.gym-lead__point {
    font-size: 18px;
    font-weight: 600;
}

.gym-lead__points .gym-block__full {
    grid-column: 1 / -1;
}

/* ---- steps: нумерованные карточки ---- */
.gym-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.gym-steps__item {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
    border: 1px solid rgba(0, 35, 103, .14);
    border-radius: 12px;
    background: #fff;
}

.gym-steps__num {
    margin-bottom: 10px;
    font-size: 40px;
    line-height: 1;
    font-style: italic;
    font-weight: 600;
    color: #B7C6E6;
}

.gym-steps__title {
    margin-bottom: 6px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: #002367;
}

.gym-steps__text {
    font-size: 15px;
    line-height: 1.45;
    color: #002367;
}

.gym-steps__item .gym-block__full {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 35, 103, .1);
}

/* ---- tiles: плитки с иконками ---- */
.gym-values {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));   /* «Конкурентоспособность» — в одну строку */
    gap: 14px;
}

.gym-values__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 12px;
    background: #ECF2FF;
}

.gym-values__icon {
    width: 30px;
    height: 30px;
}

.gym-values__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: #002367;
}

.gym-values__item .gym-block__full {
    grid-column: 1 / -1;
    color: #496389;
}

/* ---- links: плитки-переходы ---- */
.gym-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 14px;
}

.gym-links__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    align-items: center;
    height: 100%;
    padding: 20px 22px;
    border-radius: 12px;
    background: #002367;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform .25s, box-shadow .25s, background .25s;
}

.gym-links__item:hover,
.gym-links__item:focus-visible {
    transform: translateY(-3px);
    background: #113882;
    box-shadow: 0 10px 24px rgba(0, 35, 103, .2);
}

.gym-links .gym-links__icon {
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    stroke: #fff;
}

.gym-links__title {
    font-size: 19px;
    font-weight: 600;
}

.gym-links__text {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
}

/* ---- hero: верх страницы — фото и плашка с фразой и фактами ---- */
.gym-herocard {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border-radius: 14px;
    overflow: hidden;
    background: #ECF2FF;
    color: #002367;
}

.gym-herocard__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    max-height: 360px;
    object-fit: cover;
}

.gym-herocard__body {
    align-self: center;
    padding: 28px 36px;
}

.gym-herocard__lead {
    margin: 0 0 16px;
    font-family: 'Brygada 1918', serif;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.25;
}

.gym-herocard__lead strong {
    font-weight: inherit;
    color: #1A4BB8;
}

.gym-herocard__facts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gym-herocard__facts li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid rgba(0, 35, 103, .14);
    font-weight: 600;
}

.gym-herocard__facts li::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1A4BB8;
}

/* ---- rooms: карточки помещений («Инфраструктура») ---- */
.gym-rooms,
.gym-rooms__plain {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gym-rooms {
    grid-template-columns: repeat(4, 1fr);
}

.gym-photos[hidden] {
    display: none;   /* фото карточки показываются только в просмотре */
}

.gym-rooms__card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #dfe6f5;
    text-align: left;
    cursor: zoom-in;
}

.gym-rooms__cover {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s ease;
}

.gym-rooms__card:hover .gym-rooms__cover,
.gym-rooms__card:focus-visible .gym-rooms__cover {
    transform: scale(1.05);
}

.gym-rooms__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 36px 16px 12px;
    background: linear-gradient(transparent, rgba(0, 18, 54, .82));
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.gym-rooms__name small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    opacity: .85;
}

.gym-rooms__plain {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 16px;
}

.gym-rooms__plain li {
    padding: 16px 18px;
    border-radius: 12px;
    background: #ECF2FF;
    color: #496389;
    font-size: 15px;
}

.gym-rooms__plain strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 600;
    color: #002367;
}

.gym-rooms__plain p {
    margin: 0;
}

.gym-rooms__plain p strong {
    display: inline;
    font-size: inherit;
    color: inherit;
}

/* ==== Главная: раскладка «как у KIS» (setup-home.php, выбрана гимназией 30.09.2026) ====
 * Полосы по очереди белые и серые, заголовок с «кикером» слева, карточки с фото,
 * тёмная полоса с цифрами, цитата директора, ступени вкладками, баннер на фото. */
.sp-page-builder .page-content .sppb-section.gym-home-grey { background: #f3f5fa !important; }
.sp-page-builder .page-content .sppb-section.gym-home-tint { background: #ECF2FF !important; }
.sp-page-builder .page-content .sppb-section.gym-home-dark { background: #002367 !important; }
.sp-page-builder .page-content .sppb-section.gym-home-tour-sec {
    background: linear-gradient(90deg, rgba(0, 35, 103, .95), rgba(0, 35, 103, .7)), url(../../../images/school/hall-1.jpg) center / cover !important;
}

.gym-home-sec .sppb-addon-content {
    text-align: left;
}

.gym-kicker {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1A4BB8;
}

.gym-home-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.gym-home-h {
    margin: 8px 0 0;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
    color: #002367;
}

.gym-link {
    color: #002367 !important;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 2px;
}

.gym-link:hover {
    color: #1A4BB8 !important;
}

.gym-btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border-radius: 6px;
    background: #002367;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .2s;
}

.gym-btn:hover {
    background: #1A4BB8;
}

.gym-btn--light {
    background: #fff;
    color: #002367 !important;
}

.gym-btn--ghost {
    background: none;
    border: 1px solid rgba(255, 255, 255, .7);
}

.gym-btn--light:hover,
.gym-btn--ghost:hover {
    background: #ECF2FF;
    color: #002367 !important;
}

/* наша цель */
.gym-home-welcome {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 60px;
    align-items: start;
}

.gym-home-welcome__h {
    margin: 10px 0 0;
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: 1.02;
    text-transform: uppercase;
    color: #002367;
}

.gym-home-welcome p {
    margin: 0 0 22px;
    font-size: 21px;
    line-height: 1.55;
    color: #002367;
}

.gym-home-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
}

/* преимущества: карточки с фото */
.gym-home-cards,
.gym-home-extra,
.gym-home-band {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gym-home-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gym-home-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 35, 103, .08);
}

.gym-home-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 50% 30%;
}

.gym-home-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 24px 26px;
}

.gym-home-card__body b {
    font-size: 19px;
    font-weight: 600;
    color: #002367;
}

.gym-home-card__body p {
    flex: 1;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: #496389;
}

/* цифры */
.gym-home-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: #fff;
}

.gym-home-band li {
    padding: 0 26px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.gym-home-band li:first-child {
    padding-left: 0;
    border-left: 0;
}

.gym-home-band b {
    display: block;
    font-family: 'Brygada 1918', serif;
    font-size: 60px;
    font-weight: 500;
    line-height: 1;
}

.gym-home-band li > span {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .85;
}

/* цитата директора: фото слева, справа цитата и подпись — фото и имя в меру с цитатой.
 * figcaption «растворён» (display: contents), чтобы фото и подпись встали в сетку отдельно. */
.gym-home-quote {
    display: grid;
    grid-template-columns: 170px 1fr;
    grid-template-areas: "photo quote" "photo sign";
    align-items: center;
    column-gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.gym-home-quote figcaption {
    display: contents;
}

.gym-home-quote figcaption img {
    grid-area: photo;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 10px 26px rgba(0, 35, 103, .15);
    object-fit: cover;
    object-position: 50% 20%;
}

.gym-home-quote blockquote {
    grid-area: quote;
    align-self: end;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Brygada 1918', serif;
    font-size: clamp(20px, 1.9vw, 25px);
    font-style: italic;
    line-height: 1.4;
    color: #002367;
}

.gym-home-quote figcaption > span {
    grid-area: sign;
    align-self: start;
    margin-top: 16px;
    color: #496389;
    font-size: 15px;
    line-height: 1.5;
}

.gym-home-quote figcaption b {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: #002367;
}

.gym-home-quote .gym-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 14.5px;
}

@media (max-width: 767.98px) {
    .gym-home-quote {
        grid-template-columns: 90px 1fr;
        grid-template-areas: "photo sign" "quote quote";
        column-gap: 18px;
        row-gap: 16px;
    }

    .gym-home-quote figcaption img {
        width: 90px;
        height: 90px;
        border-width: 3px;
    }

    .gym-home-quote figcaption > span {
        align-self: center;
        margin-top: 0;
    }
}

/* ступени: вкладки */
.gym-home-tabs__bar {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(0, 35, 103, .14);
}

.gym-home-tabs__bar button {
    padding: 14px 24px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: #7b8db0;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.gym-home-tabs__bar button[aria-selected="true"] {
    border-bottom-color: #1A4BB8;
    color: #002367;
}

.gym-home-tab {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    align-items: center;
}

.gym-home-tab[hidden] {
    display: none;
}

.gym-home-tab img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    object-fit: cover;
}

.gym-home-tab__grades {
    font-family: 'Brygada 1918', serif;
    font-size: 64px;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    color: #1A4BB8;
}

.gym-home-tab small {
    font-size: 15px;
    color: #496389;
}

.gym-home-tab h3 {
    margin: 10px 0 12px;
    font-family: Onest, sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #002367;
}

.gym-home-tab p {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.55;
    color: #496389;
}

/* узнать больше */
.gym-home-extra {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gym-home-extra > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 26px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 35, 103, .08);
}

.gym-home-extra > li > b {
    font-size: 19px;
    font-weight: 600;
    color: #002367;
}

.gym-home-extra > li > p {
    flex: 1;
    margin: 0;
    color: #496389;
}

.gym-home-icon {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #1A4BB8;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* карточка Вестника: разметка {GYM_HOME_VESTNIK} (HomeBlocks::vestnik) */
.gym-home-more__vestnik .gym-home-issue {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 18px;
    color: #002367;
    text-decoration: none;
}

.gym-home-more__vestnik .gym-home-issue__cover {
    grid-row: 1 / 4;
    width: 96px;
    height: auto;
    box-shadow: 0 8px 18px rgba(0, 35, 103, .2);
}

.gym-home-more__vestnik .gym-home-more {
    display: none;
}

.gym-home-more__vestnik .gym-home-issue {
    padding: 0;
    background: none;
    box-shadow: none;
}

/* текст цели крупнее: у текстового блока Page Builder свой размер шрифта */
.gym-home-welcome p:not(.gym-home-links) {
    font-size: 21px !important;
    line-height: 1.55 !important;
}

/* баннер «Приходите познакомиться» */
.gym-home-tour {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
}

.gym-home-tour h2 {
    margin: 0 0 8px;
    font-size: 40px;
    color: #fff;
}

.gym-home-tour p {
    margin: 0;
    font-size: 18px;
    opacity: .88;
}

.gym-home-tour__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 991.98px) {
    .gym-home-welcome,
    .gym-home-tab {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .gym-home-cards,
    .gym-home-extra {
        grid-template-columns: 1fr 1fr;
    }

    .gym-home-band {
        grid-template-columns: 1fr 1fr;
        gap: 28px 0;
    }

    .gym-home-band li:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .gym-home-cards,
    .gym-home-extra {
        grid-template-columns: 1fr;
    }

    .gym-home-band b {
        font-size: 44px;
    }

    .gym-home-tabs__bar button {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* ==== Появление блоков — одинаково на всех страницах («Проявление», выбрано гимназией) ====
 * Классы ставит js/custom.js (без скрипта всё видно сразу): блок проявляется, когда до него
 * доходит прокрутка; карточки при этом слегка вырастают, по очереди в ряду (--i).
 * Широкие блоки (текст, заголовки) только проявляются — рост у них заметен и мешает читать. */
.gym-reveal {
    opacity: 0;
    transform: scale(.94);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 60ms);
}

.gym-reveal--wide {
    transform: none;
}

.gym-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* фото здания на «Инфраструктуре» при появлении едва заметно отъезжает. Плавный переход
 * (transition), а не анимация с ключевыми кадрами: та начиналась с увеличенного кадра —
 * фото, уже видное в масштабе 1, рывком прыгало и только потом отъезжало. */
.gym-herocard.gym-reveal .gym-herocard__photo {
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(.2, .7, .2, 1);
}

.gym-herocard.gym-reveal.is-in .gym-herocard__photo {
    transform: none;
}

/* описание помещения под фото в просмотре */
.gym-zoom__note {
    max-width: 760px;
    margin: 6px auto 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .78);
}

.gym-zoom__figure img {
    max-height: calc(100vh - 150px);
}

@media (max-width: 991.98px) {
    .gym-herocard {
        grid-template-columns: 1fr;
    }

    .gym-rooms {
        grid-template-columns: repeat(2, 1fr);
    }

    .gym-rooms__plain {
        grid-template-columns: 1fr;
    }
}

/* кнопки под блоком — слева, а не по центру, как на главной */
.gym-pills.gym-pills--left {
    justify-content: flex-start;
    margin-bottom: 0;
}

.gym-lead__points--4 {
    grid-template-columns: repeat(4, 1fr);
}

.gym-lead__text strong,
.gym-steps__text strong {
    font-weight: 600;
}

.gym-lead__text strong {
    color: #1A4BB8;   /* в крупной фразе жирность почти не видна — выделяем цветом */
    font-weight: inherit;
}

.gym-lead .gym-pill {
    background: #fff;
}

.gym-lead .gym-pill:hover,
.gym-lead .gym-pill:focus-visible {
    background: #002367;
}

/* ---- quote: цитата с фото и подписью ---- */
.gym-quote {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: center;
    margin: 0;
    padding: 8px 0;
}

.gym-quote__photo {
    width: 180px;
    height: 220px;
    border-radius: 12px;
    object-fit: cover;
    object-position: 50% 20%;
}

.gym-quote blockquote,
.gym-letter blockquote {
    position: relative;
    margin: 0;
    padding: 0 0 0 26px;
    border: 0;
    border-left: 4px solid #1A4BB8;
    font-family: 'Brygada 1918', serif;
    font-style: normal;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.3;
    color: #002367;
}

.gym-quote figcaption,
.gym-letter__sign {
    display: flex;
    flex-direction: column;
    margin: 16px 0 0;
    font-size: 15px;
    color: #496389;
}

.gym-quote figcaption strong,
.gym-letter__sign strong {
    font-size: 18px;
    font-weight: 600;
    color: #002367;
}

/* ---- faq: вопросы-ответы ---- */
.gym-faq {
    border-top: 1px solid rgba(0, 35, 103, .14);
}

.gym-faq__item {
    border-bottom: 1px solid rgba(0, 35, 103, .14);
}

.gym-faq {
    max-width: 900px;
}

.gym-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 4px;
    font-size: 18px;
    font-weight: 600;
    color: #002367;
    cursor: pointer;
    list-style: none;
    transition: color .2s;
}

.gym-faq__item summary:hover {
    color: #1A4BB8;
}

.gym-faq__item summary::-webkit-details-marker {
    display: none;
}

/* кружок с «+», при открытии поворачивается в «×» */
.gym-faq__item summary::after {
    content: '';
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0, 35, 103, .14);
    border-radius: 50%;
    background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%231A4BB8' stroke-width='1.6'/%3E%3C/svg%3E");
    transition: transform .3s, background-color .2s;
}

.gym-faq__item[open] summary::after {
    transform: rotate(45deg);
    background-color: #ECF2FF;
}

.gym-faq__answer {
    overflow: hidden;
    padding: 0 60px 20px 4px;
    font-size: 16.5px;
    line-height: 1.6;
    color: #496389;
}

.gym-faq__answer p {
    margin: 0;
}

/* заголовок группы вопросов («Оплата за обучение») — с отступом от предыдущей группы */
.gym-block__title + .gym-faq {
    margin-top: 0;
}

.gym-faq__answer h4 {
    margin: 0 0 8px;
    font-size: 16.5px;
}

.gym-faq__answer ol {
    margin: 0 0 4px;
    padding-left: 20px;
}

.gym-faq__answer li {
    margin: 3px 0;
}

.gym-faq__answer p + p {
    margin-top: 10px;
}

.gym-faq__answer strong {
    color: #002367;
}

/* ---- flow: блок-схема «Поступления» (import-pages.php, тип flow) ----
 * Вопрос → дорожки по классам → схождение → общие шаги со стрелками. Дорожки — одна сетка:
 * карточки одного вида («Отбор», «Что подать») стоят на одном уровне. Линии — псевдоэлементы. */
.gym-flow {
    --flow-line: #1A4BB8;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gym-flow__q {
    position: relative;
    padding: 14px 32px;
    border-radius: 999px;
    background: #002367;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
}

.gym-flow__lanes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--lanes), 1fr);
    grid-template-rows: auto 1fr 1fr;
    grid-auto-flow: column;
    gap: 12px 14px;
    width: 100%;
    margin-top: 30px;
    padding-top: 30px;
}

/* от вопроса вниз и горизонталь над дорожками */
.gym-flow__lanes::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% / var(--lanes));
    right: calc(50% / var(--lanes));
    height: 2px;
    background: var(--flow-line);
}

.gym-flow__q::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 30px;
    background: var(--flow-line);
}

.gym-flow__tag {
    position: relative;
    padding: 11px;
    border-radius: 10px;
    background: #1A4BB8;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.gym-flow__tag::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -30px;
    width: 2px;
    height: 30px;
    background: var(--flow-line);
}

.gym-flow__card {
    position: relative;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 35, 103, .08);
    font-size: 14.5px;
    line-height: 1.45;
    color: #496389;
}

.gym-flow__card--ok {
    background: #e6f4ec;
    box-shadow: none;
}

.gym-flow__label {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1A4BB8;
}

.gym-flow__card--ok .gym-flow__label {
    color: #1d7a4c;
}

.gym-flow__card b {
    display: block;
    margin-bottom: 4px;
    font-size: 15.5px;
    font-weight: 600;
    color: #002367;
}

.gym-flow__card p {
    margin: 0;
}

.gym-flow__card p b {
    display: inline;
    font-size: inherit;
}

/* от последней карточки каждой дорожки вниз — к схождению */
.gym-flow__lanes > :nth-child(3n)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 2px;
    height: 18px;
    background: var(--flow-line);
}

.gym-flow__merge {
    position: relative;
    width: 100%;
    height: 48px;
}

.gym-flow__merge::before {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% / var(--lanes, 4));
    right: calc(50% / var(--lanes, 4));
    height: 2px;
    background: var(--flow-line);
}

.gym-flow__merge::after,
.gym-flow__arrow {
    content: '';
    position: absolute;
    left: 50%;
    top: 18px;
    width: 2px;
    height: 30px;
    background: var(--flow-line);
}

.gym-flow__arrow {
    position: relative;
    left: auto;
    top: auto;
    height: 34px;
}

/* наконечник стрелки */
.gym-flow__arrow::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: -2px;
    border: 6px solid transparent;
    border-top-color: var(--flow-line);
    border-bottom: 0;
}

.gym-flow__node {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 18px 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 35, 103, .08);
    text-align: center;
}

.gym-flow__node--wide {
    max-width: 1000px;
}

.gym-flow__n {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #1A4BB8;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.gym-flow__node > b {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #002367;
}

.gym-flow__node > p {
    margin: 6px 0 0;
    color: #496389;
}

.gym-flow__node--done {
    background: #e6f4ec;
    box-shadow: none;
}

.gym-flow__node--done b {
    color: #1d7a4c;
}

/* развилка способов подачи внутри шага */
.gym-flow__fork {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
    text-align: left;
}

.gym-flow__way {
    padding: 18px 20px;
    border: 1px solid rgba(0, 35, 103, .14);
    border-radius: 12px;
}

.gym-flow__way h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: Onest, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #002367;
}

.gym-flow__icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #1A4BB8;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gym-flow__way ol {
    margin: 0;
    padding-left: 20px;
    color: #496389;
    font-size: 15px;
}

.gym-flow__way li {
    margin: 4px 0;
}

.gym-flow__result {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #e6f4ec;
    color: #1d7a4c;
    font-size: 14.5px;
    font-weight: 600;
}

/* чек-лист документов (в ответах раскрывающихся блоков) */
.gym-check {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gym-check li {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid rgba(0, 35, 103, .1);
    color: #002367;
}

.gym-check li:first-child {
    border-top: 0;
}

.gym-check li::before {
    content: '';
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 6px;
    background: #e6f4ec no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231d7a4c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m2 7.5 3 3 7-7'/%3E%3C/svg%3E");
}

.gym-check small {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: #7b8db0;
}

/* список документов со ссылками: название — ссылка, ниже реквизиты акта и источник */
.gym-doclist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gym-doclist li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 35, 103, .1);
}

.gym-doclist li:first-child {
    border-top: 0;
}

/* значок документа */
.gym-doclist li::before {
    content: '';
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 6px;
    background: #eef2fb no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231e4fc2' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 1.5h5l3 3v8H3z'/%3E%3Cpath d='M8 1.5v3h3M5 7.5h4M5 10h4'/%3E%3C/svg%3E");
}

.gym-doclist a {
    font-weight: 600;
    color: #002367;
    text-decoration: underline;
    text-decoration-color: rgba(0, 35, 103, .25);
    text-underline-offset: 3px;
}

.gym-doclist a:hover,
.gym-doclist a:focus-visible {
    color: #1e4fc2;
    text-decoration-color: currentColor;
}

/* внешняя ссылка — стрелка */
.gym-doclist a[target="_blank"]:not([href$=".pdf"])::after {
    content: ' ↗';
    font-weight: 400;
    color: #7b8db0;
}

.gym-doclist small {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: #7b8db0;
}

.gym-doclist small a {
    font-weight: 500;
}

/* «один из»: варианты-кнопки выбора с разделителем «или» (в отличие от .gym-check, где нужны все) */
.gym-oneof {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 640px;
}

.gym-oneof li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 35, 103, .14);
    border-radius: 10px;
    background: #fff;
    color: #002367;
}

.gym-oneof li + li {
    margin-top: 30px;
}

/* «или» между вариантами */
.gym-oneof li + li::after {
    content: var(--or, 'или');
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translate(-50%, -50%);
    padding: 1px 10px;
    border-radius: 99px;
    background: #eef2fb;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1e4fc2;
}

/* кружок выбора */
.gym-oneof li::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid #1e4fc2;
    border-radius: 50%;
}

.gym-oneof b {
    flex: none;
    width: 205px;
    font-weight: 600;
}

.gym-oneof span {
    color: #4a5d85;
}

@media (max-width: 575.98px) {
    .gym-oneof li {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .gym-oneof b {
        width: auto;
    }

    .gym-oneof span {
        flex-basis: 100%;
        padding-left: 30px;
    }
}

/* файлы для чтения и скачивания */
.gym-files {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gym-file {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 35, 103, .07);
}

.gym-file__type {
    display: grid;
    place-items: end center;
    flex: none;
    width: 44px;
    height: 54px;
    padding-bottom: 7px;
    border-radius: 6px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.gym-file__type--doc {
    background: #2b5bb8;
}

.gym-file b {
    display: block;
    margin-bottom: 4px;
    color: #002367;
}

.gym-file small {
    color: #7b8db0;
}

.gym-file__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 14.5px;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    /* на узком экране дорожки идут друг под другом */
    .gym-flow__lanes {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .gym-flow__tag:not(:first-child) {
        margin-top: 14px;
    }

    .gym-flow__lanes::before,
    .gym-flow__tag::before,
    .gym-flow__lanes > :nth-child(3n)::after,
    .gym-flow__merge::before {
        display: none;
    }

    .gym-flow__merge {
        height: 18px;
    }

    .gym-flow__merge::after {
        top: 0;
        height: 18px;
    }

    .gym-flow__fork,
    .gym-files {
        grid-template-columns: 1fr;
    }
}

/* важное предупреждение («Оплата»: без данных ученика в назначении платежа — долг) */
.gym-callout {
    max-width: 900px;
    margin: 18px 0 0 !important;
    padding: 16px 20px 16px 52px;
    border-radius: 12px;
    background: #fff4e0 no-repeat 18px 17px / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b26a00' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cpath d='M12 10v5M12 18v.01'/%3E%3C/svg%3E");
    color: #6b4100;
}

.gym-callout strong {
    font-weight: 600;
}

/* «Не нашли ответ?» под вопросами */
.gym-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding: 30px 34px;
    border-radius: 14px;
    background: #002367;
    color: #fff;
}

.gym-ask h2 {
    margin: 0 0 4px;
    font-size: 30px;
    color: #fff;
}

.gym-ask p {
    margin: 0;
    opacity: .85;
}

.gym-ask__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 575.98px) {
    .gym-faq__answer {
        padding-right: 4px;
    }
}

/* ---- letter: обращение директора ---- */
.gym-letter {
    display: grid;
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: 44px;
    align-items: start;
}

.gym-letter__photo {
    position: sticky;
    top: 110px;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    object-fit: cover;
    object-position: 50% 20%;
}

.gym-letter__hello {
    margin: 0 0 16px;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
    color: #002367;
}

.gym-letter__body p {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.6;
    color: #002367;
}

.gym-letter__body p strong {
    font-weight: 600;
}

.gym-letter blockquote {
    margin: 6px 0 18px;
}

.gym-letter .gym-letter__sign {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 35, 103, .14);
    font-size: 15px;
    line-height: 1.5;
    color: #496389;
}

/* ---- реквизиты: подпись — значение ---- */
.gym-facts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gym-facts li {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 4px 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 35, 103, .1);
}

.gym-facts li > span {
    color: #667BA4;
}

@media (max-width: 1199.98px) {
    .gym-steps,
    .gym-lead__points--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .gym-quote,
    .gym-letter {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gym-quote__photo {
        width: 120px;
        height: 150px;
    }

    .gym-letter__photo {
        position: static;
        max-width: 240px;
    }

    .gym-facts li {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .gym-lead {
        padding: 24px 20px;
    }

    .gym-lead__points,
    .gym-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .gym-steps {
        grid-template-columns: 1fr;
    }
}

/* ==== Компактные внутренние страницы (все, кроме главной) ========================
 * Заголовок страницы ниже и мельче: в шаблоне блок заголовка 270 px и кегль 84 px. */
.sp-page-title {
    min-height: 0;
    padding-top: 30px;
    padding-bottom: 22px;
}

.sp-page-title .sp-page-title-heading {
    font-size: clamp(32px, 4.4vw, 60px);   /* 32 — «Гимназический» помещается на телефоне */
}

/* Страницы SP Page Builder из import-pages.php: меньше поля между блоками (в скрипте
 * 20–30 px и 100 px после последнего) и без появления при прокрутке. Главную не трогаем —
 * её узнаём по секции gym-hero. */
body:not(:has(.gym-hero)) .sp-page-builder .page-content .sppb-section {
    padding-top: 8px !important;
    padding-bottom: 14px !important;
}

body:not(:has(.gym-hero)) .sp-page-builder .page-content .sppb-section:first-child {
    padding-top: 0 !important;
}

body:not(:has(.gym-hero)) .sp-page-builder .page-content .sppb-section:last-child {
    padding-bottom: 50px !important;
}

/* анимации Page Builder из демо выключены везде, в том числе на главной: появление блоков —
 * одно на весь сайт (.gym-reveal, js/custom.js) */
.sp-page-builder .sppb-wow {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
}

/* «движение при прокрутке» из демо: блок правой колонки въезжал сбоку (скрипт Page Builder
 * пишет transform прямо в style) и, пока не доехал, вылезал за край страницы */
body:not(:has(.gym-hero)) .sp-page-builder .sppb-addon-wrapper > [id^="sppb-addon-"] {
    transform: none !important;
}

/* на телефоне заголовок блока и его текст идут друг под другом — поля блоков меньше */
@media (max-width: 767.98px) {
    body:not(:has(.gym-hero)) .sp-page-builder .sppb-addon-wrapper > [id^="sppb-addon-"] {
        padding-top: 10px !important;
        padding-bottom: 4px !important;
    }
}

@media (max-width: 1199.98px) {
    .gym-contacts__tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .gym-contacts__main {
        grid-template-columns: 1fr;
    }

    /* на узком экране сначала форма, потом карта */
    .gym-contacts__map {
        order: 2;
    }

    .gym-contacts__map .gym-map iframe {
        height: 320px;
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .gym-contacts__tiles,
    .gym-contacts .gym-form form {
        grid-template-columns: 1fr;
    }

    .gym-contacts .gym-form form > .gym-form__row:nth-of-type(2) {
        grid-column: 1;
    }
}

/* ==== Главная: блоки setup-home.php (section) ==================================== */
.gym-sec-stats ul, .gym-sec-why ul, .gym-sec-stages ol, .gym-home-news {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- числа (досчитывает js/custom.js) ---- */
.gym-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(0, 35, 103, .15);
    border-bottom: 1px solid rgba(0, 35, 103, .15);
}

.gym-stats__item {
    padding: 34px 24px;
    text-align: left;
}

.gym-stats__item + .gym-stats__item {
    border-left: 1px solid rgba(0, 35, 103, .15);
}

.gym-stats__num {
    display: block;
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1;
    font-style: italic;
    font-weight: 500;
    color: #002367;
}

.gym-stats__pre {
    font-size: .8em;
}

.gym-stats__label {
    display: block;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #002367;
}

/* ---- почему гимназия ---- */
.gym-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px !important;
    text-align: left;
}

.gym-why__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 28px;
    border-radius: 12px;
    background: #ECF2FF;
    color: #496389;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s, background .25s;
}

a.gym-why__card:hover,
a.gym-why__card:focus-visible {
    transform: translateY(-4px);
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 35, 103, .12);
}

.gym-why__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    fill: none;
    stroke: #002367;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gym-why__title {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    color: #002367;
}

.gym-why__text {
    font-size: 16px;
    line-height: 1.5;
}

a.gym-why__card .gym-why__title::after {
    content: " →";
    opacity: 0;
    transition: opacity .25s;
}

a.gym-why__card:hover .gym-why__title::after {
    opacity: 1;
}

/* ---- ступени обучения ---- */
.gym-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px !important;
    text-align: left;
}

.gym-stages__item {
    display: flex;
    flex-direction: column;
}

.gym-stages__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
}

.gym-stages__grades {
    font-size: 44px;
    line-height: 1;
    font-style: italic;
    color: #002367;
}

.gym-stages__grades small {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    margin-left: 4px;
}

.gym-stages__title {
    margin: 12px 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: #002367;
}

.gym-stages__text {
    font-size: 16px;
    line-height: 1.5;
    color: #496389;
}

/* ---- жизнь гимназии: новости + Вестник ---- */
.gym-life {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-top: 40px;
    text-align: left;
}

.gym-life__h {
    margin: 0 0 18px;
    font-size: 22px;
    color: #002367;
}

.gym-home-news {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.gym-home-news__link {
    display: flex;
    flex-direction: column;
    color: #002367;
    text-decoration: none;
}

.gym-home-news__img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 12px;
    transition: opacity .2s;
}

.gym-home-news__link:hover .gym-home-news__img {
    opacity: .85;
}

.gym-home-news__meta {
    font-size: 14px;
    color: #667BA4;
}

.gym-home-news__title {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.gym-home-news__link:hover .gym-home-news__title {
    text-decoration: underline;
}

.gym-home-issue {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 18px;
    padding: 18px;
    border-radius: 12px;
    background: #ECF2FF;
    color: #002367;
    text-decoration: none;
    transition: box-shadow .25s, background .25s;
}

.gym-home-issue:hover {
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 35, 103, .12);
}

.gym-home-issue__cover {
    grid-row: 1 / 4;
    width: 120px;
    height: auto;
    aspect-ratio: 210 / 297;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 35, 103, .2);
    background: #fff;
}

.gym-home-issue__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 13px;
    text-align: center;
}

.gym-home-issue__label {
    font-size: 14px;
    color: #667BA4;
}

.gym-home-issue__title {
    font-size: 20px;
    font-weight: 600;
}

.gym-home-issue__action {
    align-self: end;
    font-weight: 600;
}

.gym-home-more {
    margin-top: 18px;
    font-weight: 600;
}

.gym-home-more a {
    color: #002367;
}

/* ---- призыв «Поступление» ---- */
.gym-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 110px;
    padding: 50px 56px;
    border-radius: 16px;
    background: #002367;
    color: #fff;
    text-align: left;
}

.gym-cta__h {
    margin: 0 0 10px;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.1;
    color: #fff;
}

.gym-cta__text p {
    margin: 0;
    font-size: 18px;
    color: #cfdaf3;
}

.gym-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gym-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.gym-cta__btn:hover,
.gym-cta__btn:focus-visible {
    background: #fff;
    color: #002367;
}

.gym-cta__btn--main {
    background: #fff;
    color: #002367;
}

.gym-cta__btn--main:hover {
    background: #ECF2FF;
}

.gym-cta__btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

/* ---- планшет и телефон ---- */
@media (max-width: 991.98px) {
    .gym-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .gym-stats__item:nth-child(3) {
        border-left: 0;
    }

    .gym-stats__item:nth-child(n+3) {
        border-top: 1px solid rgba(0, 35, 103, .15);
    }

    .gym-why {
        grid-template-columns: repeat(2, 1fr);
    }

    .gym-stages {
        gap: 16px;
    }

    .gym-life {
        grid-template-columns: 1fr;
    }

    .gym-cta {
        padding: 40px 32px;
    }
}

@media (max-width: 767.98px) {
    .gym-stages {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .gym-why,
    .gym-stages {
        grid-template-columns: 1fr;
    }

    .gym-stats__item {
        padding: 24px 14px;
    }

    .gym-cta {
        margin-bottom: 60px;
        padding: 32px 22px;
    }

    .gym-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Размеры шрифтов (29.09.2026: «повсеместно немного уменьшить») ----
 * Заголовки секций главной и «О гимназии» в демо Educon — 72+ px курсивом; делаем
 * спокойнее. Заголовок страниц (баннер) — 106 → 84 px на компьютере. */
.sppb-section[class*="gym-sec-"] .sppb-addon-title,
.gym-sec-about .sppb-addon-title {
    font-size: clamp(34px, 4.2vw, 56px) !important;
    line-height: 1.1 !important;
}

.gym-sec-about .sppb-addon-text-block,
.gym-sec-about .sppb-addon-text-block p {
    font-size: 18px !important;
    line-height: 1.55 !important;
    font-style: normal !important;
}


/* Ссылки-кнопки под текстом («Слово директора →») — сразу видно, что это переход */
.gym-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px !important;
}

.gym-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid rgba(0, 35, 103, .3);
    border-radius: 999px;
    color: #002367 !important;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .2s, color .2s, border-color .2s;
}

.gym-pill:hover,
.gym-pill:focus-visible {
    background: #002367;
    border-color: #002367;
    color: #fff !important;
}

/* ---- «Расписание звонков» (тип bells в import-pages.php): факты с иконками, строка
   «сейчас идёт N-й урок» (js/custom.js), два расписания карточками ---- */
.gym-bells svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gym-bells__year {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #496389;
}

.gym-bells__year-icon {
    width: 20px;
    height: 20px;
    color: #002367;
}

.gym-bells__facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gym-bells__fact {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 12px;
    background: #ECF2FF;
}

.gym-bells__icon {
    grid-row: 1 / 3;
    width: 46px;
    height: 46px;
    padding: 10px;
    border-radius: 50%;
    background: #fff;
    color: #002367;
}

.gym-bells__fact b {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #002367;
    font-variant-numeric: tabular-nums;
}

.gym-bells__fact span {
    font-size: 14px;
    line-height: 1.3;
    color: #496389;
}

.gym-bells__now {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 12px 18px;
    border-radius: 999px;
    background: #002367;
    color: #fff;
    font-weight: 500;
}

.gym-bells__now[hidden] {
    display: none;
}

.gym-bells__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
    animation: gym-bells-pulse 2s infinite;
}

.gym-bells__now--off .gym-bells__dot {
    background: #9FB3D9;
    animation: none;
}

@keyframes gym-bells-pulse {
    70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.gym-bells__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.gym-bells__card {
    padding: 26px 28px 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 35, 103, .08);
}

.gym-bells__card header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gym-bells__card-icon {
    flex: none;
    width: 48px;
    height: 48px;
    padding: 11px;
    border-radius: 12px;
    background: #002367;
    color: #fff;
}

.gym-bells__card--alt .gym-bells__card-icon {
    background: #ECF2FF;
    color: #002367;
}

.gym-bells__kicker {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #496389;
}

.gym-bells__card h2 {
    margin: 2px 0 0;
    font-size: 22px;
    line-height: 1.2;
    color: #002367;
}

.gym-bells__note {
    margin: 12px 0 14px;
    font-size: 15px;
    color: #496389;
}

.gym-bells__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gym-bells__lesson {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    transition: background-color .3s, color .3s;
}

.gym-bells__lesson:nth-child(4n+1) {
    background: #F6F8FD;
}

.gym-bells__n {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #002367;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.gym-bells__card--alt .gym-bells__n {
    background: #ECF2FF;
    color: #002367;
}

.gym-bells__name {
    color: #496389;
}

.gym-bells__lesson time {
    font-size: 18px;
    font-weight: 600;
    color: #002367;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gym-bells__lesson time span {
    margin: 0 6px;
    color: #9FB3D9;
}

/* текущий урок (js/custom.js) */
.gym-bells__lesson.is-now {
    background: #002367;
}

.gym-bells__lesson.is-now .gym-bells__name,
.gym-bells__lesson.is-now time,
.gym-bells__lesson.is-now time span {
    color: #fff;
}

.gym-bells__lesson.is-now .gym-bells__n {
    background: #4ADE80;
    color: #002367;
}

.gym-bells__break {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 2px 26px;
    padding: 2px 0 2px 20px;
    border-left: 2px dotted #C9D6EE;
    font-size: 13px;
    color: #7A8FB3;
}

.gym-bells__break--long {
    font-weight: 600;
    color: #496389;
}

.gym-bells__break--big {
    margin: 6px 0;
    padding: 8px 14px;
    border-left: 0;
    border-radius: 10px;
    background: #FFF4E5;
    color: #B45309;
}

.gym-bells__break-icon {
    width: 20px;
    height: 20px;
}

@media (max-width: 991.98px) {
    .gym-bells__facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .gym-bells__cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .gym-bells__facts {
        gap: 10px;
    }

    .gym-bells__fact {
        grid-template-columns: 1fr;
        padding: 14px;
        row-gap: 4px;
    }

    .gym-bells__icon {
        grid-row: auto;
        width: 38px;
        height: 38px;
        padding: 8px;
    }

    .gym-bells__fact b {
        font-size: 20px;
    }

    .gym-bells__card {
        padding: 20px 16px 14px;
    }

    .gym-bells__lesson time {
        font-size: 16px;
    }

    .gym-bells__now {
        border-radius: 14px;
    }
}

/* ---- «Школьный календарь» (типы calendar и holidays в import-pages.php): шкала года,
   каникулы и четверти карточками, праздники учебного года. Строка «до каникул» —
   .gym-bells__now, год — .gym-bells__year (как на «Расписании уроков») ---- */
.gym-cal svg,
.gym-hols svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gym-cal__line {
    margin-top: 22px;
    padding: 64px 24px 16px;   /* сверху — место для флажка «Сегодня» */
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 35, 103, .08);
}

.gym-cal__track {
    position: relative;
    height: 40px;
    border-radius: 10px;
    background: #F6F8FD;
}

.gym-cal__seg {
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
}

.gym-cal__seg--term {
    overflow: hidden;
    border-radius: 8px;
    justify-items: start;   /* название у начала четверти: в 3-й середину занимают каникулы 1 класса */
    padding-left: 12px;
    background: #E3EAF7;    /* впереди — светлая; пройденное закрашивает .gym-cal__fill */
    color: #002367;
}

/* вариант A (09.10.2026): пройденная часть четверти, название, текущая обведена */
.gym-cal__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: #002367;
}

.gym-cal__name {
    position: relative;
    z-index: 3;   /* над чертой «сегодня» */
    white-space: nowrap;
    font-size: 14px;
}

.gym-cal__short {
    display: none;
}

.gym-cal__seg--term.is-past,
.gym-cal__seg--term.is-filled {   /* подпись белая, когда её накрыла закраска (js) */
    color: #fff;
}

.gym-cal__seg--term.is-now {
    overflow: visible;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #F59E0B;
}

.gym-cal__seg--term.is-now .gym-cal__fill {
    border-radius: 8px 0 0 8px;
}

.gym-cal__seg--break.is-past {
    opacity: .45;
}

.gym-cal__seg--break.is-now {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #002367;
}

.gym-cal__status {
    margin: 4px 0 0;
    font-weight: 600;
    color: #002367;
}

.gym-cal__status[hidden] {
    display: none;
}

.gym-cal__seg--break {
    top: -4px;
    bottom: -4px;
    border-radius: 6px;
    background: #F59E0B;
}

.gym-cal__seg--extra {
    top: 6px;
    bottom: 6px;
    background: repeating-linear-gradient(135deg, #FCD34D 0 4px, #FFF4E5 4px 8px);
}

.gym-cal__today {
    position: absolute;
    z-index: 2;
    top: -14px;
    bottom: -10px;
    width: 3px;
    margin-left: -1px;
    border-radius: 2px;
    background: #F59E0B;
    box-shadow: 0 0 0 2px #fff;
}

/* флажок «Сегодня, 9 октября» над шкалой; у краёв шкалы сдвигается внутрь */
.gym-cal__pin {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #F59E0B;
    color: #1B1300;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, .35);
}

.gym-cal__today--left .gym-cal__pin {
    transform: translateX(-14px);
}

.gym-cal__today--right .gym-cal__pin {
    transform: translateX(calc(-100% + 14px));
}

.gym-cal__today[hidden] {
    display: none;
}

.gym-cal__months {
    position: relative;
    height: 22px;
    margin-top: 8px;
    font-size: 13px;
    color: #7A8FB3;
}

.gym-cal__months span {
    position: absolute;
    top: 0;
    padding-left: 4px;
    border-left: 1px solid #C9D6EE;
}

.gym-cal__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 10px 0 0;
    font-size: 14px;
    color: #496389;
}

.gym-cal__key {
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-left: 8px;
    border-radius: 4px;
}

.gym-cal__key:first-child {
    margin-left: 0;
}

.gym-cal__key--term { background: #002367; }
.gym-cal__key--break { background: #F59E0B; }
.gym-cal__key--extra { background: repeating-linear-gradient(135deg, #FCD34D 0 4px, #FFF4E5 4px 8px); }

.gym-cal .gym-block__title,
.gym-hols .gym-block__title {
    margin-top: 34px;
}

.gym-cal__breaks {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gym-cal__break {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border-radius: 12px;
    background: #FFF4E5;
    color: #7C2D12;
}

.gym-cal__break--extra {
    background: #FFFBEB;
    outline: 2px dashed #FCD34D;
    outline-offset: -2px;
}

.gym-cal__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
    padding: 9px;
    border-radius: 50%;
    background: #fff;
    color: #B45309;
}

.gym-cal__break b {
    font-size: 18px;
    color: #002367;
}

.gym-cal__dates {
    font-weight: 600;
    color: #B45309;
}

.gym-cal__break small {
    color: #496389;
}

.gym-cal__terms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gym-cal__terms li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 12px;
    background: #ECF2FF;
}

.gym-cal__n {
    grid-row: 1 / 4;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #002367;
    color: #fff;
    font-weight: 700;
}

.gym-cal__terms b {
    color: #002367;
}

.gym-cal__terms span:not(.gym-cal__n) {
    font-weight: 600;
    color: #002367;
}

.gym-cal__terms small,
.gym-cal__source {
    color: #496389;
}

.gym-cal__source {
    margin: 18px 0 0;
    font-size: 14px;
}

/* праздники */
.gym-hols {
    scroll-margin-top: 110px;
}

.gym-hols__lead {
    max-width: 900px;
    color: #496389;
}

.gym-hols__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.gym-hol {
    display: grid;
    grid-template-columns: 74px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 35, 103, .07);
}

.gym-hol__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 10px;
    background: #002367;
    color: #fff;
    line-height: 1.1;
}

.gym-hol__date b {
    font-size: 20px;
}

.gym-hol__date span {
    font-size: 12px;
    opacity: .85;
    white-space: nowrap;
}

.gym-hol__name {
    display: block;
    color: #002367;
    line-height: 1.25;
}

.gym-hol__kind,
.gym-hol small {
    display: block;
    font-size: 13px;
    color: #7A8FB3;
}

.gym-hol small {
    color: #496389;
}

.gym-hol__tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: #ECF2FF;
    color: #002367;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.gym-hol--break .gym-hol__date {
    background: #F59E0B;
}

.gym-hol--break .gym-hol__tag {
    background: #FFF4E5;
    color: #B45309;
}

@media (max-width: 1199.98px) {
    .gym-cal__breaks {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .gym-cal__terms,
    .gym-hols__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .gym-hols__list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .gym-cal__line {
        padding: 56px 12px 12px;   /* сверху — место для флажка «Сегодня» */
    }

    .gym-cal__months span:nth-child(even) {
        visibility: hidden;
    }

    .gym-cal__seg--term {
        padding-left: 8px;
    }

    .gym-cal__full {
        display: none;
    }

    .gym-cal__short {
        display: inline;
    }

    .gym-cal__breaks,
    .gym-cal__terms {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .gym-cal__terms {
        grid-template-columns: 1fr;
    }

    .gym-hol {
        grid-template-columns: 64px 1fr;
    }

    .gym-hol__tag {
        grid-column: 2;
        justify-self: start;
    }
}

/* ---- «Расписание уроков»: верх страницы с рисунком часов (стрелки — js/custom.js) ---- */
.gym-bells__hero {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 340px);
    align-items: center;
    gap: 24px;
    margin-bottom: 22px;
    padding: 26px 34px;
    border-radius: 16px;
    background: linear-gradient(120deg, #ECF2FF 0%, #F6F8FD 60%, #FFF4E5 100%);
}

.gym-bells__hero h2 {
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.15;
    color: #002367;
}

.gym-bells__hero p:last-child {
    max-width: 520px;
    margin: 0;
    color: #496389;
}

.gym-bells__hero .gym-bells__year {
    margin-bottom: 10px;
}

.gym-bells__art {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* общий .gym-bells svg задаёт контур иконкам — рисунку он не нужен */
.gym-bells svg.gym-bells__art,
.gym-cal svg.gym-bells__art {
    stroke: none;
}

.gym-bells__art-bg {
    fill: #fff;
    opacity: .7;
}

.gym-bells__hand {
    transition: transform .5s cubic-bezier(.3, 1.5, .5, 1);
}

.gym-bells__hand[data-hand="s"] {
    transition: transform .2s cubic-bezier(.3, 1.8, .5, 1);
}

.gym-bells__bell {
    transform-box: view-box;
    transform-origin: 34px 60px;   /* ушко колокольчика */
}

.gym-bells__books {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform .3s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .gym-bells__bell {
        animation: gym-bell-swing 3.2s ease-in-out infinite alternate;
    }

    .gym-bells__waves {
        animation: gym-bell-waves 1.6s ease-in-out infinite alternate;
    }

    .gym-bells__hero:hover .gym-bells__books {
        transform: rotate(-3deg) translateY(-3px);
    }
}

/* колокольчик плавно покачивается, «звук» рядом мерцает */
@keyframes gym-bell-swing {
    from { transform: rotate(-7deg); }
    to { transform: rotate(7deg); }
}

@keyframes gym-bell-waves {
    from { opacity: .25; }
    to { opacity: 1; }
}

@media (max-width: 767.98px) {
    .gym-bells__hero {
        grid-template-columns: 1fr;
        padding: 22px 20px;
    }

    .gym-bells__hero h2 {
        font-size: 26px;
    }

    .gym-bells__art {
        max-width: 280px;
        justify-self: center;
    }
}

/* ---- Наведение на карточки (весь сайт): карточка чуть приподнимается, тень глубже, иконка
   оживает. Сдвиг — свойством translate, а не transform: transform занят появлением блоков
   (.gym-reveal); переходы появления (с задержкой --i) перечислены здесь же, чтобы не потерялись.
   При «уменьшить движение» карточки не двигаются — меняется только тень. ---- */
.gym-bells__fact,
.gym-bells__card,
.gym-cal__break,
.gym-cal__terms > li,
.gym-hol,
.gym-values__item,
.gym-steps__item,
.gym-home-cards > li,
.gym-home-extra > li,
.gym-file,
.gym-rooms__plain > li {
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1),
        translate .25s ease, box-shadow .25s ease, background-color .25s ease;
    transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s, 0s, 0s;
}

.gym-bells__fact:hover,
.gym-cal__break:hover,
.gym-cal__terms > li:hover,
.gym-values__item:hover,
.gym-steps__item:hover,
.gym-rooms__plain > li:hover {
    box-shadow: 0 12px 26px rgba(0, 35, 103, .12);
}

.gym-bells__card:hover,
.gym-hol:hover,
.gym-home-cards > li:hover,
.gym-home-extra > li:hover,
.gym-file:hover {
    box-shadow: 0 16px 36px rgba(0, 35, 103, .14);
}

@media (prefers-reduced-motion: no-preference) {
    .gym-bells__fact:hover,
    .gym-bells__card:hover,
    .gym-cal__break:hover,
    .gym-cal__terms > li:hover,
    .gym-hol:hover,
    .gym-values__item:hover,
    .gym-steps__item:hover,
    .gym-home-cards > li:hover,
    .gym-home-extra > li:hover,
    .gym-file:hover,
    .gym-rooms__plain > li:hover {
        translate: 0 -4px;
    }

    /* иконки: лёгкий поворот и увеличение */
    .gym-bells__icon,
    .gym-bells__card-icon,
    .gym-cal__icon,
    .gym-cal__n,
    .gym-values__icon,
    .gym-home-icon,
    .gym-hol__date {
        transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
    }

    .gym-bells__fact:hover .gym-bells__icon,
    .gym-bells__card:hover .gym-bells__card-icon,
    .gym-cal__break:hover .gym-cal__icon,
    .gym-values__item:hover .gym-values__icon,
    .gym-home-extra > li:hover .gym-home-icon {
        transform: rotate(-10deg) scale(1.1);
    }

    .gym-cal__terms > li:hover .gym-cal__n,
    .gym-hol:hover .gym-hol__date {
        transform: scale(1.08);
    }

    /* фото карточек главной слегка приближается */
    .gym-home-cards > li {
        overflow: hidden;
    }

    .gym-home-card__img {
        transition: transform .5s ease;
    }

    .gym-home-cards > li:hover .gym-home-card__img {
        transform: scale(1.05);
    }
}

/* строки расписания: подсветка урока под курсором */
.gym-bells__lesson:hover:not(.is-now) {
    background: #ECF2FF;
}

/* шкала календаря: отрезок под курсором выделяется */
.gym-cal__seg {
    transition: filter .2s ease, box-shadow .2s ease;
}

.gym-cal__seg:hover {
    z-index: 1;
    filter: brightness(1.15);
    box-shadow: 0 6px 14px rgba(0, 35, 103, .25);
}

/* ---- «Школьный календарь»: рисунок вверху — листок с датой и значки времён года ---- */
.gym-cal__sheet-month {
    fill: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .08em;
}

.gym-cal__sheet-day {
    fill: #002367;
    font-size: 62px;
    font-weight: 700;
}

.gym-cal__sheet-wd {
    fill: #496389;
    font-size: 14px;
    font-weight: 500;
    stroke: none;
}

.gym-cal__season {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.gym-cal__sheet {
    transform-box: fill-box;
    transform-origin: 50% 0;
    transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}

@media (prefers-reduced-motion: no-preference) {
    .gym-cal__season--leaf {
        animation: gym-cal-leaf 4s ease-in-out infinite alternate;
    }

    .gym-cal__season--snow {
        animation: gym-cal-spin 14s linear infinite;
    }

    .gym-cal__season--sprout {
        transform-origin: 50% 100%;
        animation: gym-cal-sprout 3.5s ease-in-out infinite alternate;
    }

    .gym-cal__season--sun {
        animation: gym-cal-spin 22s linear infinite;
    }

    .gym-bells__hero:hover .gym-cal__sheet {
        transform: rotate(-3deg);
    }
}

@keyframes gym-cal-leaf {
    from { transform: translateY(-3px) rotate(-8deg); }
    to { transform: translateY(4px) rotate(6deg); }
}

@keyframes gym-cal-spin {
    to { transform: rotate(360deg); }
}

@keyframes gym-cal-sprout {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}

/* римские цифры четвертей — чуть уже, чтобы «III» помещалось в кружок */
.gym-cal__n {
    font-family: 'Brygada 1918', Georgia, serif;
    font-size: 15px;
    letter-spacing: -.02em;
}

.gym-cal__seg--term {
    font-family: 'Brygada 1918', Georgia, serif;
}

/* ---- «Миссия и ценности» (типы mission, flips, wheel в import-pages.php) ---- */
.gym-mission svg,
.gym-flips svg,
.gym-wheel svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* миссия на фото */
.gym-mission {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 400px;
    overflow: hidden;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
    color: #fff;
}

.gym-mission::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 35, 103, .12) 0%, rgba(0, 35, 103, .9) 66%);
}

.gym-mission__in {
    position: relative;
    max-width: 920px;
    padding: 42px 46px;
}

.gym-mission__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #BFD0F5;
}

.gym-mission__text {
    isolation: isolate;
    margin: 8px 0 24px;
    font-family: 'Brygada 1918', serif;
    font-size: 40px;
    line-height: 1.2;
    color: #fff;
}

.gym-mission__word {
    position: relative;
    white-space: nowrap;
}

.gym-mission__word::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    z-index: -1;
    height: 10px;
    background: #F59E0B;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.gym-mission__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gym-mission__points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(4px);
    font-weight: 500;
    cursor: default;
    transition: background .25s, translate .25s;
}

.gym-mission__points span:hover {
    background: rgba(255, 255, 255, .28);
}

.gym-mission__icon {
    width: 22px;
    height: 22px;
}

/* слова миссии подсвечиваются по очереди */
@media (prefers-reduced-motion: no-preference) {
    .gym-mission__word {
        animation: gym-mission-word 6s infinite;
    }

    .gym-mission__word::after {
        animation: gym-mission-line 6s infinite;
        animation-delay: inherit;
    }

    .gym-mission__word:nth-of-type(2) {
        animation-delay: 2s;
    }

    .gym-mission__word:nth-of-type(3) {
        animation-delay: 4s;
    }

    .gym-mission__points span:hover {
        translate: 0 -2px;
    }
}

@keyframes gym-mission-word {
    0%, 33%, 100% { color: #fff; }
    5%, 28% { color: #FFE2A8; }
}

@keyframes gym-mission-line {
    0%, 33%, 100% { opacity: 0; transform: scaleX(0); }
    6%, 27% { opacity: .55; transform: scaleX(1); }
}

/* цели: карточки-перевёртыши */
.gym-flips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gym-flip {
    height: 290px;
    perspective: 1200px;
    cursor: pointer;
    outline: none;
}

.gym-flip__in {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.3, 1.2, .5, 1);
}

.gym-flip:hover .gym-flip__in,
.gym-flip:focus-visible .gym-flip__in,
.gym-flip.is-open .gym-flip__in {
    transform: rotateY(180deg);
}

.gym-flip__front,
.gym-flip__back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    border-radius: 16px;
    backface-visibility: hidden;
}

.gym-flip__front {
    background: #ECF2FF;
}

.gym-flip__back {
    overflow: auto;
    background: #002367;
    color: #E3EBFF;
    font-size: 14px;
    transform: rotateY(180deg);
}

.gym-flip__back b {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: #fff;
}

.gym-flip__num {
    font-family: 'Brygada 1918', serif;
    font-size: 44px;
    line-height: 1;
    color: #9FB3D9;
}

.gym-flip__icon {
    width: 40px;
    height: 40px;
    margin: 14px 0 10px;
    color: #002367;
}

.gym-flip__title {
    margin-bottom: 6px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: #002367;
}

.gym-flip__text {
    font-size: 15px;
    color: #496389;
}

.gym-flip__text strong {
    color: #002367;
}

.gym-flip__turn {
    display: grid;
    place-items: center;
    align-self: flex-end;
    width: 32px;
    height: 32px;
    margin-top: auto;
    border-radius: 50%;
    background: #fff;
    color: #002367;
    font-size: 17px;
    transition: transform .4s;
}

.gym-flip:hover .gym-flip__turn {
    transform: rotate(180deg);
}

/* ценности: колесо и карточка выбранной */
.gym-wheel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.gym-wheel__ring {
    position: relative;
    width: min(100%, 520px);
    margin: 0 auto;
    aspect-ratio: 1;
}

.gym-wheel__ring::before {
    content: "";
    position: absolute;
    inset: 14%;
    border: 2px dashed #C9D6EE;
    border-radius: 50%;
}

.gym-wheel__center {
    position: absolute;
    inset: 31%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #002367;
    box-shadow: 0 18px 40px rgba(0, 35, 103, .25);
    font-family: 'Brygada 1918', serif;
    font-size: clamp(16px, 2.4vw, 24px);
    color: #fff;
    text-align: center;
}

.gym-wheel__center::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(245, 158, 11, .5);
    border-radius: 50%;
    opacity: 0;
}

.gym-wheel__item {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 116px;
    margin: -48px 0 0 -58px;
    padding: 0;
    border: 0;
    background: none;
    font: 600 13px/1.25 Onest, sans-serif;
    color: #002367;
    text-align: center;
    cursor: pointer;
    transform: rotate(var(--a)) translateY(-205%) rotate(calc(-1 * var(--a)));
}

.gym-wheel__item i {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 35, 103, .12);
    transition: background .25s, color .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}

.gym-wheel__icon {
    width: 28px;
    height: 28px;
}

.gym-wheel__item.is-on i,
.gym-wheel__item:hover i {
    background: #F59E0B;
    color: #fff;
    transform: scale(1.15);
}

.gym-wheel__card {
    min-height: 230px;
    padding: 34px 36px;
    border-radius: 18px;
    background: #ECF2FF;
}

.gym-wheel__card .gym-wheel__badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #F59E0B;
    color: #fff;
}

.gym-wheel__badge svg {
    width: 34px;
    height: 34px;
}

.gym-wheel__card h3 {
    margin: 18px 0 8px;
    font-size: 32px;
    line-height: 1.15;
    color: #002367;
}

.gym-wheel__card p {
    margin: 0;
    font-size: 18px;
    color: #496389;
}

.gym-wheel__dots {
    display: flex;
    gap: 6px;
    margin-top: 22px;
}

.gym-wheel__dots i {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #C9D6EE;
    transition: width .3s, background .3s;
}

.gym-wheel__dots i.is-on {
    width: 24px;
    background: #002367;
}

@media (prefers-reduced-motion: no-preference) {
    .gym-wheel__ring::before {
        animation: gym-wheel-spin 60s linear infinite;
    }

    .gym-wheel__center::after {
        animation: gym-wheel-pulse 2.6s ease-out infinite;
    }

    .gym-wheel__body.is-new {
        animation: gym-wheel-swap .45s ease;
    }
}

@keyframes gym-wheel-spin {
    to { transform: rotate(360deg); }
}

@keyframes gym-wheel-pulse {
    from { transform: scale(.92); opacity: 1; }
    to { transform: scale(1.18); opacity: 0; }
}

@keyframes gym-wheel-swap {
    from { opacity: 0; transform: translateY(8px); }
}

@media (max-width: 991.98px) {
    .gym-flips {
        grid-template-columns: repeat(2, 1fr);
    }

    .gym-wheel {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 575.98px) {
    .gym-mission__in {
        padding: 26px 22px;
    }

    .gym-mission__text {
        font-size: 26px;
    }

    .gym-flips {
        grid-template-columns: 1fr;
    }

    .gym-wheel__item {
        width: 84px;
        margin: -40px 0 0 -42px;
        font-size: 11px;
    }

    .gym-wheel__item i {
        width: 44px;
        height: 44px;
    }

    .gym-wheel__card {
        padding: 24px;
    }

    .gym-wheel__card h3 {
        font-size: 26px;
    }
}

/* ---- Пошаговая инструкция «Сотрудникам» (тип guide в import-pages.php): крупно и просто,
   чтобы читалось с телефона после QR-кода ---- */
.gym-guide {
    max-width: 860px;
    font-size: 18px;
}

.gym-guide svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gym-guide__note,
.gym-guide__warn,
.gym-guide__done {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 22px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #ECF2FF;
    color: #002367;
}

.gym-guide__note-icon,
.gym-guide__warn-icon,
.gym-guide__done-icon {
    width: 26px;
    height: 26px;
}

.gym-guide__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gym-guide__step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding-bottom: 30px;
}

/* линия между номерами шагов */
.gym-guide__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 60px;
    bottom: 8px;
    width: 2px;
    background: #C9D6EE;
}

.gym-guide__n {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #002367;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}

.gym-guide__body {
    padding: 4px 0 0;
}

.gym-guide__body h2 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.25;
    color: #002367;
}

.gym-guide__body p {
    margin: 0 0 12px;
}

.gym-guide__list {
    margin: 0;
    padding-left: 22px;
}

.gym-guide__list li {
    margin-bottom: 8px;
}

/* сеть и пароль: крупно, с кнопкой «Скопировать» */
.gym-guide__copy {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 2px solid #C9D6EE;
    border-radius: 14px;
    background: #fff;
}

.gym-guide__copy span {
    font-size: 15px;
    color: #496389;
}

.gym-guide__copy code {
    overflow-wrap: anywhere;
    font-family: Onest, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #002367;
    user-select: all;
}

.gym-guide__copy button,
.gym-guide__tab-btns button {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #002367;
    color: #fff;
    font: 600 15px Onest, sans-serif;
    cursor: pointer;
    transition: background .2s;
}

.gym-guide__copy button.is-done {
    background: #16A34A;
}

/* вкладки устройств */
.gym-guide__tab-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.gym-guide__tab-btns button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: #ECF2FF;
    color: #002367;
}

.gym-guide__tab-btns button.is-on {
    background: #002367;
    color: #fff;
}

.gym-guide__tab-icon {
    width: 20px;
    height: 20px;
}

/* путь по меню — шаги-стрелки */
.gym-guide__path {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: path;
}

.gym-guide__path[hidden] {
    display: none;
}

.gym-guide__path li {
    position: relative;
    margin-bottom: 8px;
    padding: 10px 14px 10px 50px;
    border-radius: 12px;
    background: #F6F8FD;
    counter-increment: path;
}

.gym-guide__path li::before {
    content: counter(path);
    position: absolute;
    left: 12px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    background: #fff;
    color: #002367;
    font-size: 14px;
    font-weight: 700;
}

.gym-guide__path li:last-child {
    background: #FFF4E5;
}

.gym-guide__warn {
    background: #FFF4E5;
    color: #7C2D12;
}

.gym-guide__done {
    margin-left: 74px;
    background: #DCFCE7;
    color: #14532D;
}

.gym-guide__rule {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 26px;
    padding: 22px 24px;
    border-radius: 16px;
    background: #002367;
    color: #E3EBFF;
}

.gym-guide__rule b {
    display: block;
    margin-bottom: 4px;
    font-size: 20px;
    color: #fff;
}

.gym-guide__rule p {
    margin: 0;
}

.gym-guide__rule-icon {
    width: 34px;
    height: 34px;
    color: #F59E0B;
}

@media (max-width: 575.98px) {
    .gym-guide {
        font-size: 17px;
    }

    .gym-guide__step {
        grid-template-columns: 42px 1fr;
        gap: 12px;
    }

    .gym-guide__n {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .gym-guide__step:not(:last-child)::before {
        left: 20px;
        top: 46px;
    }

    .gym-guide__body h2 {
        font-size: 22px;
    }

    .gym-guide__copy {
        grid-template-columns: 1fr auto;
    }

    .gym-guide__copy span {
        grid-column: 1 / -1;
    }

    .gym-guide__copy code {
        font-size: 21px;
    }

    .gym-guide__done {
        margin-left: 0;
    }
}

/* ---- «Правила приёма» (тип path в import-pages.php): выбор класса и путь из 4 шагов ---- */
.gym-path svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gym-path__lead {
    margin: 0 0 20px;
    font-size: 19px;
    color: #496389;
}

.gym-path__pick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}

.gym-path__pick button {
    padding: 18px 10px;
    border: 2px solid #C9D6EE;
    border-radius: 16px;
    background: #fff;
    font: 600 16px Onest, sans-serif;
    color: #002367;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, translate .2s;
}

.gym-path__pick button b {
    display: block;
    font-family: 'Brygada 1918', serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.1;
}

.gym-path__pick button:hover {
    border-color: #002367;
}

.gym-path__pick button.is-on {
    border-color: #002367;
    background: #002367;
    color: #fff;
}

.gym-path__road {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gym-path__road[hidden] {
    display: none;
}

.gym-path__road > li {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    padding-bottom: 26px;
}

.gym-path__road > li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 29px;
    top: 62px;
    bottom: 6px;
    width: 2px;
    background: #C9D6EE;
}

.gym-path__n {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #002367;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.gym-path__n.is-ok {
    background: #16A34A;
}

.gym-path__road h3 {
    margin: 6px 0 6px;
    font-size: 26px;
    color: #002367;
}

.gym-path__road p {
    margin: 0 0 8px;
    font-size: 17px;
}

.gym-path__road a[href^="tel:"] {
    font-weight: 600;
    color: #002367;
}

.gym-path__ok {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #DCFCE7;
    font: 600 13px Onest, sans-serif;
    color: #14532D;
    vertical-align: middle;
}

.gym-path__when {
    display: inline-block;
    margin-top: 2px;
    padding: 4px 12px;
    border-radius: 8px;
    background: #F6F8FD;
    font-size: 15px;
}

.gym-path__need {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.gym-path__need li {
    display: flex;
    gap: 10px;
    padding: 6px 0;
}

.gym-path__need li::before {
    content: "✓";
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #e6f4ec;
    font-size: 13px;
    font-weight: 700;
    color: #1d7a4c;
}

.gym-path__need li.is-extra {
    color: #002367;
}

.gym-path__special {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 4px;
}

.gym-path__special a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #FFF4E5;
    font-size: 14px;
    font-weight: 600;
    color: #92400E;
    text-decoration: none;
    transition: background .2s;
}

.gym-path__special a:hover {
    background: #FDE7C3;
    color: #92400E;
}

.gym-path__special-icon,
.gym-path__way-icon {
    width: 20px;
    height: 20px;
}

.gym-path__ways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.gym-path__ways div {
    padding: 14px 16px;
    border-radius: 12px;
    background: #ECF2FF;
}

.gym-path__ways b {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #002367;
}

.gym-path__note {
    margin-top: 8px;
    font-size: 15px;
    color: #496389;
}

/* пункт «Документов», к которому перешли по ссылке из пути, — коротко подсвечивается */
.gym-faq__item.is-flash summary {
    background: #FFF4E5;
}

.gym-faq__item summary {
    transition: background 1.2s;
}

@media (prefers-reduced-motion: no-preference) {
    .gym-path__pick button:hover {
        translate: 0 -2px;
    }

    .gym-path__road.is-new > li {
        animation: gym-path-in .4s ease both;
    }

    .gym-path__road.is-new > li:nth-child(2) { animation-delay: .06s; }
    .gym-path__road.is-new > li:nth-child(3) { animation-delay: .12s; }
    .gym-path__road.is-new > li:nth-child(4) { animation-delay: .18s; }
}

@keyframes gym-path-in {
    from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 767.98px) {
    .gym-path__pick {
        grid-template-columns: repeat(2, 1fr);
    }

    .gym-path__ways {
        grid-template-columns: 1fr;
    }

    .gym-path__road > li {
        grid-template-columns: 46px 1fr;
        gap: 14px;
    }

    .gym-path__n {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    .gym-path__road > li:not(:last-child)::before {
        left: 22px;
        top: 48px;
    }

    .gym-path__road h3 {
        font-size: 22px;
    }
}

/* логотип Halyk в тексте «Оплаты» (подстановка {halyk} в import-pages.php) — как у садиков */
img.gym-halyk { display: inline-block; width: auto !important; height: 1.35em !important; margin: 0 .1em !important; vertical-align: -.35em; border-radius: 0 !important; box-shadow: none !important; }

/* номер телефона не переносим посередине (подвал: колонка контактов стала уже, 10.10.2026) */
a[href^="tel:"] {
    white-space: nowrap;
}