/* ============================================================
   Middle school (5-9 класи) — page styles
   Source: Figma «LenPage_GK midle (Copy) (Copy)» — Desktop_1440 [36:11]
   Tokens: see TMP/Task-List/IN-process/Middle_school/figma-tokens.md
   Palette: --c-purple #952df4 (= --all-color-on-page site var),
            --middle-accent #FC4700 (= site orange), --c-purple-dark #542E91,
            --c-card #f3f3f3.
   Font: Geometria (весові імена Geometria-Medium/Bold/ExtraBold — plain "Geometria"
         не оголошено у fonts.css). Page width 1440, content ~1164px (site .container).
   ============================================================ */

.middle-page {
    /* Базовий шрифт сторінки — весове ім'я "Geometria-Medium" (plain "Geometria"
       не оголошено у fonts.css). Елементи з font-weight 700/800 отримують
       "Geometria-Bold"/"Geometria-ExtraBold" у своїх правилах. */
    font-family: "Geometria-Medium", sans-serif;
    --middle-accent: #FC4700;
    --c-purple: var(--all-color-on-page, #952df4);
    --c-purple-dark: #542E91;
    --c-card: #f3f3f3;
    --c-blue-tl: #dbebfd;
    --c-text: #2a2a2a;
    --c-muted: #5a5a66;
    --middle-radius: 16px;
    --middle-gap: 24px;
    /* Горизонтальні стрічки (розклад дня, відгуки) вилазять за межі екрана —
       обрізаємо. clip, а не hidden: hidden створює scroll-контейнер, і сторінку
       можна зсунути вбік. Підтримка: Chrome 90+, FF 81+, Safari 16+. */
    overflow-x: clip;
}

/* ---- Shared typography ---- */
.middle-page .middle-h2 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0 0 16px;
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-h2-middle {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0 0 16px;
}
.middle-page .middle-subtitle {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--c-muted);
    margin: 0 0 16px;
}

/* ---- Buttons ---- */
.middle-page .middle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
    max-width: 100%;
}
.middle-page .middle-btn--primary {
    background: var(--middle-accent);
    color: #fff;
    border-color: var(--middle-accent);
    box-shadow: 0 4px 15px rgba(252, 71, 0, 0.3);
}
.middle-page .middle-btn--primary:hover { transform: translateY(-2px); }
.middle-page .middle-btn--secondary {
    background: transparent;
    color: var(--middle-accent);
    border-color: var(--middle-accent);
}
.middle-page .middle-btn--secondary:hover {
    background: var(--middle-accent);
    color: #fff;
}

/* ---- Check icon (purple) ---- */
.middle-page .middle-check { color: var(--c-purple); flex: 0 0 auto; }

/* ============================================================
   1. HERO
   ============================================================ */
