@layer components {
    .btn {
        padding: .8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        border-radius: 0.375rem;
        height: max-content;
        text-decoration: none;
        cursor: pointer;

        span, a {
            color: inherit;
        }
    }

    .btn-brand-light {
        background: var(--blue-8);
        color: var(--color-brand);
    }

    .btn-brand-transparent {
        background: #FFFFFF29;
        color: var(--color-brand);
    }

    .btn-brand-light:hover {
        background: var(--blue-16);
    }

    .btn-brand {
        background: var(--color-brand);
        color: var(--white);
    }

    .btn-brand:hover {
        background: var(--color-brand-hover);
        color: var(--white);
    }

    .btn-outline {
        background: var(--white);
        color: var(--color-brand);
        border: 1px solid var(--color-brand);
    }

    .btn-outline:hover {
        background: var(--blue-8);
    }

    .btn-icon {
        width: 3rem;
        height: 3rem;
        padding: 0;
        flex-shrink: 0;
    }

    .btn-accent {
        background: var(--color-accent);
        color: var(--white);
        font-weight: var(--weight-medium);
    }

    .btn-accent:hover {
        background: var(--color-accent-hover);
        color: var(--white);
    }

    /* Иконки рисуются маской, а не фоновой картинкой: цвет задаётся через
       --icon-color на самой иконке или на любом родителе. Файл иконки — в --icon-src.
       Фолбэк маски скрывает элемент, если класс иконки не задан. */
    .icon {
        display: block;
        width: var(--space-4);
        height: var(--space-4);
        flex-shrink: 0;
        background-color: var(--icon-color, var(--color-brand));
        -webkit-mask: var(--icon-src, linear-gradient(#0000, #0000)) center / contain no-repeat;
        mask: var(--icon-src, linear-gradient(#0000, #0000)) center / contain no-repeat;
    }

    .icon-sm {
        width: var(--space-3);
        height: var(--space-3);
    }

    .icon-md {
        width: 1.25rem;
        height: 1.25rem;
    }

    .pedestrian-icon {
        --icon-src: url("../images/pedestrian.svg");
        --icon-color: var(--middle-grey);
    }

    .icon-wrapper {
        padding: var(--space-3);
        background: var(--color-bg-alt);
        max-width: max-content;
        max-height: max-content;
        border-radius: var(--space-2);

        .icon {
            width: 2rem;
            height: 2rem;
        }
        
        @media (max-width: 48rem) {
            padding: var(--space-2);

            .icon {
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    }

    .user-icon {
        --icon-src: url("../images/user.svg");
        height: var(--space-4);
    }

    .max-icon {
        --icon-src: url("../images/max.svg");
    }

    .phone-icon {
        --icon-src: url("../images/phone.svg");
    }

    .mail-icon {
        --icon-src: url("../images/mail.svg");
    }

    .clock-icon {
        --icon-src: url("../images/clock.svg");
    }

    .help-icon {
        --icon-src: url("../images/help.svg");
    }

    .eye-icon {
        --icon-src: url("../images/eye.svg");
    }

    .beaker-icon {
        --icon-src: url("../images/beaker.svg");
    }

    .file-icon {
        --icon-src: url("../images/file.svg");
    }

    .pin-map-icon {
        --icon-src: url("../images/mapPin.svg");
    }

    .messages-icon {
        --icon-src: url("../images/messages.svg");
    }

    .schedule-icon {
        --icon-src: url("../images/schedule.svg");
    }

    .tabler-icon {
        --icon-src: url("../images/tabler.svg");
    }

    .arrow-icon {
        --icon-src: url("../images/arrow.svg");
    }

    .chevron-icon {
        --icon-src: url("../images/chevron.svg");
        --icon-color: var(--dark-grey);
    }

    .star-icon {
        --icon-src: url("../images/star.svg");
    }

    .globe-icon {
        --icon-src: url("../images/globe.svg");
        --icon-color: var(--green);
    }

    .pin-clinic-icon {
        --icon-src: url("../images/pin-clinic.svg");
        --icon-color: var(--purple);
    }

    .quote-icon {
        --icon-src: url("../images/quote.svg");
    }

    .close-icon {
        --icon-src: url("../images/close.svg");
        --icon-color: var(--dark-grey);

        /* На мобильном крестик поиска очищает поле, поэтому пустому полю не нужен. */
        @media (max-width: 64rem) {
            .site-search:not(.has-value) & {
                display: none;
            }
        }
    }

    .search-icon {
        --icon-src: url("../images/search.svg");
        --icon-color: var(--white);
    }

    .spinner-icon {
        --icon-src: url("../images/spinner.svg");
        --icon-color: var(--color-brand);
        animation: spinner-rotate .7s linear infinite;

        @media (prefers-reduced-motion: reduce) {
            animation-duration: 2s;
        }
    }

    @keyframes spinner-rotate {
        to {
            transform: rotate(1turn);
        }
    }

    .chevron-double-icon {
        --icon-src: url("../images/chevron-double.svg");
        --icon-color: var(--dark-grey);
    }

    .chevron-pagination-icon {
        --icon-src: url("../images/chevron-pagination.svg");
        --icon-color: var(--dark-grey);
    }

    .chevron-icon-next {
        transform: scaleX(-1);
    }

    .metro-icon {
        --icon-src: url("../images/metro.svg");
    }

    .external-link-icon {
        --icon-src: url("../images/external-link.svg");
    }

    .question-icon {
        --icon-src: url("../images/question.svg");
    }

    .user-second-icon {
        --icon-src: url("../images/user-second.svg");
    }

    .microscope-icon {
        --icon-src: url("../images/microscope.svg");
    }

    .file-check-icon {
        --icon-src: url("../images/file-check.svg");
    }

    .heart-icon {
        --icon-src: url("../images/heart.svg");
    }

    .shield-icon {
        --icon-src: url("../images/shield.svg");
    }

    .lock-icon {
        --icon-src: url("../images/lock.svg");
        --icon-color: var(--middle-grey);
    }

    .info-icon {
        --icon-src: url("../images/info.svg");
        --icon-color: var(--middle-grey);
    }

    .message-dots-icon {
        --icon-src: url("../images/message-dots.svg");
    }

    .stethoscope-icon {
        --icon-src: url("../images/stethoscope.svg");
    }

    .pencil-icon {
        --icon-src: url("../images/pencil.svg");
    }

    .book-icon {
        --icon-src: url("../images/book.svg");
    }

    .attachment-icon {
        --icon-src: url("../images/attachment.svg");
    }

    .download-icon {
        --icon-src: url("../images/download.svg");
    }

    .tg-icon {
        --icon-src: url("../images/tg-icon.svg");
    }

    .max-filled-icon {
        --icon-src: url("../images/max-filled-icon.svg");
    }

    .vk-icon {
        --icon-src: url("../images/vk-icon.svg");
    }

    .ok-icon {
        --icon-src: url("../images/ok-icon.svg");
    }

    /* Идёт после правил иконок, чтобы перебивать их собственные --icon-color */
    .icon-current {
        --icon-color: currentColor;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius);
        background: var(--light-grey);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        line-height: 1.4;
        white-space: nowrap;

        .icon {
            width: 1rem;
            height: 1rem;
        }

        @media (max-width: 35rem) {
            font-size: 11px;
            padding: var(--space-1);
        }
    }

    .tag-online {
        background: var(--green-8);
        color: var(--green);
    }

    .tag-clinic {
        background: var(--purple-8);
        color: var(--purple);
    }

    .tag-link {
        padding: var(--space-2) var(--space-3);
        background: var(--white);
        border-radius: var(--space-4);
        border: 1px solid var(--color-border);
        color: var(--color-brand);

        &.active {
            background: var(--color-brand);
            color: var(--white);
        }
    }



    /* ------------------------------------------------------------------ *
     * Карточка врача
     * ------------------------------------------------------------------ */

    .doctor-card {
        container: doctor-card / inline-size;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background: var(--white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        transition: box-shadow ease-in-out .2s;

        &:hover {
            box-shadow: var(--shadow-card);
        }
    }

    .doctor-card__photo {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

    .doctor-card__body {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        flex: 1 1 auto;
        padding: var(--space-3);
    }


    .doctor-card__spec {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .doctor-card__name {
        color: var(--color-brand);
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
        line-height: 1.3;
    }

    .doctor-card__meta,
    .doctor-card__formats {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
    }

    .doctor-card__meta {
        margin-top: auto;

        @media (max-width: 64rem) {
            gap: var(--space-1);
        }
    }

    @media (max-width: 48rem) {
        .doctor-card__body {
            padding: var(--space-2);
        }

        .doctor-card__name {
            font-size: var(--text-sm);
        }

        .doctor-card__spec, .doctor-card__rating {
            font-size: var(--text-xs);
        }
    }

    .doctor-card__rating {
        order: -1;
        flex-basis: 100%;
        display: flex;
        align-items: center;
        gap: var(--space-1);
        font-weight: var(--weight-medium);

        .icon {
            width: 1.125rem;
            height: 1.125rem;
        }
    }

    .doctor-card__cta-long {
        display: none;
    }

    @container doctor-card (min-width: 18rem) {
        .doctor-card__rating {
            order: 0;
            flex-basis: auto;
            margin-inline-start: auto;
        }

        .doctor-card__cta-long {
            display: inline;
        }
    }

    /* ------------------------------------------------------------------ *
     * Карточка направления
     * ------------------------------------------------------------------ */

    .medical-field-card {
        display: flex;
        gap: var(--space-3);
        height: 100%;
        padding: var(--space-4);
        background: var(--white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        transition: box-shadow ease-in-out .2s;
        text-decoration: none;
        position: relative;


        &:hover {
            box-shadow: var(--shadow-card);
            color: inherit;
            .no-decoration {
                text-decoration: none;
            }
        }
    }

    .medical-field-card__name {
        font-size: var(--text-xl);
        font-weight: var(--weight-semibold);
    }


    @media (max-width: 48rem) {
        .medical-field-card {
            gap: var(--space-2);
            padding: var(--space-3);
        }

        .medical-field-card__name {
            font-size: 1rem;
        }
        .medical-field-card__info {
            font-size: var(--text-sm);
        }
    }

    /* ------------------------------------------------------------------ *
     * Плитки направлений
     * ------------------------------------------------------------------ */

    .medical-fields-more {
        margin-top: var(--space-5);
    }

    .medical-field-tiles {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-3);
        margin-top: var(--space-3);

        @media (max-width: 64rem) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 48rem) {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-2);
        }
    }

    .medical-field-tile {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        transition: box-shadow ease-in-out .2s;
        text-decoration: none;

        &:hover {
            color: inherit;
            box-shadow: var(--shadow-card);
        }

        span {
            display: block;
            word-break: break-word;
        }
    }

    .medical-field-tile__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .medical-field-tile__name {
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);

        @media (max-width: 48rem) {
            font-size: 1rem;
        }
    }

    .medical-field-tile__more {
        margin-top: auto;
    }

    /* ------------------------------------------------------------------ *
     * Хлебные крошки.
     * ------------------------------------------------------------------ */

    .breadcrumbs {
        margin-block: var(--space-4);
        color: var(--color-text);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);

        @media (max-width: 48rem) {
            margin-block: var(--space-3);
            font-size: var(--text-sm);
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-2);
            min-width: 0;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            min-width: 0;
            overflow-wrap: anywhere;
        }

        li:not(:last-child)::after {
            content: "";
            width: 1.25rem;
            height: 1.25rem;
            flex-shrink: 0;
            background: var(--dark-grey);
            -webkit-mask: url("../images/chevron.svg") center / contain no-repeat;
            mask: url("../images/chevron.svg") center / contain no-repeat;
            transform: scaleX(-1);
        }

        li:last-child {
            color: var(--color-brand);
        }

        a {
            color: inherit;

            &:hover {
                color: var(--color-brand);
                text-decoration: none;
            }
        }
    }

    .stars {
        display: flex;
        gap: 0.125rem;
    }

    .stars__star {
        width: 0.875rem;
        height: 0.875rem;
        flex-shrink: 0;
        background: var(--color-brand);
        -webkit-mask: url("../images/star.svg") center / contain no-repeat;
        mask: url("../images/star.svg") center / contain no-repeat;
    }

    .stars__star--empty {
        background: var(--blue-24);
    }

    /* ------------------------------------------------------------------ *
     * Карточка отзыва
     * ------------------------------------------------------------------ */

    .review-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        height: 100%;
        padding: var(--space-4);
        background: var(--blue-8);
        border-radius: var(--radius);

        @media (max-width: 48rem) {
            padding: var(--space-3);
        }
    }

    .review-card__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);

        .icon {
            width: 2rem;
            height: 1.5rem;
        }
    }

    .review-card__author {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .review-card__name {
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
    }

    .review-card__date {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .review-card__text {
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
        color: var(--color-text-muted);
        line-height: 1.5;
    }

    .slider-wrapper {
        --slider-nav-inset: -1.25rem;

        position: relative;
        margin-top: var(--space-5);

        @media (min-width: 88rem) {
            --slider-nav-inset: -4rem;
        }

        @media (max-width: 48rem) {
            margin-top: var(--space-4);
            margin-inline: calc(var(--container-pad) * -1);
        }
    }

    .slider {
        --slide-width: 60%;

        overflow: hidden;
    }

    .slider-nav {
        display: none;

        @media (min-width: 64rem) {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            background: var(--white);
            box-shadow: var(--shadow-card);
            z-index: 2;
            transition: background ease-in-out .2s;

            &:hover {
                background: var(--color-bg-alt);
            }

            &.swiper-button-disabled {
                opacity: .4;
                pointer-events: none;
            }

            &.swiper-button-lock {
                display: none;
            }

            .icon {
                width: 1.25rem;
                height: 1.25rem;
            }
        }
    }

    .slider-nav-prev {
        left: var(--slider-nav-inset);
    }

    .slider-nav-next {
        right: var(--slider-nav-inset);
    }

    /* ------------------------------------------------------------------ *
     * Пагинация.
     * ------------------------------------------------------------------ */

    .pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        margin-top: var(--space-5);

        @media (max-width: 48rem) {
            margin-top: var(--space-4);
        }

        .page-numbers {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            color: var(--color-text);
            text-decoration: none;
            transition: background ease-in-out .2s;
        }

        a.page-numbers:hover {
            background: var(--blue-8);
            color: var(--color-brand);
            text-decoration: none;
        }

        .current {
            background: var(--blue-8);
            color: var(--color-brand);
        }

        .dots {
            color: var(--color-text-muted);
        }

        .icon {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    .input-text {
        border-radius: var(--radius);
        color: var(--color-text-muted);
        border: 1px solid var(--color-border);
        padding: var(--space-2) var(--space-3);
        line-height: 2;
    }

    .input-search {
        padding-left: 2.75rem;
        background: var(--blue-8) url("../images/search-brand.svg") no-repeat left var(--space-3) center / 1.25rem;
    }

    /* Поле поиска в шапке. Позиционирование — в layout.css. */
    .search-input {
        padding-left: 2.75rem;
        color: var(--color-text);
        background: var(--color-bg) url("../images/search-brand.svg") no-repeat left var(--space-3) center / 1.25rem;

        &::placeholder {
            color: var(--color-text-muted);
        }

        &::-webkit-search-cancel-button {
            display: none;
        }

        /* На мобильном лупа справа, а с введённым запросом её сменяет крестик. */
        @media (max-width: 64rem) {
            padding-left: var(--space-3);
            padding-right: 2.75rem;
            border-color: var(--color-brand);
            background-position: right var(--space-3) center;

            .site-search.has-value & {
                background-image: none;
            }
        }
    }

    .ul {
        display: flex;
        flex-direction: column;
        padding-inline-start: var(--space-3);
        gap: var(--space-1);
        list-style: disc;

        li::marker {
            color: var(--color-brand);
        }
    }


    .reviews {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: var(--space-6);

        @media (max-width: 64rem) {
          margin-bottom: var(--space-5);
        }
    }

    .reviews__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-2) var(--space-3);
    }

    .reviews__count {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .reviews__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .reviews__more {
        width: 100%;
    }

    .doctor-review {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        column-gap: var(--space-4);
        padding: var(--space-4);
        background: var(--blue-8);
        border-radius: var(--radius);

        @media (max-width: 48rem) {
                grid-template-columns: minmax(0, 1fr);
                row-gap: var(--space-2);
                padding: var(--space-3);

            .doctor-review__author {
                flex-direction: row;
                justify-content: space-between;
            }

        }
    }

    .doctor-review__author {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .doctor-review__name {
        font-weight: var(--weight-semibold);
    }

    .doctor-review__date {
        color: var(--color-text-muted);
        font-size: var(--text-xs);
    }

    .doctor-review__text {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: var(--radius);
        border: 1px solid var(--color-border);
        padding: var(--space-4);
        width: calc(100% - var(--container-pad));
        max-width: 600px;
        max-height: calc(100dvh - var(--space-5));
        overflow: auto;
        gap: var(--space-4);
    }

    .modal[open] {
        display: flex;
        flex-direction: column;
    }

    .modal::backdrop {
        backdrop-filter: blur(5px);
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-header h4 {
        font-weight: var(--weight-semibold);
    }

    .modal-close {
        padding: 0;
    }

    .form-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    label {
        font-size: var(--text-sm);
    }

    .review-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .rating {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .rating__stars {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: var(--space-2);
    }

    .rating__star {
        width: 1.875rem;
        height: 1.875rem;
        cursor: pointer;
        background: var(--blue-24);
        -webkit-mask: url("../images/star.svg") center / contain no-repeat;
        mask: url("../images/star.svg") center / contain no-repeat;
    }

    .rating__input:checked ~ .rating__star {
        background: var(--color-brand);
    }

    .rating__stars:hover .rating__star {
        background: var(--blue-24);
    }

    .rating__stars:hover .rating__star:hover,
    .rating__stars:hover .rating__star:hover ~ .rating__star {
        background: var(--color-brand);
    }

    .rating__input:focus-visible + .rating__star {
        outline: 2px solid var(--color-brand);
        outline-offset: 2px;
    }

    /* ------------------------------------------------------------------ *
     * Модалка
     * ------------------------------------------------------------------ */

    .consult-modal {
        max-width: 33.75rem;
        gap: var(--space-3);
        border-color: var(--color-border);
    }

    .consult-modal .modal-header {
        align-items: flex-start;
    }

    .consult-modal__intro {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .consult-modal__subtitle {
        color: var(--dark-grey);
    }

    .consult-modal__hours {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--color-bg-alt);
        border-radius: var(--radius);
    }

    .consult-modal__hours-title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: var(--weight-semibold);
    }

    .consult-modal__hours-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        padding-left: calc(var(--space-4) + var(--space-2));
        color: var(--dark-grey);
        font-size: var(--text-sm);
    }

    .consult-modal__hours-note {
        padding-top: var(--space-2);
        border-top: 1px solid var(--blue-16);
        color: var(--dark-grey);
        font-size: var(--text-sm);
    }

    .consult-modal__secure {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .consult-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .consult-form__input {
        width: 100%;
        color: var(--color-text);
    }

    .consult-form__input::placeholder {
        color: var(--color-text-muted);
    }

    .consult-form__consent {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        line-height: 1.4;
    }

    .consult-form__consent .wpcf7-list-item {
      margin: var(--space-3) 0!important;
    }

    .consult-form__consent a {
        color: var(--color-brand);
        text-decoration: none;
    }

    .consult-form__consent a:hover {
        text-decoration: underline;
    }

    .consult-form__checkbox {
        appearance: none;
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        border: 1px solid var(--color-border);
        border-radius: var(--space-1);
        background: var(--white);
        cursor: pointer;
    }

    .consult-form__checkbox:checked {
        border-color: var(--color-brand);
        background: var(--color-brand) url("../images/check.svg") center / 0.75rem no-repeat;
    }

    .consult-form__checkbox:focus-visible {
        outline: 2px solid var(--color-brand);
        outline-offset: 2px;
    }

    .consult-form__submit {
        width: 100%;
        padding: var(--space-3);
        border: none;
        font-size: var(--text-body);
    }

    .help-block {
        display: flex;
        background: var(--color-bg-alt);
        padding: var(--space-5);
        justify-content: space-between;
        border-radius: var(--radius);
        margin-top: 5.625rem;
        align-items: center;
        gap: var(--space-3);

        .help-block-info {
            display: flex;
            gap: var(--space-3);
        }

        @media (max-width: 64rem) {
            .help-block-info {
                flex-direction: column;
                gap: var(--space-2);
            }

            .help-block-info-text {
                flex-direction: column;
            }

            flex-direction: column;
            align-items: normal;
            gap: var(--space-2);
            padding: var(--space-4);
        }

        @media (max-width: 48rem) {
            margin-top: 3.5rem;
        }
    }

    /* ------------------------------------------------------------------ *
     * CTA-блок
     * ------------------------------------------------------------------ */

    .cta-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        width: 100%;
        background: var(--color-bg-alt);
        border-radius: var(--radius);
    }

    .cta-block__info {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-5);
    }

    .cta-block__actions {
        display: flex;
        gap: var(--space-3);
        margin-top: var(--space-2);
    }

    .cta-block__media {
        align-self: end;
        justify-self: end;
        padding: var(--space-4) var(--space-5) 0 0;

        img {
            display: block;
            max-width: 100%;
            height: auto;
        }
    }

    @media (max-width: 48rem) {
        .cta-block {
            grid-template-columns: 1fr;
        }

        .cta-block__info {
            padding: var(--space-4);
        }

        .cta-block__actions {
            flex-direction: column;

            .btn {
                width: 100%;
            }
        }

        .cta-block__media {
            justify-self: stretch;
            padding: 0 var(--space-4);

            img {
                width: 100%;
            }
        }
    }

    /* ------------------------------------------------------------------ *
     * Аккордеон
     * ------------------------------------------------------------------ */

    .accordion {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .accordion-item {
        padding: var(--space-4);
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
    }

    .accordion-item__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        cursor: pointer;
        list-style: none;
    }

    .accordion-item__header::-webkit-details-marker {
        display: none;
    }

    .accordion-item__chevron {
        transform: rotate(-90deg);
        transition: transform 0.2s ease;
    }

    .accordion-item[open] .accordion-item__chevron {
        transform: rotate(90deg);
    }

    .accordion-item__body {
        margin-top: var(--space-3);
    }

    @media (max-width: 48rem) {
        .accordion-item {
            padding: var(--space-3);
        }
    }

    /* ------------------------------------------------------------------ *
     * Карточка файла
     * ------------------------------------------------------------------ */

    .file-cards {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .file-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        width: 100%;
        padding: var(--space-4);
        background: var(--white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
    }

    .file-card__main {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-width: 0;
    }

    .file-card__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        align-self: center;

        .icon {
            width: var(--space-5);
            height: var(--space-5);
        }
    }

    .file-card__info {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        min-width: 0;
    }

    .file-card__title {
        font-size: var(--text-xl);
        font-weight: var(--weight-semibold);
        line-height: 1.3;
    }

    .file-card__description {
        color: var(--dark-grey);
    }

    .file-card__meta {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .file-card__size {
        color: var(--dark-grey);
    }

    .file-card__actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        flex-shrink: 0;
        width: 15rem;

        .btn {
            width: 100%;
            padding-left: var(--space-4);
            padding-right: var(--space-4);
        }

        .icon {
            width: 1.25rem;
            height: 1.25rem;
        }
    }

    @media (max-width: 48rem) {
        .file-card {
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-3);
            padding: var(--space-3);
        }

        .file-card__main {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: var(--space-2);
        }

        .file-card__info {
            display: contents;
        }

        .file-card__description,
        .file-card__meta {
            grid-column: 1 / -1;
        }

        .file-card__title {
            font-size: var(--text-body);
        }

        .file-card__actions {
            width: 100%;
        }
    }

    .bg-alt {
        background: var(--color-bg-alt);
    }

    .radius {
        border-radius: var(--radius);
    }

    .news-section {
        display: flex;
        flex-direction: column;
        margin-top: 5.625rem !important;

        @media (max-width: 48rem) {
            margin-top: 3.5rem !important;
        }
    }

    /* Внутренний переход от заголовка/фильтров к каталожной сетке. */
    .medical-fields-grid.mt-6,
    .doctors.mt-6 {
        margin-top: var(--space-5) !important;

        @media (max-width: 48rem) {
            margin-top: var(--space-4) !important;
        }
    }

    .news-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3);
        margin-top: var(--space-5);



        @media (max-width: 48rem) {
            grid-template-columns: 1fr;
            gap: var(--space-2);
            margin-top: var(--space-4);
        }
    }

    .news {
         display: flex;
         flex-direction: column;
         border-radius: var(--space-3);
         border: 1px solid var(--color-border);
         box-shadow: var(--shadow-soft);
         overflow: hidden;

         &:hover {
             box-shadow: var(--shadow-card);
         }

         .title  {
             padding: var(--space-3);
             display: flex;
             flex-direction: column;
             gap: var(--space-2);

             a {
                 color: var(--color-brand);
                 font-weight: 600;
             }
         }

         img {
             width: 100%;
             aspect-ratio: 16/9;
             object-fit: cover;
         }
     }

    .post-container {
        display: grid;

        grid-template-columns:1fr 350px;
        gap: var(--space-5);
        margin-top: var(--space-5);

        @media (max-width: 64rem) {
            grid-template-columns:1fr;

        }
    }

    .content-wrapper {
        margin-top: var(--space-5);

        h2 {
            margin: 48px 0 var(--space-3) 0;
        }

        h3 {
            margin: 32px 0 var(--space-3) 0;
        }

        h4 {
            margin: var(--space-4) 0 var(--space-2) 0;
        }

        li::marker {
            color: var(--color-brand);
        }

        ul > li + li,
        ol > li + li {
            margin-top: var(--space-3);
        }

        ul, p {
            margin-top: var(--space-3);
        }

        a {
            color: var(--color-brand);
        }

        @media (max-width: 64rem) {
            margin-top: var(--space-4);

            h2 {
                margin: 36px 0 var(--space-3) 0;
            }

            h3 {
                margin: 28px 0 var(--space-3) 0;
            }

            h4 {
                margin: var(--space-4) 0 var(--space-2) 0;
            }

            ul, p {
                margin-top: var(--space-3);
            }
        }
    }

    .service-section.service-content {
        gap: 0;

        > :first-child {
            margin-top: 0;
        }

        h2 {
            margin: var(--space-4) 0 0;
        }

        p,
        ul,
        ol {
            margin-top: 0.75rem;
        }

        ul > li + li,
        ol > li + li {
            margin-top: 0.75rem;
        }

        @media (max-width: 64rem) {
            h2 {
                margin-top: var(--space-3);
            }
        }
    }

    .promotions-section {
        margin-top: 0;

        @media (max-width: 64rem) {
            margin-top: 3.5rem;
        }
    }


    .promotions {
        display: flex;
        margin-top: var(--space-5);
        gap: var(--space-5);

        @media (max-width: 64rem) {
            gap: var(--space-3);
        }

        @media (max-width: 48rem) {
            flex-direction: column;
        }
    }
    .promotion {
        display: flex;
        padding: var(--space-5);
        position: relative;
        border-radius: var(--radius);
        border: 1px solid var(--color-border);
        flex: 1 1 auto;
        overflow: hidden;
        min-height: 18rem;
        box-shadow: var(--shadow-soft);

        @media (max-width: 48rem) {
            padding: var(--space-3);
            min-height: auto;
        }

        .cover {
            position: absolute;
            overflow: hidden;
            border-radius: var(--radius);
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .content {
            display: flex;
            flex-direction: column;
            width: 16rem;

            .badge {
                padding: 3px 6px;
                color: var(--white);
                width: max-content;
                border-radius: var(--radius);
            }

            .badge-accent {
                background: var(--color-accent);
            }

            .badge-primary {
                background: var(--color-brand);
            }

            h3 {
                margin-top: var(--space-2);
            }

            a {
                margin-top: auto;
                @media (max-width: 48rem) {
                    margin-top: var(--space-3);
                }
            }

        }
    }
}

