/* =========================================================
   ANALYSE BUTTONS
========================================================= */

.wp-element-button,
.wp-block-button__link,
.analyse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.875rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--analyse-primary);
    color: var(--analyse-surface);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    box-shadow: var(--shadow-sm);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.analyse-button:hover {
    background: var(--analyse-primary-dark);
    color: var(--analyse-surface);

    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.analyse-button:focus-visible {
    outline: 3px solid rgba(20, 118, 212, 0.25);
    outline-offset: 3px;
}

/* Secundaire knop */

.analyse-button--secondary .wp-block-button__link {
    background: var(--analyse-surface);
    color: var(--analyse-primary);

    border: 2px solid var(--analyse-primary);
    box-shadow: none;
}

.analyse-button--secondary .wp-block-button__link:hover {
    background: var(--analyse-background);
    color: var(--analyse-primary-dark);

    border-color: var(--analyse-primary-dark);
    box-shadow: var(--shadow-sm);
}

/* Tekstknop */

.analyse-button--text .wp-block-button__link,
a.analyse-button--text {
    min-height: auto;
    padding: 0;

    background: transparent;
    color: var(--analyse-primary);

    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.analyse-button--text .wp-block-button__link:hover,
a.analyse-button--text:hover {
    background: transparent;
    color: var(--analyse-primary-dark);

    transform: none;
    box-shadow: none;
}


/* =========================================================
   ANALYSE SECTION
========================================================= */

.analyse-section {
    padding-block: 8rem;
}

.analyse-section__header {
    width: min(720px, 100%);
    margin: 0 auto 4.5rem;
    text-align: center;
}


/* =========================================================
   ANALYSE EYEBROW
========================================================= */

.analyse-eyebrow,
.analyse-section__eyebrow,
.analyse-footer-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;

    width: fit-content;

    color: var(--analyse-primary);

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.analyse-eyebrow::before,
.analyse-section__eyebrow::before,
.analyse-footer-title::before {
    content: "";

    flex: 0 0 42px;

    width: 42px;
    height: 2px;

    background: var(--analyse-primary);
}

.analyse-section__eyebrow {
    justify-content: center;
    margin: 0 auto 1rem;
}


/* =========================================================
   SECTION TITLE / INTRO
========================================================= */

.analyse-section__title {
    max-width: 720px;
    margin: 0 auto 1rem;

    text-align: center;
}

.analyse-section__intro {
    max-width: 720px;
    margin: 0 auto;

    color: var(--analyse-text);

    font-size: 1.125rem;
    line-height: 1.7;
    text-align: center;
}


/* =========================================================
   SERVICES SECTION
========================================================= */

.analyse-section--services {
    padding-top: 4rem;
}


/* =========================================================
   SECTION MOBILE
========================================================= */

@media (max-width: 640px) {

    .analyse-section {
        padding-block: 5rem;
    }

    .analyse-section--services {
        padding-top: 2rem;
    }

    .analyse-section__header {
        margin-bottom: 2.5rem;
    }
}

.analyse-card {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 370px;
    padding: 2rem;

    background: var(--analyse-surface);
    border: 1px solid var(--analyse-border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.analyse-card > .kt-inside-inner-col {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    height: 100%;
}

.analyse-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 118, 212, 0.25);
    box-shadow: var(--shadow-md);
}

.analyse-card .wp-block-buttons {
    margin-top: auto;
}

.analyse-card .wp-block-button__link {
    min-width: 220px;
}

/* =========================================================
   ANALYSE PRODUCT ICONS
========================================================= */

.analyse-card__icon {
    display: block;

    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;

    background-color: #b8c2cf;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.analyse-card:hover .analyse-card__icon {
    background-color: var(--analyse-primary);
    transform: translateY(-3px);
}

.analyse-icon--particulier {
    -webkit-mask-image: url("../icons/products/shield.svg");
    mask-image: url("../icons/products/shield.svg");
}

.analyse-icon--zakelijk {
    -webkit-mask-image: url("../icons/products/building-2.svg");
    mask-image: url("../icons/products/building-2.svg");
}

.analyse-icon--hypotheken {
    -webkit-mask-image: url("../icons/products/house.svg");
    mask-image: url("../icons/products/house.svg");
}

.analyse-icon--vermogen {
    -webkit-mask-image: url("../icons/products/trending-up.svg");
    mask-image: url("../icons/products/trending-up.svg");
}

/* Hero product iconen */

.analyse-icon--wonen {
    -webkit-mask-image: url("../icons/products/house.svg");
    mask-image: url("../icons/products/house.svg");
}

.analyse-icon--verzekeringen {
    -webkit-mask-image: url("../icons/products/shield.svg");
    mask-image: url("../icons/products/shield.svg");
}

.analyse-icon--vermogen {
    -webkit-mask-image: url("../icons/products/trending-up.svg");
    mask-image: url("../icons/products/trending-up.svg");
}

.analyse-icon--inkomen {
    -webkit-mask-image: url("../icons/products/wallet.svg");
    mask-image: url("../icons/products/wallet.svg");
}

.analyse-icon--zorg {
    -webkit-mask-image: url("../icons/products/heart-pulse.svg");
    mask-image: url("../icons/products/heart-pulse.svg");
}

.analyse-icon--uitvaart {
    -webkit-mask-image: url("../icons/products/flower-2.svg");
    mask-image: url("../icons/products/flower-2.svg");
}

.analyse-icon--hypotheek {
    -webkit-mask-image: url("../icons/products/landmark.svg");
    mask-image: url("../icons/products/landmark.svg");
}

.analyse-icon--verduurzamen {
    -webkit-mask-image: url("../icons/products/leaf.svg");
    mask-image: url("../icons/products/leaf.svg");
}



/* =========================================================
   ANALYSE TRUST ICONS
========================================================= */

.analyse-icon--independent {
    -webkit-mask-image: url("../icons/trust/users-round.svg");
    mask-image: url("../icons/trust/users-round.svg");
}

.analyse-icon--experience {
    -webkit-mask-image: url("../icons/trust/award.svg");
    mask-image: url("../icons/trust/award.svg");
}

.analyse-icon--personal {
    -webkit-mask-image: url("../icons/trust/handshake.svg");
    mask-image: url("../icons/trust/handshake.svg");
}

.analyse-icon--nearby {
    -webkit-mask-image: url("../icons/trust/map-pin.svg");
    mask-image: url("../icons/trust/map-pin.svg");
}

/* =========================================================
   MOBIEL
========================================================= */

@media (max-width: 640px) {

    .analyse-card {
        padding: 1.5rem;
    }

    .analyse-card .wp-block-buttons,
    .analyse-card .wp-block-button,
    .analyse-card .wp-block-button__link {
        width: 100%;
    }

    .analyse-card .wp-block-button__link {
        min-width: 0;
    }

}


/* =========================================================
   ANALYSE SERVICES GRID
========================================================= */

.analyse-services-grid > .kt-row-column-wrap {
    align-items: stretch;
}

.analyse-services-grid .wp-block-kadence-column {
    height: 100%;
}

.analyse-services-grid .kt-inside-inner-col {
    height: 100%;
}

@media (max-width: 1024px) {
    .analyse-services-grid > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .analyse-services-grid > .kt-row-column-wrap {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   ANALYSE CTA
========================================================= */

.analyse-cta{
    display:flex;
    justify-content:center;
    margin-top:3rem;
}

.analyse-cta .wp-block-buttons{
    justify-content:center;
    gap:1rem;
}

/* =========================================================
   HERO VISUAL MET TEGELS
   Grote sfeerplaat rechts
========================================================= */

.analyse-hero__visual {
    width: 100% !important;
    min-width: 0;
    min-height: 430px;

    box-sizing: border-box;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border-radius: 16px !important;
    overflow: hidden !important;
}


/* =========================================================
   KADENCE INNER CONTAINER = 2 × 3 GRID
========================================================= */

.analyse-hero__visual.analyse-hero__tiles > .kt-inside-inner-col {
    width: 100% !important;
    min-height: 430px;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, 1fr) !important;

    gap: 14px !important;
    padding: 28px !important;

    box-sizing: border-box;
}

/* =========================================================
   HERO TEGEL
========================================================= */

.analyse-hero__tiles .analyse-hero-tile {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 14px 18px !important;

    box-sizing: border-box;

    background: rgba(255,255,255,.92) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(20,45,75,.12);

    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;

    column-gap: 10px !important;
    row-gap: 2px !important;

    align-items: center !important;
    align-content: center !important;
}


/* =========================================================
   ICOON
   Werkelijke HTML:
   analyse-card__icon analyse-icon--particulier
========================================================= */

.analyse-hero__tiles .analyse-hero-tile .analyse-card__icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    display: block !important;

    width: 28px !important;
    height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #1476d4 !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}


/* =========================================================
   TITEL + TEKST
========================================================= */

.analyse-hero__tiles .analyse-hero-tile h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 17px !important;
    line-height: 1.2 !important;
    color: var(--analyse-navy) !important;

    align-self: end !important;
}

.analyse-hero__tiles .analyse-hero-tile p {
    grid-column: 2 !important;
    grid-row: 2 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    color: var(--analyse-text) !important;

    align-self: start !important;
}


/* =========================================================
   MOBIEL
========================================================= */

@media (max-width: 767px) {

    .analyse-hero__visual.analyse-hero__tiles > .kt-inside-inner-col {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        padding: 20px !important;
    }
}

/* =========================================================
   HERO SFEERPLAAT - alle hoeken afronden
========================================================= */

.analyse-hero__visual,
.analyse-hero__visual > .kt-inside-inner-col {
    border-radius: 16px !important;
    overflow: hidden !important;
}