/**
 * FAQ Component — Editorial column style
 *
 * Single-column stacked Q&A list with optional editorial header.
 * No cards, no boxes. Reads like a newspaper column.
 *
 * Usage:
 *   <section class="faq-section">
 *       <div class="container faq-container">
 *           <div class="faq-editorial-header">
 *               <p class="faq-eyebrow">Eyebrow label</p>
 *               <h2 class="faq-headline">Headline.</h2>
 *               <p class="faq-intro">Intro text.</p>
 *           </div>
 *           <div class="faq-grid">
 *               <?= view('partials/marketing/faq_item', [...]) ?>
 *           </div>
 *       </div>
 *   </section>
 */

/* Section wrapper */
.faq-section {
    padding: var(--section-padding);
    background: transparent;
}

/* Editorial header (eyebrow + headline + intro) */
.faq-editorial-header {
    max-width: 680px;
    margin: 0 auto var(--spacing-2xl);
    text-align: left;
}

.faq-eyebrow {
    font-size: var(--font-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.faq-headline {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-heading);
    line-height: 1.15;
}

.faq-intro {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin-bottom: 0;
}

/* FAQ list — stacked, narrow, generous spacing */
.faq-grid {
    display: flex;
    flex-direction: column;
    max-width: 680px;
    margin: 0 auto;
    gap: var(--spacing-2xl);
}

/* FAQ item — flat, typographic, no card */
.faq-item {
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

.faq-item p {
    margin-bottom: 0;
}

.faq-answer p:not(:last-child) {
    margin-bottom: var(--spacing-sm);
}

/* Question */
.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    display: block;
    margin: 0 0 var(--spacing-sm);
}

/* Answer */
.faq-answer {
    color: var(--color-text-light);
    line-height: 1.6;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .faq-headline {
        font-size: 2rem;
    }
}