/* ==============================================================
   mAIndblowing.com — Transformaties

   Bestand: 06-transformaties.css
   Bevat:
   1. Hoofdpagina Transformaties
   2. Gedeelde vormgeving voor transformatiepagina's
   3. Wiskundige transformaties
   4. Materiaaltransformaties

   De volgorde is bewust behouden. Materiaaltransformaties gebruikt
   enkele gedeelde regels die eerder in dit bestand zijn gedefinieerd,
   waaronder .transformatie-reeks en .transformatie-navigatie.
   ============================================================= */

/* ==============================================================
   1. HOOFDPAGINA TRANSFORMATIES
   ============================================================= */
/* ---------- Introductie ---------- */

.transformatie-hero {
    background: #f4f1ea;
    padding: 110px 0 85px;
}

.transformatie-hero .et_pb_row {
    width: 90%;
    max-width: 920px;
}

.transformatie-label {
    margin-bottom: 18px;
    color: #b84a32;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.transformatie-hero h1 {
    margin-bottom: 30px;
    color: #162a3a;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.08em;
    letter-spacing: -0.025em;
}

.transformatie-intro {
    max-width: 820px;
    margin: 0 auto 18px;
    color: #46515a;
    font-size: 19px;
    line-height: 1.75em;
}

.transformatie-uitnodiging {
    margin-top: 35px;
    color: #162a3a;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ==================================================
   HOOFDPAGINA TRANSFORMATIES — BLURB-KAARTEN
   ================================================== */


/* ---------- Donkere rastersectie ---------- */

.transformatie-grid {
    padding: 80px 0 95px;
    background-color: #162a3a !important;
}


/* ---------- Twee kaarten per rij ---------- */

.transformatie-grid .et_pb_row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 55px;
    width: 92%;
    max-width: 1320px;
    padding: 0;
}

.transformatie-grid .et_pb_row:not(:last-child) {
    margin-bottom: 65px;
}

.transformatie-grid .et_pb_column {
    width: auto !important;
    margin: 0 !important;
}

/* ---------- Blurb-kaart ---------- */

.transformatie-grid .transformatie-kaart {
    position: relative;
    height: 100%;
    margin-bottom: 0 !important;
    text-align: left;
    transition: transform 0.4s ease;
}

.transformatie-grid .transformatie-kaart .et_pb_blurb_content {
    max-width: none;
}



/* ---------- Turquoise accentlijn ---------- */

.transformatie-grid .transformatie-kaart .et_pb_module_header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 2px;
    background-color: #63c7c5;
    transition: width 0.4s ease;
}

/* ---------- Omslagafbeelding ---------- */

.transformatie-grid .transformatie-kaart .et_pb_main_blurb_image {
    display: block;
    overflow: hidden;
    width: 100%;
    margin-bottom: 28px;
    border-radius: 8px;
    background-color: #263e4e;
}

.transformatie-grid .transformatie-kaart .et_pb_main_blurb_image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition:
        transform 0.65s ease,
        filter 0.5s ease;
}

/* ---------- Titel ---------- */

.transformatie-grid .transformatie-kaart .et_pb_module_header {
    position: relative;
    margin: 0 0 10px !important;
    padding: 0 0 15px;
    color: #f4f1ea !important;
    font-size: 27px !important;
    font-weight: 600;
    line-height: 1.25em;
    letter-spacing: -0.01em;
}

.transformatie-grid .transformatie-kaart .et_pb_module_header a,
.transformatie-grid .transformatie-kaart .et_pb_module_header span {
    color: #f4f1ea !important;
}


/* ---------- Omschrijving ---------- */

.transformatie-grid .transformatie-kaart .et_pb_blurb_description,
.transformatie-grid .transformatie-kaart .et_pb_blurb_description p,
.transformatie-grid .transformatie-kaart .et_pb_blurb_description span {
    margin-bottom: 0;
    color: #d8ddda !important;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 1.55em !important;
    letter-spacing: 0;
}


/* ---------- Hover ---------- */

.transformatie-grid .transformatie-kaart:hover {
    transform: translateY(-5px);
}

.transformatie-grid .transformatie-kaart:hover
.et_pb_main_blurb_image img {
    transform: scale(1.025);
    filter: brightness(0.94);
}

.transformatie-grid .transformatie-kaart:hover
.et_pb_module_header::after {
    width: 76px;
}

/* ---------- Afsluitende tekst ---------- */

.transformatie-slot {
    background: #162a3a;
    padding: 70px 0;
}

.transformatie-slot .et_pb_row {
    width: 88%;
    max-width: 900px;
}

.transformatie-slot p {
    margin: 0;
    color: #f4f1ea;
    font-size: clamp(21px, 2.2vw, 29px);
    font-weight: 300;
    line-height: 1.55em;
    text-align: center;
}



/* ---------- Tablet ---------- */

@media (max-width: 980px) {

    .transformatie-hero {
        padding: 80px 0 65px;
    }

    .transformatie-intro {
        font-size: 18px;
    }

    
.transformatie-kaart .et_pb_blurb_description {
        font-size: 17px !important;
    }

 .transformatie-grid {
        padding: 65px 0 75px;
    }

    .transformatie-grid .et_pb_row {
        gap: 50px 35px;
    }

    .transformatie-grid .et_pb_row:not(:last-child) {
        margin-bottom: 50px;
    }

    .transformatie-grid .transformatie-kaart
    .et_pb_module_header {
        font-size: 25px !important;
    }

    .transformatie-grid .transformatie-kaart
    .et_pb_blurb_description,
    .transformatie-grid .transformatie-kaart
    .et_pb_blurb_description p {
        font-size: 17px !important;
    }
    
    .materiaal-hero h1 {
        font-size: clamp(31px, 9vw, 39px) !important;
        line-height: 1.12em !important;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: manual;
    }
}


