/* ============================================================
   MICHLOR — Hero Section CSS
   Klasy: .mh (michlor-hero)
   Zależności: Design System z global-styles.php (:root vars)
   ============================================================ */

/* ── Wideo w tle ─────────────────────────────────────────── */
.mh__video-wrap {
    position:   absolute;
    inset:      0;
    z-index:    0;
    overflow:   hidden;
}

.mh__video {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center center;
    filter:     brightness(0.75);
}

/* Gradient overlay — przyciemnienie wideo */
.mh__video-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        105deg,
        rgba(4, 16, 30, 0.65) 0%,
        rgba(4, 16, 30, 0.35) 55%,
        rgba(4, 16, 30, 0.15) 100%
    );
}

/* Orby dekoracyjne — wyłączone */
.mh__orb {
    display: none;
}

/* Glow sphere — wyłączona */
.mh__glow-sphere {
    display: none;
}

/* ── Sekcja bazowa ───────────────────────────────────────── */
.mh {
    position:         relative;
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    background-color: var(--color-bg);
    overflow:         clip; /* clip działa poprawnie z transform na iOS Safari */
    padding:          clamp(6rem, 10vw, 10rem) 0 clamp(4rem, 6vw, 6rem);
}

/* ── Grid wewnętrzny ─────────────────────────────────────── */
.mh__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           center;
    gap:                   clamp(2rem, 5vw, 5rem);
    width:                 100%;
    max-width:             1280px;
    margin:                0 auto;
    padding:               0 clamp(1.5rem, 5vw, 4rem);
    position:              relative;
    z-index:               2;
}

/* ── Orby tła ────────────────────────────────────────────── */
.mh__orb {
    position:      absolute;
    border-radius: 50%;
    filter:        blur(80px);
    pointer-events: none;
    will-change:   opacity, transform;
    z-index:       1;
}

.mh__orb--tl {
    top:        -220px;
    left:       -180px;
    width:      650px;
    height:     650px;
    background: radial-gradient(
        circle,
        rgba(0, 180, 166, 0.13) 0%,
        transparent 65%
    );
    animation: orbDrift 12s ease-in-out infinite alternate;
}

.mh__orb--br {
    bottom:     -140px;
    right:      -120px;
    width:      550px;
    height:     550px;
    background: radial-gradient(
        circle,
        rgba(14, 165, 233, 0.10) 0%,
        transparent 65%
    );
    animation: orbDrift 15s ease-in-out infinite alternate-reverse;
}

@keyframes orbDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, 20px) scale(1.06); }
}

/* ── Lewa kolumna — treść ────────────────────────────────── */
.mh__content {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    position:       relative;
    z-index:        2;
}

