/* =============================================================================
   components.css — переиспользуемые блоки интерфейса.
   Именование: БЭМ (.block__element--modifier), состояния — .is-* / [aria-*].

   Правила оформления, обязательные для всего проекта:
     • теней нет нигде, кроме поп-апа (лайтбокс) и выпадающего меню
       — только var(--shadow-pop);
     • обводка карточек и полей — 2px (var(--border-width));
     • на светло-голубом фоне (--c-sky / --c-sky-soft) текст только --c-ink;
     • фокус — кольцо 3px var(--c-blue), outline: none не применяется;
     • минимальная область нажатия — var(--tap-size) = 44px.
   ============================================================================= */

/* =============================================================================
   1. Кнопки
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-size);
    padding: var(--space-3) var(--space-5);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

/* Основная кнопка — красная */
.btn--primary {
    background-color: var(--c-red);
    border-color: var(--c-red);
    color: var(--c-surface);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--c-red-dark);
    border-color: var(--c-red-dark);
    color: var(--c-surface);
}

/* Второстепенная кнопка — синяя */
.btn--secondary {
    background-color: var(--c-blue);
    border-color: var(--c-blue);
    color: var(--c-surface);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    background-color: var(--c-blue-deep);
    border-color: var(--c-blue-deep);
    color: var(--c-surface);
}

/* Прозрачная кнопка с инверсией на наведении */
.btn--ghost {
    background-color: transparent;
    border-color: var(--c-blue-deep);
    color: var(--c-blue-deep);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background-color: var(--c-blue-deep);
    border-color: var(--c-blue-deep);
    color: var(--c-surface);
}

/* Вариант призрачной кнопки для тёмных и цветных подложек */
.btn--ghost-light {
    background-color: transparent;
    border-color: var(--c-surface);
    color: var(--c-surface);
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
    background-color: var(--c-surface);
    color: var(--c-ink);
}

.btn--sm {
    min-height: 36px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}

.btn--lg {
    padding: var(--space-4) var(--space-7);
    font-size: var(--fs-lg);
}

.btn--block {
    width: 100%;
}

/* Круглая кнопка-иконка */
.btn--icon {
    width: var(--tap-size);
    min-width: var(--tap-size);
    padding: 0;
    border-radius: 50%;
}

/* Состояние отправки: подпись гаснет, крутится индикатор */
.btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentcolor;
    border-top-color: var(--c-surface);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.45);
    animation: spin 700ms linear infinite;
}

.btn--ghost.is-loading::after {
    border-top-color: var(--c-blue-deep);
    color: rgba(18, 58, 107, 0.35);
}

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

/* Текстовая ссылка со стрелкой */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-size);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    color: var(--c-blue);
    text-decoration: none;
}

.link-arrow::after {
    content: "→";
    transition: transform var(--dur) var(--ease);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
    transform: translateX(4px);
}

/* =============================================================================
   2. Шапка сайта и навигация
   ============================================================================= */

/* Липкая шапка: остаётся в потоке, поэтому бегущая строка и якоря ведут себя
   предсказуемо без отступов-заглушек. Тень запрещена — граница 2px. */
.site-header {
    position: sticky;
    inset-block-start: 0;
    /* Выше затемнения под мобильным меню: панель живёт внутри шапки */
    z-index: calc(var(--z-backdrop) + 10);
    background-color: var(--c-surface);
    border-block-end: var(--border-width) solid var(--c-sky-line);
    padding-block-start: env(safe-area-inset-top);
    transition: border-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
    border-block-end-color: var(--c-sky);
}

.site-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--header-height);
}

.site-header__phone-wrap {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.site-header__hours {
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

/* --- Логотип: печать + название ------------------------------------------- */

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    text-decoration: none;
    color: var(--c-blue-deep);
}

/* Знак: верх башни Биг-Бена в скруглённой рамке с обводкой */
.logo__mark {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 48px;
}

.logo .logo__img-wrap,
.logo .logo__img {
    display: block;
    width: 100%;
    height: 100%;
}

.logo .logo__img {
    object-fit: cover;
    border: 2px solid var(--c-blue-deep);
    border-radius: 12px;
    background-color: var(--c-surface);
    transition: transform var(--dur-slow) var(--ease);
}


.logo:hover .logo__img {
    transform: rotate(-5deg);
}

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

/* Название каллиграфией: у рукописного шрифта маленький x-height, поэтому кегль крупнее */
.logo__text {
    font-family: var(--font-script);
    font-size: 1.5rem;
    font-weight: var(--fw-regular);
    letter-spacing: 0;
    line-height: 0.9;
    white-space: nowrap;
}

.logo__tagline {
    display: none;
    margin-block-start: 0.2rem;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--c-muted);
}

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

/* Телефон и кнопка записи в шапке появляются на широких экранах */
.site-header__cta {
    display: none;
}