/* ---------- Smartphone ---------- */

@media (max-width: 767px) {

    .transformatie-hero {
        padding: 60px 0 45px;
    }

    .transformatie-hero .et_pb_row {
        width: 88%;
    }

    .transformatie-label {
        font-size: 11px;
        line-height: 1.6em;
    }

    .transformatie-hero h1 {
        margin-bottom: 24px;
    }

    .transformatie-intro {
        font-size: 17px;
        line-height: 1.65em;
    }

    .transformatie-uitnodiging {
        margin-top: 28px;
    }

   .transformatie-grid {
        padding: 55px 0 65px;
    }

    .transformatie-grid .et_pb_row {
        grid-template-columns: 1fr;
        gap: 50px;
        width: 88%;
    }

    .transformatie-grid .et_pb_row:not(:last-child) {
        margin-bottom: 50px;
    }

    .transformatie-grid .transformatie-kaart:hover {
        transform: none;
    }

    .transformatie-grid .transformatie-kaart
    .et_pb_module_header {
        font-size: 24px !important;
    }

    .transformatie-grid .transformatie-kaart
    .et_pb_blurb_description,
    .transformatie-grid .transformatie-kaart
    .et_pb_blurb_description p {
        font-size: 16px !important;
        line-height: 1.5em !important;
    }

    .transformatie-kaart:hover {
        transform: none;
    }

    .transformatie-kaart h2 {
        font-size: 25px;
    }

    .transformatie-kaart .et_pb_blurb_description {
        font-size: 16px !important;
        line-height: 1.5em !important;
    }

    .transformatie-slot {
        padding: 55px 0;
    }
}

/* ==================================================
   HOOFDPAGINA TRANSFORMATIES - EINDE
   ================================================== */

/* ==================================================
   WISKUNDIGE TRANSFORMATIES - BEGIN
   ================================================== */

.transformatie-wiskundig {
    --trans-accent: #2e7b80;
    --trans-accent-dark: #205e63;
    --trans-soft: #e9f1ef;
    --trans-paper: #f6f4ee;
    --trans-ink: #172c3a;
    --trans-text: #4f5d63;
}


/* ---------- Introductie ---------- */

.wiskunde-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0 90px;
    background: var(--trans-soft);
}

.wiskunde-hero::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -90px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    opacity: 0.32;
    transform: translateY(-50%);
    pointer-events: none;

    background:
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 27px,
            rgba(46, 123, 128, 0.34) 28px,
            rgba(46, 123, 128, 0.34) 29px
        );
}

.wiskunde-hero .et_pb_row {
    z-index: 2;
    width: 88%;
    max-width: 1120px;
}

.wiskunde-hero .et_pb_text {
    max-width: 820px;
}

.transformatie-kruimel {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 45px;
    color: #68777a;
    font-size: 14px;
}

