/* =============================================================================
   pages/about.css — страница «О школе»: онлайн-класс с видом на Лондон.
   Подключается в {% block extra_css %} шаблона pages/about.html после
   inner.css и legal.css (типографика .prose — там).
   ============================================================================= */

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

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

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

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

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

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

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

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

/* Класс: иллюстрация в белой рамке, скотч, стразы, подпись-«табличка» */
.about-hero__media {
    position: relative;
    padding-block-end: var(--space-6);
}

.classroom {
    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);
}

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

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

.classroom__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-block-start: var(--space-3);
    padding-inline-start: clamp(4rem, 18vw, 6rem);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.classroom__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--c-red-soft);
    border: 1px solid var(--c-red);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-red-dark);
}

.classroom__badge::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--c-red);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

.classroom__tape {
    inset-block-start: -0.8rem;
    inset-inline-end: 1.5rem;
    z-index: var(--z-content);
}

.classroom__sparkle--1 {
    inset-block-start: 10%;
    inset-inline-start: -0.6rem;
}

.classroom__sparkle--2 {
    inset-block-end: 30%;
    inset-inline-end: -0.6rem;
}

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

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

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

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

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

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

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

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

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

/* --- 2. История: текст с буквицей и карточка «коротко» ---------------------- */

.story {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

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

.story__main .section__title {
    margin: 0;
}

.story__prose {
    max-width: 44rem;
    font-size: var(--fs-lg);
    line-height: var(--lh-loose);
}

.story__prose h2 {
    font-size: var(--fs-xl);
    margin-block-start: var(--space-6);
}

/* Каллиграфическая буквица в первом абзаце — приём с референса */
.story__prose--dropcap > p:first-of-type::first-letter {
    float: left;
    margin: 0.1em 0.12em 0 0;
    font-family: var(--font-display);
    font-size: 4.6em;
    font-weight: var(--fw-black);
    line-height: 0.78;
    color: var(--c-red);
}

.story__note {
    font-size: var(--fs-sm);
}

.brief {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5) var(--space-5);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-lg);
}

.brief__seal {
    position: absolute;
    inset-block-start: -1.75rem;
    inset-inline-end: var(--space-5);
    width: 3.5rem;
    height: 3.5rem;
    transform: rotate(8deg);
}

.brief__seal-svg {
    width: 100%;
    height: 100%;
}

.brief__title {
    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);
}

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

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

.brief__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    background-color: var(--c-sky-soft);
    border-radius: var(--radius-sm);
}

.brief__value {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--c-red);
    overflow-wrap: anywhere;
}

.brief__caption {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--c-ink);
}

.brief__list li {
    font-size: var(--fs-sm);
}

@media (min-width: 915px) {
    .story {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        gap: var(--space-9);
    }

    .story__aside {
        position: sticky;
        inset-block-start: calc(var(--header-height) + var(--space-6));
    }
}

/* --- 3. Принципы: крупные номера ------------------------------------------- */

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

.principle {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--dur) var(--ease);
}

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

.principle__num {
    color: var(--c-sky);
}

.principle__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--c-sky-soft);
    border: var(--border-width) solid var(--c-sky);
}

.principle__icon img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

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

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

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

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

/* --- 4. Хроника: вертикальная линия с годами ------------------------------- */

.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 0 0 calc(var(--space-4) + 1rem);
    list-style: none;
}

/* Красная пунктирная линия слева, как маршрут на карте */
.timeline::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem 0.5rem;
    inset-inline-start: 0.45rem;
    border-inline-start: 2px dashed var(--c-red);
    opacity: 0.6;
}

.timeline__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
}

/* Маркер на линии */
.timeline__item::before {
    content: "";
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-start: calc(-1 * (var(--space-4) + 1rem) + 0.45rem - 0.4rem);
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background-color: var(--c-surface);
    border: 3px solid var(--c-red);
}

.timeline__item--now::before {
    background-color: var(--c-red);
    box-shadow: none;
}

.timeline__year {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-red);
}

.timeline__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-sky-line);
    border-radius: var(--radius-md);
    transition: border-color var(--dur) var(--ease);
}

.timeline__card:hover {
    border-color: var(--c-blue);
}

.timeline__card--accent {
    background-color: var(--c-sky);
    border-color: var(--c-blue-deep);
}

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

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

@media (min-width: 915px) {
    /* На десктопе — двухколоночная «змейка» вокруг центральной линии */
    .timeline {
        padding: 0;
        gap: var(--space-6);
    }

    .timeline::before {
        inset-inline-start: 50%;
        transform: translateX(-1px);
    }

    .timeline__item {
        width: calc(50% - var(--space-6));
    }

    .timeline__item:nth-child(odd) {
        align-self: flex-start;
        align-items: flex-end;
        text-align: end;
    }

    .timeline__item:nth-child(even) {
        align-self: flex-end;
    }

    .timeline__item::before {
        inset-block-start: 0.25rem;
    }

    .timeline__item:nth-child(odd)::before {
        inset-inline-start: auto;
        inset-inline-end: calc(-1 * var(--space-6) - 0.45rem);
    }

    .timeline__item:nth-child(even)::before {
        inset-inline-start: calc(-1 * var(--space-6) - 0.45rem);
    }

    .timeline__item:nth-child(odd) .timeline__card {
        align-items: flex-end;
    }
}

/* --- 5. Больше, чем уроки: три карточки с иллюстрациями -------------------- */

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

.more-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    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);
}

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

.more-card__art {
    display: grid;
    place-items: center;
    min-height: 11rem;
    padding: var(--space-5);
    background-color: var(--c-sky-soft);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: var(--grid-paper-step) var(--grid-paper-step);
    border-block-end: var(--border-width) solid var(--c-blue-deep);
}

.more-card__art img {
    width: min(100%, 12rem);
    height: auto;
}

.more-card__art--wide {
    padding: 0;
}

.more-card__art--wide img {
    width: 100%;
    height: 11rem;
    object-fit: cover;
    border-radius: 0;
}

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

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

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

.more-card__body .link-arrow {
    margin-block-start: auto;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .classroom,
    .classroom:hover,
    .principle:hover,
    .more-card:hover {
        transform: none;
    }

    .classroom__badge::before {
        animation: none;
    }
}

/* Открытка с Кембриджем перед хроникой: фото в рамке с наклоном, сердце-флаг и подпись */
.timeline__postcard {
    position: relative;
    max-width: 22rem;
    margin: 0 auto var(--space-7);
    padding: 5px 5px 0;
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-lg);
    background-color: var(--c-surface);
    transform: rotate(-2deg);
}

.timeline__postcard-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-lg) - 5px) calc(var(--radius-lg) - 5px) 0 0;
}

.timeline__postcard-heart {
    position: absolute;
    inset-block-start: -1.25rem;
    inset-inline-end: -1rem;
    width: 4rem;
    transform: rotate(12deg);
}

.timeline__postcard-caption {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-script);
    font-size: var(--fs-xl);
    line-height: 1;
    text-align: center;
    color: var(--c-blue-deep);
}