/* --- Бургер --------------------------------------------------------------- */

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-size);
    height: var(--tap-size);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-pill);
    background-color: var(--c-surface);
    color: var(--c-blue-deep);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.burger:hover {
    background-color: var(--c-sky-soft);
}

.burger__line,
.burger__line::before,
.burger__line::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background-color: currentcolor;
    transition:
        transform var(--dur) var(--ease),
        opacity var(--dur-fast) var(--ease);
}

.burger__line {
    position: relative;
}

.burger__line::before,
.burger__line::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.burger__line::before {
    inset-block-start: -6px;
}

.burger__line::after {
    inset-block-start: 6px;
}

.burger[aria-expanded="true"] .burger__line {
    background-color: transparent;
}

.burger[aria-expanded="true"] .burger__line::before {
    transform: translateY(6px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Меню (мобильная выдвижная панель) ------------------------------------ */

.nav {
    position: fixed;
    inset-block: calc(var(--header-height) + env(safe-area-inset-top)) 0;
    inset-inline-end: 0;
    z-index: var(--z-drawer);
    width: min(92vw, 22rem);
    padding: var(--space-5) var(--space-4) var(--space-8);
    background-color: var(--c-surface);
    border-inline-start: var(--border-sky);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(105%);
    visibility: hidden;
    transition:
        transform var(--dur) var(--ease),
        visibility 0s linear var(--dur);
}

.nav.is-open {
    transform: none;
    visibility: visible;
    transition:
        transform var(--dur) var(--ease),
        visibility 0s;
}

.nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: flex;
    align-items: center;
    min-height: var(--tap-size);
    padding: var(--space-2) var(--space-3);
    padding-inline-end: calc(var(--tap-size) + var(--space-2));
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav__item:not(.nav__item--has-children) .nav__link {
    padding-inline-end: var(--space-3);
}

.nav__link:hover,
.nav__link:focus-visible {
    background-color: var(--c-sky-soft);
    color: var(--c-blue-deep);
}

.nav__link.is-active {
    color: var(--c-red);
}

/* Кнопка раскрытия подменю */
.nav__toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-size);
    height: var(--tap-size);
    border-radius: 50%;
    color: var(--c-blue);
}

.nav__toggle::after {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-inline-end: 2px solid currentcolor;
    border-block-end: 2px solid currentcolor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--dur) var(--ease);
}

.nav__toggle[aria-expanded="true"]::after {
    transform: translateY(10%) rotate(-135deg);
}

.nav__submenu {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-1) 0 var(--space-2);
    padding-inline-start: var(--space-4);
    border-inline-start: var(--border-sky);
}

.nav__item.is-open > .nav__submenu {
    display: flex;
}

.nav__sublink {
    display: flex;
    align-items: center;
    min-height: var(--tap-size);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--c-muted);
    text-decoration: none;
}

.nav__sublink:hover,
.nav__sublink:focus-visible,
.nav__sublink.is-active {
    background-color: var(--c-sky-soft);
    color: var(--c-blue-deep);
}

/* Дополнительный блок меню: телефон, часы и кнопка внутри мобильной панели */
.nav__extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--c-sky-line);
}

.nav__phone {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-blue-deep);
    text-decoration: none;
}

.nav__hours {
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.nav__mascot {
    align-self: flex-end;
    margin-block-start: var(--space-4);
}

/* Без JavaScript выдвижная панель недоступна: меню становится обычным списком,
   а бургер прячется. Класс no-js стоит на <html> и снимается в main.js. */
.no-js .burger {
    display: none;
}

.no-js .nav {
    position: static;
    width: auto;
    padding: var(--space-2) 0;
    border: 0;
    overflow: visible;
    transform: none;
    visibility: visible;
    background: none;
}

.no-js .nav__list {
    flex-direction: row;
    flex-wrap: wrap;
}

.no-js .nav__submenu {
    display: flex;
}

.no-js .nav__toggle,
.no-js .nav__mascot {
    display: none;
}

/* Затемнение под выдвижным меню */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background-color: var(--c-ink-veil);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--dur) var(--ease),
        visibility 0s linear var(--dur);
}

.nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s;
}

@media (min-width: 315px) {
    .logo__text {
        font-size: 1.625rem;
    }
}

@media (min-width: 515px) {
    .logo__mark {
        width: 46px;
        height: 56px;
    }

    .logo__text {
        font-size: 1.875rem;
    }

    .site-header__cta {
        display: inline-flex;
    }
}