.transformatie-kruimel a {
    color: var(--trans-accent-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.transformatie-kruimel a:hover {
    border-bottom-color: var(--trans-accent);
}

.transformatie-label {
    margin-bottom: 17px;
    color: var(--trans-accent-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5em;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.wiskunde-hero h1 {
    max-width: 850px;
    margin-bottom: 30px;
    color: var(--trans-ink);
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 500;
    line-height: 1.08em;
    letter-spacing: -0.025em;
}

.transformatie-lead {
    max-width: 790px;
    margin-bottom: 18px;
    color: var(--trans-text);
    font-size: 19px;
    line-height: 1.75em;
}


/* ---------- Overzicht reeksen ---------- */

.wiskunde-reeksen {
    padding: 100px 0 115px;
    background: var(--trans-paper);
}

.wiskunde-reeksen > .et_pb_row {
    width: 90%;
    max-width: 1280px;
}

.wiskunde-reeksen h2 {
    margin-bottom: 18px;
    color: var(--trans-ink);
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.15em;
}

.reeksen-inleiding {
    max-width: 720px;
    margin-bottom: 55px;
    color: var(--trans-text);
    font-size: 18px;
    line-height: 1.7em;
}


/* De twee kolommen als gelijkmatig raster */

.wiskunde-reeksen .reeksen-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 65px 55px;
    width: 90%;
    max-width: 1280px;
    padding: 0;
    margin-bottom: 75px;
}

.wiskunde-reeksen .reeksen-raster:last-child {
    margin-bottom: 0;
}

.reeksen-raster .et_pb_column {
    width: auto !important;
    margin: 0 !important;
}


/* ---------- Afzonderlijke reeks ---------- */

.transformatie-reeks {
    position: relative;
    padding-top: 22px;
    border-top: 2px solid var(--trans-accent);
}

.transformatie-reeks .reeksnummer {
    display: block;
    margin-bottom: 12px;
    color: var(--trans-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.transformatie-reeks h3 {
    margin-bottom: 13px;
    color: var(--trans-ink);
    font-size: clamp(25px, 2.2vw, 32px);
    font-weight: 500;
    line-height: 1.2em;
}

.transformatie-reeks p {
    min-height: 86px;
    margin-bottom: 24px;
    color: var(--trans-text);
    font-size: 16px;
    line-height: 1.65em;
}


/* ---------- JIG-omslagen ---------- */

.transformatie-reeks .jig-imageContainer {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(23, 44, 58, 0.10);
}

.transformatie-reeks .jig-imageContainer img {
    transition:
        transform 0.6s ease,
        filter 0.5s ease;
}

.transformatie-reeks .jig-imageContainer:hover img {
    transform: scale(1.025);
    filter: brightness(0.94);
}


/* ==================================================
   NAVIGATIE ONDER TRANSFORMATIEPAGINA'S
   Geldt voor Wiskundige en Materiaaltransformaties
   ================================================== */

.transformatie-navigatie.et_pb_section {
    min-height: 0 !important;
    padding: 46px 0 !important;
    background: #172c3a !important;
}

/* Werkt zowel met als zonder de extra klasse transformatie-nav-rij. */
.transformatie-navigatie > .et_pb_row,
.transformatie-navigatie .transformatie-nav-rij {
    display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 280px));
justify-content: center;
align-items: stretch;
gap: 24px;
    width: 90% !important;
    max-width: 1280px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.transformatie-navigatie .et_pb_column {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.transformatie-navigatie .et_pb_button_module_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.transformatie-navigatie .et_pb_button_module_wrapper,
.transformatie-nav-prev,
.transformatie-nav-all,
.transformatie-nav-next {
    text-align: center !important;
}

/* Alle drie de knoppen. */
.transformatie-navigatie .et_pb_button {
    display: inline-flex !important;
     width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    margin: 0 !important;
    padding: 13px 24px !important;
    border: 1px solid rgba(244, 241, 234, 0.72) !important;
    border-radius: 4px !important;
    color: #f4f1ea !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.25em !important;
    text-align: center;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* De middelste knop is de primaire terugweg. */
.transformatie-navigatie .et_pb_column:nth-child(2) .et_pb_button,
.transformatie-navigatie .transformatie-nav-all .et_pb_button {
    min-width: 235px;
    border-color: #f4f1ea !important;
    color: #172c3a !important;
    background: #f4f1ea !important;
}

.transformatie-navigatie .et_pb_button:hover {
    border-color: var(--trans-accent, #2e7b80) !important;
    color: #ffffff !important;
    background: var(--trans-accent, #2e7b80) !important;
    transform: translateY(-2px);
}

/* De pijlen staan in de knoptekst; Divi hoeft geen extra icoon toe te voegen. */
.transformatie-navigatie .et_pb_button::after {
    display: none !important;
}

@media (max-width: 980px) {

    .transformatie-navigatie > .et_pb_row,
    .transformatie-navigatie .transformatie-nav-rij {
        gap: 18px;
    }

    .transformatie-navigatie .et_pb_button {
        padding: 12px 17px !important;
        font-size: 16px !important;
    }

    .transformatie-navigatie .et_pb_column:nth-child(2) .et_pb_button,
    .transformatie-navigatie .transformatie-nav-all .et_pb_button {
        min-width: 205px;
    }
}

@media (max-width: 767px) {

    .transformatie-navigatie.et_pb_section {
        padding: 40px 0 !important;
    }

    .transformatie-navigatie > .et_pb_row,
    .transformatie-navigatie .transformatie-nav-rij {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 86% !important;
    }

    .transformatie-navigatie .et_pb_column:nth-child(1) .et_pb_button_module_wrapper,
    .transformatie-navigatie .et_pb_column:nth-child(2) .et_pb_button_module_wrapper,
    .transformatie-navigatie .et_pb_column:nth-child(3) .et_pb_button_module_wrapper,
    .transformatie-nav-prev,
    .transformatie-nav-all,
    .transformatie-nav-next {
        text-align: center !important;
    }

    .transformatie-navigatie .et_pb_button {
        width: 100%;
        max-width: 340px;
        white-space: normal;
    }
}


/* ---------- Tablet ---------- */

@media (max-width: 980px) {

    .wiskunde-hero {
        padding: 75px 0 70px;
    }

    .wiskunde-hero::after {
        right: -190px;
        width: 430px;
        height: 430px;
        opacity: 0.22;
    }

    .wiskunde-reeksen {
        padding: 80px 0 90px;
    }

    .wiskunde-reeksen .reeksen-raster {
        gap: 55px 35px;
        margin-bottom: 60px;
    }

    .transformatie-reeks p {
        min-height: 105px;
    }
}


/* ---------- Smartphone ---------- */

@media (max-width: 767px) {

    .wiskunde-hero {
        padding: 55px 0 50px;
    }

    .wiskunde-hero::after {
        top: 90px;
        right: -220px;
        width: 360px;
        height: 360px;
        opacity: 0.18;
    }

    .transformatie-kruimel {
        margin-bottom: 35px;
        font-size: 13px;
    }

    .wiskunde-hero h1 {
        font-size: 39px;
    }

    .transformatie-lead {
        font-size: 17px;
        line-height: 1.68em;
    }

    .wiskunde-reeksen {
        padding: 65px 0 75px;
    }

    .wiskunde-reeksen .reeksen-raster {
        grid-template-columns: 1fr;
        gap: 55px;
        width: 88%;
        margin-bottom: 55px;
    }

    .transformatie-reeks p {
        min-height: 0;
    }

}
/* ==================================================
   WISKUNDIGE TRANSFORMATIES -EINDE
   ================================================== */

/* ==================================================
   MATERIAALTRANSFORMATIES BEGIN
   ================================================== */

.transformatie-materiaal {
    --trans-accent: #a85e46;
    --trans-accent-dark: #814634;
    --trans-soft: #f1e6dc;
    --trans-paper: #f7f4ee;
    --trans-ink: #302a28;
    --trans-text: #625954;
}


/* ---------- Introductie ---------- */

.materiaal-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0 90px;
    background: var(--trans-soft);
}

.materiaal-hero::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -70px;
    width: 520px;
    height: 520px;
    border-radius: 48% 52% 42% 58% / 55% 40% 60% 45%;
    opacity: 0.48;
    transform: translateY(-50%) rotate(-8deg);
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 35% 30%,
            rgba(255, 255, 255, 0.72) 0 13%,
            transparent 14%
        ),
        radial-gradient(
            ellipse at 63% 40%,
            rgba(168, 94, 70, 0.18) 0 24%,
            transparent 25%
        ),
        radial-gradient(
            ellipse at 45% 68%,
            rgba(129, 70, 52, 0.14) 0 34%,
            transparent 35%
        ),
        repeating-radial-gradient(
            ellipse at 48% 52%,
            transparent 0 24px,
            rgba(129, 70, 52, 0.18) 25px 27px
        );
}

.materiaal-hero .et_pb_row {
    z-index: 2;
    width: 88%;
    max-width: 1120px;
}

.materiaal-hero .et_pb_text {
    max-width: 820px;
}

.materiaal-hero h1 {
    max-width: 850px;
    margin-bottom: 30px;
    color: var(--trans-ink);
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 500;
    line-height: 1.08em;
    letter-spacing: -0.025em;
}


/* ---------- Overzicht materiaalreeksen ---------- */

.materiaal-reeksen {
    padding: 100px 0 115px;
    background: var(--trans-paper);
}

.materiaal-reeksen > .et_pb_row {
    width: 90%;
    max-width: 1280px;
}

.materiaal-reeksen h2 {
    margin-bottom: 18px;
    color: var(--trans-ink);
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.15em;
}

.materiaal-reeksen .reeksen-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 65px 55px;
    width: 90%;
    max-width: 1280px;
    padding: 0;
    margin-bottom: 75px;
}

.materiaal-reeksen .reeksen-raster:last-child {
    margin-bottom: 0;
}


/* ---------- Tablet ---------- */

@media (max-width: 980px) {

    .materiaal-hero {
        padding: 75px 0 70px;
    }

    .materiaal-hero::after {
        right: -190px;
        width: 430px;
        height: 430px;
        opacity: 0.32;
    }

    .materiaal-reeksen {
        padding: 80px 0 90px;
    }

    .materiaal-reeksen .reeksen-raster {
        gap: 55px 35px;
        margin-bottom: 60px;
    }
}


/* ---------- Smartphone ---------- */

@media (max-width: 767px) {

    .materiaal-hero {
        padding: 55px 0 50px;
    }

    .materiaal-hero::after {
        top: 90px;
        right: -230px;
        width: 370px;
        height: 370px;
        opacity: 0.24;
    }

    .materiaal-hero h1 {
        font-size: 39px;
    }

    .materiaal-reeksen {
        padding: 65px 0 75px;
    }

    .materiaal-reeksen .reeksen-raster {
        grid-template-columns: 1fr;
        gap: 55px;
        width: 88%;
        margin-bottom: 55px;
    }
}
/* ==================================================
   MATERIAALTRANSFORMATIES EINDE
   ================================================== */

/* ==============================================================
   mAIndblowing.com — Transformaties

   Bestand: 06-transformaties.css
   Bevat:
   1. Hoofdpagina Transformaties
   2. Gedeelde vormgeving voor transformatiepagina's
   3. Wiskundige transformaties
   4. Materiaaltransformaties
   5. Ruimtelijke vervreemding

   De volgorde is bewust behouden. Materiaaltransformaties gebruikt
   enkele gedeelde regels die eerder in dit bestand zijn gedefinieerd,
   waaronder .transformatie-reeks en .transformatie-navigatie.
   ============================================================= */

/* ==============================================================
   1. HOOFDPAGINA TRANSFORMATIES
   ============================================================= */
/* ---------- Introductie ---------- */

.transformatie-hero {
    background: #f4f1ea;
    padding: 110px 0 85px;
}

.transformatie-hero .et_pb_row {
    width: 90%;
    max-width: 920px;
}

.transformatie-label {
    margin-bottom: 18px;
    color: #b84a32;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.transformatie-hero h1 {
    margin-bottom: 30px;
    color: #162a3a;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.08em;
    letter-spacing: -0.025em;
}

.transformatie-intro {
    max-width: 820px;
    margin: 0 auto 18px;
    color: #46515a;
    font-size: 19px;
    line-height: 1.75em;
}

.transformatie-uitnodiging {
    margin-top: 35px;
    color: #162a3a;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ==================================================
   HOOFDPAGINA TRANSFORMATIES — BLURB-KAARTEN
   ================================================== */


/* ---------- Donkere rastersectie ---------- */

.transformatie-grid {
    padding: 80px 0 95px;
    background-color: #162a3a !important;
}


/* ---------- Twee kaarten per rij ---------- */

.transformatie-grid .et_pb_row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 55px;
    width: 92%;
    max-width: 1320px;
    padding: 0;
}

.transformatie-grid .et_pb_row:not(:last-child) {
    margin-bottom: 65px;
}

.transformatie-grid .et_pb_column {
    width: auto !important;
    margin: 0 !important;
}

/* ---------- Blurb-kaart ---------- */

.transformatie-grid .transformatie-kaart {
    position: relative;
    height: 100%;
    margin-bottom: 0 !important;
    text-align: left;
    transition: transform 0.4s ease;
}

.transformatie-grid .transformatie-kaart .et_pb_blurb_content {
    max-width: none;
}



/* ---------- Turquoise accentlijn ---------- */

.transformatie-grid .transformatie-kaart .et_pb_module_header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 2px;
    background-color: #63c7c5;
    transition: width 0.4s ease;
}

/* ---------- Omslagafbeelding ---------- */

.transformatie-grid .transformatie-kaart .et_pb_main_blurb_image {
    display: block;
    overflow: hidden;
    width: 100%;
    margin-bottom: 28px;
    border-radius: 8px;
    background-color: #263e4e;
}

.transformatie-grid .transformatie-kaart .et_pb_main_blurb_image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition:
        transform 0.65s ease,
        filter 0.5s ease;
}

/* ---------- Titel ---------- */

.transformatie-grid .transformatie-kaart .et_pb_module_header {
    position: relative;
    margin: 0 0 10px !important;
    padding: 0 0 15px;
    color: #f4f1ea !important;
    font-size: 27px !important;
    font-weight: 600;
    line-height: 1.25em;
    letter-spacing: -0.01em;
}

.transformatie-grid .transformatie-kaart .et_pb_module_header a,
.transformatie-grid .transformatie-kaart .et_pb_module_header span {
    color: #f4f1ea !important;
}


/* ---------- Omschrijving ---------- */

.transformatie-grid .transformatie-kaart .et_pb_blurb_description,
.transformatie-grid .transformatie-kaart .et_pb_blurb_description p,
.transformatie-grid .transformatie-kaart .et_pb_blurb_description span {
    margin-bottom: 0;
    color: #d8ddda !important;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 1.55em !important;
    letter-spacing: 0;
}


/* ---------- Hover ---------- */

.transformatie-grid .transformatie-kaart:hover {
    transform: translateY(-5px);
}

.transformatie-grid .transformatie-kaart:hover
.et_pb_main_blurb_image img {
    transform: scale(1.025);
    filter: brightness(0.94);
}

.transformatie-grid .transformatie-kaart:hover
.et_pb_module_header::after {
    width: 76px;
}

/* ---------- Afsluitende tekst ---------- */

.transformatie-slot {
    background: #162a3a;
    padding: 70px 0;
}

.transformatie-slot .et_pb_row {
    width: 88%;
    max-width: 900px;
}

.transformatie-slot p {
    margin: 0;
    color: #f4f1ea;
    font-size: clamp(21px, 2.2vw, 29px);
    font-weight: 300;
    line-height: 1.55em;
    text-align: center;
}



/* ---------- Tablet ---------- */

@media (max-width: 980px) {

    .transformatie-hero {
        padding: 80px 0 65px;
    }

    .transformatie-intro {
        font-size: 18px;
    }

    
.transformatie-kaart .et_pb_blurb_description {
        font-size: 17px !important;
    }

 .transformatie-grid {
        padding: 65px 0 75px;
    }

    .transformatie-grid .et_pb_row {
        gap: 50px 35px;
    }

    .transformatie-grid .et_pb_row:not(:last-child) {
        margin-bottom: 50px;
    }

    .transformatie-grid .transformatie-kaart
    .et_pb_module_header {
        font-size: 25px !important;
    }

    .transformatie-grid .transformatie-kaart
    .et_pb_blurb_description,
    .transformatie-grid .transformatie-kaart
    .et_pb_blurb_description p {
        font-size: 17px !important;
    }
    
    .materiaal-hero h1 {
        font-size: clamp(31px, 9vw, 39px) !important;
        line-height: 1.12em !important;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: manual;
    }
}


/* ---------- Smartphone ---------- */

@media (max-width: 767px) {

    .transformatie-hero {
        padding: 60px 0 45px;
    }

    .transformatie-hero .et_pb_row {
        width: 88%;
    }

    .transformatie-label {
        font-size: 11px;
        line-height: 1.6em;
    }

    .transformatie-hero h1 {
        margin-bottom: 24px;
    }

    .transformatie-intro {
        font-size: 17px;
        line-height: 1.65em;
    }

    .transformatie-uitnodiging {
        margin-top: 28px;
    }

   .transformatie-grid {
        padding: 55px 0 65px;
    }

    .transformatie-grid .et_pb_row {
        grid-template-columns: 1fr;
        gap: 50px;
        width: 88%;
    }

    .transformatie-grid .et_pb_row:not(:last-child) {
        margin-bottom: 50px;
    }

    .transformatie-grid .transformatie-kaart:hover {
        transform: none;
    }

    .transformatie-grid .transformatie-kaart
    .et_pb_module_header {
        font-size: 24px !important;
    }

    .transformatie-grid .transformatie-kaart
    .et_pb_blurb_description,
    .transformatie-grid .transformatie-kaart
    .et_pb_blurb_description p {
        font-size: 16px !important;
        line-height: 1.5em !important;
    }

    .transformatie-kaart:hover {
        transform: none;
    }

    .transformatie-kaart h2 {
        font-size: 25px;
    }

    .transformatie-kaart .et_pb_blurb_description {
        font-size: 16px !important;
        line-height: 1.5em !important;
    }

    .transformatie-slot {
        padding: 55px 0;
    }
}

/* ==================================================
   HOOFDPAGINA TRANSFORMATIES - EINDE
   ================================================== */

/* ==================================================
   WISKUNDIGE TRANSFORMATIES - BEGIN
   ================================================== */

.transformatie-wiskundig {
    --trans-accent: #2e7b80;
    --trans-accent-dark: #205e63;
    --trans-soft: #e9f1ef;
    --trans-paper: #f6f4ee;
    --trans-ink: #172c3a;
    --trans-text: #4f5d63;
}


/* ---------- Introductie ---------- */

.wiskunde-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0 90px;
    background: var(--trans-soft);
}

.wiskunde-hero::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -90px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    opacity: 0.32;
    transform: translateY(-50%);
    pointer-events: none;

    background:
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 27px,
            rgba(46, 123, 128, 0.34) 28px,
            rgba(46, 123, 128, 0.34) 29px
        );
}

