/* FAQ section — #faq. Two-column layout (intro left, accordion right)
   matches the export's #forespoergsel/#faq pattern; item chrome (radius-16,
   neutral-200 question row, hover→neutral-400, white answer panel,
   20x20 chevron) transcribed from export CSS (.faq-item/.faq-question/
   .faq-answer). Collapse/expand + "vis alle" reveal are Stage 3.2 JS —
   panels render open at rest per CONVENTIONS §6 progressive enhancement. */

.faq {
    padding-block: var(--section-pad);
}

.faq__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
}

@media (min-width: 992px) {
    .faq__container {
        flex-direction: row;
        gap: var(--space-32);
    }
}

.faq__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

@media (min-width: 992px) {
    .faq__intro {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
    }
}

.faq__title {
    margin: 0;
}

.faq__sub {
    margin: 0;
    color: var(--secondary);
    line-height: 1.6;
}

.faq__cta {
    align-self: flex-start;
    margin-top: var(--space-8);
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
}

@media (min-width: 992px) {
    .faq__list {
        max-width: 752px;
    }
}

.faq-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq-item.is-collapsed {
    display: none;
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    width: 100%;
    padding: var(--space-20) var(--space-24);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--neutral-200);
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: var(--text-button);
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-micro);
}

.faq-item__question:hover {
    background: var(--neutral-400);
}

.faq-item__icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--secondary);
    transition: transform var(--motion-step) var(--ease-out), color var(--motion-micro);
}

/* Driven by the attribute rather than a state class so the no-JS render
   (which ships aria-expanded="true") shows the open chevron too. */
.faq-item__question[aria-expanded="true"] .faq-item__icon {
    transform: rotate(180deg);
    color: var(--green);
}

/* Collapsing via grid rows animates an unknown content height without JS
   measuring it. Padding lives on the inner <p> so nothing shows at 0fr. */
.faq-item__answer {
    display: grid;
    grid-template-rows: 1fr;
    background: var(--white);
    transition: grid-template-rows var(--motion-step) var(--ease-out);
}

.faq-item.is-closed .faq-item__answer {
    grid-template-rows: 0fr;
}

/* The collapsing grid item. It must carry no padding of its own: padding is
   added on top of the content box, so a padded item still measured 40px at
   0fr. min-height:0 overrides the grid default of min-height:auto, which
   otherwise refuses to shrink an item below its content. */
.faq-item__answer-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-item__answer p {
    margin: 0;
    padding: var(--space-16) var(--space-24) var(--space-24);
    color: var(--secondary);
    font-size: var(--text-sm);
    line-height: 28px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-item__answer,
    .faq-item__icon {
        transition: none;
    }
}

/* Minimal text control directly under the last question (owner note
   2026-07-18 — it was a full button off to the side before). */
.faq__show-all {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
    padding: var(--space-12) var(--space-16);
    border: 0;
    background: none;
    color: var(--green-dark);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--motion-micro);
}

.faq__show-all:hover {
    color: var(--primary);
}

.faq__show-all-icon {
    display: inline-flex;
    transition: transform var(--motion-micro);
}

.faq__show-all:hover .faq__show-all-icon {
    transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
    .faq__show-all,
    .faq__show-all-icon {
        transition: none;
    }
}