@media (min-width: 915px) {
    .burger,
    .nav-backdrop,
    .nav__extra {
        display: none;
    }

    .logo__tagline {
        display: block;
    }

    .site-header__top {
        min-height: 60px;
    }

    .site-header__phone-wrap {
        display: flex;
    }

    .site-header__phone {
        font-family: var(--font-display);
        font-size: var(--fs-base);
        font-weight: var(--fw-bold);
        color: var(--c-blue-deep);
        text-decoration: none;
        white-space: nowrap;
    }

    .site-header__phone:hover {
        color: var(--c-red);
    }

    /* Второй ярус: строка меню капителью с трекингом */
    .nav {
        position: static;
        width: auto;
        padding: 0;
        border: 0;
        border-block-start: 1px solid var(--c-sky-line);
        overflow: visible;
        transform: none;
        visibility: visible;
        background: none;
    }

    /* Строка меню — тот же контейнер, что и у логотипа: по центру окна,
       пункты начинаются от левого края эмблемы */
    .nav__list {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0;
        min-height: 40px;
        margin-inline: auto;
    }

    /* Первый пункт начинается ровно от края логотипа */
    .nav__item:first-child > .nav__link {
        padding-inline-start: 0;
    }

    .nav__item:first-child > .nav__link::after {
        inset-inline-start: 0;
    }

    .nav__link {
        min-height: 40px;
        padding: var(--space-2) var(--space-2);
        border-radius: 0;
        font-size: 0.7rem;
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-caps);
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--c-blue-deep);
    }

    .nav__link:hover,
    .nav__link:focus-visible {
        background-color: transparent;
        color: var(--c-red);
    }

    /* Подчёркивание активного и наведённого пункта — тонкая красная черта */
    .nav__link::after {
        content: "";
        position: absolute;
        inset-inline: var(--space-2);
        inset-block-end: 6px;
        height: 2px;
        background-color: var(--c-red);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--dur) var(--ease);
    }

    .nav__item:not(.nav__item--has-children) .nav__link {
        padding-inline-end: var(--space-2);
    }

    .nav__link:hover::after,
    .nav__link.is-active::after {
        transform: scaleX(1);
    }

    .nav__link.is-active {
        color: var(--c-blue-deep);
    }

    /* Пункт с подменю: место под стрелку */
    .nav__item--has-children > .nav__link {
        padding-inline-end: var(--space-6);
    }

    .nav__toggle {
        width: 1.5rem;
        height: 100%;
        inset-inline-end: var(--space-2);
        color: var(--c-blue);
    }

    .nav__toggle::after {
        width: 0.45rem;
        height: 0.45rem;
    }

    /* Выпадающее подменю — единственный элемент с тенью, кроме поп-апа */
    .nav__submenu {
        position: absolute;
        inset-block-start: calc(100% + 2px);
        inset-inline-start: 0;
        z-index: var(--z-dropdown);
        display: flex;
        min-width: 16rem;
        margin: 0;
        padding: var(--space-2);
        background-color: var(--c-surface);
        border: var(--border-sky);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-pop);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition:
            opacity var(--dur) var(--ease),
            transform var(--dur) var(--ease),
            visibility 0s linear var(--dur);
    }

    .nav__item.is-open > .nav__submenu,
    .nav__item:hover > .nav__submenu,
    .nav__item:focus-within > .nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            opacity var(--dur) var(--ease),
            transform var(--dur) var(--ease),
            visibility 0s;
    }

    .nav__sublink {
        color: var(--c-ink);
        font-size: var(--fs-sm);
    }
}

@media (min-width: 1200px) {
    .nav__link {
        font-size: 0.8125rem;
        padding-inline: var(--space-4);
    }

    .nav__link::after {
        inset-inline: var(--space-4);
    }

    .nav__item--has-children > .nav__link {
        padding-inline-end: var(--space-7);
    }

    .logo__mark {
        width: 50px;
        height: 60px;
    }

    .logo__text {
        font-size: 2rem;
    }

    .site-header__top {
        min-height: 68px;
    }
}

/* =============================================================================
   3. Подвал
   ============================================================================= */

.site-footer {
    position: relative;
    overflow: hidden;
    background-color: var(--c-blue-deep);
    color: var(--c-surface);
    padding-block-end: env(safe-area-inset-bottom);
}

/* Гигантский вордмарк «Big Ben Club» каллиграфией во всю ширину, декоративный */
.site-footer__wordmark {
    margin: 0;
    padding-block: var(--space-4) 0;
    font-family: var(--font-script);
    font-size: clamp(3.25rem, 1rem + 12vw, 11rem);
    font-weight: var(--fw-regular);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: rgba(168, 216, 240, 0.22);
    user-select: none;
    pointer-events: none;
}

.site-footer__inner {
    position: relative;
    z-index: var(--z-content);
    padding-block: var(--section-y-sm);
}

.site-footer a {
    color: var(--c-sky);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--c-surface);
    text-decoration: underline;
}

.site-footer__grid {
    display: grid;
    gap: var(--space-7) var(--space-6);
    grid-template-columns: 1fr;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Логотип в подвале такой же, как в шапке: та же картинка и размеры, цвета под тёмный фон */
.logo--footer {
    color: var(--c-surface);
}

.logo--footer .logo__text {
    font-size: 2rem;
}

.logo--footer .logo__tagline {
    display: block;
    color: var(--c-sky);
}

.site-footer__title {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-sky);
    margin-block-end: var(--space-3);
}

.site-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

.site-footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--c-surface);
}