.middle-page .middle-hero {
    position: relative;
    z-index: 5;
    color: var(--color-header-text, #fff);
}
/* Фон, мінімальна висота, падінги, зірочка біля заголовка, розміри заголовка
   й підзаголовка на всіх брейкпоінтах — з глобальних .header__bottom /
   .school-header__bottom / .school-title / .school-subtitle (contacts.css,
   school.css, common.css, wf_style.css). Тут лише те, чого на /shkoly/ немає. */
/* Без власного z-index: контейнер має лишитись на z-index 6 із глобального
   `.header__bottom > .container`. Хвиляста межа .lower-boundary стоїть на
   z-index 5 і залазить на 50px усередину секції — з меншим значенням вона
   замальовує кнопки. */
.middle-page .middle-hero__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
/* Ширину обмежує сам заголовок (.school-title, max-width 950px), а ряд
   «підзаголовок + бейдж» має право на всю ширину контейнера — інакше бейдж
   не вміщається поруч і зривається на новий рядок. */
.middle-page .middle-hero__content { flex: 1 1 auto; min-width: 0; }
.middle-page .middle-hero__accent { color: var(--middle-accent); }
/* Зірочка з .school-title::after розрахована на пʼятирядковий підзаголовок
   /shkoly/. Тут ряд «підзаголовок + бейдж» вищий і починається раніше, тому
   піднімаємо зірочку — інакше бейдж наїжджає на її нижні промені.
   Тільки від 1001px: нижче зірочку перекладають спільні адаптивні правила
   (school.css, wf_style.css), і перебивати їх не можна. */
@media screen and (min-width: 1001px) {
    .middle-page .middle-hero__title::after { top: -25px; }
}
/* Відступ від заголовка задає сам h1 (margin-bottom 25px), як на /shkoly/.
   align-items: flex-start замість шкільного flex-end: там ряд по висоті
   тримає пʼятирядковий підзаголовок, а тут — бейдж, і при вирівнюванні по
   низу він відсував однорядковий підзаголовок на півсотні пікселів униз. */
.middle-page .middle-hero__box {
    margin: 0 0 8px;
    align-items: flex-start;
}
/* Підзаголовок Middle коротший за шкільний, тож без фіксованої основи бейдж
   під'їжджав би впритул до тексту. 650px — та сама max-width, що в
   .school-subtitle, тому бейдж стає рівно там само, де на /shkoly/. */
.middle-page .middle-hero__subheading { flex: 1 1 650px; }
.middle-page .middle-hero__features {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.middle-page .middle-hero__features-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.middle-page .middle-hero__features-item .middle-check { color: #fff; }
.middle-page .middle-hero__features-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
}
.middle-page .middle-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
/* Друга кнопка стоїть на фіолетовому: помаранчевий текст на ньому не читався. */
.middle-page .middle-hero .middle-btn--secondary {
    color: #fff;
    border-color: #fff;
}
.middle-page .middle-hero .middle-btn--secondary:hover {
    background: #fff;
    color: var(--c-purple);
}
.middle-page .middle-hero__media { flex: 0 0 auto; max-width: 360px; }
.middle-page .middle-hero__img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--middle-radius);
}

/* ============================================================
   2. PERSONALITY («Особистість дитини…»)
   ============================================================ */
.middle-page .middle-personality { padding: 80px 0; }
.middle-page .middle-personality__inner {
    display: flex;
    align-items: center;
    gap: 56px;
}
.middle-page .middle-personality__text { flex: 1 1 auto; }
/* Теза — фіолетова й великим кеглем: це головна думка блоку, а не звичайний
   абзац. Пояснення під нею лишається сірим і дрібнішим. */
.middle-page .middle-personality__title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-purple);
    margin: 0 0 16px;
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-personality__text-body {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-muted);
    margin: 0;
    max-width: 640px;
}
.middle-page .middle-personality__media { flex: 0 0 320px; text-align: center; }
.middle-page .middle-personality__img { max-width: 100%; height: auto; }

/* Акцентна фігура — «відірваний» фіолетовий прямокутник із цифрою.
   Форма та сама, що в .mission__title-bg на /shkoly/. */
.middle-page .middle-personality__accent {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 32px 28px;
}
.middle-page .middle-personality__accent-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.middle-page .middle-personality__accent-bg path { fill: var(--c-purple); }
.middle-page .middle-personality__accent-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.middle-page .middle-personality__accent-number {
    font-size: 84px;
    font-weight: 800;
    line-height: 0.9;
    color: #fff;
    font-family: "Geometria-ExtraBold", sans-serif;
    letter-spacing: -2px;
}
.middle-page .middle-personality__accent-caption {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    text-align: center;
    max-width: 230px;
}

/* ============================================================
   3. WHY TRANSFER («Чому батьки…»)
   ============================================================ */
.middle-page .middle-why { padding: 80px 0; }
.middle-page .middle-why__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}
.middle-page .middle-why__col-wrapper {
    background: #fff;
    border-radius: var(--middle-radius);
    box-shadow: 0 15px 35px rgba(84, 46, 145, 0.12);
    border: 1px solid #f0f0f0;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.middle-page .middle-why__col-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-purple);
    margin: 0 0 24px;
    font-family: "Geometria-Bold", sans-serif;
    text-align: center;
}
.middle-page .middle-why__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.middle-page .middle-why__item {
    position: relative;
    padding-left: 32px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--c-text);
}
.middle-page .middle-why__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
/* Маркери — брендові кольори сайту: жовтий із кнопки «Особистий кабінет» і
   фіолетовий --all-color-on-page. Було #ffcc00 і #00ccff — блакитного в
   палітрі сайту немає взагалі, а жовтий був іншого відтінку. */