.wiskunde-hero .et_pb_row {
    z-index: 2;
    width: 88%;
    max-width: 1120px;
}

.wiskunde-hero .et_pb_text {
    max-width: 820px;
}

.transformatie-kruimel {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 45px;
    color: #68777a;
    font-size: 14px;
}

.transformatie-kruimel a {
    color: var(--trans-accent-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.transformatie-kruimel a:hover {
    border-bottom-color: var(--trans-accent);
}

.transformatie-label {
    margin-bottom: 17px;
    color: var(--trans-accent-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5em;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.wiskunde-hero h1 {
    max-width: 850px;
    margin-bottom: 30px;
    color: var(--trans-ink);
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 500;
    line-height: 1.08em;
    letter-spacing: -0.025em;
}

.transformatie-lead {
    max-width: 790px;
    margin-bottom: 18px;
    color: var(--trans-text);
    font-size: 19px;
    line-height: 1.75em;
}


/* ---------- Overzicht reeksen ---------- */

.wiskunde-reeksen {
    padding: 100px 0 115px;
    background: var(--trans-paper);
}

.wiskunde-reeksen > .et_pb_row {
    width: 90%;
    max-width: 1280px;
}

.wiskunde-reeksen h2 {
    margin-bottom: 18px;
    color: var(--trans-ink);
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.15em;
}

.reeksen-inleiding {
    max-width: 720px;
    margin-bottom: 55px;
    color: var(--trans-text);
    font-size: 18px;
    line-height: 1.7em;
}


/* De twee kolommen als gelijkmatig raster */

.wiskunde-reeksen .reeksen-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 65px 55px;
    width: 90%;
    max-width: 1280px;
    padding: 0;
    margin-bottom: 75px;
}

.wiskunde-reeksen .reeksen-raster:last-child {
    margin-bottom: 0;
}

.reeksen-raster .et_pb_column {
    width: auto !important;
    margin: 0 !important;
}


/* ---------- Afzonderlijke reeks ---------- */

.transformatie-reeks {
    position: relative;
    padding-top: 22px;
    border-top: 2px solid var(--trans-accent);
}

.transformatie-reeks .reeksnummer {
    display: block;
    margin-bottom: 12px;
    color: var(--trans-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.transformatie-reeks h3 {
    margin-bottom: 13px;
    color: var(--trans-ink);
    font-size: clamp(25px, 2.2vw, 32px);
    font-weight: 500;
    line-height: 1.2em;
}

.transformatie-reeks p {
    min-height: 86px;
    margin-bottom: 24px;
    color: var(--trans-text);
    font-size: 16px;
    line-height: 1.65em;
}


/* ---------- JIG-omslagen ---------- */

.transformatie-reeks .jig-imageContainer {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(23, 44, 58, 0.10);
}

.transformatie-reeks .jig-imageContainer img {
    transition:
        transform 0.6s ease,
        filter 0.5s ease;
}

.transformatie-reeks .jig-imageContainer:hover img {
    transform: scale(1.025);
    filter: brightness(0.94);
}


/* ==================================================
   NAVIGATIE ONDER TRANSFORMATIEPAGINA'S
   Geldt voor Wiskundige en Materiaaltransformaties
   ================================================== */

.transformatie-navigatie.et_pb_section {
    min-height: 0 !important;
    padding: 46px 0 !important;
    background: #172c3a !important;
}

/* Werkt zowel met als zonder de extra klasse transformatie-nav-rij. */
.transformatie-navigatie > .et_pb_row,
.transformatie-navigatie .transformatie-nav-rij {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    width: 90% !important;
    max-width: 1280px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.transformatie-navigatie .et_pb_column {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.transformatie-navigatie .et_pb_button_module_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.transformatie-navigatie .et_pb_column:nth-child(1) .et_pb_button_module_wrapper,
.transformatie-nav-prev {
    text-align: left !important;
}

.transformatie-navigatie .et_pb_column:nth-child(2) .et_pb_button_module_wrapper,
.transformatie-nav-all {
    text-align: center !important;
}

.transformatie-navigatie .et_pb_column:nth-child(3) .et_pb_button_module_wrapper,
.transformatie-nav-next {
    text-align: right !important;
}

/* Alle drie de knoppen. */
.transformatie-navigatie .et_pb_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    margin: 0 !important;
    padding: 13px 24px !important;
    border: 1px solid rgba(244, 241, 234, 0.72) !important;
    border-radius: 4px !important;
    color: #f4f1ea !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.25em !important;
    text-align: center;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* De middelste knop is de primaire terugweg. */
.transformatie-navigatie .et_pb_column:nth-child(2) .et_pb_button,
.transformatie-navigatie .transformatie-nav-all .et_pb_button {
    min-width: 235px;
    border-color: #f4f1ea !important;
    color: #172c3a !important;
    background: #f4f1ea !important;
}

.transformatie-navigatie .et_pb_button:hover {
    border-color: var(--trans-accent, #2e7b80) !important;
    color: #ffffff !important;
    background: var(--trans-accent, #2e7b80) !important;
    transform: translateY(-2px);
}

/* De pijlen staan in de knoptekst; Divi hoeft geen extra icoon toe te voegen. */
.transformatie-navigatie .et_pb_button::after {
    display: none !important;
}

@media (max-width: 980px) {

    .transformatie-navigatie > .et_pb_row,
    .transformatie-navigatie .transformatie-nav-rij {
        gap: 18px;
    }

    .transformatie-navigatie .et_pb_button {
        padding: 12px 17px !important;
        font-size: 16px !important;
    }

    .transformatie-navigatie .et_pb_column:nth-child(2) .et_pb_button,
    .transformatie-navigatie .transformatie-nav-all .et_pb_button {
        min-width: 205px;
    }
}

@media (max-width: 767px) {

    .transformatie-navigatie.et_pb_section {
        padding: 40px 0 !important;
    }

    .transformatie-navigatie > .et_pb_row,
    .transformatie-navigatie .transformatie-nav-rij {
        grid-template-columns: 1fr;
        gap: 14px;
        width: 86% !important;
    }

    .transformatie-navigatie .et_pb_column:nth-child(1) .et_pb_button_module_wrapper,
    .transformatie-navigatie .et_pb_column:nth-child(2) .et_pb_button_module_wrapper,
    .transformatie-navigatie .et_pb_column:nth-child(3) .et_pb_button_module_wrapper,
    .transformatie-nav-prev,
    .transformatie-nav-all,
    .transformatie-nav-next {
        text-align: center !important;
    }

    .transformatie-navigatie .et_pb_button {
        width: 100%;
        max-width: 340px;
        white-space: normal;
    }
}


/* ---------- Tablet ---------- */

@media (max-width: 980px) {

    .wiskunde-hero {
        padding: 75px 0 70px;
    }

    .wiskunde-hero::after {
        right: -190px;
        width: 430px;
        height: 430px;
        opacity: 0.22;
    }

    .wiskunde-reeksen {
        padding: 80px 0 90px;
    }

    .wiskunde-reeksen .reeksen-raster {
        gap: 55px 35px;
        margin-bottom: 60px;
    }

    .transformatie-reeks p {
        min-height: 105px;
    }
}


/* ---------- Smartphone ---------- */

@media (max-width: 767px) {

    .wiskunde-hero {
        padding: 55px 0 50px;
    }

    .wiskunde-hero::after {
        top: 90px;
        right: -220px;
        width: 360px;
        height: 360px;
        opacity: 0.18;
    }

    .transformatie-kruimel {
        margin-bottom: 35px;
        font-size: 13px;
    }

    .wiskunde-hero h1 {
        font-size: 39px;
    }

    .transformatie-lead {
        font-size: 17px;
        line-height: 1.68em;
    }

    .wiskunde-reeksen {
        padding: 65px 0 75px;
    }

    .wiskunde-reeksen .reeksen-raster {
        grid-template-columns: 1fr;
        gap: 55px;
        width: 88%;
        margin-bottom: 55px;
    }

    .transformatie-reeks p {
        min-height: 0;
    }

}
/* ==================================================
   WISKUNDIGE TRANSFORMATIES -EINDE
   ================================================== */

/* ==================================================
   MATERIAALTRANSFORMATIES BEGIN
   ================================================== */

.transformatie-materiaal {
    --trans-accent: #a85e46;
    --trans-accent-dark: #814634;
    --trans-soft: #f1e6dc;
    --trans-paper: #f7f4ee;
    --trans-ink: #302a28;
    --trans-text: #625954;
}


/* ---------- Introductie ---------- */

.materiaal-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0 90px;
    background: var(--trans-soft);
}

.materiaal-hero::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -70px;
    width: 520px;
    height: 520px;
    border-radius: 48% 52% 42% 58% / 55% 40% 60% 45%;
    opacity: 0.48;
    transform: translateY(-50%) rotate(-8deg);
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 35% 30%,
            rgba(255, 255, 255, 0.72) 0 13%,
            transparent 14%
        ),
        radial-gradient(
            ellipse at 63% 40%,
            rgba(168, 94, 70, 0.18) 0 24%,
            transparent 25%
        ),
        radial-gradient(
            ellipse at 45% 68%,
            rgba(129, 70, 52, 0.14) 0 34%,
            transparent 35%
        ),
        repeating-radial-gradient(
            ellipse at 48% 52%,
            transparent 0 24px,
            rgba(129, 70, 52, 0.18) 25px 27px
        );
}

.materiaal-hero .et_pb_row {
    z-index: 2;
    width: 88%;
    max-width: 1120px;
}

.materiaal-hero .et_pb_text {
    max-width: 820px;
}

.materiaal-hero h1 {
    max-width: 850px;
    margin-bottom: 30px;
    color: var(--trans-ink);
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 500;
    line-height: 1.08em;
    letter-spacing: -0.025em;
}


/* ---------- Overzicht materiaalreeksen ---------- */

.materiaal-reeksen {
    padding: 100px 0 115px;
    background: var(--trans-paper);
}

.materiaal-reeksen > .et_pb_row {
    width: 90%;
    max-width: 1280px;
}

.materiaal-reeksen h2 {
    margin-bottom: 18px;
    color: var(--trans-ink);
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.15em;
}

.materiaal-reeksen .reeksen-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 65px 55px;
    width: 90%;
    max-width: 1280px;
    padding: 0;
    margin-bottom: 75px;
}

.materiaal-reeksen .reeksen-raster:last-child {
    margin-bottom: 0;
}


/* ---------- Tablet ---------- */

@media (max-width: 980px) {

    .materiaal-hero {
        padding: 75px 0 70px;
    }

    .materiaal-hero::after {
        right: -190px;
        width: 430px;
        height: 430px;
        opacity: 0.32;
    }

    .materiaal-reeksen {
        padding: 80px 0 90px;
    }

    .materiaal-reeksen .reeksen-raster {
        gap: 55px 35px;
        margin-bottom: 60px;
    }
}


/* ---------- Smartphone ---------- */

@media (max-width: 767px) {

    .materiaal-hero {
        padding: 55px 0 50px;
    }

    .materiaal-hero::after {
        top: 90px;
        right: -230px;
        width: 370px;
        height: 370px;
        opacity: 0.24;
    }

    .materiaal-hero h1 {
        font-size: 39px;
    }

    .materiaal-reeksen {
        padding: 65px 0 75px;
    }

    .materiaal-reeksen .reeksen-raster {
        grid-template-columns: 1fr;
        gap: 55px;
        width: 88%;
        margin-bottom: 55px;
    }
}
/* ==================================================
   MATERIAALTRANSFORMATIES EINDE
   ================================================== */

/* ==================================================
   RUIMTELIJKE VERVREEMDING BEGIN
   ================================================== */

.transformatie-ruimtelijk {
    --trans-accent: #6878a8;
    --trans-accent-dark: #465582;
    --trans-soft: #e9ebf2;
    --trans-paper: #f5f3ee;
    --trans-ink: #202b42;
    --trans-text: #566071;
}


/* ---------- Introductie ---------- */

.ruimte-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0 90px;
    background: var(--trans-soft);
}

/* Perspectivisch lijnenspel: een ruimte die niet vanuit één standpunt klopt. */
.ruimte-hero::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -95px;
    width: 570px;
    height: 470px;
    opacity: 0.46;
    transform: translateY(-50%) rotate(-4deg);
    pointer-events: none;
    clip-path: polygon(12% 8%, 94% 0, 82% 94%, 0 78%);
    background:
        repeating-linear-gradient(
            78deg,
            transparent 0 36px,
            rgba(70, 85, 130, 0.21) 37px 39px
        ),
        repeating-linear-gradient(
            12deg,
            transparent 0 42px,
            rgba(104, 120, 168, 0.24) 43px 45px
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.45),
            rgba(104, 120, 168, 0.08)
        );
}

.ruimte-hero .et_pb_row {
    z-index: 2;
    width: 88%;
    max-width: 1120px;
}

.ruimte-hero .et_pb_text {
    max-width: 820px;
}

.ruimte-hero h1 {
    max-width: 850px;
    margin-bottom: 30px;
    color: var(--trans-ink);
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 500;
    line-height: 1.08em;
    letter-spacing: -0.025em;
}


/* ---------- Overzicht ruimtelijke reeksen ---------- */

.ruimte-reeksen {
    padding: 100px 0 115px;
    background: var(--trans-paper);
}

.ruimte-reeksen > .et_pb_row {
    width: 90%;
    max-width: 1280px;
}

.ruimte-reeksen h2 {
    margin-bottom: 18px;
    color: var(--trans-ink);
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.15em;
}

.ruimte-reeksen .reeksen-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 65px 55px;
    width: 90%;
    max-width: 1280px;
    padding: 0;
    margin-bottom: 75px;
}

.ruimte-reeksen .reeksen-raster:last-child {
    margin-bottom: 0;
}


/* ---------- Subtiel ruimtelijk accent per reeks ---------- */

.transformatie-ruimtelijk .transformatie-reeks {
    border-top-color: var(--trans-accent);
}

.transformatie-ruimtelijk .transformatie-reeks::before {
    content: "";
    position: absolute;
    top: -2px;
    right: 0;
    width: 58px;
    height: 2px;
    background: var(--trans-accent-dark);
    transform: translateY(7px) rotate(-9deg);
    transform-origin: right center;
    opacity: 0.58;
}


/* ---------- Tablet ---------- */

@media (max-width: 980px) {

    .ruimte-hero {
        padding: 75px 0 70px;
    }

    .ruimte-hero::after {
        right: -215px;
        width: 500px;
        height: 420px;
        opacity: 0.30;
    }

    .ruimte-reeksen {
        padding: 80px 0 90px;
    }

    .ruimte-reeksen .reeksen-raster {
        gap: 55px 35px;
        margin-bottom: 60px;
    }
}


/* ---------- Smartphone ---------- */

@media (max-width: 767px) {

    .ruimte-hero {
        padding: 55px 0 50px;
    }

    .ruimte-hero::after {
        top: 100px;
        right: -265px;
        width: 430px;
        height: 350px;
        opacity: 0.20;
    }

    .ruimte-hero h1 {
        font-size: clamp(34px, 10vw, 39px);
        line-height: 1.12em;
    }

    .ruimte-reeksen {
        padding: 65px 0 75px;
    }

    .ruimte-reeksen .reeksen-raster {
        grid-template-columns: 1fr;
        gap: 55px;
        width: 88%;
        margin-bottom: 55px;
    }
}

/* ==================================================
   RUIMTELIJKE VERVREEMDING EINDE
   ================================================== */