/* =============================================================================
   pages/home.css — главная страница и карточки, которые она делит с внутренними
   страницами (направления, форматы, педагоги, результаты, отзывы, клубы).
   Подключается в {% block extra_css %} шаблонов. Компоненты — в components.css,
   здесь раскладка секций и вид карточек.
   ============================================================================= */

/* --- Первый экран: сплит «текст | голубая панель» ------------------------- */

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

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

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

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

/* Заголовок целиком каллиграфией («Big Ben Club»), рядом — контурное сердечко */
.hero__title--script {
    font-family: var(--font-script);
    font-size: clamp(3.25rem, 2rem + 6vw, 6.75rem);
    font-weight: var(--fw-regular);
    line-height: 0.95;
    letter-spacing: 0;
    color: var(--c-blue-deep);
}

.hero__heart-outline {
    display: inline-block;
    width: 0.42em;
    height: auto;
    margin-inline-start: 0.12em;
    vertical-align: 0.05em;
    color: var(--c-red);
}

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

.hero__checklist {
    margin-block: var(--space-1);
}

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

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

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

/* Голубая панель с иллюстрацией */
.hero__media {
    position: relative;
}

.hero__panel {
    position: relative;
    display: grid;
    place-items: end center;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
    background-color: var(--c-sky);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-lg);
    overflow: visible;
}

.hero__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
    background-size: var(--grid-paper-step) var(--grid-paper-step);
    pointer-events: none;
}

/* Корги — слева внизу, чуть больше половины ширины панели; корона выходит за верхний край */
.hero__mascot {
    position: absolute;
    z-index: var(--z-content);
    inset-block-end: -2px;
    inset-inline-start: 3%;
    width: 47%;
}

.hero__mascot .mascot {
    inline-size: 100%;
}

/* Сердечки-наклейки: крупный флаг в блёстках справа по центру, Биг-Бен в сердечке справа внизу,
   «BIGBEN CLUB» маленькое сверху — пропорции с коллажа заказчицы */
.hero__heart-flag {
    position: absolute;
    z-index: var(--z-content);
    inset-block-start: 34%;
    inset-inline-end: 4%;
    width: 40%;
    transform: rotate(8deg);
}

.hero__heart-photo {
    position: absolute;
    z-index: var(--z-content);
    inset-block-end: 3%;
    inset-inline-end: 6%;
    width: 28%;
    transform: rotate(-6deg);
}


.hero__mascot--corner {
    position: absolute;
    inset-block-end: -0.5rem;
    inset-inline-start: -0.5rem;
    width: auto;
}

.hero__photo {
    position: relative;
    z-index: var(--z-content);
    width: min(100%, 22rem);
}

.hero__photo .cutout__img {
    margin-block-end: -2px;
}

/* Кегль меньше базового у .sticker: слово «Кембриджские» должно помещаться в круг */
.hero__sticker {
    position: absolute;
    z-index: var(--z-content);
    inset-block-start: -1rem;
    inset-inline-end: 0.5rem;
    width: clamp(6.5rem, 5rem + 5vw, 10rem);
    font-size: 0.6875rem;
}

.hero__tape {
    inset-block-start: -0.75rem;
    inset-inline-start: 52%;
    z-index: var(--z-content);
}

.hero__sparkle--1 {
    inset-block-start: 14%;
    inset-inline-start: 8%;
}

.hero__sparkle--2 {
    inset-block-start: 42%;
    inset-inline-end: 10%;
}

.hero__sparkle--3 {
    inset-block-end: 22%;
    inset-inline-start: 16%;
}

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

    .hero__panel {
        aspect-ratio: 1 / 0.92;
    }

    .hero__heart-flag {
        inset-block-start: 26%;
    }

    .hero__sticker {
        inset-block-start: -1.5rem;
        inset-inline-end: -1.5rem;
        font-size: 0.75rem;
    }
}

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

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

    .hero__panel {
        aspect-ratio: 1 / 1;
    }
}

@media (min-width: 1200px) {
    .hero__panel {
        aspect-ratio: 1 / 1;
    }
}

/* --- Преимущества: одна рамка с разделителями ----------------------------- */

.advantages {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-lg);
    background-color: var(--c-surface);
    overflow: hidden;
}

.advantage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-block-end: 1px solid var(--c-sky-line);
    transition: background-color var(--dur) var(--ease);
}

.advantage:last-child {
    border-block-end: 0;
}

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

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

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

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

.advantage__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--c-ink);
}

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

    .advantage {
        border-inline-end: 1px solid var(--c-sky-line);
    }

    .advantage:nth-child(2n) {
        border-inline-end: 0;
    }

    /* Нижняя граница у двух последних снимается */
    .advantage:nth-last-child(-n + 2):nth-child(2n + 1),
    .advantage:last-child {
        border-block-end: 0;
    }
}