.middle-page .middle-why__list--left .middle-why__item::before {
    background: #FFDC00;
}
.middle-page .middle-why__list--right .middle-why__item::before {
    background: var(--c-purple);
}
/* Висновок + кнопка однією світло-бузковою карткою: під двома білими
   картками абзац темного тексту читався як «залишок», а не як підсумок. */
.middle-page .middle-why__callout {
    background: #f4edff;
    border-radius: var(--middle-radius);
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.middle-page .middle-why__summary {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--c-text);
    margin: 0;
    max-width: 900px;
}
.middle-page .middle-why__buttons { display: flex; }

/* ============================================================
   4. TRANSITION SAFE («Перехід безпечний…»)
   ============================================================ */
.middle-page .middle-transition { padding: 80px 0; }
/* Заголовок за розміром такий самий, як в інших секціях сторінки (.middle-h2):
   раніше він був 32px/500 і на тлі сусідніх 48px читався як підзаголовок. */
.middle-page .middle-transition__title { margin: 0 0 16px; }
.middle-page .middle-transition__text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-muted);
    margin: 0 0 40px;
    max-width: 900px;
}
/* Протиставлення без плашки: ліворуч зірочка сайту, праворуч два рядки.
   Раніше тут була смуга на всю ширину екрана кольором #542E91 — це старий
   фіолетовий, у брендовій палітрі його немає. Тримається на типографіці,
   як блок місії на /shkoly/, і не додає сторінці ще однієї великої
   фіолетової площини — їх і так дві (шапка й акцент «1000»). */
.middle-page .middle-transition__risks {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
.middle-page .middle-transition__risks::before {
    content: "";
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    margin-top: 4px;
    background: url('/images/icons/star-purple.svg') center/contain no-repeat;
}
.middle-page .middle-transition__risk-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.middle-page .middle-transition__risk {
    margin: 0;
    max-width: 900px;
}
.middle-page .middle-transition__risk--muted {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-muted);
}
.middle-page .middle-transition__risk--strong {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-purple);
    font-family: "Geometria-ExtraBold", sans-serif;
}

/* ============================================================
   5. WHAT WE OFFER («Що ми пропонуємо…»)
   ============================================================ */
.middle-page .middle-offer { padding: 80px 0; }
.middle-page .middle-offer__cards {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.middle-page .middle-offer__card {
    background: #fff;
    border-radius: var(--middle-radius);
    box-shadow: 0 10px 30px rgba(84, 46, 145, 0.05);
    padding: 16px;
    min-height: 275px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #f0f0f0;
}
.middle-page .middle-offer__card-img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    margin-bottom: 24px;
    background: transparent;
}
.middle-page .middle-offer__card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    font-family: "Geometria-Bold", sans-serif;
    text-align: center;
    padding: 12px 20px;
    border-radius: 30px;
    width: 100%;
    box-sizing: border-box;
}
.middle-page .middle-offer__card:nth-child(4n+1) .middle-offer__card-title { background: var(--middle-accent); }
.middle-page .middle-offer__card:nth-child(4n+2) .middle-offer__card-title { background: #00b4d8; }
.middle-page .middle-offer__card:nth-child(4n+3) .middle-offer__card-title { background: #4cc9f0; }
.middle-page .middle-offer__card:nth-child(4n+4) .middle-offer__card-title { background: var(--c-purple); }
.middle-page .middle-offer__footer {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0 0 32px;
    max-width: 760px;
}
.middle-page .middle-offer__buttons { display: flex; }

/* ============================================================
   6. SAFETY («Безпека… аксіома»)
   ============================================================ */
.middle-page .middle-safety { padding: 80px 0; }
.middle-page .middle-safety__title { margin-bottom: 40px; }
.middle-page .middle-safety__panel {
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(84, 46, 145, 0.05);
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
}
.middle-page .middle-safety__group {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.middle-page .middle-safety__group-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-purple);
    margin: 0 0 32px;
    font-family: "Geometria-ExtraBold", sans-serif;
    text-align: center;
}
.middle-page .middle-safety__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.middle-page .middle-safety__item {
    position: relative;
    padding-left: 48px;
}
.middle-page .middle-safety__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: -4px;
    width: 32px;
    height: 32px;
    background: var(--c-purple) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M1 5.5L6 10.5L15 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
    border-radius: 50%;
}
.middle-page .middle-safety__item-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0 0 8px;
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-safety__item-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-muted);
    margin: 0;
}
.middle-page .middle-safety__panel-center {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.middle-page .middle-safety__shield-bg {
    max-width: 320px;
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    .middle-page .middle-safety__panel {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 16px;
    }
    .middle-page .middle-safety__panel-center {
        order: -1;
    }
    .middle-page .middle-safety__shield-bg {
        max-width: 200px;
    }
}

/* ============================================================
   7. HOMEWORK («Домашка — в школі…»)
   ============================================================ */
.middle-page .middle-homework { padding: 80px 0; }
.middle-page .middle-homework__cards {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.middle-page .middle-homework__card {
    background: #fff;
    border-radius: var(--middle-radius);
    box-shadow: 0 10px 30px rgba(84, 46, 145, 0.05);
    padding: 32px;
    overflow: hidden;
}
.middle-page .middle-homework__card-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
}
.middle-page .middle-homework__card-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-purple);
    margin: 0 0 12px;
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-homework__card-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-text);
    margin: 0;
}
.middle-page .middle-homework__buttons { display: flex; }

