/*
 * Water Concepts
 * Site hero
 *
 * Handout "Redesign-basis" §2 (typografie), §3 (CTA), §5 (hero).
 * Breakpoints gelijk aan GeneratePress: tablet ≤1024px, mobiel ≤768px.
 */


/* ==========================================
   SITE HERO BASE
   --blue-950 is ook de fallback zonder foto.
========================================== */

.site-hero {

    position: relative;
    width: 100%;
    overflow: hidden;

    background: var(--blue-950);

}


/* ==========================================
   FULL HERO
   min-height i.p.v. height: bij normale content
   is de hero op elke pagina exact even hoog (geen
   verspringen bij navigeren). Alleen als een titel
   of vertaling (DE/FR) niet past, groeit hij mee
   in plaats van de tekst af te knippen.
========================================== */

.site-hero--full {

    --hero-container: 1600px; /* gelijk aan utility bar / categorietegels */

    display: flex;
    min-height: clamp(520px, 33vw, 680px);

}


/* ==========================================
   VISUAL
   Full-bleed foto, overlay zit erin zodat hij op
   mobiel alleen de foto bedekt.
========================================== */

.site-hero__visual {

    position: absolute;
    inset: 0;

    overflow: hidden;

    /* Blend-groep: de blauwfilter mengt alleen met de foto. */
    isolation: isolate;

}


/* ==========================================
   BLAUWFILTER
   Kleurt de hele foto in het merkblauw (blend-mode
   "color": tint en verzadiging van --blue-500,
   helderheid van de foto). Omdat de lichtwaarden
   behouden blijven, wordt de foto niet vaal-grijs
   zoals bij een halfdekkend vlak.

   Zo oogt elke aangeleverde foto als één familie
   (handout §0), en blijft de hero sfeer terwijl de
   full-color productfoto's eronder de aandacht
   krijgen. Sterkte via opacity.

   TIJDELIJK UITGESCHAKELD (test zonder filter).
   Weer aanzetten: commentaar rond de rule weghalen.
========================================== */

/*
.site-hero__visual::before {

    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background: var(--blue-500);
    mix-blend-mode: color;
    opacity: 0.9;

    pointer-events: none;

}
*/

.site-hero__image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

}


/* ==========================================
   OVERLAY
   Horizontale gradient, links vrijwel dekkend
   --blue-950, naar rechts transparant.

   De stops zijn verankerd aan de linkerrand van de
   container (--hero-edge), niet aan de viewport.
   Anders schuift de tekst op brede schermen (QHD)
   naar het lichtere deel van de gradient. De min()
   zorgt dat op smallere schermen rechts altijd nog
   foto zichtbaar blijft.
========================================== */

.site-hero__overlay {

    --hero-edge: max(0px, (100% - var(--hero-container)) / 2);

    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--blue-950) 94%, transparent) 0%,
        color-mix(in srgb, var(--blue-950) 88%, transparent) calc(var(--hero-edge) + 560px),
        color-mix(in srgb, var(--blue-950) 65%, transparent) min(calc(var(--hero-edge) + 900px), 70%),
        color-mix(in srgb, var(--blue-950) 45%, transparent) 100%
    );

    pointer-events: none;

}


/* ==========================================
   CONTENT LAYER
   Verticaal gecentreerd, links uitgelijnd op
   de container.
========================================== */

.site-hero__inner {

    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    width: 100%;
    max-width: var(--hero-container);
    margin: 0 auto;

    padding: 64px 30px;

}

.site-hero__content {

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    max-width: 640px;

    text-align: left;

    animation: site-hero-content-in 0.6s ease both;
    animation-delay: 0.1s;

}

@keyframes site-hero-content-in {

    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================
   EYEBROW (HOMEPAGE)
========================================== */

.site-hero__eyebrow {

    margin: 0 0 16px 0;

    color: var(--teal-300);

    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;

}


/* ==========================================
   BREADCRUMB (OVERIGE PAGINA'S)
   Zelfde plek als de eyebrow. Component en maat
   staan in breadcrumbs.css; hier alleen de
   kleuren voor op navy.
========================================== */

.site-hero__breadcrumb {

    margin: 0 0 16px 0;

}

.site-hero__breadcrumb .wce-breadcrumb {

    --bc-color: var(--blue-300);
    --bc-link: var(--blue-300);
    --bc-link-hover: var(--white);
    --bc-sep: var(--blue-300);

}


/* ==========================================
   TITLE (DISPLAY)
   Losgekoppeld van GP's H1 (handout §2).
========================================== */

.site-hero__title {

    margin: 0 0 20px 0;

    color: var(--white);

    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;

    text-wrap: balance;

}

.site-hero__title em {

    font-style: normal;
    color: var(--teal-300);

}


/* ==========================================
   INTRO (hero_intro ACF)
   Iets kleiner dan de merksite: lead-maat.
========================================== */

.site-hero__intro {

    margin: 0 0 32px 0;

    max-width: 34em;

    color: var(--neutral-50);

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;

}

.site-hero__intro > :last-child {

    margin-bottom: 0;

}


/* ==========================================
   CTA
   Eén primaire actie: --teal-500 vlak, --blue-900
   tekst, pill, trailing pijl (handout §3).
========================================== */

.site-hero__title + .site-hero__ctas {

    margin-top: 12px;

}

.site-hero .site-hero__cta {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 20px 12px 24px;

    border-radius: var(--radius-pill);

    background: var(--teal-500);
    color: var(--blue-900);

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: none;

    transition: background-color 0.2s ease;

}

.site-hero .site-hero__cta:hover,
.site-hero .site-hero__cta:focus-visible {

    background: var(--teal-300);
    color: var(--blue-900);

}

.site-hero .site-hero__cta:focus-visible {

    outline: 2px solid var(--blue-400);
    outline-offset: 3px;

}

.site-hero__cta-icon {

    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    transition: transform 0.2s ease;

}

.site-hero__cta:hover .site-hero__cta-icon {

    transform: translateX(3px);

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .site-hero__content {
        animation: none;
    }

    .site-hero__cta-icon {
        transition: none;
    }

    .site-hero__cta:hover .site-hero__cta-icon {
        transform: none;
    }

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

    .site-hero__inner {

        padding: 56px 30px;

    }

}


/* ==========================================
   MOBILE
   Foto boven (16:9), tekst eronder op effen
   --blue-950. Korte verticale fade voorkomt een
   harde naad tussen foto en tekstvlak.
========================================== */

@media (max-width: 768px) {

    .site-hero--full {

        display: block;
        min-height: 0;

    }

    .site-hero__visual {

        position: relative;
        inset: auto;

        aspect-ratio: 16 / 9;

    }

    .site-hero__overlay {

        background: linear-gradient(
            to bottom,
            transparent 55%,
            var(--blue-950) 100%
        );

    }

    .site-hero__inner {

        padding: 24px 20px 40px;

    }

    .site-hero__content {

        max-width: none;

    }

}