.site-footer__contacts {
    font-style: normal;
}

.site-footer__hours {
    color: var(--c-sky-soft);
    font-size: var(--fs-sm);
    padding-block: var(--space-2);
}

.site-footer__cta {
    margin-block-start: var(--space-4);
}

.site-footer .btn--ghost-light:hover,
.site-footer .btn--ghost-light:focus-visible {
    background-color: var(--c-surface);
    color: var(--c-ink);
    text-decoration: none;
}

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid rgba(168, 216, 240, 0.28);
    font-size: var(--fs-xs);
    color: var(--c-sky-soft);
}

.site-footer__docs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.site-footer__legal,
.site-footer__copyright {
    margin: 0;
}

@media (min-width: 515px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (min-width: 915px) {
    .site-footer__grid {
        grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: auto;
    }

    .site-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

/* Социальные ссылки */
.socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}

.socials__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-size);
    height: var(--tap-size);
    border: var(--border-width) solid currentcolor;
    border-radius: 50%;
    color: var(--c-sky);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.socials__link svg {
    width: 22px;
    height: 22px;
}

.socials__link:hover,
.socials__link:focus-visible {
    background-color: var(--c-sky);
    border-color: var(--c-sky);
    color: var(--c-ink);
    text-decoration: none;
}

/* Плавающая кнопка связи в мессенджере */
.float-contact {
    position: fixed;
    inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom));
    inset-inline-start: var(--space-4);
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 52px;
    padding-inline: var(--space-3);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-pill);
    background-color: var(--c-blue);
    color: var(--c-surface);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.float-contact__icon {
    display: inline-flex;
}

.float-contact__icon svg {
    width: 24px;
    height: 24px;
}

.float-contact__label {
    display: none;
}

.float-contact:hover,
.float-contact:focus-visible {
    background-color: var(--c-blue-deep);
    color: var(--c-surface);
    transform: translateY(-2px);
}

@media (min-width: 515px) {
    .float-contact {
        padding-inline: var(--space-3) var(--space-4);
    }

    .float-contact__label {
        display: inline;
    }
}

/* Кнопка «наверх» */
.to-top {
    position: fixed;
    inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom));
    inset-inline-end: var(--space-4);
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-size);
    height: var(--tap-size);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: 50%;
    background-color: var(--c-surface);
    color: var(--c-blue-deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        visibility 0s linear var(--dur);
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}

.to-top::before {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    border-block-start: 2px solid currentcolor;
    border-inline-start: 2px solid currentcolor;
    transform: translateY(2px) rotate(45deg);
}

.to-top:hover,
.to-top:focus-visible {
    background-color: var(--c-blue-deep);
    color: var(--c-surface);
}

/* =============================================================================
   4. Карточки
   ============================================================================= */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background-color: var(--c-surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    /* теней нет — глубина создаётся обводкой и цветом фона */
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card--sky {
    background-color: var(--c-sky-soft);
    border-color: var(--c-sky);
    color: var(--c-ink);
}

.card--cream {
    background-color: var(--c-cream);
    border-color: var(--c-gold);
}

.card--ink {
    background-color: var(--c-blue-deep);
    border-color: var(--c-blue-deep);
    color: var(--c-surface);
}

.card--ink .card__title {
    color: var(--c-surface);
}

.card--accent {
    border-color: var(--c-red);
}

.card--flat {
    padding: 0;
    border: 0;
    background: none;
}

/* Карточка целиком кликабельна: ссылка растягивается псевдоэлементом */
.card--link:hover,
.card--link:focus-within {
    border-color: var(--c-blue);
    transform: translateY(-3px);
}

.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.card__media {
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
    border-radius: calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width)) 0 0;
    overflow: hidden;
    background-color: var(--c-sky-soft);
}

.card__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.card__media--portrait img {
    aspect-ratio: 3 / 4;
}

.card__media--square img {
    aspect-ratio: 1 / 1;
}

.card__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var(--c-blue-deep);
}

.card__title a {
    color: inherit;
    text-decoration: none;
}

.card__meta {
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.card__text {
    color: var(--c-ink);
}

.card--sky .card__text,
.card--sky .card__meta {
    color: var(--c-ink);
}

.card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: auto;
    padding-block-start: var(--space-2);
}

/* Крупная цифра-показатель */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    background-color: var(--c-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}

.stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    line-height: 1;
    color: var(--c-red);
}

.stat__caption {
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* =============================================================================
   5. Пилюли, теги, бейджи
   ============================================================================= */

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    background-color: var(--c-surface);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--c-ink);
    text-decoration: none;
    white-space: nowrap;
}

.pill--sky {
    background-color: var(--c-sky-soft);
    border-color: var(--c-sky);
    color: var(--c-ink);
}

.pill--blue {
    background-color: var(--c-blue);
    border-color: var(--c-blue);
    color: var(--c-surface);
}

.pill--red {
    background-color: var(--c-red-soft);
    border-color: var(--c-red);
    color: var(--c-red-dark);
}