/* ============================================================
   8. DAY («Як виглядає день…»)
   ============================================================ */
.middle-page .middle-day { padding: 80px 0; }
.middle-page .middle-day__timeline {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    padding-top: 24px;
}
.middle-page .middle-day__timeline::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 40px;
    right: 40px;
    height: 2px;
    border-top: 2px dashed color-mix(in srgb, var(--c-purple) 30%, transparent);
    z-index: 0;
}
.middle-page .middle-day__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.middle-page .middle-day__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--c-purple);
    border: 2px solid var(--c-purple);
    font-size: 24px;
    font-weight: 800;
    font-family: "Geometria-ExtraBold", sans-serif;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--c-purple) 20%, transparent);
}
.middle-page .middle-day__step-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0;
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-day__step-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--c-muted);
    margin: 0;
    background: var(--c-blue-tl);
    padding: 10px 14px;
    border-radius: 10px;
    display: inline-block;
    align-self: flex-start;
}
.middle-page .middle-day__footer {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0;
    max-width: 900px;
}

/* Горизонтальна стрічка розкладу дня на всю ширину екрана: картки етапів
   (час + назва), які їдуть вбік, поки скрол сторінки перехоплений (див. main.js).
   Крайні картки обрізаються межею екрана — очікувана поведінка стрічки,
   .swiper має overflow:hidden зі swiper-bundle.
   ВАЖЛИВО: .swiper (Swiper 11) не має width:100% — без явної ширини контейнер
   росте під контент і maxTranslate стає 0 (стрічка не їде). */
.middle-page .middle-day__swiper {
    /* Зверху 10px, щоб не зрізало тінь картки; знизу — місце під зірочки. */
    position: relative;
    padding: 10px 0 40px;
    /* Вертикальний свайп лишається сторінці — на телефоні саме він і везе
       стрічку. pan-y тут для ноутбуків із тачскріном: там стрічку ще й тягнуть
       пальцем убік. */
    touch-action: pan-y;
}
/* Індикатор проходження стрічки: показує, скільки розкладу лишилось. */
.middle-page .middle-day__progress {
    width: calc(100% - 40px);
    max-width: 1150px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 2px;
    background: rgba(84, 46, 145, 0.1);
    overflow: hidden;
}
.middle-page .middle-day__progress-bar {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--c-purple);
    transform: scaleX(0.02);
    transform-origin: left center;
}
.middle-page .middle-day__schedule-card {
    background: #fff;
    border-radius: var(--middle-radius);
    padding: 24px;
    box-shadow: 0 10px 30px rgba(84, 46, 145, 0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 260px; /* Фіксована ширина картки стрічки */
    border: 1px solid #f0f0f0;
    position: relative;
    margin-bottom: 48px; /* під зірочку-мітку */
}
/* Зірочка-мітка під карткою. */
.middle-page .middle-day__schedule-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -38px;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    background: url('/images/icons/star-purple.svg') center/contain no-repeat;
}
.middle-page .middle-day__schedule-time {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--middle-accent);
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-day__schedule-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0;
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-day__schedule-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--c-muted);
    margin: 0;
    font-family: "Geometria-Medium", sans-serif;
}
.middle-page .wf_middle_day_slider { width: 100%; }
/* Ширину слайда задає сама картка, тож перебиваємо width:100% зі swiper-bundle
   (те саме робить main.js інлайном) — інакше на екрані видно лише одну картку. */
