/* =============================================================================
   pages/contacts.css — страница «Контакты»: открытка из Лондона.
   Подключается в {% block extra_css %} шаблона pages/contacts.html
   после inner.css (общие блоки внутренних страниц и реквизиты — там).
   ============================================================================= */

/* --- 1. Первый экран: сплит «текст | открытка» ------------------------------ */

.postcard-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--section-y-sm) var(--section-y);
    background-color: var(--c-bg);
}

.postcard-hero__inner {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: center;
}

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

.postcard-hero__title {
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    letter-spacing: -0.03em;
}

.postcard-hero__lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--c-muted);
    max-width: 32rem;
}

.postcard-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
}

/* Часы: циферблат + режим работы + живое время по Москве */
.postcard-hero__hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: center;
    margin-block-start: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-sky-line);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}

.postcard-hero__clock {
    display: block;
    width: 3rem;
    height: 3rem;
}

.postcard-hero__clock img {
    width: 100%;
    height: 100%;
}

.postcard-hero__hours-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--c-ink);
}

.postcard-hero__now {
    color: var(--c-muted);
}

.postcard-hero__now time {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--c-blue-deep);
}

.postcard-hero__status {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

.postcard-hero__status:empty {
    display: none;
}

.postcard-hero__status::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: var(--space-2);
    border-radius: 50%;
    background-color: var(--c-muted);
    vertical-align: middle;
}

.postcard-hero__status.is-open {
    color: var(--c-success);
}

.postcard-hero__status.is-open::before {
    background-color: var(--c-success);
}

.postcard-hero__status.is-closed {
    color: var(--c-muted);
}

/* Открытка: панорама в белой рамке, скотч по углам, печать и подпись */
.postcard-hero__media {
    position: relative;
    padding-block-end: var(--space-6);
}

.postcard {
    position: relative;
    margin: 0;
    padding: var(--space-3) var(--space-3) var(--space-4);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-md);
    transform: rotate(-1.5deg);
    transition: transform var(--dur-slow) var(--ease);
}

.postcard:hover {
    transform: rotate(0deg);
}

.postcard__image {
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-md) - 6px);
}

.postcard__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-start: var(--space-3);
    /* Слева остаётся место под корги, который выглядывает из-за угла */
    padding-inline-start: clamp(4rem, 18vw, 6.5rem);
}

.postcard__greeting {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-style: italic;
    font-weight: var(--fw-semibold);
    color: var(--c-blue-deep);
}

.postcard__stamp {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    transform: rotate(8deg);
}

.postcard__seal {
    width: 100%;
    height: 100%;
}

.postcard__tape--left {
    inset-block-start: -0.8rem;
    inset-inline-start: 1.25rem;
    z-index: var(--z-content);
}

.postcard__tape--right {
    inset-block-start: -0.8rem;
    inset-inline-end: 1.25rem;
    z-index: var(--z-content);
}

.postcard__sparkle--1 {
    inset-block-start: 8%;
    inset-inline-start: -0.5rem;
}

.postcard__sparkle--2 {
    inset-block-end: 28%;
    inset-inline-end: -0.6rem;
}

/* Корги выглядывает из-за нижнего края открытки */
.postcard-hero__mascot {
    position: absolute;
    inset-block-end: 0.25rem;
    inset-inline-start: -0.75rem;
    z-index: var(--z-content);
}

.postcard-hero__mascot .mascot {
    inline-size: clamp(5.5rem, 22vw, 9rem);
}

@media (min-width: 515px) {
    .postcard-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .postcard-hero__mascot {
        inset-inline-start: -1rem;
        inset-block-end: -0.5rem;
    }
}

@media (min-width: 915px) {
    .postcard-hero {
        padding-block: var(--section-y);
    }

    .postcard-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-8);
    }

    .postcard-hero__media {
        padding-inline-start: var(--space-5);
    }

    .postcard-hero__mascot {
        inset-inline-start: -1rem;
        inset-block-end: 0.5rem;
    }

    .postcard-hero__mascot .mascot {
        inline-size: 9rem;
    }
}

@media (min-width: 1200px) {
    .postcard-hero__inner {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    .postcard-hero__mascot .mascot {
        inline-size: 9.5rem;
    }
}

/* --- 2. Каналы связи: карточки с иллюстрациями ------------------------------ */

.channels {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.channel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-5);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease);
}

.channel:hover {
    transform: translateY(-3px);
}

/* Иллюстрация: на узких экранах — над текстом, на широких — слева */
.channel__art {
    width: auto;
    height: 6.5rem;
    justify-self: start;
}

