/* ==========================================================================
   Answer Block — full-bleed dark band, container-width content.

   Loaded only on pages using this element. Namespaced `ab-` so it replaces
   the theme's generic .defcard rules outright rather than overriding them.

   The dark background lives on the section, so it runs edge to edge across
   the viewport, while everything inside stays within the theme container and
   stays aligned with the sections above and below.

   Flat colour by design — no gradient or glow.
   ========================================================================== */

.fm-el--answer-block {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background: #131318;
  color: #fff;
}

/* ---------- upper grid ---------- */
.ab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.ab-main { min-width: 0; }

/* ---------- eyebrow ---------- */
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b9abff;
}
.ab-eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--violet, #7963ff);
}

/* ---------- term ---------- */
.ab-term { margin: 0 0 1.8rem; }
.ab-term b {
  display: block;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff;
}
.ab-term span {
  display: block;
  margin-top: .55rem;
  font-size: clamp(.92rem, 1.1vw, 1.02rem);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, .58);
}

/* ---------- numbered points ---------- */
.ab-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.ab-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.ab-points .n {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(121, 99, 255, .18);
  border: 1px solid rgba(121, 99, 255, .40);
  color: #c3b6ff;
  font-size: .79rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ab-points p {
  margin: 0;
  font-size: clamp(.95rem, 1.05vw, 1.03rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .74);
}
.ab-points strong { color: #fff; font-weight: 700; }

/* ---------- chips ---------- */
.ab-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.8rem; }
.ab-chips a {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .22s var(--ease, ease), border-color .22s, color .22s, transform .22s;
}
.ab-chips a:hover {
  background: rgba(121, 99, 255, .22);
  border-color: rgba(121, 99, 255, .6);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- quote ---------- */
.ab-side {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: clamp(16px, 1.6vw, 22px);
  min-width: 0;
}
.ab-mark {
  font-size: 2.9rem;
  line-height: .7;
  color: var(--violet, #7963ff);
}
.ab-quote {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.13rem);
  font-weight: 400;
  line-height: 1.62;
  color: rgba(255, 255, 255, .86);
}
/* Pushes the attribution down so a short quote leaves no dead gap. */
.ab-by {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  gap: .85rem;
}
.ab-by img {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .18);
}
.ab-by b { display: block; font-size: .93rem; color: #fff; }
.ab-by small {
  display: block;
  margin-top: .14rem;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .52);
}

/* ---------- fact rail ----------
   Sits inside the container so its cells stay aligned with the copy above,
   while the section's dark background continues edge to edge behind it. */
.ab-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: clamp(2.2rem, 4vw, 3.4rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ab-facts > div {
  padding: 1.2rem clamp(1rem, 1.6vw, 1.6rem);
  border-right: 1px solid rgba(255, 255, 255, .08);
  min-width: 0;
}
/* Zero the outer padding so the first label sits flush with the heading above
   it and the last cell ends flush with the quote card's right edge. Without
   this the whole rail looks inset from the rest of the section. */
.ab-facts > div:first-child { padding-left: 0; }
.ab-facts > div:last-child { border-right: 0; padding-right: 0; }
.ab-facts dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.ab-facts dd {
  margin: .4rem 0 0;
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.ab-facts dd small {
  display: block;
  margin-top: .2rem;
  font-size: .77rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .5);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ab-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ab-facts > div:nth-child(even) { border-right: 0; }
}