.middle-page .wf_middle_day_slider .swiper-slide { width: auto; height: auto; }

/* ============================================================
   9. ACADEMIC («Сильна академічна підготовка…»)
   ============================================================ */
.middle-page .middle-academic { padding: 80px 0; }
.middle-page .middle-academic__facts {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.middle-page .middle-academic__fact {
    background: #fff;
    border-radius: var(--middle-radius);
    padding: 32px;
    box-shadow: 0 10px 30px rgba(84, 46, 145, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 6px solid var(--c-purple);
}
.middle-page .middle-academic__fact:nth-child(3n+1) { border-top-color: var(--middle-accent); }
.middle-page .middle-academic__fact:nth-child(3n+2) { border-top-color: #00b4d8; }
.middle-page .middle-academic__fact:nth-child(3n+3) { border-top-color: var(--c-purple); }
.middle-page .middle-academic__fact-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
}
.middle-page .middle-academic__fact-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-text);
    margin: 0;
}
.middle-page .middle-academic__footer {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0 0 32px;
    max-width: 760px;
}
.middle-page .middle-academic__buttons { display: flex; }

/* ============================================================
   10. NO BURNOUT («Middle без вигорання…»)
   ============================================================ */
/* Фон — стандартний фіолетовий сайту (--all-color-on-page), а не темний
   #542E91 з макета. Без скруглень: блок іде смугою на всю ширину. */
.middle-page .middle-burnout {
    padding: 80px 0;
    background: var(--c-purple);
    color: #fff;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}
/* Декоративна зірка в правому нижньому куті — як у блоці «Що таке GlobalKids?»
   на головній. Увесь контент секції має лежати над нею. */
.middle-page .middle-burnout__bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}
.middle-page .middle-burnout__bg path { fill: var(--all-color-on-page-rgba, #d5abfb); }
.middle-page .middle-burnout > .container,
.middle-page .middle-burnout__summary {
    position: relative;
    z-index: 1;
}
.middle-page .middle-burnout__title {
    color: #fff;
}
.middle-page .middle-burnout__subtitle { margin-bottom: 16px; color: rgba(255,255,255,0.8); }
.middle-page .middle-burnout__text {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    color: rgba(255,255,255,0.9);
    margin: 0 0 40px;
    max-width: 900px;
}
.middle-page .middle-burnout__programs {
    list-style: none;
    margin: 0 0 48px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    position: relative;
    z-index: 2;
}
/* Картки не білі, а прозорі з тонкою рамкою: дві білі плити на фіолетовому
   читались як наліпки й розбивали блок. */
.middle-page .middle-burnout__program {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--middle-radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #fff;
}
.middle-page .middle-burnout__program-img {
    /* Джерела power-1/2 майже квадратні (184×166, 181×178) і на прозорому фоні —
       тому сидять у білому кружечку, інакше акварель тоне у фіолетовому. */
    width: 132px;
    height: 132px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    box-sizing: border-box;
    align-self: center;
}
.middle-page .middle-burnout__program-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-burnout__program-subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}
.middle-page .middle-burnout__program-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}
/* Висновок — рядок із зірочкою і помаранчевою рискою замість суцільної
   помаранчевої плашки на всю ширину екрана. */