@media (min-width: 915px) {
    .advantages {
        grid-template-columns: repeat(3, 1fr);
    }

    .advantage {
        padding: var(--space-6) var(--space-5);
        border-inline-end: 1px solid var(--c-sky-line);
        border-block-end: 1px solid var(--c-sky-line);
    }

    .advantage:nth-child(2n) {
        border-inline-end: 1px solid var(--c-sky-line);
    }

    .advantage:nth-child(3n) {
        border-inline-end: 0;
    }

    .advantage:nth-last-child(-n + 3):nth-child(3n + 1),
    .advantage:nth-last-child(-n + 3):nth-child(3n + 1) ~ .advantage {
        border-block-end: 0;
    }
}

/* --- Цифры ----------------------------------------------------------------- */

.stats-section {
    padding-block: var(--section-y-sm);
}

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

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

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-sky-line);
    border-radius: var(--radius-md);
    text-align: start;
}

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
    overflow-wrap: anywhere;
    font-weight: var(--fw-black);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-red);
}

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

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

    .stat {
        padding: var(--space-5);
    }
}

/* --- Общее для карточек-статей: ссылка на всю карточку -------------------- */

.direction-card,
.teacher-card,
.club-card {
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.direction-card__link,
.teacher-card__link,
.club-card__link {
    color: inherit;
    text-decoration: none;
}

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

.direction-card:hover,
.direction-card:focus-within,
.teacher-card:hover,
.teacher-card:focus-within,
.club-card:hover,
.club-card:focus-within {
    border-color: var(--c-blue);
}

.direction-card__more,
.teacher-card__more,
.club-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: auto;
    padding-block-start: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-blue);
}

.direction-card__more::after,
.teacher-card__more::after,
.club-card__more::after {
    content: "→";
    transition: transform var(--dur) var(--ease);
}

.direction-card:hover .direction-card__more::after,
.teacher-card:hover .teacher-card__more::after,
.club-card:hover .club-card__more::after {
    transform: translateX(4px);
}

/* --- Направления обучения ------------------------------------------------- */

.direction-card {
    gap: 0;
    padding: 0;
    border-color: var(--c-blue-deep);
}

.direction-card__media {
    margin: 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);
}

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

.direction-card__media--icon {
    display: grid;
    place-items: center;
    padding: var(--space-5);
}

.direction-card__icon {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
}

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

.direction-card__eyebrow {
    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-red);
}

.direction-card__title {
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
    color: var(--c-blue-deep);
}

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

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

.direction-card__level {
    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);
    border: 1px solid var(--c-sky);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-ink);
}

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

.direction-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--c-sky-line);
}

.direction-card__meta:empty {
    display: none;
}

.direction-card__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.direction-card__meta-title {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-muted);
}

.direction-card__meta-value {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    color: var(--c-blue-deep);
}

/* --- Форматы занятий: билет с перфорацией ---------------------------------- */

.format-ticket {
    --format-accent: var(--c-sky);
    --format-ink: var(--c-ink);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: visible;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

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

.format-ticket--sky {
    --format-accent: var(--c-sky);
    --format-ink: var(--c-ink);
}

.format-ticket--blue {
    --format-accent: var(--c-blue);
    --format-ink: var(--c-surface);
}

.format-ticket--red {
    --format-accent: var(--c-red);
    --format-ink: var(--c-surface);
}

.format-ticket--cream {
    --format-accent: var(--c-cream);
    --format-ink: var(--c-ink);
}

/* Цветная «шапка» билета */
.format-ticket__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background-color: var(--format-accent);
    color: var(--format-ink);
    border-radius: calc(var(--radius-md) - var(--border-width)) calc(var(--radius-md) - var(--border-width)) 0 0;
    border-block-end: var(--border-width) solid var(--c-blue-deep);
}

.format-ticket__num {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    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;
    opacity: 0.85;
}

.format-ticket__title {
    margin: 0;
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
    color: inherit;
}

.format-ticket__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--space-4);
    padding: var(--space-5);
}

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

.format-ticket__text > :last-child {
    margin-block-end: 0;
}

.format-ticket__suits {
    padding: var(--space-3) var(--space-4);
    background-color: var(--c-cream);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.format-ticket__suits > :last-child {
    margin-block-end: 0;
}

.format-ticket__suits-title {
    margin: 0 0 var(--space-1);
    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);
}

/* Корешок билета: параметры и направления */
.format-ticket__stub {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: auto;
    padding: var(--space-4) var(--space-5) var(--space-5);
    background-color: var(--c-bg);
    border-radius: 0 0 calc(var(--radius-md) - var(--border-width)) calc(var(--radius-md) - var(--border-width));
}

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