.pill--cream {
    background-color: var(--c-cream);
    border-color: var(--c-gold);
    color: var(--c-ink);
}

/* Кликабельная пилюля-фильтр */
a.pill:hover,
a.pill:focus-visible,
.pill--active {
    background-color: var(--c-blue-deep);
    border-color: var(--c-blue-deep);
    color: var(--c-surface);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--c-sky-soft);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-ink);
}

.badge--success {
    background-color: rgba(46, 125, 91, 0.14);
    color: var(--c-success);
}

.badge--warning {
    background-color: rgba(224, 165, 38, 0.18);
    color: #8A6410;
}

.badge--error {
    background-color: var(--c-red-soft);
    color: var(--c-error);
}

.badge--gold {
    background-color: var(--c-cream);
    color: #8A6410;
}

/* =============================================================================
   6. Формы
   ============================================================================= */

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

.form__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.form__row--full {
    grid-column: 1 / -1;
}

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

.field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-blue-deep);
}

.field__label .required {
    color: var(--c-red);
}

.field__hint {
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

/* Общий вид полей ввода: и по классу, и по тегу внутри .form */
.input,
.textarea,
.select,
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form input[type="number"],
.form input[type="url"],
.form input[type="search"],
.form input[type="date"],
.form textarea,
.form select {
    width: 100%;
    min-height: var(--tap-size);
    padding: var(--space-3) var(--space-4);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-ink);
    font-family: var(--font-text);
    font-size: var(--fs-base);
    line-height: 1.4;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    /* iOS не должен масштабировать страницу при фокусе — кегль не меньше 16px */
}

.input::placeholder,
.textarea::placeholder,
.form input::placeholder,
.form textarea::placeholder {
    color: var(--c-muted);
    opacity: 1;
}

.input:hover,
.textarea:hover,
.select:hover,
.form input:hover,
.form textarea:hover,
.form select:hover {
    border-color: var(--c-sky);
}

.input:focus,
.textarea:focus,
.select:focus,
.form input:focus,
.form textarea:focus,
.form select:focus {
    border-color: var(--c-blue);
}

.textarea,
.form textarea {
    min-height: 7.5rem;
    resize: vertical;
}

/* Select с собственной стрелкой (SVG в data-URI, без картинок и шрифтов иконок) */
.select,
.form select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%232A6FB0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 20px 20px;
    cursor: pointer;
}

/* Состояние ошибки: рамка, подложка и текст под полем */
.field--error .input,
.field--error .textarea,
.field--error .select,
.field--error input,
.field--error textarea,
.field--error select,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--c-error);
    background-color: var(--c-red-soft);
}

.field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-error);
}

.field__error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background-color: var(--c-error);
    color: var(--c-surface);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
}

/* Чекбокс согласия на обработку персональных данных */
.checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-3);
    min-height: var(--tap-size);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--c-muted);
    cursor: pointer;
}

.checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.checkbox input[type="checkbox"]:checked {
    background-color: var(--c-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.checkbox--error input[type="checkbox"],
.field--error .checkbox input[type="checkbox"] {
    border-color: var(--c-error);
}

.checkbox a {
    color: var(--c-blue);
}

/* Группа радиокнопок: fieldset без браузерной рамки, legend как обычная подпись */
fieldset.field {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

fieldset.field > legend {
    padding: 0;
    margin-block-end: var(--space-2);
}

/* Радиогруппа в виде пилюль (например, «для себя / для ребёнка») */
.choice,
.choice > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.choice > div > div {
    display: contents;
}

.choice label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-size);
    padding: var(--space-2) var(--space-4);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.choice label:hover {
    border-color: var(--c-sky);
}

.choice input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    border: var(--border-width) solid var(--c-blue);
    border-radius: 50%;
    background-color: var(--c-surface);
    display: grid;
    place-items: center;
}

.choice input[type="radio"]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--c-blue);
    transform: scale(0);
    transition: transform var(--dur-fast) var(--ease);
}

.choice input[type="radio"]:checked::before {
    transform: scale(1);
}

.choice input:checked + span,
.choice label:has(input:checked) {
    border-color: var(--c-blue);
    background-color: var(--c-sky-soft);
    color: var(--c-ink);
}

/* Сообщение о результате отправки формы (role="status") */
.form__status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.form__status:empty {
    display: none;
}

.form__status--success {
    background-color: rgba(46, 125, 91, 0.1);
    border-color: var(--c-success);
    color: var(--c-success);
}

.form__status--error {
    background-color: var(--c-red-soft);
    border-color: var(--c-error);
    color: var(--c-error);
}

