/* ==========================================================================
   FASE 5: ABOUT ME (DIVI THEME SECTION)
   ========================================================================== */

/* ─── SECTIE ACHTERGROND ─── */
/* AANPAK: Dedicated div .authority-bg-fx via Javascript injectie.
   REDEN: ::before/::after op .et_pb_section worden door Divi 5 zelf gebruikt voor
   achtergrond-rendering. Onze pseudo-elementen overschrijven Divi's eigen rendering
   en veroorzaken conflicten. We injecteren dynamisch een div via about-me.js */

/* ─── CSS-FIRST NUCLEAR FALLBACK (GSAP VANGNET) ─── */
/* KRITISCH: Dit garandeert dat .authority__media NOOIT opacity:0 heeft als initiële staat.
   Zonder dit kan GSAP's scrub-animatie bij initialisatie (als scroll > 0 is) direct
   de opacity op 0 zetten voordat de ScrollTrigger correct gevuurd heeft.
   De GSAP fade-out werkt ALSNOG correct via inline style op het juiste scroll-moment,
   maar de fallback-baseline is altijd zichtbaar. */
.authority__media {
    opacity: 1 !important;
}
/* Wanneer GSAP de fade-out IN GANG heeft gezet (class toegevoegd via JS), laten
   we de inline style door. Dit wordt geregeld via het gsap.to() in about-me.js.
   De class .authority__media--fading wordt door GSAP's onStart callback gezet. */
.authority__media.authority__media--fading {
    opacity: revert !important; /* Geeft controle terug aan GSAP's inline style */
}

/* Globale fix voor Divi's beruchte sticky-killers op de pagina niveau */
body, 
#page-container, 
#et-main-area {
    overflow-x: clip !important; 
    overflow-y: visible !important;
}

/* Sectie basis: alleen achtergrondkleur, geen pseudo-element aanpak */
.et_pb_section.authority__container {
    position: relative !important;
    background-color: #050505 !important;
    overflow: visible !important; /* CRUCIAAL: Dwing Divi om overflows te tonen voor position: sticky */
    z-index: 10; /* Brengt de sectie netjes omhoog in de viewport rendering */
}

/* De dedicated achtergrond-div (automatisch door JS toegevoegd) */
.authority-bg-fx {
    position: absolute;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Safari longhand */
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}


/* Radiale teal glow — Multipele color stops voorkomen de harde 'banding' cirkel */
.authority-bg-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 50%,
            hsla(178, 62%, 82%, 0.11) 0%,
            hsla(178, 62%, 82%, 0.05) 40%,
            hsla(178, 62%, 82%, 0.01) 70%,
            transparent 100%);
    pointer-events: none;
}

/* Vederlichte SVG noise grain — 0.025 opacity, 0 HTTP requests */
.authority-bg-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ─── STICKY FIX: DIVI ROW FLEXBOX OVERRIDE ─── */
/* KRITISCH: De .et_pb_row die de media- en content-kolom bevat MOET
   align-items:flex-start hebben. Divi's standaard is align-items:stretch,
   waardoor elke kolom even hoog is als de kortste kolom. Resultaat:
   de sticky kolom heeft geen ruimte om langs te scrollen → sticky werkt niet.
   Bovendien: overflow:visible is verplicht op alle ancestors van een sticky element. */
.authority__container .et_pb_row {
    display: flex !important;
    align-items: flex-start !important;
    /* KRITISCH voor sticky */
    flex-wrap: nowrap !important;
    overflow: visible !important;
    /* Geen overflow:hidden — breekt sticky */
}

/* Content-kolom: neemt alle resterende ruimte in — dat is de ruimte
   langs welke de sticky foto kan pinnen. */
.authority__container .et_pb_column.authority__content {
    flex: 1 !important;
    min-width: 0 !important;
    /* Voorkomt overflow breedte-issues */
}