.format-ticket__fact {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--c-sky);
    border-radius: var(--radius-pill);
    background-color: var(--c-surface);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-ink);
}

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

.format-ticket__dirs-title {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-muted);
}

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

.format-ticket__dir {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-blue);
    text-decoration: none;
    background-color: var(--c-sky-soft);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

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

/* На светло-голубых секциях корешок белый, чтобы билет читался */
.section--sky .format-ticket__stub {
    background-color: var(--c-surface);
}

/* --- Педагоги: cutout-фото с цветной обводкой ----------------------------- */

.teacher-card {
    --outline: var(--c-sky);
    gap: var(--space-4);
    padding: var(--space-5);
    padding-block-start: var(--space-8);
    margin-block-start: var(--space-6);
    border-color: var(--c-blue-deep);
    overflow: visible;
}

.teacher-card--sky {
    --outline: var(--c-sky);
}

.teacher-card--blue {
    --outline: var(--c-blue);
}

.teacher-card--red {
    --outline: var(--c-red);
}

/* Фото выходит за верхнюю границу карточки */
.teacher-card__media {
    display: flex;
    justify-content: center;
    margin-block-start: calc(var(--space-8) * -1 - var(--space-6));
}

.teacher-card__photo,
.teacher-card__initials {
    width: min(60%, 9.5rem);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 5px solid var(--outline);
    background-color: var(--c-surface);
    object-fit: cover;
}

.teacher-card__initials {
    display: grid;
    place-items: center;
    background-color: var(--c-sky-soft);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1rem + 4vw, 2.5rem);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    color: var(--c-blue-deep);
}

/* Вырезанное фото без фона: показываем целиком, без круглой обрезки */
.teacher-card--cutout .teacher-card__photo {
    border-radius: 0;
    border: 0;
    background: none;
    width: min(70%, 12rem);
    aspect-ratio: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 0 var(--outline));
}

.teacher-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--space-3);
    text-align: center;
}

.teacher-card__name {
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
    color: var(--c-blue-deep);
}

.teacher-card__role {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.teacher-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.teacher-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--c-cream);
    border: 1px solid var(--c-gold);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-ink);
}

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

.teacher-card__certificates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: var(--space-3) 0 0;
    border-block-start: 1px solid var(--c-sky-line);
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.teacher-card__certificate::after {
    content: "·";
    margin-inline-start: var(--space-2);
    color: var(--c-sky);
}

.teacher-card__certificate:last-child::after {
    content: none;
}

.teacher-card__more {
    justify-content: center;
}

/* --- Результаты учеников: «было → стало» ---------------------------------- */

.case-card {
    gap: var(--space-4);
    padding: var(--space-5);
    border-color: var(--c-blue-deep);
    background-color: var(--c-cream);
}

.case-card__media {
    display: flex;
    justify-content: center;
}

.case-card__photo {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    border: 4px solid var(--c-sky);
    object-fit: cover;
}

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

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

.case-card__direction {
    margin: 0;
    font-size: var(--fs-sm);
}

.case-card__path {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr;
    margin: 0;
}

.case-card__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-sky);
    border-radius: var(--radius-md);
}

.case-card__step--to {
    border-color: var(--c-blue);
    background-color: var(--c-sky-soft);
}

.case-card__step-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-muted);
}

.case-card__step--to .case-card__step-title {
    color: var(--c-blue);
}

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

/* Стрелка между шагами */
.case-card__step--to::before {
    content: "↓";
    position: absolute;
    inset-block-start: calc(var(--space-2) * -1 - 0.5rem);
    inset-inline-start: var(--space-4);
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    color: var(--c-red);
    background-color: var(--c-cream);
    padding-inline: 4px;
    line-height: 1;
}

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

.case-card__fact {
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    background-color: var(--c-surface);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
}

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

.case-card__quote {
    margin: 0;
    padding-inline-start: var(--space-4);
    border-inline-start: var(--border-width) solid var(--c-gold);
    font-style: italic;
}

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

/* --- Отзывы --------------------------------------------------------------- */

.review-card {
    gap: var(--space-4);
    padding: var(--space-5);
    border-color: var(--c-blue-deep);
}

.review-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.review-card__avatar {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 3px solid var(--c-sky);
    overflow: hidden;
    background-color: var(--c-sky-soft);
}

.review-card__avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-card__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.review-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    color: var(--c-blue-deep);
}

.review-card__about {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.review-card__rating {
    display: inline-flex;
    gap: 1px;
    margin: 0;
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    color: var(--c-sky);
}

.review-card__star--filled {
    color: var(--c-gold);
}

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

.review-card__quote {
    position: relative;
    margin: 0;
    padding: 0 0 0 var(--space-4);
    border-inline-start: var(--border-width) solid var(--c-sky);
    font-style: italic;
}

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

/* Видеоотзыв: адаптивная рамка 16:9 */
.review-card__video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--c-sky-soft);
    border: var(--border);
}

