/**
 * Information pages: hero, wegwijzer, help box and the section blocks that go with
 * them. Every block styles itself, so it looks the same wherever it is used; only
 * the column widths depend on the chosen hero type.
 */


/* Layout --------------------------------------------------------------- */

/* Only the page-level row, never the rows inside the blocks it contains — those keep
   their own gutters, otherwise their contents end up indented by one gutter. */

/* Keeps the sticky column clear of the first full-width section. This has to be a
   margin, not padding: the sticky plugin measures the container with offsetHeight,
   which includes padding, so the sidebar would just slide into it. */
.content-with-hero-infopage > .content-row {
    margin-bottom: 48px;
}

@media (min-width: 992px) {
    /* The row drops its negative gutters so the wegwijzer lines up with the hero and
       the breadcrumb above it; the columns carry the spacing themselves instead. */
    .content-with-hero-infopage > .content-row {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 992px) {
    /* The design puts a 300px wegwijzer beside a wide content column. */
    .content-with-hero-infopage .sidebar-col {
        flex: 0 0 300px;
        max-width: 300px;
        /* No padding: the sticky plugin pins the inner wrapper to this column's left
           edge and width, so padding here would make it jump sideways on sticking. */
        padding-left: 0;
        padding-right: 0;
    }
    .content-with-hero-infopage .main-col {
        flex: 0 0 calc(100% - 300px);
        max-width: calc(100% - 300px);
        padding-left: 90px;
        padding-right: 0;
    }
    .content-with-hero-infopage .main-content {
        max-width: 780px;
    }
}


/* Vertical rhythm in the content column: a new section starts well clear of the one
   before it, so the page reads as a set of parts without needing wrapper blocks. */
.content-with-hero-infopage .main-content > h2:not(:first-child) {
    margin-top: 48px;
}
.content-with-hero-infopage .main-content > h2 + * {
    margin-top: 0;
}

@media (min-width: 992px) {
    .content-with-hero-infopage .main-content > h2:not(:first-child) {
        margin-top: 72px;
    }
}


/* Hero ----------------------------------------------------------------- */

.hero-infopage {
    padding-bottom: 40px;
}
.hero-infopage h1:before {
    /* The yellow marker bar is not used on these pages. */
    display: none;
}
.hero-infopage .hero__title {
    margin-top: 16px;
    font-size: 32px;
}
.hero-infopage .hero__subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: var(--grey-700);
    max-width: 600px;
}
.hero-infopage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}
.hero-infopage__actions .btn {
    margin-top: 0;
}
.hero-infopage__media {
    margin-top: 32px;
}
.hero-infopage__image {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 470 / 380;
}
.hero-infopage__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .hero-infopage .hero__title {
        font-size: 40px;
    }
}
@media (min-width: 992px) {
    .hero-infopage {
        padding-bottom: 60px;
    }
    .hero-infopage .hero__title {
        font-size: 50px;
        line-height: 1.08;
    }
    .hero-infopage .hero__subtitle {
        font-size: 20px;
    }
    .hero-infopage__media {
        margin-top: 0;
        padding-left: 40px;
    }
}


/* Wegwijzer ------------------------------------------------------------ */

.toc {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 26px 24px;
    margin-bottom: 24px;
}
.toc__title {
    font-family: 'komet', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc__item + .toc__item {
    margin-top: 14px;
}
.toc__link {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--dark);
    text-decoration: none !important;
}
.toc__badge {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--light-blue);
    /* Set explicitly so the global a:hover colour cannot tint the arrow. */
    color: var(--dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease;
}
.toc__badge .material-symbols-outlined {
    font-size: 18px;
}
/* One colour for the whole wegwijzer; yellow is reserved for the section you are
   reading, so hovering only colours the label. */
.toc__item.is-active .toc__badge {
    background: var(--primary);
}
.toc__link:hover .toc__label,
.toc__link:focus-visible .toc__label {
    color: var(--secondary);
}


/* Help box ------------------------------------------------------------- */

.help-box {
    background: var(--dark);
    border-radius: 16px;
    padding: 26px;
    margin-bottom: 32px;
    color: #fff;
}
.help-box__title {
    font-family: 'komet', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
}
.help-box__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--light);
    margin: 10px 0 0 0;
}
/* The two contact links are the site's own buttons (btn btn-primary / btn), so they
   behave and animate like every other button; only the full width and the mail
   colour are specific to this box, which is dark. */