/* Media-kolom: groeit NIET mee met de content-kolom — eigen hoogte behouden */
.authority__container .et_pb_column.authority__media {
    flex-shrink: 0 !important;
    flex-basis: 47.25% !important; /* Dwingt flexbox om Divi's breedte strak vast te houden */
    align-self: flex-start !important;
    /* Bevestigt sticky werkt */
    overflow: visible !important;
    /* Sticky-killer preventie */
}

/* ─── TABLET: Side-by-side houden t/m 768px ─── */
/* OVERRIDE: Divi breekt standaard naar 1 kolom op 980px.
   Wij houden de 2-kolommen indeling actief t/m 768px voor tablet.
   Boven 980px handelt de desktop-layout alles af. */
@media (min-width: 769px) and (max-width: 980px) {
    .authority__container .et_pb_row {
        display: flex !important;
        flex-direction: row !important; /* Houdt side-by-side op tablet */
        align-items: center !important; /* Mooiere uitlijning bij kortere kolom */
        gap: 40px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    .authority__container .et_pb_column.authority__media {
        flex-basis: 40% !important; /* Iets compacter op tablet */
        flex-shrink: 0 !important;
    }
    .authority__container .et_pb_column.authority__content {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* ─── MOBIEL: Stapelkolommen onder 768px ─── */
@media (max-width: 768px) {
    .authority__container .et_pb_row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ─── MEDIA KOLOM (STICKY FOTO) ─── */
.authority__media {
    position: sticky !important;
    top: 15vh;
    align-self: flex-start !important; /* Robuuste cross-browser flex start */
    margin-top: 0 !important; /* Extra reset tegen Divi's automatische spacing die alles lager drukt */
    z-index: 10;
}

/* Geforceerde Margin-Reset op de Image module */
.authority__media .authority__image {
    margin-top: 0 !important;
}

/* ─── TABLET: Sticky resetten maar zijdelings naast tekst ─── */
@media (min-width: 769px) and (max-width: 980px) {
    .authority__media {
        position: relative !important; /* Geen sticky op tablet — kolom is iets te kort */
        top: auto !important;
        align-self: flex-start !important;
    }
}

/* ─── MOBIEL: Gecentreerde foto met royale witruimte ─── */
@media (max-width: 768px) {
    .authority__media {
        position: relative !important;
        top: auto !important;
        align-self: center !important; /* Halo-effect: foto centreert prachtig */
        width: 100% !important;
        margin-bottom: 48px !important; /* Royale spacing (40-60px) — rust voor de hersenen */
        padding-bottom: 40px !important; /* Extra buffer voor de floating knop */
    }
    .authority__image .et_pb_image_wrap {
        max-width: 380px !important; /* Compacter op smalle viewport */
        margin: 0 auto !important;   /* Centreert de foto */
        max-height: 60vh !important; /* Beperkt hoogte zodat CTA in-viewport blijft */
    }
}

/* Glow ACHTER de foto — z-index:-1 veilig omdat geen isolation:isolate meer */
.authority__media::before {
    content: "";
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle at 50% 50%, rgba(143, 224, 221, 0.3) 0%, transparent 60%);
    filter: blur(40px);
    z-index: -1;
}

/* ─── FOTO IMAGE MODULE ─── */
/* CSS FALLBACK: foto altijd zichtbaar — GSAP mag opacity NIET meer aanraken.
   GSAP doet alleen scale. Opacity blijft 1 tenzij de mediaWrap (sticky kolom)
   GSAP fade-out krijgt aan het einde van de sectie. */
.authority__image {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ─── JS-ACTIVE HIDDEN FALLBACKS ─── */
/* Verbergt de reveal elementen onmiddellijk op DOMContentLoaded
   zodat GSAP ze direct van 0 naar 1 kan animeren zonder flash. */
.js-animations .gs-reveal,
.js-animations .seo-pills-list ul li {
    opacity: 0;
}

/* Fix voor de foto rand en schaduw */

.authority__image .et_pb_image_wrap,
.authority__image img {
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.authority__image .et_pb_image_wrap {
    aspect-ratio: 4/5 !important;
    background: #000 !important;
    position: relative;
    width: 100%;
    max-height: 70vh !important; /* Zorgt ervoor dat image op laptop screens niet uit de viewport knalt en de CTA wegdrukt */
}

.authority__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: contrast(1.05) !important;
    position: relative;
    z-index: 1;
}

/* Voeg de grain toe via een::after op de image-wrap in Divi */
.authority__image .et_pb_image_wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.12;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ─── FLOATING BUTTON NEON EFFECT ─── */
/* WE GEBRUIKEN NU EEN RAW HTML CODE MODULE IN DIVI, GEEN DIVI BUTTON MODULE MEER */
.floating-btn {
    /* CSS-FIRST VISIBILITY: GSAP uses immediateRender:false so this baseline is never
       overridden until the ScrollTrigger is ready to play the animation. */
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    bottom: -20px !important;
    right: -30px !important;
    padding: 20px 32px !important;
    border-radius: 100px !important;
    z-index: 20 !important;
    color: #8FE0DD !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    font-family: 'Satoshi', sans-serif !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center;
    overflow: hidden !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    background: rgba(18, 30, 30, 0.2) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: none !important;
}

/* ─── TABLET: Knop compact maar statisch (telefoon-achtig zweeft te agressief) ─── */
@media (min-width: 769px) and (max-width: 980px) {
    .floating-btn {
        right: 0 !important;
        bottom: -20px !important;
        padding: 16px 28px !important;
        font-size: 0.85rem !important;
    }
}

/* ─── MOBIEL: Statische knop onder de foto, rechts overlappend ─── */
/* Zoals het origineel: position:absolute, lichte rechter overlap.
   Geen fixed — de knop scrollt mee met de pagina. */
@media (max-width: 768px) {
    .floating-btn {
        position: absolute !important;       /* In de flow van .authority__media */
        bottom: -18px !important;            /* Lichte overlap onder de fotokader */
        left: 50% !important;                /* Horizontaal ankerpunt */
        right: auto !important;              /* Desktop right waarde neutraliseren */
        transform: translateX(-30%) !important; /* Licht rechts van centrum */
        width: auto !important;              /* Knop-eigen breedte */
        max-width: calc(100% - 40px) !important; /* Nooit buiten de foto vallen */
        justify-content: center !important;
        padding: 16px 28px !important;
        font-size: 0.85rem !important;
        z-index: 20 !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    }
}

.floating-btn__spin {
    position: absolute;
    inset: -50px;
    background: conic-gradient(transparent 270deg, #8FE0DD 360deg, transparent 90deg);
    z-index: -2 !important;
    transition: background 0.5s ease;
}

.floating-btn::after {
    content: "" !important;
    position: absolute;
    inset: 2px;
    background: #121e1e !important;
    border-radius: inherit !important;
    z-index: -1 !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important;
}

.floating-btn:hover {
    border-radius: 40px 100px 40px 100px !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(143, 224, 221, 0.3) !important;
    color: #fff !important;
}

.floating-btn:hover .floating-btn__spin {
    background: conic-gradient(transparent 100deg, rgba(143, 224, 221, 0.5) 360deg);
}

.floating-btn:hover::after {
    background: #1b2f2e !important;
}

.floating-btn:active {
    transform: scale(0.85) !important;
    transition: transform 0.1s ease-out !important;
}

.floating-btn svg {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    stroke-width: 2.5 !important;
    transform-origin: center !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

.floating-btn:hover svg {
    transform: rotate(-45deg) scale(1.1) !important;
    stroke: #8FE0DD !important;
}

/* ─── WATERMARK BACKGROUND (DIGITAL CRAFT) ─── */
.authority__watermark,
.authority__watermark .et_pb_text_inner {
    position: absolute !important;
    top: 20%;
    left: -5%;
    font-size: 18vw !important;
    font-weight: 900 !important;
    color: rgba(255, 255, 255, 0.015) !important;
    line-height: 0.8 !important;
    white-space: nowrap !important;
    z-index: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    letter-spacing: -0.05em !important;
    font-family: 'Satoshi', sans-serif !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 980px) {
    .authority__watermark {
        display: none !important;
    }
}

/* ─── KOLOM 2: CONTENT & SEO BADGE ─── */
.authority__content {
    z-index: 2;
    counter-reset: abstract-counter;
}

.authority__content h2,
.authority__content .et_pb_text_inner h2 {
    font-family: 'Satoshi', sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    font-weight: 300 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.05em !important;
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
    color: #fff !important;
}

/* SEO Badge Fix: Omdat we de class aan een Divi Text Module toewijzen, zet Divi deze op block/100%. 
   We verplaatsen daardoor the vormgeving van de "pit" (border/bg) strict naar de inner <p>. */
.authority__badge {
    margin-bottom: 2.5rem !important;
}

.authority__badge p,
.authority__badge h1,
.authority__badge h2,
.authority__badge h3,
.authority__badge h4,
.authority__badge h5,
.authority__badge h6 {
    display: inline-flex !important;
    align-items: center;
    padding: 10px 22px !important;
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(143, 224, 221, 0.15) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0 !important;
    color: #8FE0DD !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-family: 'Satoshi', sans-serif !important;
    line-height: 1 !important;
    width: auto !important;
}

/* Copy Styling Divi Overrides */
.authority__copy p {
    font-size: clamp(1.05rem, 1.2vw, 1.25rem) !important;
    line-height: 1.8 !important;
    color: #8aa9a8 !important;
    margin-bottom: 2.5rem !important;
    font-weight: 300 !important;
    font-family: 'Satoshi', sans-serif !important;
}

.authority__copy strong {
    color: #fff !important;
    font-weight: 500 !important;
    font-family: 'Satoshi', sans-serif !important;
}

/* ─── SEO PILLS LIST (Bulleted List Fix) ─── */
.seo-pills-list {
    margin-top: 4rem !important;
    padding-top: 3rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    /* Divider streep */
}

/* Vang de titel/alinea (Specialisaties & Architectuur), hoe deze ook geformatteerd is in Divi */
.et_pb_module.seo-pills-list h4,
.et_pb_module.seo-pills-list p,
.et_pb_module.seo-pills-list .et_pb_text_inner>*:not(ul, ol) {
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #8aa9a8 !important;
    margin-bottom: 1.5rem !important;
    font-weight: 500 !important;
    font-family: 'Satoshi', sans-serif !important;
    display: block !important;
    line-height: 1.4 !important;
}

.seo-pills-list ul {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.seo-pills-list ul li {
    padding: 10px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 100px !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.02) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 0 !important;
}

.seo-pills-list ul li:before {
    display: none !important;
    /* Remove Divi default bullet dots */
}

.seo-pills-list ul li:hover {
    border-color: #8FE0DD !important;
    color: #8FE0DD !important;
    background: rgba(143, 224, 221, 0.05) !important;
}

/* ─── ABSTRACT ITEMS (Blurbs) ─── */
.abstract-item {
    counter-increment: abstract-counter;
}

.abstract-item .et_pb_blurb_container {
    position: relative;
    padding-left: 50px !important;
}

.abstract-item .et_pb_blurb_container::before {
    content: "0" counter(abstract-counter);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.9rem !important;
    color: #8FE0DD !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    font-family: 'Satoshi', sans-serif !important;
}

.abstract-item h4 {
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.02em !important;
    font-family: 'Satoshi', sans-serif !important;
}

.abstract-item .et_pb_blurb_description p,
.abstract-item .et_pb_blurb_description span {
    color: #8aa9a8 !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    font-family: 'Satoshi', sans-serif !important;
    margin: 0 !important;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES — MOBIEL & TABLET (BATCH 1-4 BESLIST)
   ========================================================================== */

/* ─── TABLET RESPONSIVENESS (769px - 980px) ─── */
@media (min-width: 769px) and (max-width: 980px) {

    /* Headline iets kleiner schalen voor tablet kolom */
    .authority__content h2,
    .authority__content .et_pb_text_inner h2 {
        font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
    }

    /* Glow achter foto reduceren (Low-Perf) */
    .authority__media::before {
        inset: -20px !important;
        filter: blur(20px) !important;
        opacity: 0.18 !important;
    }
}

/* ─── MOBIEL RESPONSIVE (max 768px) — COMPLETE SET ─── */
@media (max-width: 768px) {

    /* --- TYPOGRAFIE --- */

    /* Headline: Groot & Autoritair — behoudt impact maar compacter */
    .authority__content h2,
    .authority__content .et_pb_text_inner h2 {
        font-size: clamp(2.2rem, 9vw, 3.2rem) !important; /* Fluid — impactvol op elk scherm */
        margin-bottom: 2rem !important;
    }

    /* SEO Badge: Lettergrootte verkleinen via fluid typografie */
    .authority__badge p,
    .authority__badge h1,
    .authority__badge h2,
    .authority__badge h3,
    .authority__badge h4,
    .authority__badge h5,
    .authority__badge h6 {
        font-size: 0.75rem !important; /* iets subtieler op mobiel */
        padding: 8px 16px !important;
    }
    .authority__badge {
        margin-bottom: 1.8rem !important;
    }

    /* Kopieer tekst: iets lichter teal voor buiten-leesbaarheid (Processing Fluency) */
    .authority__copy p {
        color: #aed3d1 !important; /* Van #8aa9a8 naar #aed3d1 */
        font-size: clamp(1rem, 4vw, 1.15rem) !important;
        margin-bottom: 2rem !important;
    }

    /* Abstract item blurb tekst ook meelichten */
    .abstract-item .et_pb_blurb_description p,
    .abstract-item .et_pb_blurb_description span {
        color: #aed3d1 !important;
    }

    /* Seo-pills sectie: minder topmargin op mobiel (bespaart scroll) */
    .seo-pills-list {
        margin-top: 2.5rem !important;
        padding-top: 2rem !important;
    }

    /* --- PILL GRID: Strak 2-kolommen grid --- */
    /* Wiskundig verdeeld — auto-width pill items in grid */
    .seo-pills-list ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Strak 2-kolommen */
        gap: 10px !important;
    }

    /* Pills: iets compacter op mobiel maar nog goed tapbaar (min 44px height) */
    .seo-pills-list ul li {
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
        text-align: center !important;
        /* Magnetisch hover-effect UIT (Low-Perf mobiel) — alleen CSS tap-feedback */
        transition: background 0.2s ease, border-color 0.2s ease !important;
    }

    /* --- GLOW REDUCTIE (Low-Perf Mode) --- */
    /* Sfeer behouden maar GPU ontzien: blur verkleinen, opacity reduceren */
    .authority__media::before {
        inset: -15px !important;
        filter: blur(18px) !important;
        opacity: 0.12 !important;
    }

    /* Achtergrond glow (sectie) ook reduceren */
    .authority-bg-fx::before {
        opacity: 0.6 !important; /* Dimmen */
    }

    /* --- CONTENT ALIGNMENT: Alles links (F-Pattern, bevestigd) --- */
    .authority__content {
        text-align: left !important;
    }

    /* Abstract items padding aanpassen voor smallere kolom */
    .abstract-item .et_pb_blurb_container {
        padding-left: 40px !important;
    }

    /* --- SAFE SPACE ONDER DE FIXED THUMB ZONE BUTTON --- */
    /* De sticky knop neemt 70px onderaan in — we voegen padding toe
       aan de sectie zodat de laatste content niet onder de knop verdwijnt. */
    .authority__container {
        padding-bottom: 90px !important;
    }

    /* --- WATERMARK: Uit op mobiel (al display:none, extra zekerheid) --- */
    .authority__watermark,
    .authority__watermark .et_pb_text_inner {
        display: none !important;
    }
}