/* ========================================================================
   Elatrik v17 — herstel hero-typografie + fade + bridge CTA
   ======================================================================== */

/* Dienstenhero: foto zichtbaar, tekst helder/wit en volledig Manrope. */
.service-cover-hero,
.pro-hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: var(--dark) !important;
    min-height: clamp(680px, 92vh, 900px) !important;
}

.service-cover-hero__image,
.pro-hero__image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: scale(1.012) !important;
}

.service-cover-hero__shade,
.pro-hero__shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 72% 50%, rgba(217,150,46,.10), transparent 38%),
        linear-gradient(90deg, rgba(18,17,15,.86) 0%, rgba(18,17,15,.64) 39%, rgba(18,17,15,.22) 72%, rgba(18,17,15,.06) 100%),
        linear-gradient(0deg, rgba(18,17,15,.32) 0%, rgba(18,17,15,.06) 42%, rgba(18,17,15,.22) 100%) !important;
}

/* De fade start lager: ze verzacht enkel de onderrand en trekt niet over de foto/tekst heen. */
.service-cover-hero::after,
.pro-hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -44px !important;
    height: clamp(130px, 13vw, 220px) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        radial-gradient(ellipse at 50% 112%, rgba(251,248,242,.95) 0%, rgba(251,248,242,.66) 34%, rgba(251,248,242,.22) 61%, rgba(251,248,242,0) 84%),
        linear-gradient(180deg, rgba(251,248,242,0) 0%, rgba(251,248,242,.10) 45%, rgba(251,248,242,.58) 82%, var(--cream) 100%) !important;
}

.service-cover-hero > .container-fluid,
.pro-hero > .container-fluid,
.service-cover-hero__content,
.pro-hero__content {
    position: relative !important;
    z-index: 3 !important;
}

.service-cover-hero__content,
.pro-hero__content {
    color: #fff !important;
    font-family: var(--font-main) !important;
    max-width: 760px !important;
}

.service-cover-hero__content h1,
.pro-hero__content h1 {
    font-family: var(--font-main) !important;
    color: #fff !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.065em !important;
    line-height: .94 !important;
    text-shadow: 0 18px 55px rgba(0,0,0,.42) !important;
}

.service-cover-hero__content p,
.pro-hero__content p,
.breadcrumb-mini--dark,
.breadcrumb-mini--dark a,
.breadcrumb-mini--dark span {
    color: rgba(255,255,255,.84) !important;
}

.service-cover-hero .section-kicker,
.pro-hero .section-kicker {
    color: var(--amber-2) !important;
}

/* Home/algemene bridge CTA terug als nette premium kaart, niet plat of te donker. */
.section-bridge:not(.footer-cta) {
    background: linear-gradient(90deg, rgba(238,229,218,.86), rgba(251,248,242,.70), rgba(238,229,218,.86)) !important;
    padding-top: clamp(4.5rem, 7vw, 7rem) !important;
    padding-bottom: clamp(4.5rem, 7vw, 7rem) !important;
}

.section-bridge:not(.footer-cta) .bridge-card {
    width: min(1120px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255,253,249,.94) !important;
    border: 1px solid rgba(36,35,31,.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 80px rgba(34,28,20,.08) !important;
    padding: clamp(1.6rem, 3vw, 2.3rem) !important;
}

.section-bridge:not(.footer-cta) .bridge-card h2 {
    font-family: var(--font-main) !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
    letter-spacing: -.045em !important;
}

.section-bridge:not(.footer-cta) .bridge-card .btn-amber {
    background: linear-gradient(135deg, var(--amber), var(--amber-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 18px 42px rgba(217,150,46,.22) !important;
}

.section-bridge:not(.footer-cta) .bridge-card .btn-amber:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 58px rgba(217,150,46,.30) !important;
}

@media (max-width: 767.98px) {
    .service-cover-hero,
    .pro-hero {
        min-height: 690px !important;
    }

    .service-cover-hero::after,
    .pro-hero::after {
        bottom: -34px !important;
        height: 145px !important;
    }

    .service-cover-hero__shade,
    .pro-hero__shade {
        background:
            linear-gradient(90deg, rgba(18,17,15,.84), rgba(18,17,15,.44)),
            linear-gradient(0deg, rgba(18,17,15,.28), rgba(18,17,15,.08) 45%, rgba(18,17,15,.22)) !important;
    }

    .section-bridge:not(.footer-cta) .bridge-card {
        grid-template-columns: 1fr !important;
    }
}