/* =========================================================
   MeerHeimatLiebe 2.0
   HERO LAYER SYSTEM
   ========================================================= */

.mhl-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.mhl-hero__background {
    position: absolute;
    inset: -6%;
    z-index: 0;

    background-image:
        url('/wp-content/themes/meerheimatliebe/assets/images/hero/home-hero.webp');

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

    transform: scale(1.04);
    will-change: transform;
}

.mhl-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4, 35, 51, 0.42) 0%,
            rgba(5, 57, 79, 0.20) 42%,
            rgba(5, 85, 93, 0.10) 100%
        );

    pointer-events: none;
}

.mhl-hero__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 2;

    overflow: hidden;
    pointer-events: none;
}

.mhl-hero__content {
    position: relative;
    z-index: 3;
}

.mhl-hero__scroll {
    z-index: 4;
}

/* =========================================================
   MeerHeimatLiebe 2.0
   GLASS + TYPOGRAPHY REFINEMENT
   ========================================================= */

/* Glass panel */
.mhl-hero__glass {
    box-sizing: border-box;

    width: min(700px, 100%);
    max-width: 700px;

    padding: clamp(2.4rem, 4vw, 4rem);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.055)
        );

    border:
        1px solid rgba(255, 255, 255, 0.30);

    box-shadow:
        0 24px 70px rgba(0, 25, 40, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    backdrop-filter:
        blur(22px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(135%);
}

/* Hero title */
.mhl-hero__title {
    max-width: 100%;

    font-size:
        clamp(3.2rem, 4.7vw, 5.4rem);

    line-height: 0.96;

    letter-spacing:
        -0.045em;

    overflow-wrap: normal;
    word-break: normal;
}

/* Keep the brand name inside the glass */
.mhl-hero__title strong {
    display: block;
    max-width: 100%;
}

/* Description */
.mhl-hero__description {
    max-width: 580px;
}

/* Slightly more photographic overlay */
.mhl-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(4, 35, 51, 0.34) 0%,
            rgba(5, 57, 79, 0.14) 48%,
            rgba(5, 85, 93, 0.06) 100%
        );
}

/* Desktop positioning */
.mhl-hero__content {
    padding-top: 9rem;
    padding-bottom: 6rem;
}

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

@media (max-width: 700px) {

    .mhl-hero__glass {
        width: 100%;
        max-width: none;

        padding:
            2rem 1.4rem;
    }

    .mhl-hero__title {
        font-size:
            clamp(3rem, 14vw, 4.5rem);
    }
}

/* =========================================================
   MHL 2.0 — HERO FINAL REFINEMENT
   ========================================================= */

.mhl-hero__glass {
    width: min(680px, 100%);
    max-width: 680px;

    padding: clamp(2.5rem, 4vw, 3.8rem);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.115),
            rgba(255, 255, 255, 0.045)
        );

    border: 1px solid rgba(255, 255, 255, 0.26);

    box-shadow:
        0 24px 65px rgba(0, 30, 45, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    backdrop-filter:
        blur(18px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(125%);
}

/* Eyebrow */
.mhl-hero__eyebrow {
    margin-bottom: 1.25rem;
}

/* Main heading */
.mhl-hero__title {
    max-width: 620px;

    font-size:
        clamp(3.4rem, 5vw, 5rem);

    line-height: 0.98;

    letter-spacing: -0.042em;
}

/* Prevent the brand name from becoming too wide */
.mhl-hero__title strong {
    max-width: 100%;
}

/* Description */
.mhl-hero__description {
    max-width: 540px;
    margin-top: 1.6rem;
}

/* Buttons */
.mhl-hero__actions {
    margin-top: 2rem;
}

/* Hero content positioning */
.mhl-hero__content {
    padding-top: 8rem;
    padding-bottom: 5rem;
}

/* Slightly stronger image visibility */
.mhl-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(3, 31, 45, 0.28) 0%,
            rgba(4, 53, 72, 0.10) 45%,
            rgba(5, 80, 88, 0.025) 100%
        );
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1000px) {

    .mhl-hero__content {
        padding-left: 1rem;
    }

    .mhl-hero__glass {
        transform: translateY(8px);
    }
}

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

