/* === 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;
}
/* v3.44.56 — per-item flat SVG icon beside the question. The render seam emits
   EITHER the Hub icon (<svg class="ss-icon">) OR the local fallback (<svg
   class="ssla-icon">); the Hub svg carries no Launch size rule, so we MUST cap
   BOTH classes or it balloons to its container (cf. the g-cards 318px render
   bug fixed in v3.44.51). Size = the --g-faq-icon-size token set by the
   icon_size variant (Medium=22px default). Color inherits the eyebrow color via
   the wrapper; icons use currentColor for stroke/fill. Hidden when the keyword
   is empty/unknown (:empty wrapper → no reserved space), and the item's :has()
   grid below only engages when an icon actually rendered, so iconless FAQ items
   are byte-identical to pre-v3.44.56. */
.ssla-g-faq-item-icon:empty { display: none; }
.ssla-g-faq-item-icon {
  color: var(--g-faq-eyebrow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ssla-g-faq-item-icon .ssla-icon,
.ssla-g-faq-item-icon .ss-icon {
  width:  var(--g-faq-icon-size, 22px);
  height: var(--g-faq-icon-size, 22px);
  display: block;
}
/* When an item carries a rendered icon, lay it out as a two-column grid:
   icon in a leading rail (spanning both rows), question + answer stacked to its
   right. :has() gates this on a NON-empty icon only, so iconless items keep the
   default block flow (question then answer) exactly as before. */
.ssla-g-faq-item:has(.ssla-g-faq-item-icon:not(:empty)) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: start;
}
.ssla-g-faq-item:has(.ssla-g-faq-item-icon:not(:empty)) .ssla-g-faq-item-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 2px;
}
.ssla-g-faq-item:has(.ssla-g-faq-item-icon:not(:empty)) .ssla-g-faq-question,
.ssla-g-faq-item:has(.ssla-g-faq-item-icon:not(:empty)) .ssla-g-faq-answer {
  grid-column: 2;
}
.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;
}

/* Icon size — v3.44.56. Section-level affordance (icon_size variant): the
 * author picks Small/Medium/Large; each sets the --g-faq-icon-size token
 * consumed by the item-icon svg cap above (both .ss-icon and .ssla-icon).
 * Medium mirrors the skeleton default (22px). */
.ssla-g-faq--icon-size-small  { --g-faq-icon-size: 18px; }
.ssla-g-faq--icon-size-medium { --g-faq-icon-size: 22px; }
.ssla-g-faq--icon-size-large  { --g-faq-icon-size: 28px; }

/* ── 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);
  --g-faq-icon-size:          22px;
}