/* ============================================================
   MICHLOR — "Dlaczego Michlor" Section CSS
   Klasy: .mwhy (michlor-why)
   ============================================================ */

.mwhy {
    position:         relative;
    background-color: var(--color-bg);
    padding:          var(--space-lg) 0;
    overflow:         hidden;
}

.mwhy__inner {
    display:               grid;
    grid-template-columns: 1fr 1.6fr;
    gap:                   clamp(3rem, 6vw, 7rem);
    align-items:           start;
    max-width:             1280px;
    margin:                0 auto;
    padding:               0 clamp(1.5rem, 4vw, 3rem);
}

/* ── Lewa kolumna — nagłówek ─────────────────────────────── */
.mwhy__head {
    position: sticky;
    top:      8rem;
    display:  flex;
    flex-direction: column;
    align-items: flex-start;
    gap:      0;
}

.mwhy__overline {
    display:        inline-block;
    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:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mwhy__title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 3vw, 2.5rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.2;
    margin:         0 0 1.25rem;
}

.mwhy__title-em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.mwhy__sub {
    font-size:   0.9375rem;
    color:       var(--color-muted);
    line-height: var(--line-height-body);
    margin:      0 0 2rem;
}

.mwhy__cta {
    font-family:     var(--font-body);
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--color-accent);
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    transition:      gap var(--transition-fast),
                     color var(--transition-fast);
}

.mwhy__cta:hover {
    gap:   0.6rem;
    color: var(--color-accent-glow);
}

/* Dekoracyjna sfera pod CTA */
.mwhy__glow {
    position:      absolute;
    bottom:        -80px;
    left:          -60px;
    width:         300px;
    height:        300px;
    border-radius: 50%;
    background:    radial-gradient(
                       circle,
                       rgba(0, 180, 166, 0.12) 0%,
                       transparent 65%
                   );
    filter:        blur(50px);
    pointer-events: none;
    z-index:       0;
}

/* ── Prawa kolumna — lista ───────────────────────────────── */
.mwhy__list {
    display:        flex;
    flex-direction: column;
    position:       relative;
}

/* ── Pojedynczy argument ─────────────────────────────────── */
.mwhy__item {
    position:    relative;
    display:     grid;
    grid-template-columns: 52px 1fr;
    gap:         0 1.25rem;
    padding:     2rem 0;
    align-items: start;
}

.mwhy__item:first-child {
    padding-top: 0;
}

/* Pionowa linia łącząca argumenty */
.mwhy__item-line {
    position:         absolute;
    left:             25px;
    top:              calc(52px + 2rem);
    bottom:           0;
    width:            1px;
    background:       linear-gradient(
                          180deg,
                          rgba(0, 180, 166, 0.25) 0%,
                          rgba(0, 180, 166, 0.05) 100%
                      );
}

/* Ikona */
.mwhy__item-icon {
    width:            48px;
    height:           48px;
    flex-shrink:      0;
    color:            var(--color-accent);
    background:       var(--glass-bg);
    border:           1px solid var(--glass-border);
    border-radius:    var(--radius-md);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          10px;
    transition:       background-color var(--transition-base),
                      border-color     var(--transition-base),
                      box-shadow       var(--transition-base);
    position:         relative;
    z-index:          1;
}

.mwhy__item:hover .mwhy__item-icon {
    background:  rgba(0, 180, 166, 0.1);
    border-color: rgba(0, 180, 166, 0.4);
    box-shadow:  0 0 16px rgba(0, 180, 166, 0.15);
}

.mwhy__item-icon svg {
    width:  100%;
    height: 100%;
}

/* Body */
.mwhy__item-body {
    padding-top: 0.1rem;
}

.mwhy__item-header {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    margin-bottom: 0.625rem;
}

.mwhy__item-num {
    font-family:    var(--font-mono);
    font-size:      0.7rem;
    color:          var(--color-accent);
    opacity:        0.6;
    letter-spacing: 0.05em;
    flex-shrink:    0;
}

.mwhy__item-title {
    font-family:    var(--font-heading);
    font-size:      1.0625rem;
    font-weight:    700;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    margin:         0;
    line-height:    1.3;
    flex:           1;
    transition:     color var(--transition-fast);
}

.mwhy__item:hover .mwhy__item-title {
    color: var(--color-accent-glow);
}

.mwhy__item-badge {
    display:        inline-block;
    font-size:      0.65rem;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-accent);
    background:     rgba(0, 180, 166, 0.1);
    border:         1px solid rgba(0, 180, 166, 0.2);
    border-radius:  var(--radius-pill);
    padding:        0.2rem 0.6rem;
    white-space:    nowrap;
}

.mwhy__item-desc {
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.7;
    margin:      0;
    max-width:   560px;
    transition:  color var(--transition-fast);
}

.mwhy__item:hover .mwhy__item-desc {
    color: rgba(122, 155, 174, 0.85);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mwhy__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .mwhy__head {
        position: static;
    }

    .mwhy__glow {
        display: none;
    }
}

@media (max-width: 640px) {
    .mwhy__item {
        grid-template-columns: 42px 1fr;
        gap: 0 1rem;
    }

    .mwhy__item-icon {
        width:  42px;
        height: 42px;
    }

    .mwhy__item-line {
        left: 20px;
    }

    .mwhy__item-badge {
        display: none;
    }
}