.review-card__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Скриншот переписки — как полароид, приклеенный скотчем */
.review-card__screenshot {
    position: relative;
    margin: 0;
    padding: var(--space-2) var(--space-2) var(--space-4);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    transform: rotate(-1.5deg);
}

.review-card__screenshot::before {
    content: "";
    position: absolute;
    inset-block-start: -0.7rem;
    inset-inline-start: 50%;
    width: 6rem;
    height: 1.3rem;
    transform: translateX(-50%) rotate(-3deg);
    background-image: url("../../img/decor/tape-uk.c7dfa308e231.svg");
    background-size: 100% 100%;
    opacity: 0.9;
}

.review-card__screenshot-image {
    width: 100%;
    height: auto;
}

.review-card__footer {
    margin-block-start: auto;
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

/* --- Внеурочная деятельность ---------------------------------------------- */

.club-card {
    gap: 0;
    padding: 0;
    border-color: var(--c-blue-deep);
}

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

.club-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

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

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

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

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

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

.club-card__fact {
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-sky);
    background-color: var(--c-sky-soft);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
}

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

.club-card__events {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) 0 0;
    border-block-start: 1px solid var(--c-sky-line);
    list-style: none;
}

.club-card__event {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    font-size: var(--fs-sm);
}

.club-card__event-date {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    color: var(--c-red);
}

.club-card__event-topic {
    color: var(--c-ink);
}

.club-card__event-seats {
    width: 100%;
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

/* Фоновая иконка вида клуба */
.club-card--speaking .club-card__kind::before,
.club-card--movie .club-card__kind::before,
.club-card--board .club-card__kind::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-inline-end: var(--space-1);
    vertical-align: -0.2em;
    background-size: contain;
    background-repeat: no-repeat;
}

.club-card--speaking .club-card__kind::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A6FB0' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
}

.club-card--movie .club-card__kind::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A6FB0' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M8 5v14M16 5v14'/%3E%3C/svg%3E");
}

.club-card--board .club-card__kind::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A6FB0' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1.4' fill='%232A6FB0'/%3E%3Ccircle cx='15' cy='15' r='1.4' fill='%232A6FB0'/%3E%3Ccircle cx='15' cy='9' r='1.4' fill='%232A6FB0'/%3E%3Ccircle cx='9' cy='15' r='1.4' fill='%232A6FB0'/%3E%3C/svg%3E");
}

/* --- Вопросы и ответы ----------------------------------------------------- */

.faq {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: 1fr;
    align-items: start;
}

.accordion__heading {
    margin: 0;
    font-size: inherit;
}

.accordion__label {
    flex: 1 1 auto;
}

/* Открытый вопрос заливается светло-голубым — приём с референса */
.accordion__item.is-open {
    background-color: var(--c-sky);
    border-color: var(--c-blue-deep);
}

.accordion__item.is-open .accordion__trigger {
    color: var(--c-ink);
}

.accordion__item.is-open .accordion__trigger:hover {
    background-color: transparent;
}

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

.accordion__item.is-open .accordion__icon::before {
    background-color: var(--c-ink);
}

.accordion__content.prose {
    max-width: none;
    color: var(--c-ink);
}

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

@media (min-width: 915px) {
    .faq {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
        gap: var(--space-8);
    }

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

/* --- Финальный призыв (когда формы нет в контексте) ----------------------- */

.cta {
    position: relative;
    overflow: hidden;
    padding: var(--space-6);
    background-color: var(--c-blue-deep);
    border-radius: var(--radius-lg);
    color: var(--c-surface);
}

.cta__inner {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    align-items: center;
}

.cta__title {
    font-size: var(--fs-2xl);
    color: var(--c-surface);
}

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

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

.cta .muted a {
    color: var(--c-surface);
}

.cta__sticker {
    justify-self: center;
}

@media (min-width: 915px) {
    .cta {
        padding: var(--space-8);
    }

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

/* --- Секции главной: чередование фонов ------------------------------------ */

.section--sky .card,
.section--sky .accordion__item {
    border-color: var(--c-blue-deep);
}

.section--cream .teacher-card {
    background-color: var(--c-surface);
}

/* --- Сетки из четырёх карточек: 2×2 вместо «3 + 1» --------------------------- */

@media (min-width: 915px) {
    .grid--3:has(> :nth-child(4):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    /* Карточки педагогов узкие и центрированные — четыре в ряд читаются лучше */
    #pedagogi .grid--3:has(> :nth-child(4):last-child) {
        grid-template-columns: repeat(4, 1fr);
    }
}