/* ==========================================================================
   COMPONENT: faq
   --------------------------------------------------------------------------
   Editorial FAQ list — large numbered items with question + answer. Lives
   on a dark surface section by default but adapts to light surfaces too.

   Markup contract:
     <div class="e-faq">
         <div class="e-faq__item">
             <span class="e-faq__number">01</span>
             <div  class="e-faq__question">...</div>
             <div  class="e-faq__answer">...</div>
         </div>
     </div>
   ========================================================================== */

/* Mirror of legacy `.faq-editorial-list` + `.faq-editorial-item` (style.css
   341-378 + 696-709). Mobile uses 40px/1fr grid; desktop expands to
   60px/1fr/1fr. Numbers fade to 6% opacity ink, questions are 85% opacity,
   answers are 35% opacity (all on the dark navy surface). */

.e-faq {
    display: flex;
    flex-direction: column;
}

.e-faq__item {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    gap: 0 25px;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.e-faq__item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.e-faq__number {
    font-weight: var(--e-font-weight-bold);
    color: rgba(255, 255, 255, 0.06);
    line-height: 1;
    grid-row: 1 / -1;
    font-size: 32px;
}

.e-faq__question {
    font-weight: var(--e-font-weight-semibold);
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--e-leading-tight);
    margin-bottom: 10px;
}

.e-faq__answer {
    color: rgba(255, 255, 255, 0.35);
    font-weight: var(--e-font-weight-normal);
    line-height: var(--e-leading-relaxed);
}


/* LIGHT SURFACE OVERRIDE — when used inside a light section. */

.e-section--light .e-faq__item,
.e-section--soft  .e-faq__item,
.e-section--blue  .e-faq__item {
    border-top-color: var(--e-color-border);
}

.e-section--light .e-faq__item:last-child,
.e-section--soft  .e-faq__item:last-child,
.e-section--blue  .e-faq__item:last-child {
    border-bottom-color: var(--e-color-border);
}

.e-section--light .e-faq__number,
.e-section--soft  .e-faq__number,
.e-section--blue  .e-faq__number {
    color: rgba(28, 145, 228, 0.10);
}

.e-section--light .e-faq__question,
.e-section--soft  .e-faq__question,
.e-section--blue  .e-faq__question {
    color: var(--e-color-ink);
}

.e-section--light .e-faq__answer,
.e-section--soft  .e-faq__answer,
.e-section--blue  .e-faq__answer {
    color: var(--e-color-muted);
}


/* RESPONSIVE — desktop layout: 3-column grid with bigger numbers (mirror of
   style.css 696-709). */

@media (min-width: 1024px) {

    .e-faq__item {
        grid-template-columns: 60px 1fr 1fr;
        grid-template-rows: auto;
        gap: 0 50px;
        padding: 50px 0;
    }

    .e-faq__number {
        font-size: 48px;
    }

    .e-faq__question {
        margin-bottom: 0;
    }

}