/**
 * Pattern-support-CSS.
 *
 * Hier hoort CSS die bij een Kadence-pattern (Pattern Hub) hoort, maar
 * NIET via de normale block-instellingen te regelen is — EN die overal
 * hetzelfde moet zijn (geen site-specifieke afwijking, dat hoort in het
 * Additional CSS-veld van de losse site zelf, niet hier).
 *
 * WAAROM HIER, EN NIET IN HET BLOCK'S EIGEN "CUSTOM CSS"-VELD IN DE
 * PATTERN ZELF: CSS die je daar zet, zit vast in die ene pattern-
 * instantie — pas je 'm later aan, dan moet je elke site waar die
 * pattern al gebruikt/gepusht is langs, in plaats van één plek aan te
 * passen. Hier is het één bestand, één keer aanpassen, overal bijgewerkt.
 *
 * CONVENTIE: geef de buitenste rij van een pattern een unieke,
 * herkenbare class (zoals je toch al doet voor site-specifieke CSS-
 * overrides), en gebruik diezelfde class hier als sectie-anker. Zo blijft
 * dit bestand overzichtelijk te doorzoeken, ook met veel patronen.
 *
 * Wordt op ELKE pagina geladen (we weten vooraf niet welke patronen
 * ergens gebruikt worden) — houd losse secties daarom klein en gericht.
 */

/* ==========================================================================
   Voorbeeld-sectie — vervang dit door je eerste daadwerkelijke pattern-CSS.
   Zet de class die je op de buitenste rij van de pattern hebt gezet hier
   als duidelijk commentaar-anker, zodat het terug te vinden is.
   ========================================================================== */

/*
.pattern-mega-menu-onderwijs {
    ...
}
*/

/* hero-with-background */
@media(min-width:1480px){
    .hero-with-background .inner-row {
        min-width:1440px;
    }
}

.hero-with-background .inner-row {
    width:100%;
}

@media(max-width:1024px){
    p.js-hero-sub{
        font-size:18px !important;
    }
}

/* hero big image */
.ptrn-herobigimage{
    margin-top: -101px;

    .kt-inside-inner-col{
        border-radius:8px;
    }
}
.single-content{
    .ptrn-introtext{
        h2{
            font-size:56px;
            margin-bottom:40px;
            margin-top:24px;
        }
        p{
            font-size:24px;
        }
    }
}

    @media(max-width:1024px){
        .single-content{
            .ptrn-introtext{
                h2{
                    font-size:32px;
                    margin-bottom:24px;
                }
                p{
                    font-size:20px;
                }
            }
        }
    }

/* hero-text-centered */
.hero-text-centered-image-section figure, .hero-text-centered-image-section img {
  height:400px;

}
.hero-text-centered-image-section img {
  object-fit:cover;
}

@media(min-width:1200px){
    .hero-text-centered-image-section figure, .hero-text-centered-image-section img {
        width:1440px;
        height:600px;
    }
}

/* double-textblock */
.double-textblock-row1-textsection,
.double-textblock-row2-textsection{
    max-width:640px;
}
.double-textblock-row1:has(+ .double-textblock-row2){
    margin-bottom:80px;
}

/* image-text-pattern */
.image-text-pattern-textsection,
.text-image-pattern-textsection{
    max-width:640px;
}

/*text-header-left-image-right */
.text-header-left-image-right-textsection{
    max-width:640px;
}

/* two-images-textblock */
@media (min-width:1200px){
    .two-images-textblock-images figure,
    .two-images-textblock-images img{
        height:616px;
    }
}

/* quote-pattern */

/* steps-pattern */
.steps-pattern-step img, .steps-pattern-step figure{
  height:246px;
  width:100%;
  object-fit:cover;
  overflow:hidden;
}

/* tabsblock */
.tabsblock-number > div,
.tabsblock-arrow > div{
  width:40px;
  height:40px;
}
/* two-images-textblock */
@media (min-width:1200px){
    .tabsblock-image img,
    .tabsblock-image figure{
        position: absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        object-fit: cover;
    }
}
.tabsblock-tab:last-child{
    margin-bottom:0;
}

/*cta-patterns */

.cta-pattern .hasoverflownimage{
    height: 100%;

    > div{
        position: relative;
    }

    figure{
        position: relative;
    }

    img{
        border-radius:0;
    }
}

@media (min-width:1024px){
    .cta-pattern .hasoverflownimage{

        figure{
            position: absolute;
            bottom: -80px;
            overflow: hidden;
            transform-origin: bottom; 
            transition: transform 0.2s;
        }

        img {
            height: calc(100% + 240px);
        }
    }

    .cta-pattern:has(.button:hover) .hasoverflownimage figure {
        transform: scale(1.05);
    }
}

.cta-pattern > div{
    padding:80px;
    margin-top:80px;
}


/* pattern-text-reveal */
.pattern-text-reveal  .js-card img, .pattern-text-reveal .js-card figure{
  height:328px ;
  width:100%;
  object-fit:cover;
  overflow:hidden;
  border-radius:24px;
}
.pattern-text-reveal  .js-card > div{
    height:420px;
    border-radius:24px;
}



/* menu balk butttons */
.search-toggle-open,
.search-toggle-open svg{
    transition: 0.2s;
}
.search-toggle-open:hover {
    padding: 20.5px 20.5px 20.5px 20.5px !important;
}
.search-toggle-open:hover svg{
    height:21px;
    width:21px;

}

/* schoolitem */

.schoolitem {
    .wp-block-kadence-column .kt-inside-inner-col{
        &:after{
            content:'';
            background-image:url('../../images/arrow.svg');
            background-repeat: no-repeat;
            background-size:12px 12px;
            background-position: center;
            width:32px;
            height:32px;
            position: absolute;
            right: 0;
            top:-3px;
            border-radius: 8px;
            background-color: #005c74;
            transition: 0.3s;
        }
    }

    figure{
        overflow:hidden;
        border-radius:24px;

        img{
            transition: 0.3s;
        }
    }
}
.schoolitem:hover{
    .wp-block-kadence-column .kt-inside-inner-col:after{
        right:-10px;
    }

    figure{
        img{
            transform: scale(1.1);
        }
    }
}



/* stapppen */

.steps-pattern-step {
    .wp-block-kadence-column .kt-inside-inner-col{
        &:after{
            content:'';
            background-image:url('../../images/arrow.svg');
            background-repeat: no-repeat;
            background-size:12px 12px;
            background-position: center;
            width:32px;
            height:32px;
            position: absolute;
            right: 0;
            top:-3px;
            border-radius: 8px;
            background-color: #005c74;
            transition: 0.3s;
        }
    }

    figure{
        overflow:hidden;
        border-radius:24px;

        img{
            transition: 0.3s;
        }
    }
}
.steps-pattern-step:hover{
    .wp-block-kadence-column .kt-inside-inner-col:after{
        right:-10px;
    }

    figure{
        img{
            transform: scale(1.1);
        }
    }
}