/* ==========================================================================
   ВАРИАНТ 1, доработанный. Каркас: служебная полоса, шапка, основная
   область, боковое меню стран, подвал.
   ========================================================================== */

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Служебная полоса (регион / язык / sanofi) -------------------------- */

.utility-bar {
    background: var(--c-primary-tint);
    border-bottom: 1px solid var(--c-border);
    font-size: calc(var(--fs-small) * var(--a11y-scale));
}

.utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.utility-bar__side {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.region-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-text-muted);
}

.region-switch__flag {
    font-size: 1.15em;
    line-height: 1;
}

.region-switch__code {
    color: var(--c-text);
    font-weight: var(--fw-bold);
}

.region-switch__link {
    color: var(--c-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.region-switch__link:hover {
    color: var(--c-primary);
}

.sanofi-logo {
    font-weight: var(--fw-bold);
    font-size: calc(18px * var(--a11y-scale));
    letter-spacing: -0.02em;
    color: var(--c-text);
}

.sanofi-logo::after {
    content: "";
    display: inline-block;
    width: 0.28em;
    height: 0.28em;
    margin-left: 0.22em;
    vertical-align: 0.08em;
    border-radius: 50%;
    background: var(--c-primary);
}

/* --- Шапка --------------------------------------------------------------- */

.site-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 76px;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.wordmark {
    display: inline-block;
    color: var(--c-text);
    font-size: calc(23px * var(--a11y-scale));
    font-weight: var(--fw-black);
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}

.wordmark em {
    color: var(--c-primary);
    font-style: normal;
}

.wordmark:hover {
    color: var(--c-text);
}

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

/* --- Основная область ---------------------------------------------------- */

.content {
    flex: 1 0 auto;
    padding: var(--space-8) 0 var(--space-9);
}

.content--hero {
    display: flex;
    align-items: center;
    padding: var(--space-9) 0;
}

/* ==========================================================================
   Правка 3. Боковое меню стран на страницах документов.

   Взято из варианта 5: колонна слева, прилипает к верху окна, показывает
   все страны и подсвечивает текущую. Переключиться на другую страну можно,
   не возвращаясь на экран выбора.
   ========================================================================== */

.shell {
    display: flex;
    align-items: flex-start;
    gap: var(--space-7);
}

.shell__main {
    flex: 1 1 auto;
    min-width: 0;
}

.rail {
    position: sticky;
    top: var(--space-5);
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--c-rail);
    border-radius: var(--radius-lg);
    color: var(--c-rail-text);
    font-size: calc(var(--fs-small) * var(--a11y-scale));
}

.rail__label {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--c-rail-line);
    color: rgba(255, 255, 255, 0.5);
    font-size: calc(var(--fs-eyebrow) * var(--a11y-scale));
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

.rail-nav {
    display: flex;
    flex-direction: column;
}

/* Пункт меню: флаг + название страны на её собственном языке. */
.rail-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--c-rail-text);
    line-height: 1.35;
    transition: color var(--transition), background var(--transition),
        border-color var(--transition);
}

.rail-nav__item:hover {
    background: var(--c-rail-2);
    border-left-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.rail-nav__item.is-current {
    background: var(--c-rail-2);
    border-left-color: var(--c-primary);
    color: #fff;
    font-weight: var(--fw-bold);
}

.rail-nav__flag {
    flex: 0 0 auto;
    height: calc(15px * var(--a11y-scale));
}

/* Название страны всегда занимает две строки: перенос задан в разметке.
   Иначе короткое «Рэспубліка Беларусь» умещается в строку в обычном
   начертании и переходит на две в жирном — и меню прыгает при переключении. */
.rail-nav__name {
    min-width: 0;
}

.rail__bottom {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--c-rail-line);
}

.rail__all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: #fff;
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rail__all:hover {
    color: #fff;
    text-decoration-color: var(--c-primary);
}

.rail__all svg {
    width: 1em;
    height: 1em;
}

/* --- Шапка страницы ------------------------------------------------------- */

.page-head {
    max-width: 780px;
    margin-bottom: var(--space-7);
}

.page-head__country {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: calc(var(--fs-h2) * var(--a11y-scale));
    font-weight: var(--fw-bold);
}

.page-head__flag {
    height: calc(30px * var(--a11y-scale));
}

.page-head h1 {
    margin-bottom: var(--space-4);
}

/* --- Подвал -------------------------------------------------------------- */

.site-footer {
    flex-shrink: 0;
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
    padding-top: var(--space-7);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin-bottom: var(--space-5);
}

.site-footer__links a {
    color: var(--c-text);
    font-weight: var(--fw-bold);
}

.site-footer__links a:hover {
    color: var(--c-primary);
}

.site-footer__meta {
    color: var(--c-text-muted);
    font-size: calc(var(--fs-small) * var(--a11y-scale));
    padding-bottom: var(--space-6);
}

.site-footer__meta p + p {
    margin-top: var(--space-3);
}

.site-footer__bar {
    height: 6px;
    background: var(--c-primary);
}

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

/* Колонна складывается в горизонтальную панель над содержимым. */
@media (max-width: 1080px) {
    .shell {
        display: block;
    }

    .rail {
        position: static;
        width: auto;
        display: block;
        margin-bottom: var(--space-6);
    }

    .rail-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .rail-nav__item {
        border-left: 0;
        border-bottom: 3px solid transparent;
        border-radius: var(--radius-sm);
    }

    .rail-nav__item:hover {
        border-left-color: transparent;
        border-bottom-color: rgba(255, 255, 255, 0.3);
    }

    .rail-nav__item.is-current {
        border-left-color: transparent;
        border-bottom-color: var(--c-primary);
    }

    /* В горизонтальной панели прыгать нечему — перенос не нужен. */
    .rail-nav__name br {
        display: none;
    }

    .rail__bottom {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
    }
}

@media (max-width: 720px) {
    .site-header__inner {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .utility-bar__inner {
        gap: var(--space-2);
    }

    .rail-nav__name {
        font-size: calc(var(--fs-small) * var(--a11y-scale));
    }
}

/* На узком экране колонна не должна съедать первый экран целиком. */
@media (max-width: 560px) {
    .rail {
        padding: var(--space-4);
    }

    .rail-nav {
        flex-direction: column;
        gap: 0;
    }

    .rail-nav__item {
        padding: var(--space-2) var(--space-3);
        border-bottom: 0;
        border-left: 3px solid transparent;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    .rail-nav__item:hover,
    .rail-nav__item.is-current {
        border-bottom-color: transparent;
    }

    .rail-nav__item.is-current {
        border-left-color: var(--c-primary);
    }

    /* Список снова вертикальный — возвращаем перенос. */
    .rail-nav__name br {
        display: inline;
    }
}