/**
 * Q&A Component (Accordion-Style)
 * Juliana y Fadi Tango Website
 *
 * Wiederverwendbar auf allen Seiten.
 * Äußere Box: gleicher Stil wie .practicamos-message
 * Fragen: schwarze Balken über volle Breite der Box
 * Verhalten: zweistufiges Akkordeon - Kategorien (.qa-cluster) UND
 * Fragen (.qa-item) sind jeweils unabhängig voneinander auf-/zuklappbar,
 * mehrere Kategorien/Fragen können gleichzeitig offen sein, beide starten
 * standardmäßig zugeklappt.
 */

/* ==================== SECTION WRAPPER ==================== */

.qa-section {
    margin: var(--spacing-3xl) 0;
    /* Fluid statt starrem var(--spacing-xl) + einmaliger 768px-Stufe
       (var(--spacing-lg) var(--spacing-md), asymmetrisch) - siehe
       Fluid-Design-Audit Kategorie B1. Bewusst symmetrisch vereinfacht
       (kein separater horizontal/vertikal-Unterschied mehr, Differenz
       war klein) und Minimum etwas großzügiger reduziert als die alte
       768px-Stufe, da die alte Regel keine weitere Abstufung für sehr
       schmale Screens (<480px) hatte. */
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-glow-white);
}

.qa-section__title {
    text-align: center;
    font-size: var(--font-size-5xl);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xl);
    letter-spacing: var(--letter-spacing-base);
}

/* ==================== CLUSTER (Kategorie, auf-/zuklappbar) ==================== */

.qa-cluster {
    margin-bottom: var(--spacing-md);
}

.qa-cluster:last-child {
    margin-bottom: 0;
}

.qa-cluster__title {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0 0 var(--spacing-sm);
    margin: var(--spacing-xl) 0 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-base);
    background-image: linear-gradient(
        to right,
        transparent 0%,
        var(--color-primary) 15%,
        var(--color-primary) 85%,
        transparent 100%
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: color var(--transition-base);
}

/* Erster Cluster braucht keinen zusätzlichen Abstand nach oben */
.qa-section > .qa-cluster:first-of-type .qa-cluster__title {
    margin-top: 0;
}

.qa-cluster__title:hover {
    color: var(--color-text-accent);
}

.qa-cluster--open .qa-cluster__title {
    color: var(--color-text-accent);
}

/* ==================== ITEM ==================== */

.qa-item {
    margin-bottom: var(--spacing-sm);
}

.qa-item:last-child {
    margin-bottom: 0;
}

/* ==================== QUESTION (schwarzer Balken) ==================== */

.qa-item__question {
    width: 100%;
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--color-black);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: left;
    /* Fluid statt starrem 24px/32px + festem 16px/24px-Sprung bei 768px.
       Dieselbe Formel wird bewusst auch bei .qa-item__answer-inner p
       verwendet, damit Frage und Antwort optisch identisch behandelt
       werden. Desktop-Maxima unverändert. */
    padding: clamp(var(--spacing-sm), 4vw, var(--spacing-md))
             clamp(var(--spacing-md), 4vw, var(--spacing-lg));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-base);
    font-family: var(--font-primary);
    box-shadow: var(--shadow-glow-white);
    transition: color var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.qa-item__question:hover {
    color: var(--color-text-accent);
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}

.qa-item--open .qa-item__question {
    color: var(--color-text-accent);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

/* ==================== PLUS / MINUS ICON (Frage UND Kategorie) ==================== */

.qa-item__icon,
.qa-cluster__icon {
    flex-shrink: 0;
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: var(--border-width-medium) solid var(--color-primary);
    order: -1;
}

.qa-item__icon::before,
.qa-item__icon::after,
.qa-cluster__icon::before,
.qa-cluster__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-primary);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Horizontaler Balken (immer sichtbar) */
.qa-item__icon::before,
.qa-cluster__icon::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

/* Vertikaler Balken (wird bei open ausgeblendet → Minus) */
.qa-item__icon::after,
.qa-cluster__icon::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.qa-item--open .qa-item__icon,
.qa-cluster--open .qa-cluster__icon {
    background: var(--color-primary);
}

.qa-item--open .qa-item__icon::before,
.qa-cluster--open .qa-cluster__icon::before {
    background: var(--color-black);
}

.qa-item--open .qa-item__icon::after,
.qa-cluster--open .qa-cluster__icon::after {
    opacity: 0;
    background: var(--color-black);
}

/* ==================== CLUSTER CONTENT (Klapp-Container) ==================== */

.qa-cluster__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
}

.qa-cluster--open .qa-cluster__content {
    grid-template-rows: 1fr;
}

.qa-cluster__content-inner {
    overflow: hidden;
    min-height: 0;
}

.qa-cluster__content-items {
    /* Vorher: max(var(--spacing-lg-alt), 4%) - hatte KEINE echte Obergrenze
       (max() wählt immer den größeren Wert, wüchse auf sehr breiten
       Screens unbegrenzt weiter) UND war bis zu einer Elternbreite von
       ~1000px faktisch starr bei 40px (4% erreicht diesen Wert erst ab
       1000px Elternbreite) - auf Mobile also praktisch nie wirksam,
       trotz des scheinbar "dynamischen" %-Anteils. clamp() hat sowohl
       einen echten Boden als auch eine echte Decke, dazwischen skaliert
       der Wert durchgehend wirksam - auch auf Mobile. */
    /* Untere Grenze auf 1/4 von --spacing-sm (16px -> 4px) reduziert -
       keine bestehende Projekt-Variable trifft 4px exakt (--spacing-xs
       wäre 8px, also die Hälfte, nicht ein Viertel), daher bewusst als
       Literal gesetzt. Obergrenze unverändert bei --spacing-lg-alt. */
    /* vw-Faktor zusätzlich von 4vw auf 2vw reduziert - bei 4vw lag der
       berechnete Wert selbst bei 320px bereits über der (jetzt auf 4px
       gesenkten) unteren Grenze, die Grenze griff also in der Praxis nie.
       Mit 2vw wird sie bei sehr schmalen Screens jetzt tatsächlich erreicht. */
    padding: var(--spacing-md) clamp(0.25rem, 2vw, var(--spacing-lg-alt));
}

/* ==================== ANSWER ==================== */

.qa-item__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base),
                box-shadow var(--transition-base);
    background: var(--color-gray-800);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}

.qa-item--open .qa-item__answer {
    grid-template-rows: 1fr;
    border: var(--border-width-medium) solid var(--color-black);
    border-top: none;
    box-shadow: var(--shadow-glow-white);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}

.qa-item__answer-inner {
    overflow: hidden;
}

.qa-item__answer-inner p {
    /* Identische Formel wie .qa-item__question (siehe dort) - auf Wunsch
       sollen Frage und Antwort dieselben Padding-Werte haben. */
    padding: clamp(var(--spacing-sm), 4vw, var(--spacing-md))
             clamp(var(--spacing-md), 4vw, var(--spacing-lg));
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-base);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .qa-section__title {
        margin-bottom: var(--spacing-lg);
    }

    .qa-cluster__title {
        font-size: var(--font-size-lg);
        margin-top: var(--spacing-lg);
    }

    .qa-item__question {
        font-size: var(--font-size-base);
    }
}