/* ========================================================================
   Elatrik v12 — gerichte herstelling diensten-detail, realisaties en projecten
   Laadt na v11-fixes.css en overschrijft enkel de probleemzones.
   ======================================================================== */

/* Minder fragiel: hero-content nooit meer onder de vaste/overlay navigatie laten schuiven. */
.service-cover-hero,
.project-hero {
    min-height: clamp(620px, 82vh, 820px) !important;
    padding-top: clamp(7.5rem, 11vw, 11rem) !important;
    padding-bottom: clamp(5.5rem, 8vw, 8rem) !important;
    display: flex !important;
    align-items: center !important;
}
.service-cover-hero__content,
.project-hero__content {
    position: relative !important;
    z-index: 3 !important;
    padding-top: 0 !important;
    width: min(780px, 100%) !important;
}
.service-cover-hero__content h1,
.project-hero__content h1 {
    overflow: visible !important;
    font-size: clamp(3rem, 6.6vw, 7rem) !important;
    line-height: .94 !important;
    margin-top: .65rem !important;
}
.service-cover-hero__shade,
.project-hero__shade {
    background:
        radial-gradient(circle at 72% 48%, rgba(217,150,46,.12), transparent 38%),
        linear-gradient(90deg, rgba(18,17,15,.90) 0%, rgba(18,17,15,.70) 40%, rgba(18,17,15,.26) 72%, rgba(18,17,15,.08) 100%),
        linear-gradient(0deg, rgba(18,17,15,.42), rgba(18,17,15,.08) 46%, rgba(18,17,15,.22)) !important;
}

/* Dienstenpagina: exact gevraagde structuur
   rij 1: tekst links / beeld rechts
   rij 2: beeld links / tekst rechts
*/
.service-detail-section {
    padding-top: clamp(5rem, 8vw, 8rem) !important;
    padding-bottom: clamp(5rem, 8vw, 8rem) !important;
}
.service-paired-stack--alternating {
    display: grid !important;
    gap: clamp(4rem, 7vw, 7rem) !important;
}
.service-pair--explicit {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 560px) !important;
    gap: clamp(2.4rem, 5vw, 6.2rem) !important;
    align-items: center !important;
    padding: clamp(1rem, 2vw, 1.8rem) 0 !important;
    border-bottom: 1px solid rgba(36,35,31,.08) !important;
}
.service-pair--explicit:last-child { border-bottom: 0 !important; }
.service-pair--image-left {
    grid-template-columns: minmax(360px, 560px) minmax(0, 1fr) !important;
}
.service-pair--explicit .service-text-block {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 1.35rem !important;
    align-items: start !important;
    max-width: 760px !important;
    padding: clamp(1rem, 2vw, 2rem) 0 !important;
}
.service-pair--explicit .service-text-block h2 {
    font-size: clamp(2rem, 3.3vw, 3.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    margin: .45rem 0 .9rem !important;
}
.service-pair--explicit .service-text-block p {
    font-size: 1.05rem !important;
    line-height: 1.82 !important;
    color: var(--muted) !important;
    max-width: 680px !important;
}
.service-square-image {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.service-square-image img {
    width: min(100%, 560px) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: 560px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 28px !important;
    box-shadow: 0 28px 90px rgba(34,28,20,.14) !important;
    border: 1px solid rgba(36,35,31,.08) !important;
}

/* Projectdetail terug visueel rijk maken, niet enkel kale tekst in een enorme lege ruimte. */
.project-story {
    padding-top: clamp(4.5rem, 7vw, 7rem) !important;
    padding-bottom: clamp(4.5rem, 7vw, 7rem) !important;
}
.project-story-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.35rem !important;
}
.story-card {
    min-height: 260px !important;
    padding: clamp(1.65rem, 3vw, 2.6rem) !important;
    border: 1px solid rgba(36,35,31,.10) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, #fffdf8, #f7f0e7) !important;
    box-shadow: 0 26px 78px rgba(34,28,20,.08) !important;
}
.story-card h2 {
    font-size: clamp(1.7rem, 2.2vw, 2.35rem) !important;
    line-height: 1.12 !important;
    margin: .45rem 0 .85rem !important;
}
.story-card p {
    line-height: 1.75 !important;
    color: var(--muted) !important;
}
.project-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.35rem !important;
}
.project-gallery-item {
    border-radius: 24px !important;
    overflow: hidden !important;
    background: var(--dark) !important;
    box-shadow: 0 26px 82px rgba(34,28,20,.13) !important;
}
.project-gallery-item img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
}

/* Realisaties: nieuwe AI-projecten zichtbaar tijdens adminsessie en nette premium kaarten. */
.admin-preview-badge {
    display: inline-flex !important;
    margin-left: .45rem !important;
    padding: .2rem .45rem !important;
    border-radius: 999px !important;
    background: var(--amber) !important;
    color: #171410 !important;
    font-size: .7rem !important;
    vertical-align: middle !important;
}
.realisatie-grid--premium {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}
.realisatie-card-premium {
    text-decoration: none !important;
}
.realisatie-card-premium__meta h2 small { font-family: inherit !important; }

/* Header: huidige herstelde menu behouden, maar content mag er niet meer onderdoor schuiven. */
.site-header--overlay + main .service-cover-hero,
.site-header--overlay + main .project-hero {
    margin-top: 0 !important;
}

@media (max-width: 1199.98px) {
    .service-cover-hero,
    .project-hero {
        min-height: auto !important;
        padding-top: clamp(5rem, 9vw, 7rem) !important;
        padding-bottom: clamp(4rem, 8vw, 6rem) !important;
    }
    .service-pair--explicit,
    .service-pair--image-left {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .service-pair--image-left .service-square-image { order: 2 !important; }
    .service-pair--image-left .service-text-block { order: 1 !important; }
    .service-square-image img {
        width: min(100%, 640px) !important;
        max-height: none !important;
    }
    .project-story-grid,
    .project-gallery-grid,
    .realisatie-grid--premium {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 767.98px) {
    .service-cover-hero__content h1,
    .project-hero__content h1 {
        font-size: clamp(2.65rem, 12vw, 4.4rem) !important;
    }
    .service-pair--explicit .service-text-block {
        grid-template-columns: 1fr !important;
    }
    .project-story-grid,
    .project-gallery-grid,
    .realisatie-grid--premium {
        grid-template-columns: 1fr !important;
    }
}