/* Honeypot: поле-ловушка не должно быть видно и доступно с клавиатуры */
.honeypot {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 515px) {
    .form__grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Системные сообщения Django */
.alert {
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    background-color: var(--c-surface);
}

.alert--success {
    border-color: var(--c-success);
    background-color: rgba(46, 125, 91, 0.1);
    color: var(--c-success);
}

.alert--error {
    border-color: var(--c-error);
    background-color: var(--c-red-soft);
    color: var(--c-error);
}

.alert--warning {
    border-color: var(--c-warning);
    background-color: rgba(224, 165, 38, 0.14);
    color: #8A6410;
}

.alert--info {
    border-color: var(--c-sky);
    background-color: var(--c-sky-soft);
    color: var(--c-ink);
}

/* =============================================================================
   7. Аккордеон (блок «Вопросы и ответы»)
   ============================================================================= */

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

.accordion__item {
    background-color: var(--c-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease);
}

.accordion__item.is-open {
    border-color: var(--c-blue);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: var(--tap-size);
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    text-align: start;
    color: var(--c-blue-deep);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.accordion__trigger:hover {
    background-color: var(--c-sky-soft);
}

/* Иконка «плюс», превращающаяся в «минус» */
.accordion__icon {
    position: relative;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: var(--border-width) solid var(--c-blue);
}

.accordion__icon::before,
.accordion__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 0.7rem;
    height: 2px;
    background-color: var(--c-blue);
    transform: translate(-50%, -50%);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

/* Панель раскрывается через grid-template-rows: анимация без фиксированной высоты */
.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
        grid-template-rows var(--dur) var(--ease),
        visibility 0s linear var(--dur);
}

.accordion__item.is-open .accordion__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--dur) var(--ease), visibility 0s;
}

.accordion__content {
    overflow: hidden;
}

.accordion__content > * {
    padding-inline: var(--space-5);
}

.accordion__content > *:last-child {
    padding-block-end: var(--space-5);
}

/* =============================================================================
   8. Бегущая строка
   ============================================================================= */

.marquee {
    display: flex;
    overflow: hidden;
    width: 100%;
    padding-block: var(--space-3);
    background-color: var(--c-blue-deep);
    color: var(--c-surface);
    user-select: none;
}

.marquee--sky {
    background-color: var(--c-sky);
    color: var(--c-ink);
}

.marquee--red {
    background-color: var(--c-red);
    color: var(--c-surface);
}

.marquee__track {
    display: flex;
    flex: 0 0 auto;
    min-width: 100%;
    gap: var(--space-6);
    padding-inline-end: var(--space-6);
    animation: marquee-scroll var(--dur-marquee) linear infinite;
}

/* Второй экземпляр списка (aria-hidden) обеспечивает бесшовный цикл */
.marquee__group {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex: 0 0 auto;
    margin: 0;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.marquee__item::after {
    content: "★";
    color: var(--c-gold);
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Движение отключено: строка становится обычной прокручиваемой лентой */
    .marquee {
        overflow-x: auto;
    }

    .marquee__track {
        animation: none;
    }
}

/* =============================================================================
   9. Декоративные элементы
   ============================================================================= */

/* Круглый стикер-призыв с поворотом −8° */
.sticker {
    display: inline-grid;
    place-items: center;
    width: clamp(7rem, 6rem + 5vw, 10.5rem);
    aspect-ratio: 1 / 1;
    padding: var(--space-3);
    border-radius: 50%;
    background-color: var(--c-red);
    border: var(--border-width) solid var(--c-red-dark);
    color: var(--c-surface);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    transform: rotate(-8deg);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.sticker:hover,
.sticker:focus-visible {
    background-color: var(--c-red-dark);
    color: var(--c-surface);
    transform: rotate(0deg) scale(1.04);
}

.sticker--sky {
    background-color: var(--c-sky);
    border-color: var(--c-blue);
    color: var(--c-ink);
}

.sticker--sky:hover,
.sticker--sky:focus-visible {
    background-color: var(--c-sky-soft);
    color: var(--c-ink);
}

.sticker--cream {
    background-color: var(--c-cream);
    border-color: var(--c-gold);
    color: var(--c-ink);
}

/* Cutout-фото: изображение без фона на цветном круге с обводкой */
.cutout {
    position: relative;
    display: grid;
    place-items: end center;
    isolation: isolate;
    --cutout-color: var(--c-sky);
    --cutout-fill: var(--c-sky-soft);
}

.cutout::before {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: -1;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--cutout-fill);
    border: var(--border-width) solid var(--cutout-color);
}

.cutout__img {
    position: relative;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
}

.cutout--sky {
    --cutout-color: var(--c-sky);
    --cutout-fill: var(--c-sky-soft);
}

.cutout--blue {
    --cutout-color: var(--c-blue);
    --cutout-fill: var(--c-sky-soft);
}

.cutout--red {
    --cutout-color: var(--c-red);
    --cutout-fill: var(--c-red-soft);
}

/* Декоративная сетка-миллиметровка светло-голубым */
.grid-paper {
    position: relative;
    background-image:
        linear-gradient(to right, var(--grid-paper-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-paper-color) 1px, transparent 1px);
    background-size: var(--grid-paper-step) var(--grid-paper-step);
}

/* Сетка как фон-подложка секции: не мешает контенту и растворяется по краям */
.grid-paper--fade::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-decor);
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-paper-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-paper-color) 1px, transparent 1px);
    background-size: var(--grid-paper-step) var(--grid-paper-step);
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}

