/* ============================================================
   SUBPAGE HERO PANEL (.mm-hp--inner)
   ------------------------------------------------------------
   Enhanced glass panel used on all subpages (not the homepage,
   which uses .mm-hp without --inner). Goal: make the hero text
   clearly readable over any background video or image, while
   feeling intentional and on-brand (industrial / green accent).
   ============================================================ */

.mm-hp--inner {
    position: relative;
    overflow: hidden;

    /* Generous breathing room, scales fluidly with viewport */
    padding: clamp(28px, 2.6vw, 48px) clamp(32px, 3.2vw, 60px);

    /* Keep the panel tight around the copy instead of stretching
       the full container width — looks like a proper "card". */
    display: inline-flex;
    width: auto;
    max-width: min(760px, 100%);

    /* Layered translucent background: subtle brand-tinted highlight
       in the top-left, deepening to near-opaque black bottom-right.
       The gradient makes the panel feel designed, not just a tint. */
    background:
        linear-gradient(
            135deg,
            rgba(14, 42, 40, 0.78) 0%,
            rgba(0, 0, 0, 0.62) 55%,
            rgba(0, 0, 0, 0.74) 100%
        );

    /* Frosted glass. saturate() keeps colors behind punchy. */
    -webkit-backdrop-filter: blur(22px) saturate(135%);
            backdrop-filter: blur(22px) saturate(135%);

    /* Thin glass edge + bold brand accent on the left. */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--color-green-3, #209c94);

    /* Depth: outer shadow lifts the panel off the video. */
    box-shadow:
        0 28px 60px -22px rgba(0, 0, 0, 0.75),
        0 4px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Soft brand-green glow in the top-left behind the text —
   adds dimension without hurting legibility. */
.mm-hp--inner::before {
    content: "";
    position: absolute;
    top: -45%;
    left: -12%;
    width: 65%;
    height: 190%;
    background: radial-gradient(
        ellipse at center,
        rgba(32, 156, 148, 0.22) 0%,
        rgba(32, 156, 148, 0.08) 35%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 0;
}

/* Industrial corner bracket in the top-right, picks up the
   hexagonal / technical language used elsewhere on the site. */
.mm-hp--inner::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-top: 2px solid var(--color-green-3, #209c94);
    border-right: 2px solid var(--color-green-3, #209c94);
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
}

/* Make sure the title + description sit above the glow layer. */
.mm-hp--inner > * {
    position: relative;
    z-index: 2;
}

/* Extra text legibility on top of varied video backgrounds. */
.mm-hp--inner h1 span {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55),
                 0 1px 2px  rgba(0, 0, 0, 0.4);
}
.mm-hp--inner h2 {
    color: #f3f4f5;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55),
                 0 1px 2px  rgba(0, 0, 0, 0.35);
}

/* ---------- Tablet / mobile: full-bleed hero band ----------
   On smaller screens the "card" look falls apart — the stacked
   paddings from .container (20px) + .mm-hp (max-width:92% + 1.4vw)
   push the panel in from the left and squeeze it. On mobile we
   want it edge-to-edge with the content left-aligned to the
   viewport, so the green accent bar sits flush with the screen
   edge and the title/text align cleanly from the left. */
@media (max-width: 1123px) {
    /* Kill the container & .mm-hp paddings for the hero only, so
       the panel can go wall-to-wall. */
    section.black > .container {
        padding: 0;
    }
    .section.black > .container {
        padding: 0;
    }
    .mm-hp {
        max-width: 100%;
        width: 100%;
        padding: 0;
    }

    .mm-hp--inner {
        display: flex;
        width: 100%;
        max-width: 100%;

        /* Comfortable reading padding; left padding is a bit larger
           to give the green accent bar some breathing room before
           the text starts. */
        padding: clamp(26px, 6vw, 40px) clamp(20px, 5vw, 28px)
                 clamp(26px, 6vw, 40px) clamp(22px, 5.5vw, 32px);

        border-left-width: 3px;

        /* Soften the shadow (no need for the floating-card lift
           when the panel spans the full width). */
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    /* The decorative corner bracket looks fiddly on narrow screens
       and clashes with the pulse-arrow — hide it on mobile. */
    .mm-hp--inner::after {
        display: none;
    }

    /* Scale back the glow so it doesn't wash out the title on a
       narrow panel where it covers most of the surface. */
    .mm-hp--inner::before {
        top: -20%;
        left: -8%;
        width: 50%;
        height: 140%;
    }
}

/* ---------- Phones: lighter blur for perf, denser background ---------- */
@media (max-width: 639px) {
    .mm-hp--inner {
        -webkit-backdrop-filter: blur(14px) saturate(130%);
                backdrop-filter: blur(14px) saturate(130%);
        background:
            linear-gradient(
                135deg,
                rgba(14, 42, 40, 0.88) 0%,
                rgba(0, 0, 0, 0.80) 100%
            );
    }
}

/* ---------- Fallback: no backdrop-filter support ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mm-hp--inner {
        background:
            linear-gradient(
                135deg,
                rgba(14, 42, 40, 0.94) 0%,
                rgba(0, 0, 0, 0.88) 100%
            );
    }
}