/* Overline */
.mh__overline {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    font-family:     var(--font-body);
    font-size:       0.72rem;
    font-weight:     500;
    letter-spacing:  var(--letter-overline);
    text-transform:  uppercase;
    color:           var(--color-accent);
    margin-bottom:   1.75rem;
    padding:         0.4rem 1rem;
    border:          1px solid var(--glass-border);
    border-radius:   var(--radius-pill);
    background:      var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.mh__overline sup {
    font-size: 0.65em;
}

/* H1 — bazowy: biały tekst */
.mh__h1 {
    font-family:             var(--font-heading);
    font-size:               clamp(3rem, 6.5vw, 6rem);
    font-weight:             800;
    letter-spacing:          var(--letter-heading);
    line-height:             1.08;
    margin:                  0 0 1.5rem;
    color:                   var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

/* "Woda" — gradient #0e3a60 → #90e0ef */
.mh__h1-grad {
    background:              linear-gradient(135deg, #0e3a60 0%, #90e0ef 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* "technologia." — italic + gradient #90e0ef → #0e3a60 */
.mh__h1-em {
    font-style:              italic;
    background:              linear-gradient(135deg, #90e0ef 0%, #0e3a60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* Sub */
.mh__sub {
    font-family: var(--font-body);
    font-size:   clamp(1rem, 1.4vw, 1.125rem);
    font-weight: 400;
    line-height: var(--line-height-body);
    color:       var(--color-muted);
    max-width:   480px;
    margin:      0 0 2.5rem;
}

.mh__sub strong {
    color:       var(--color-text);
    font-weight: 500;
}

/* ── Przyciski CTA ───────────────────────────────────────── */
.mh__cta-group {
    display:     flex;
    flex-wrap:   wrap;
    gap:         1rem;
    align-items: center;
    margin-bottom: 0;
}

/* Bazowy btn */
.mh-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.875rem 1.875rem;
    font-family:     var(--font-body);
    font-size:       0.9375rem;
    font-weight:     500;
    letter-spacing:  0.02em;
    border-radius:   var(--radius-pill);
    cursor:          pointer;
    text-decoration: none;
    position:        relative;
    transition:      background-color var(--transition-base),
                     color            var(--transition-base),
                     box-shadow       var(--transition-base),
                     transform        var(--transition-fast),
                     border-color     var(--transition-base);
    white-space:     nowrap;
}

/* CTA Solid — główny */
.mh-btn--solid {
    background-color: var(--color-accent);
    color:            #04101E;
    border:           1px solid transparent;
    box-shadow:       var(--glow-accent);
}

.mh-btn--solid::before {
    content:       '';
    position:      absolute;
    inset:         -10px;
    border-radius: inherit;
    background:    radial-gradient(
                       ellipse at center,
                       rgba(0, 180, 166, 0.28) 0%,
                       transparent 68%
                   );
    filter:        blur(10px);
    opacity:       0;
    transition:    opacity var(--transition-base);
    z-index:       -1;
    pointer-events: none;
}

.mh-btn--solid:hover {
    background-color: var(--color-accent-glow);
    box-shadow:       var(--glow-strong),
                      0 6px 30px rgba(0, 180, 166, 0.55);
    transform:        translateY(-2px);
    color:            #04101E;
}

.mh-btn--solid:hover::before {
    opacity: 1;
}

.mh-btn--solid:active {
    transform:  translateY(0);
    box-shadow: var(--glow-accent);
}

.mh-btn__arrow {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.mh-btn--solid:hover .mh-btn__arrow {
    transform: translateX(4px);
}

/* CTA Ghost — secondary */
.mh-btn--ghost {
    background-color: transparent;
    color:            var(--color-accent);
    border:           1px solid var(--color-accent);
}

.mh-btn--ghost:hover {
    background-color: rgba(0, 180, 166, 0.10);
    color:            var(--color-accent-glow);
    border-color:     var(--color-accent-glow);
    box-shadow:       0 0 14px rgba(0, 180, 166, 0.22);
    transform:        translateY(-2px);
}

/* ── Micro-stats ─────────────────────────────────────────── */
.mh__stats {
    display:     flex;
    gap:         2.5rem;
    margin-top:  2.5rem;
    padding-top: 2rem;
    border-top:  1px solid rgba(255, 255, 255, 0.07);
    flex-wrap:   wrap;
}

.mh__stat {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.mh__stat-value {
    font-family:    var(--font-heading);
    font-size:      clamp(1.5rem, 2.5vw, 2rem);
    font-weight:    800;
    color:          var(--color-text);
    line-height:    1;
    letter-spacing: var(--letter-heading);
}

.mh__stat-label {
    font-size:      0.72rem;
    font-weight:    400;
    color:          var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Prawa kolumna — media ───────────────────────────────── */
.mh__media {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         1;
}

/* Sfera glow */
.mh__glow-sphere {
    position:       absolute;
    width:          clamp(320px, 45vw, 520px);
    height:         clamp(320px, 45vw, 520px);
    border-radius:  50%;
    background:     radial-gradient(
                        circle at 38% 38%,
                        rgba(0, 180, 166, 0.38) 0%,
                        rgba(14, 165, 233, 0.15) 40%,
                        transparent 70%
                    );
    filter:         blur(55px);
    animation:      glowPulse 7s ease-in-out infinite;
    will-change:    opacity, transform;
    pointer-events: none;
}

.mh__glow-sphere::after {
    content:       '';
    position:      absolute;
    inset:         12% 18%;
    border-radius: 50%;
    background:    radial-gradient(
                       circle,
                       rgba(14, 165, 233, 0.22) 0%,
                       transparent 65%
                   );
    filter:        blur(35px);
    animation:     glowPulse 7s ease-in-out infinite reverse;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.75; transform: scale(1);    }
    50%       { opacity: 1.00; transform: scale(1.07); }
}

/* Zdjęcie produktu */
.mh__product-img {
    position:   relative;
    z-index:    2;
    max-height: clamp(300px, 45vw, 520px);
    width:      auto;
    filter:     drop-shadow(0 24px 64px rgba(0, 180, 166, 0.28));
    animation:  floatProduct 5.5s ease-in-out infinite;
    will-change: transform;
}

@keyframes floatProduct {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}

/* ── Scroll hint ─────────────────────────────────────────── */
.mh__scroll-hint {
    position:        absolute;
    bottom:          2rem;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.5rem;
    animation:       scrollBounce 2.5s ease-in-out infinite;
}

.mh__scroll-text {
    font-size:      0.7rem;
    font-weight:    400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-muted);
}

.mh__scroll-icon {
    color: var(--color-muted);
}

@keyframes scrollBounce {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
    50%       { opacity: 1.0; transform: translateX(-50%) translateY(5px); }
}

/* ── Responsive — Tablet (< 1024px) ─────────────────────── */
@media (max-width: 1024px) {
    .mh__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .mh__h1 {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }
}

/* ── Wideo overlay — silniejszy na mobile ───────────────── */
@media (max-width: 768px) {
    .mh__video {
        filter: brightness(0.35);
    }
    .mh__video-overlay {
        background: rgba(4, 16, 30, 0.82);
    }
}

/* ── Responsive — Mobile (< 768px) ──────────────────────── */
@media (max-width: 768px) {
    .mh {
        min-height: auto;
        padding: 8rem 0 5rem;
    }
    .mh__inner {
        grid-template-columns: 1fr;
        text-align:            center;
    }
    .mh__content {
        align-items: center;
        order: 2;
        /* Zapobiega wylewaniu się dzieci poza kolumnę */
        max-width: 100%;
        overflow: hidden;
    }
    .mh__h1 {
        font-size: clamp(1.875rem, 7.5vw, 3rem);
    }
    /* Overline — za długi tekst na mobilnym → zawijaj */
    .mh__overline {
        white-space:    normal;
        text-align:     center;
        max-width:      calc(100vw - 3rem);
        line-height:    1.5;
    }
    .mh__media {
        order: 1;
        margin-bottom: 1rem;
    }
    .mh__sub {
        max-width: 100%;
    }
    .mh__stats {
        justify-content: center;
    }
    .mh__glow-sphere {
        width:  280px;
        height: 280px;
    }
    .mh__product-img {
        max-height: 240px;
    }
    .mh__scroll-hint {
        display: none;
    }
}