/* ============================================================
   MICHLOR — FAQ Section CSS
   Klasy: .mfaq (michlor-faq)
   ============================================================ */

.mfaq {
    position:         relative;
    background-color: var(--color-bg-deep);
    padding:          var(--space-lg) 0;
}

.mfaq__inner {
    max-width: 860px;
    margin:    0 auto;
    padding:   0 clamp(1.5rem, 4vw, 3rem);
}

/* ── Nagłówek ────────────────────────────────────────────── */
.mfaq__head {
    text-align:    center;
    margin-bottom: 2.5rem;
}

.mfaq__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);
}

.mfaq__title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0 0 1rem;
}

.mfaq__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;
}

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

/* ── Filtry ──────────────────────────────────────────────── */
.mfaq__filters {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.5rem;
    justify-content: center;
    margin-bottom:   2.5rem;
}

.mfaq__filter {
    font-family:      var(--font-body);
    font-size:        0.8125rem;
    font-weight:      500;
    color:            var(--color-muted);
    background:       transparent;
    border:           1px solid rgba(255, 255, 255, 0.08);
    border-radius:    var(--radius-pill);
    padding:          0.4rem 1rem;
    cursor:           pointer;
    transition:       color            var(--transition-fast),
                      background-color var(--transition-fast),
                      border-color     var(--transition-fast);
}

.mfaq__filter:hover {
    color:        var(--color-text);
    border-color: rgba(255, 255, 255, 0.2);
}

.mfaq__filter.is-active {
    color:            var(--color-bg);
    background-color: var(--color-accent);
    border-color:     var(--color-accent);
}

/* ── Lista pytań ─────────────────────────────────────────── */
.mfaq__list {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    margin-bottom:  3rem;
}

/* Ukryta kategoria przy filtrowaniu */
.mfaq__item.is-hidden {
    display: none;
}

/* ── Pojedynczy item ─────────────────────────────────────── */
.mfaq__item {
    background:    var(--color-bg-card);
    border:        1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    overflow:      hidden;
    transition:    border-color var(--transition-base);
}

.mfaq__item:has(.mfaq__question[aria-expanded="true"]) {
    border-color: rgba(0, 180, 166, 0.3);
}

/* ── Przycisk pytania ────────────────────────────────────── */
.mfaq__question {
    width:           100%;
    display:         grid;
    grid-template-columns: auto 1fr auto;
    align-items:     center;
    gap:             0.875rem;
    padding:         1.25rem 1.5rem;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    transition:      background-color var(--transition-fast);
}

.mfaq__question:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.mfaq__question-cat {
    font-size:      0.65rem;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-accent);
    white-space:    nowrap;
    padding:        0.2rem 0.6rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mfaq__question-text {
    font-family:  var(--font-body);
    font-size:    0.9375rem;
    font-weight:  500;
    color:        var(--color-text);
    line-height:  1.45;
    transition:   color var(--transition-fast);
}

.mfaq__question:hover .mfaq__question-text {
    color: var(--color-accent-glow);
}

.mfaq__question-icon {
    color:      var(--color-muted);
    flex-shrink: 0;
    transition: transform var(--transition-base),
                color    var(--transition-fast);
    display:    flex;
    align-items: center;
}

.mfaq__question[aria-expanded="true"] .mfaq__question-icon {
    transform: rotate(180deg);
    color:     var(--color-accent);
}

/* ── Panel odpowiedzi ────────────────────────────────────── */
.mfaq__answer {
    overflow: hidden;
}

/* hidden="hidden" → display none, JS usuwa atrybut i animuje height */
.mfaq__answer[hidden] {
    display: none;
}

.mfaq__answer-inner {
    padding:    0 1.5rem 1.5rem;
    padding-left: calc(1.5rem + 0.65rem * 6 + 0.875rem); /* wyrównanie do tekstu pytania */
}

.mfaq__answer-inner p {
    font-size:   0.9rem;
    color:       var(--color-muted);
    line-height: 1.75;
    margin:      0;
    border-left: 2px solid rgba(0, 180, 166, 0.25);
    padding-left: 1rem;
}

/* ── CTA pod FAQ ─────────────────────────────────────────── */
.mfaq__cta-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    flex-wrap:       wrap;
    padding-top:     2rem;
    border-top:      1px solid rgba(255, 255, 255, 0.06);
}

.mfaq__cta-text {
    font-size:  1rem;
    color:      var(--color-muted);
    margin:     0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .mfaq__question {
        grid-template-columns: 1fr auto;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
    }

    .mfaq__question-cat {
        display: none;
    }

    .mfaq__answer-inner {
        padding-left: 1.25rem;
    }
}