.grid-paper--fade > * {
    position: relative;
    z-index: var(--z-content);
}

/* Мягкое цветное пятно под иллюстрацией */
.blob {
    position: absolute;
    z-index: var(--z-decor);
    inline-size: clamp(9rem, 30vw, 22rem);
    aspect-ratio: 1 / 1;
    border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
    background-color: var(--c-sky-soft);
    pointer-events: none;
}

.blob--cream {
    background-color: var(--c-cream);
}

.blob--red {
    background-color: var(--c-red-soft);
}

/* Маскот-корги: иллюстративный акцент */
.mascot {
    inline-size: clamp(5rem, 18vw, 11rem);
    height: auto;
}

.mascot--tilt {
    transform: rotate(-6deg);
}

/* =============================================================================
   10. Лайтбокс галереи (единственный поп-ап, ему разрешена тень)
   ============================================================================= */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background-color: var(--c-ink-veil-strong);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--dur) var(--ease),
        visibility 0s linear var(--dur);
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s;
}

.lightbox__figure {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: min(100%, 76rem);
    max-height: 100%;
    margin: 0;
    padding: var(--space-3);
    background-color: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

.lightbox__img {
    max-width: 100%;
    max-height: 68vh;
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox__caption {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--c-muted);
    text-align: center;
}

.lightbox__counter {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--c-muted);
    text-align: center;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-size);
    height: var(--tap-size);
    border-radius: 50%;
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    color: var(--c-blue-deep);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
    background-color: var(--c-blue-deep);
    color: var(--c-surface);
}

.lightbox__close {
    inset-block-start: calc(var(--tap-size) * -1 - var(--space-2));
    inset-inline-end: 0;
}

.lightbox__close::before,
.lightbox__close::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 1rem;
    height: 2px;
    background-color: currentcolor;
}

.lightbox__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.lightbox__nav {
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.lightbox__nav--prev {
    inset-inline-start: calc(var(--space-2) * -1);
}

.lightbox__nav--next {
    inset-inline-end: calc(var(--space-2) * -1);
}

.lightbox__nav::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-block-start: 2px solid currentcolor;
    border-inline-start: 2px solid currentcolor;
}

.lightbox__nav--prev::before {
    transform: translateX(2px) rotate(-45deg);
}

.lightbox__nav--next::before {
    transform: translateX(-2px) rotate(135deg);
}

@media (min-width: 915px) {
    .lightbox__nav--prev {
        inset-inline-start: calc(var(--tap-size) * -1 - var(--space-4));
    }

    .lightbox__nav--next {
        inset-inline-end: calc(var(--tap-size) * -1 - var(--space-4));
    }

    .lightbox__img {
        max-height: 74vh;
    }
}

/* Кликабельная миниатюра галереи */
.thumb {
    position: relative;
    display: block;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--c-sky-soft);
    cursor: zoom-in;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}

.thumb:hover,
.thumb:focus-visible {
    border-color: var(--c-blue);
}

.thumb:hover img {
    transform: scale(1.04);
}

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

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.breadcrumbs li + li::before {
    content: "/";
    color: var(--c-sky);
}

.breadcrumbs a {
    color: var(--c-muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--c-blue);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--c-ink);
}

/* =============================================================================
   12. Фирменная графика и декор: печать, маскот, номера, скотч, стразы, билет
   ============================================================================= */

/* Круглая печать с Биг-Беном (инлайн-SVG из includes/brand/seal.html) */
.seal {
    display: block;
    height: auto;
    color: var(--c-blue-deep);
}

.seal--lg {
    width: clamp(6rem, 5rem + 6vw, 9rem);
}

/* Маскот-корги: три размера, наклон по желанию */
.mascot {
    display: block;
    margin: 0;
    inline-size: clamp(6rem, 22vw, 11rem);
}

.mascot--sm {
    inline-size: clamp(4.5rem, 16vw, 7rem);
}

.mascot--lg {
    inline-size: clamp(9rem, 34vw, 20rem);
}

.mascot--tilt {
    transform: rotate(-6deg);
}

.mascot__image {
    width: 100%;
    height: auto;
}

.mascot__caption {
    margin-block-start: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: center;
    color: var(--c-muted);
}

/* Номер карточки в квадратных скобках: [01] */
.num-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    color: var(--c-blue);
}

.num-badge::before {
    content: "[";
    color: var(--c-sky);
}

.num-badge::after {
    content: "]";
    color: var(--c-sky);
}

/* Огромный бледный номер вместо иконки (блок 01 / 02 / 03) */
.big-num {
    font-family: var(--font-display);
    font-size: clamp(3rem, 2rem + 5vw, 5.5rem);
    font-weight: var(--fw-black);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--c-sky);
}

