/* === g-faq — greenfield canonical, slot-contract form === */
/* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5.   */

/* ── Base layout ── */
.ssla-g-faq {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--ssla-bg-color, transparent);
  color:      var(--g-faq-fg);
}
.ssla-g-faq-inner {
  text-align: var(--ssla-text-align, left); /* v3.18.32 f3.text-align */
  max-width: var(--g-faq-content-max-width);
  margin: 0 auto;
  padding: var(--g-faq-section-padding) 48px;
  position: relative;
  z-index: 1;
}

/* ── Fullbleed ── */
.alignfull .ssla-g-faq-inner {
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}

/* ── Header ── */
.ssla-g-faq-header { text-align: center; margin: 0 auto 64px; max-width: 720px; }
.ssla-g-faq-eyebrow {
  color:           var(--g-faq-eyebrow);
  font-size:       var(--g-faq-eyebrow-size);
  letter-spacing:  var(--g-faq-eyebrow-letter);
  font-weight:     800;
  text-transform:  uppercase;
  margin:          0 0 20px;
}
.ssla-g-faq-heading {
  font-family: var(--g-faq-heading-family);
  font-size:   var(--g-faq-heading-size);
  font-weight: var(--g-faq-heading-weight);
  line-height: 1.15;
  margin:      0;
}

/* ── Items (stacked, default) ── */
.ssla-g-faq-items { max-width: 800px; margin: 0 auto; }
.ssla-g-faq-item {
  padding: 32px 0;
  border-top: 1px solid var(--g-faq-line);
}
.ssla-g-faq-item:last-child { border-bottom: 1px solid var(--g-faq-line); }
.ssla-g-faq-question {
  font-family: var(--g-faq-question-family);
  font-size:   var(--g-faq-question-size);
  font-weight: var(--g-faq-question-weight);
  line-height: 1.4;
  margin:      0 0 12px;
}
.ssla-g-faq-answer {
  font-family: var(--g-faq-answer-family);
  font-size:   var(--g-faq-answer-size);
  line-height: var(--g-faq-answer-line-height);
  opacity:     0.85;
}
.ssla-g-faq-answer p { margin: 0 0 12px; }
.ssla-g-faq-answer p:last-child { margin-bottom: 0; }

/* ── Structural variant: layout (per §3.4) ── */
.ssla-g-faq--layout-two-col .ssla-g-faq-items {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 64px;
}
.ssla-g-faq--layout-two-col .ssla-g-faq-item {
  padding: 24px 0;
  border-top: 1px solid var(--g-faq-line);
  border-bottom: none;
}
.ssla-g-faq--layout-two-col .ssla-g-faq-item:last-child {
  border-bottom: none;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .ssla-g-faq--layout-two-col .ssla-g-faq-items { grid-template-columns: 1fr; gap: 0; }
  .ssla-g-faq-inner {
    padding: 60px 24px;
  }
}

/* ═══ Skeleton state per §3.5 ═══ */
.ssla-section.ssla-g-faq {
  --g-faq-fg:                 var(--brand-fg);
  --g-faq-eyebrow:            var(--brand-accent);
  --g-faq-line:               var(--brand-line);
  --g-faq-heading-family:     var(--brand-heading-family);
  --g-faq-heading-size:       var(--brand-h2-size-clamp);
  --g-faq-heading-weight:     var(--brand-heading-weight);
  --g-faq-question-family:    var(--brand-heading-family);
  --g-faq-question-size:      var(--brand-h3-size);
  --g-faq-question-weight:    700;
  --g-faq-answer-family:      var(--brand-body-family);
  --g-faq-answer-size:        var(--brand-body-size);
  --g-faq-answer-line-height: var(--brand-body-line-height);
  --g-faq-eyebrow-size:       var(--brand-eyebrow-size);
  --g-faq-eyebrow-letter:     var(--brand-letter-spacing-eyebrow);
  --g-faq-section-padding:    var(--paint-section-padding, var(--brand-section-padding, 80px));
  --g-faq-content-max-width:  var(--brand-content-max-width);
}