.middle-page .middle-burnout__summary {
    color: #fff;
}
.middle-page .middle-burnout__summary-inner {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}
.middle-page .middle-burnout__summary-inner::before {
    content: "";
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    background: url('/images/icons/star-white.svg') center/contain no-repeat;
}
.middle-page .middle-burnout__summary-text {
    border-left: 4px solid var(--middle-accent);
    padding-left: 28px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

/* ============================================================
   11. COLLEGE PACK
   ============================================================ */
.middle-page .middle-college { padding: 80px 0; }
.middle-page .middle-college__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 32px;
}
.middle-page .middle-college__media { order: 1; }
/* Ілюстрація 422×297 — ширшою її не розтягуємо, інакше мило. */
.middle-page .middle-college__img {
    width: 100%;
    max-width: 422px;
    height: auto;
    margin: 0 auto;
    display: block;
}
.middle-page .middle-college__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.middle-page .middle-college__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.middle-page .middle-college__item .middle-check {
    color: var(--c-purple);
    flex-shrink: 0;
    margin-top: 2px;
}
.middle-page .middle-college__item-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-text);
}
.middle-page .middle-college__summary {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--c-purple-dark);
    margin: 0 0 32px;
    max-width: 900px;
}
.middle-page .middle-college__summary strong {
    color: var(--middle-accent);
}
.middle-page .middle-college__buttons { display: flex; }

/* ============================================================
   12. REVIEWS («Що говорять батьки…»)
   ============================================================ */
/* Подача як у слайдері «Що ми пропонуємо додатково» на /shkoly/: фіолетова
   секція, заголовок у білій «рваній» плашці, картки й стрілки поверх фону. */
.middle-page .middle-reviews {
    padding: 70px 0 48px;
    background: var(--c-purple);
    position: relative;
}
.middle-page .middle-reviews__title {
    color: var(--c-purple);
    background-image: url("/images/icons/school-slider-title-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    max-width: max-content;
    padding: 19px 36px;
    margin-bottom: 24px;
}
.middle-page .middle-reviews__subtitle { color: rgba(255, 255, 255, 0.9); }
/* Стрілки слайдера — по краях стрічки, як на /shkoly/. */
.middle-page .middle-reviews__slider-inner {
    position: relative;
    max-width: 1190px;
    margin: 0 auto;
}
.middle-page .middle-reviews__arrow {
    position: absolute;
    /* Мінус висота смужки прокрутки (44px), щоб стрілки стояли по центру карток. */
    top: calc(50% - 22px);
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    line-height: 0;
    user-select: none;
}
.middle-page .middle-reviews__arrow img { width: 20px; height: auto; }
.middle-page .middle-reviews__arrow--prev { left: -10px; }
.middle-page .middle-reviews__arrow--next { right: -10px; }
.middle-page .middle-reviews__arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
.middle-page .middle-reviews__card {
    background: #fff;
    border-radius: var(--middle-radius);
    padding: 32px;
    box-shadow: 0 10px 30px rgba(84, 46, 145, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    min-height: 300px;
    width: 372px; /* Fixed width for horizontal scrolljacking */
    border: 1px solid #f0f0f0;
}
.middle-page .middle-reviews__card-quote {
    font-size: 80px;
    line-height: 0.6;
    color: #4caf50; /* Green quotes */
    height: 40px;
    margin-bottom: 8px;
}
.middle-page .middle-reviews__card-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-text);
    margin: 0;
    flex: 1 1 auto;
}
.middle-page .middle-reviews__card-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.middle-page .middle-reviews__card-name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-purple);
    font-family: "Geometria-ExtraBold", sans-serif;
}
.middle-page .middle-reviews__card-position {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--c-muted);
}
/* Стрічка відгуків: слайди по краях екрана обрізаються — це очікувана поведінка
   горизонтальної стрічки й підказка, що картки гортаються.
   ВАЖЛИВО: .swiper (Swiper 11) не має width:100% (на відміну від .swiper-container
   Swiper 3 у routine) — без явної ширини контейнер росте під контент. */
.middle-page .wf_middle_reviews_slider { width: 100%; }
/* slidesPerView:'auto' — ширину задає сама картка, тож перебиваємо width:100%
   зі swiper-bundle, інакше на екрані видно лише один відгук. */
.middle-page .wf_middle_reviews_slider .swiper-slide { width: auto; height: auto; }
/* Стрічка тримається ширини контейнера, щоб перша картка стояла під заголовком,
   а не впиралась у край екрана. Знизу місце під смужку прокрутки, зверху — щоб
   не зрізало тінь картки. */