.help-box__action {
    width: 100%;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    /* Slightly tighter than a normal button so a long e-mail address still fits
       the 300px sidebar; the button clips overflow. */
    padding-left: 18px;
    padding-right: 18px;
}
.help-box__action .material-symbols-outlined {
    font-size: 18px;
}
.help-box__action--mail {
    background: var(--grey-700);
    color: #fff;
}
.help-box__action--mail:hover {
    color: #fff;
}


/* Kaarten met icoon ---------------------------------------------------- */

.icon-cards {
    margin: 24px 0;
}
.icon-cards .row {
    row-gap: 24px;
}
.icon-cards__item {
    height: 100%;
    background: var(--light);
    border-radius: 16px;
    padding: 28px;
}
.icon-cards__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.icon-cards__icon .material-symbols-outlined {
    font-size: 24px;
    font-weight: 700;
}
.icon-cards__title {
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 8px 0;
}
.icon-cards__text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--grey-700);
    margin: 0;
}


/* Testimonial ---------------------------------------------------------- */

.testimonial {
    display: flex;
    flex-direction: column;
    background: var(--dark);
    border-radius: 20px;
    overflow: hidden;
    margin: 32px 0;
    color: #fff;
}
.testimonial__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.testimonial__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
}
.testimonial__mark {
    font-family: 'komet', sans-serif;
    font-weight: 900;
    font-size: 56px;
    line-height: .7;
    color: var(--primary);
    margin-bottom: 18px;
}
.testimonial__quote {
    font-family: 'komet', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.32;
    margin: 0 0 18px 0;
    padding: 0;
    border: 0;
    color: #fff;
}
.testimonial__quote:before,
.testimonial__quote:after {
    content: none;
}
.testimonial__person {
    line-height: 1.4;
}
.testimonial__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
}
.testimonial__role {
    display: block;
    font-size: 15px;
    color: var(--muted-on-dark);
}

@media (min-width: 768px) {
    .testimonial {
        flex-direction: row;
        align-items: stretch;
    }
    .testimonial__image {
        flex: 0 0 300px;
        max-width: 300px;
        aspect-ratio: auto;
        height: auto;
    }
    .testimonial__body {
        flex: 1 1 auto;
        padding: 44px;
    }
    .testimonial__quote {
        font-size: 26px;
    }
}


/* Kaartsectie ---------------------------------------------------------- */

.card-section {
    padding: 48px 0;
}
.card-section--bg-light {
    background: var(--light);
}
.card-section__title {
    margin-bottom: 12px;
}
.card-section__intro {
    font-size: 18px;
    line-height: 1.6;
    color: var(--grey-700);
    max-width: 760px;
    margin-bottom: 32px;
}
.card-section__row {
    row-gap: 32px;
}
.card-section__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--dark);
    text-decoration: none !important;
}
.card-section__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}
.card-section__item-title {
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
}
.card-section__text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--grey-700);
    margin: 0;
}
.card-section__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    text-decoration: none !important;
}
.card-section__arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.card-section__arrow .material-symbols-outlined {
    font-size: 15px;
}
.card-section__link:hover .card-section__arrow {
    background: var(--dark);
    color: var(--primary);
}

/* Boxed: the image bleeds to the card edge, the rest sits in padding. */
.card-section--boxed .card-section__item {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
}
.card-section--boxed .card-section__image {
    aspect-ratio: 356 / 170;
}
.card-section--boxed .card-section__body {
    padding: 26px 28px 28px 28px;
}
.card-section--boxed .card-section__item-title {
    font-size: 21px;
    line-height: 1.25;
}

/* Plain: no card, just image, label and title. */
.card-section--plain .card-section__image {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 356 / 210;
    margin-bottom: 16px;
}
.card-section--plain .card-section__body {
    gap: 16px;
}

.card-section__image {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.card-section__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 992px) {
    .card-section {
        padding: 72px 0;
    }
}


/* Afsluitende CTA ------------------------------------------------------ */

.band-cta {
    padding: 48px 0;
}
.band-cta--primary {
    background: var(--primary);
}
.band-cta--dark {
    background: var(--dark);
    color: #fff;
}
.band-cta__title {
    margin-bottom: 12px;
}
.band-cta--dark .band-cta__title {
    color: #fff;
}
.band-cta__intro {
    font-size: 18px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0;
}
.band-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}
.band-cta__actions .btn {
    margin-top: 0;
}

@media (min-width: 992px) {
    .band-cta {
        padding: 72px 0;
    }
    .band-cta__intro {
        font-size: 19px;
    }
    .band-cta__actions {
        margin-top: 0;
        justify-content: flex-end;
    }
}