/* Вне слоёв намеренно: swiper-bundle.min.css бесслойный, а бесслойное
   сильнее любого @layer — иначе он перебивает эти два правила. */

.slider .swiper-slide {
    height: auto;
}

.site-header__mobile-actions { gap: .5rem; }
.site-header__callback {
    align-self: center;
    width: auto;
    white-space: nowrap;
}

.site-header .desktop.flex:has(.site-header__cta) {
    align-items: center;
}

.site-header .desktop.flex:has(.site-header__cta) > .btn {
    box-sizing: border-box;
    height: 3rem;
    min-height: 3rem;
    align-self: center;
}

.site-header .desktop.flex:has(.site-header__cta) > .btn-brand-transparent {
    width: 3rem;
    min-width: 3rem;
    padding: 0;
}
.site-footer__disclaimer { margin-top: 1rem; color: var(--color-gray, #667085); font-size: .75rem; line-height: 1.5; }
.vacancy-page { padding-bottom: 4rem; }
.vacancy-hero { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.5rem; background: linear-gradient(135deg, #eaf3ff 0%, #f7fbff 60%, #e8f7f3 100%); }
.vacancy-hero__eyebrow { color: #0877df; font-weight: 600; }
.vacancy-content { margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid #e3eaf2; border-radius: 1.25rem; background: #fff; box-shadow: 0 12px 32px rgba(29,78,137,.08); }
.vacancy-content h2, .vacancy-content h3 { color: #123a67; margin-top: 1.5em; }
.vacancy-content ul { padding-left: 1.25rem; }

@media (max-width: 48rem) {
    .slider .swiper-slide {
        width: var(--slide-width);
    }
}