/**
 * 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-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-pattern */



 .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;
        }
    
        img {
            height: calc(100% + 240px);
        }
    }
}

/* 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;
}