/* Контурный заголовок (outline) */
.title-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c-blue-deep);
    paint-order: stroke fill;
}

/* Полоска-«скотч» в цветах британского флага, которой приклеены полароиды */
.tape {
    position: absolute;
    display: block;
    width: 7.5rem;
    height: 1.4rem;
    background-image: url("../img/decor/tape-uk.c7dfa308e231.svg");
    background-size: 100% 100%;
    opacity: 0.9;
    pointer-events: none;
    transform: rotate(-4deg);
}

.tape--right {
    transform: rotate(5deg);
}

/* Звёзды-«стразы» */
.sparkle {
    position: absolute;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("../img/decor/sparkle.4ee4e09fbd45.svg");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.sparkle--sm {
    width: 0.8rem;
    height: 0.8rem;
}

.sparkle--lg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Корона-микроиконка на бейджах уровня */
.crown-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.crown-badge::before {
    content: "";
    width: 1rem;
    height: 0.85rem;
    background-image: url("../img/decor/crown.3846eb54be40.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Билет с перфорированным краем (тарифы, форматы) */
.ticket {
    position: relative;
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-md);
}

.ticket__stub {
    position: relative;
    padding: var(--space-4) var(--space-5);
    border-block-start: 2px dashed var(--c-sky);
}

/* Полукруглые вырезы по краям линии отрыва */
.ticket__stub::before,
.ticket__stub::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--border-width) * -1 - 0.7rem);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--ticket-bg, var(--c-bg));
    border: var(--border-width) solid var(--c-blue-deep);
}

.section--sky .ticket__stub::before,
.section--sky .ticket__stub::after {
    --ticket-bg: var(--c-sky-soft);
}

.section--cream .ticket__stub::before,
.section--cream .ticket__stub::after {
    --ticket-bg: var(--c-cream);
}

.section--surface .ticket__stub::before,
.section--surface .ticket__stub::after {
    --ticket-bg: var(--c-surface);
}

.ticket__stub::before {
    inset-inline-start: -0.9rem;
    clip-path: inset(0 0 0 50%);
}

.ticket__stub::after {
    inset-inline-end: -0.9rem;
    clip-path: inset(0 50% 0 0);
}

/* Круглая печать-стикер «Проверено методистами» */
.stamp {
    display: inline-grid;
    place-items: center;
    width: 7rem;
    aspect-ratio: 1 / 1;
    padding: var(--space-2);
    border: 3px double var(--c-blue);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    line-height: 1.25;
    overflow-wrap: normal;
    word-break: keep-all;
    text-align: center;
    text-transform: uppercase;
    color: var(--c-blue);
    transform: rotate(-10deg);
}

/* Системные сообщения: текст и кнопка закрытия */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.alert__text {
    margin: 0;
    flex: 1 1 auto;
}

.alert__close {
    position: relative;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: inherit;
}

.alert__close::before,
.alert__close::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 0.9rem;
    height: 2px;
    background-color: currentcolor;
}

.alert__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.alert__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block: var(--space-4);
}

/* Cutout-фото педагога с инициалами, когда фотографии ещё нет */
.initials {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--c-sky-soft);
    border: 4px solid var(--c-sky);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1rem + 4vw, 2.75rem);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    color: var(--c-blue-deep);
}

/* Чек-лист с галочками в круге */
.checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    margin: 0;
}

.checklist li::before {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    margin-block-start: 0.1rem;
    border-radius: 50%;
    background-color: var(--c-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.checklist--red li::before {
    background-color: var(--c-red);
}

/* =============================================================================
   13. Big Ben Club: фото-маскоты («живой» корги), рамки для фотографий, сердечки
   ============================================================================= */

/* Фотография в скруглённой рамке с обводкой — приём с баннеров заказчицы */
.mascot--photo.mascot--frame {
    padding: 4px;
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-lg);
    background-color: var(--c-surface);
}

.mascot--photo.mascot--frame .mascot__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-lg) - 4px);
    object-fit: cover;
}

/* Круглый значок с мордочкой */
.mascot--photo.mascot--circle {
    padding: 3px;
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: 50%;
    background-color: var(--c-surface);
}

.mascot--photo.mascot--circle .mascot__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

/* Вырезанный PNG без рамки (corgi-crown.png — корги в королевской короне) */
.mascot--photo.mascot--cutout {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
}

.mascot--photo.mascot--cutout .mascot__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}


/* Сердечки: флаг в блёстках, «BIGBEN CLUB», фото в сердечке */
.heart-flag,
.heart-club,
.heart-photo {
    display: block;
    width: 4.5rem;
    height: auto;
}

.heart-club__text {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    fill: var(--c-blue-deep);
}

/* Каллиграфическая подпись над заголовком («Знакомьтесь») */
.script-note {
    margin: 0;
    font-family: var(--font-script);
    font-size: var(--fs-2xl);
    line-height: 1;
    color: var(--c-blue);
}