.channel__art--clock {
    height: 5.5rem;
}

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

.channel__label {
    margin: 0;
    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-blue);
}

.channel__value {
    margin: 0;
    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);
    overflow-wrap: anywhere;
}

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

.channel__value a:hover {
    color: var(--c-red);
}

.channel__value a[href^="tel:"] {
    white-space: nowrap;
}

.channel__value--secondary {
    font-size: var(--fs-lg);
}

.channel__value--text {
    font-family: var(--font-text);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
}

.channel__note {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--c-muted);
}

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

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

.channel__actions .btn.is-done {
    border-color: var(--c-success);
    color: var(--c-success);
}

.channel__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
}

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

.channel__social-icon {
    display: inline-flex;
}

.channel__social-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Цветовые акценты карточек: тонкая полоса сверху в цвет иллюстрации */
.channel::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 6px;
    background-color: var(--c-sky);
}

.channel--phone::before,
.channel--mail::before {
    background-color: var(--c-red);
}

.channel--chat::before {
    background-color: var(--c-blue);
}

.channel--hours::before {
    background-color: var(--c-gold);
}

@media (min-width: 515px) {
    .channel {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        padding: var(--space-6) var(--space-5) var(--space-5);
    }

    .channel__art {
        height: 8rem;
    }

    .channel__art--clock {
        height: 6rem;
        margin-block-start: var(--space-2);
    }
}

@media (min-width: 915px) {
    .channels {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

/* --- 3. Маршрут до первого урока: четыре остановки --------------------------- */

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

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

.route__intro .section__title {
    margin: 0;
}

.route__mascot {
    display: none;
}

.route__steps {
    position: relative;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.route__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    padding-inline-start: calc(var(--space-5) + 3.25rem);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-md);
}

/* Маркер остановки — круг с номером, как на схеме метро */
.route__marker {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-start: var(--space-4);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--c-surface);
    border: 3px solid var(--c-red);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    color: var(--c-red);
}

.route__title {
    font-size: var(--fs-lg);
    color: var(--c-blue-deep);
}

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

/* Пунктирная линия маршрута между остановками */
.route__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--space-4) + 1.25rem - 1px);
    inset-block-start: calc(var(--space-5) + 2.5rem);
    inset-block-end: calc(var(--space-3) * -1 - 2px);
    border-inline-start: 2px dashed var(--c-red);
    opacity: 0.6;
}

@media (min-width: 515px) {
    .route__mascot {
        display: block;
        margin-block-start: var(--space-2);
    }
}

@media (min-width: 915px) {
    .route {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
        gap: var(--space-8);
        align-items: start;
    }

    .route__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .route__step {
        padding-inline-start: var(--space-5);
        padding-block-start: calc(var(--space-5) + 3rem);
    }

    .route__marker {
        inset-inline-start: var(--space-5);
    }

    /* На широких экранах линия идёт горизонтально от маркера к маркеру */
    .route__step:not(:last-child)::after {
        inset-block-start: calc(var(--space-5) + 1.25rem - 1px);
        inset-block-end: auto;
        inset-inline-start: calc(var(--space-5) + 2.5rem);
        inset-inline-end: calc(var(--space-4) * -1 - 2px);
        border-inline-start: 0;
        border-block-start: 2px dashed var(--c-red);
    }

    .route__step:nth-child(2n)::after {
        display: none;
    }
}

@media (min-width: 1200px) {
    .route__steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .route__step:nth-child(2n)::after {
        display: block;
    }

    .route__step:last-child::after {
        display: none;
    }
}

/* --- 4. Онлайн: ноутбук и чек-лист ------------------------------------------- */

.online {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: center;
    padding: var(--space-6) var(--space-5);
    background-color: var(--c-cream);
    border: 1px solid var(--c-gold);
    border-radius: var(--radius-lg);
}

.online__art {
    display: flex;
    justify-content: center;
}

.online__art img {
    width: min(100%, 18rem);
    height: auto;
}

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

.online__body .section__title {
    margin: 0;
    font-size: var(--fs-2xl);
}

.online__list li {
    font-size: var(--fs-base);
}

.online__actions {
    margin: 0;
}

@media (min-width: 915px) {
    .online {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: var(--space-8);
        padding: var(--space-8) var(--space-7);
    }

    .online__art img {
        width: min(100%, 22rem);
    }
}

/* --- Уважение к настройкам пользователя ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .postcard,
    .postcard:hover {
        transform: none;
    }

    .channel:hover {
        transform: none;
    }
}