.middle-page .middle-reviews__swiper {
    max-width: 1190px;
    margin: 0 auto;
    padding: 10px 20px 44px;
    box-sizing: border-box;
}
.middle-page .middle-reviews__scrollbar {
    background: rgba(255, 255, 255, 0.25);
    height: 6px;
    bottom: 16px;
    left: 20px;
    width: calc(100% - 40px);
}
.middle-page .middle-reviews__scrollbar .swiper-scrollbar-drag { background: #fff; }
/* Відео-відгуки: стрічка вертикальних обкладинок під текстовими відгуками. */
.middle-page .middle-reviews__videos {
    max-width: 1190px;
    margin: 24px auto 0;
    padding: 0 20px 44px;
    box-sizing: border-box;
}
.middle-page .middle-reviews__videos .swiper-slide { width: auto; height: auto; }
.middle-page .middle-reviews__video {
    position: relative;
    display: block;
    width: 240px;
    border-radius: var(--middle-radius);
    overflow: hidden;
    line-height: 0;
}
.middle-page .middle-reviews__video-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.middle-page .middle-reviews__video:hover .middle-reviews__video-img { transform: scale(1.04); }
/* Кнопка відтворення по центру обкладинки. */
.middle-page .middle-reviews__video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    color: var(--c-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* ============================================================
   RESPONSIVE — 1024px (tablet)
   ============================================================ */
@media (max-width: 1024px) {
    .middle-page .middle-hero__inner { gap: 24px; }
    .middle-page .middle-hero__media { max-width: 360px; }

    .middle-page .middle-offer__cards { grid-template-columns: repeat(2, 1fr); }
    .middle-page .middle-academic__facts { grid-template-columns: repeat(2, 1fr); }
    .middle-page .middle-safety__items { grid-template-columns: repeat(2, 1fr); }
    .middle-page .middle-day__timeline { grid-template-columns: repeat(2, 1fr); }
    /* middle-reviews__grid is removed */
    .middle-page .middle-college__body { gap: 32px; }
}

/* ============================================================
   RESPONSIVE — 768px (mobile)
   ============================================================ */
@media (max-width: 768px) {
    .middle-page .middle-h2 { font-size: 32px; }
    .middle-page .middle-h2-middle,
    .middle-page .middle-subtitle,
    .middle-page .middle-offer__footer,
    .middle-page .middle-academic__footer,
    .middle-page .middle-day__footer,
    .middle-page .middle-college__summary,
    .middle-page .middle-burnout__summary-text,
    .middle-page .middle-transition__risk--strong { font-size: 26px; }
    .middle-page .middle-why__summary { font-size: 19px; }
    .middle-page .middle-personality__title { font-size: 24px; }
    .middle-page .middle-personality__text-body,
    .middle-page .middle-burnout__text { font-size: 18px; }

    /* Hero */
    .middle-page .middle-hero__inner { flex-direction: column; align-items: flex-start; }
    .middle-page .middle-hero__media { max-width: 100%; width: 100%; order: -1; margin-bottom: 24px; }
    .middle-page .middle-hero__features-text { font-size: 18px; }
    .middle-page .middle-hero__buttons { width: 100%; }
    .middle-page .middle-hero__buttons .middle-btn { flex: 1 1 auto; }

    /* Personality — stack */
    .middle-page .middle-personality { padding: 56px 0; }
    .middle-page .middle-personality__inner { flex-direction: column; gap: 32px; }
    .middle-page .middle-personality__media { flex: 0 0 auto; width: 100%; }
    /* Фігура не має розтягуватись на всю ширину екрана — інакше з акценту
       вона перетворюється на суцільну фіолетову смугу. */
    .middle-page .middle-personality__accent { max-width: 320px; margin: 0 auto; }

    /* Why transfer — 1 column */
    .middle-page .middle-why { padding: 56px 0; }
    .middle-page .middle-why__columns { grid-template-columns: 1fr; gap: 16px; }
    .middle-page .middle-why__callout { padding: 24px; gap: 20px; }
    .middle-page .middle-why__list { padding: 24px; }

    /* Transition */
    .middle-page .middle-transition { padding: 56px 0; }
    .middle-page .middle-transition__risks { gap: 24px; }
    .middle-page .middle-transition__risks::before { width: 56px; height: 56px; }
    .middle-page .middle-transition__text { margin-bottom: 32px; }

    /* Offer */
    .middle-page .middle-offer { padding: 56px 0; }
    .middle-page .middle-offer__cards { grid-template-columns: 1fr; }

    /* Safety */
    .middle-page .middle-safety { padding: 56px 0; }
    .middle-page .middle-safety__items { grid-template-columns: 1fr; }

    /* Homework */
    .middle-page .middle-homework { padding: 56px 0; }
    .middle-page .middle-homework__cards { grid-template-columns: 1fr; }
    .middle-page .middle-homework__card-img { height: 220px; }

    /* Day */
    .middle-page .middle-day { padding: 56px 0; }
    .middle-page .middle-day__timeline { grid-template-columns: 1fr; gap: 16px; }
    .middle-page .middle-day__schedule-card { width: 220px; padding: 20px; }
    .middle-page .middle-day__schedule-time { font-size: 24px; }

    /* Academic */
    .middle-page .middle-academic { padding: 56px 0; }
    .middle-page .middle-academic__facts { grid-template-columns: 1fr; }

    /* Burnout */
    /* Знизу теж 56px: висновок більше не впирається в край секції. */
    .middle-page .middle-burnout { padding: 56px 0; }
    /* Зірка меншає й бліднішає — на вузькому екрані вона лягає прямо під текст
       висновку (так само зроблено з .home-info__bg на головній). */
    .middle-page .middle-burnout__bg { width: 170px; height: auto; opacity: 0.5; }
    .middle-page .middle-burnout__programs { grid-template-columns: 1fr; }
    .middle-page .middle-burnout__program-img { width: 116px; height: 116px; }
    .middle-page .middle-burnout__summary-inner { gap: 16px; }
    .middle-page .middle-burnout__summary-inner::before { width: 40px; height: 40px; }
    .middle-page .middle-burnout__summary-text { padding-left: 16px; }

    /* College */
    .middle-page .middle-college { padding: 56px 0; }
    .middle-page .middle-college__body { grid-template-columns: 1fr; gap: 24px; }
    .middle-page .middle-college__media { order: 0; }

    /* Reviews — grid → swiper */
    .middle-page .middle-reviews { padding: 56px 0; }
    /* removed middle-reviews__grid display:none and swiper display:block */
    .middle-page .middle-reviews__card { min-height: auto; }
    /* Стрілки ховаємо: на вузькому екрані вони вилазять за край, а стрічка й
       так гортається пальцем. */
    .middle-page .middle-reviews__arrow { display: none; }
    .middle-page .middle-reviews__title { padding: 16px 24px; }
}

/* ============================================================
   RESPONSIVE — 480px (small phone)
   ============================================================ */
@media (max-width: 480px) {
    .middle-page .middle-h2 { font-size: 26px; }
    .middle-page .middle-hero__features-item { gap: 10px; }
    .middle-page .middle-hero__features-text { font-size: 16px; }
    .middle-page .middle-hero__buttons { flex-direction: column; }
    .middle-page .middle-hero__buttons .middle-btn { width: 100%; }

    .middle-page .middle-why__list { padding: 20px; }
    .middle-page .middle-why__item { font-size: 18px; padding-left: 26px; }
    .middle-page .middle-offer__card { min-height: auto; padding: 8px; }
    .middle-page .middle-offer__card-img { height: 140px; }
    .middle-page .middle-offer__card-title { font-size: 18px; }
    .middle-page .middle-safety__item { padding-left: 44px; }
    .middle-page .middle-homework__card-img { height: 180px; }
    .middle-page .middle-academic__fact-img { height: 140px; }
    .middle-page .middle-burnout__program-img { width: 104px; height: 104px; }
    .middle-page .middle-burnout__program-title { font-size: 22px; }
    .middle-page .middle-reviews__card { padding: 24px; width: 300px; }
    .middle-page .middle-reviews__card-text { font-size: 16px; }
}

/* ============================================================
   RESPONSIVE — 320px
   ============================================================ */
@media (max-width: 320px) {
    .middle-page .middle-h2 { font-size: 22px; }
    .middle-page .middle-reviews__card { padding: 20px; width: 280px; }
}