/* Course Info page template (page-course-info.php): 2/3 links + 1/3 sidebar.
   Hergebruikt de tt-page-surface look via page-default.css. */

.course-info__columns {
    display: flex;
    flex-wrap: nowrap; /* desktop: krimpen i.p.v. wrappen; mobiel stapelt via flex-direction: column */
    justify-content: space-between; /* ruimte tussen content en sidebar */
    gap: 30px;
}

/* Content links: vaste 746px op ruime desktop; krimpt netjes mee op smallere
   desktop-breedtes (zodat de sidebar niet onder de content klapt). */
.course-info__main {
    flex: 0 1 746px;
    max-width: 746px;
    min-width: 0;
}

.course-info__sidebar {
    flex: 0 0 415px;
    max-width: 415px;
    min-width: 0;
}

/* Onder ~992px onder elkaar, in een ANDERE volgorde dan de bron (design):
   content → sidebar (intro + cursussen + menu) → FAQ → Level Check.
   De kolom-wrappers krijgen `display: contents` zodat alle binnenblokken
   directe flex-items van .course-info__columns worden en vrij te ordenen
   zijn met `order`. Desktop blijft onaangetast. */
@media (max-width: 991px) {
    .course-info__columns {
        flex-direction: column;
        gap: 48px;
    }

    .course-info__main,
    .course-info__sidebar {
        display: contents;
    }

    /* Content (h1 + entry-content) houdt order 0 (bron-volgorde). */
    .course-info__sidebar > * {
        order: 1;
    }

    .course-info__main > .course-info__faq,
    .course-info__main > .course-info__level-check {
        order: 2; /* onderlinge bron-volgorde blijft: FAQ vóór Level Check */
    }

    /* Breadcrumbs + H1 gecentreerd op mobiel. */
    .page-course-info .tt-course-page__breadcrumbs {
        margin-top: 13px;
        margin-bottom: 31px;
    }

    .page-course-info .tt-course-page__breadcrumbs .tt-breadcrumbs__list {
        justify-content: center;
    }

    .page-course-info .tt-course-page__title,
    .page-course-info .entry-content h1 {
        text-align: center;
        margin-bottom: 51px;
    }

    /* Niveau-pill (fit-content block) mee centreren onder de H1. */
    .page-course-info .tt-title-level {
        margin-top: 7px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Button-element (academia_button) gecentreerd op mobiel — overschrijft
       .academia-button--left/--right binnen deze template. */
    .page-course-info .academia-button {
        text-align: center;
    }
}

/* H2 in de linker WPBakery-content, zoals op de default template. */
.page-course-info .entry-content h2 {
    font-size: 28px;
    line-height: 36px;
    margin-top: 44px;
    margin-bottom: 21px;
}

/* Sidebar-intro (titel + tekst). */
.page-course-info .course-info__sidebar-intro h2 {
    margin-top: 23px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

.page-course-info .course-info__sidebar-intro {
    margin-bottom: 24px;
}

/* Ruimte tussen de linker-blokken. De FAQ krijgt zijn top-marge (97px) van
   .tt-faq--manual (faq.css); alleen de Level Check pinnen we hier op 50px. */
.course-info__level-check {
    margin-top: 50px;
}