@media (max-width: 700px) {

    .mhl-hero__glass {
        width: 100%;
        max-width: none;
        padding: 2rem 1.35rem;
    }

    .mhl-hero__title {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .mhl-hero__description {
        font-size: 1rem;
    }
}

/* =========================================================
   MHL 2.0 — HERO FINAL REFINEMENT
   ========================================================= */

.mhl-hero__glass {
    width: min(680px, 100%);
    max-width: 680px;

    padding: clamp(2.5rem, 4vw, 3.8rem);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.115),
            rgba(255, 255, 255, 0.045)
        );

    border: 1px solid rgba(255, 255, 255, 0.26);

    box-shadow:
        0 24px 65px rgba(0, 30, 45, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    backdrop-filter:
        blur(18px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(125%);
}

/* Eyebrow */
.mhl-hero__eyebrow {
    margin-bottom: 1.25rem;
}

/* Main heading */
.mhl-hero__title {
    max-width: 620px;

    font-size:
        clamp(3.4rem, 5vw, 5rem);

    line-height: 0.98;

    letter-spacing: -0.042em;
}

/* Prevent the brand name from becoming too wide */
.mhl-hero__title strong {
    max-width: 100%;
}

/* Description */
.mhl-hero__description {
    max-width: 540px;
    margin-top: 1.6rem;
}

/* Buttons */
.mhl-hero__actions {
    margin-top: 2rem;
}

/* Hero content positioning */
.mhl-hero__content {
    padding-top: 8rem;
    padding-bottom: 5rem;
}

/* Slightly stronger image visibility */
.mhl-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(3, 31, 45, 0.28) 0%,
            rgba(4, 53, 72, 0.10) 45%,
            rgba(5, 80, 88, 0.025) 100%
        );
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1000px) {

    .mhl-hero__content {
        padding-left: 1rem;
    }

    .mhl-hero__glass {
        transform: translateY(8px);
    }
}

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

@media (max-width: 700px) {

    .mhl-hero__glass {
        width: 100%;
        max-width: none;
        padding: 2rem 1.35rem;
    }

    .mhl-hero__title {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .mhl-hero__description {
        font-size: 1rem;
    }
}

/* =========================================================
   MHL 2.0 — CRYSTAL SEA GLASS
   ========================================================= */

.mhl-hero__glass {
    position: relative;
    isolation: isolate;

    width: min(680px, 100%);
    max-width: 680px;

    padding: clamp(2.6rem, 4vw, 3.8rem);

    /*
     * Echtes Glas:
     * weniger Fläche, mehr Durchsicht
     */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.075) 38%,
            rgba(190, 235, 238, 0.055) 100%
        );

    /*
     * Feine Glasumrandung
     */
    border: 1px solid rgba(255, 255, 255, 0.38);

    border-radius: 28px;

    /*
     * Tiefe + innere Lichtkante
     */
    box-shadow:
        0 30px 80px rgba(0, 25, 40, 0.20),
        0 8px 30px rgba(0, 40, 55, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);

    /*
     * Das eigentliche Glas
     */
    backdrop-filter:
        blur(26px)
        saturate(145%)
        contrast(105%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(145%)
        contrast(105%);

    overflow: hidden;
}

/*
 * Oberer Glas-Schimmer
 */
.mhl-hero__glass::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,0.20) 0%,
            rgba(255,255,255,0.07) 22%,
            transparent 45%,
            transparent 100%
        );

    pointer-events: none;
}

/*
 * Feine Lichtkante im Glas
 */
.mhl-hero__glass::after {
    content: "";

    position: absolute;

    top: 0;
    left: 7%;
    right: 7%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.72),
            transparent
        );

    opacity: 0.75;

    pointer-events: none;
}

/*
 * Text bekommt etwas mehr Klarheit,
 * ohne das Glas wieder abzudunkeln.
 */
.mhl-hero__eyebrow,
.mhl-hero__title,
.mhl-hero__description {
    position: relative;
    z-index: 2;
}

/*
 * Buttons leicht ins Glas integrieren
 */
.mhl-hero__actions {
    position: relative;
    z-index: 2;
}

/*
 * Desktop
 */
@media (min-width: 1000px) {

    .mhl-hero__glass {
        transform: translateY(8px);

        /*
         * minimaler „schwebender“ Eindruck
         */
        animation:
            mhl-glass-float 8s ease-in-out infinite;
    }
}

/*
 * Sehr dezente Bewegung
 */
@keyframes mhl-glass-float {

    0%,
    100% {
        transform: translateY(8px);
    }

    50% {
        transform: translateY(4px);
    }
}

/*
 * Reduced Motion
 */
@media (prefers-reduced-motion: reduce) {

    .mhl-hero__glass {
        animation: none;
    }
}

/*
 * Mobile
 */
@media (max-width: 700px) {

    .mhl-hero__glass {
        width: 100%;
        max-width: none;

        padding:
            2rem
            1.35rem;

        border-radius: 22px;

        backdrop-filter:
            blur(22px)
            saturate(140%);

        -webkit-backdrop-filter:
            blur(22px)
            saturate(140%);
    }
}