/* ============================================================
   Shared social proof: member quotes, Kerfuffle's ESTAS reviews, Reviews on
   Google. Loaded by /kerfufflemembership/ and /kerfufflemembership/trial on top
   of style.css, which owns the tokens and the .quote card these reuse.

   The markup these rules style is generated into both pages by
   scripts/build-proof.js, so the stylesheet is shared for the same reason the
   markup is: two copies would drift.
============================================================ */

/* Kerfuffle pink carrying white text is 3.5:1, under the 4.5:1 AA floor for
   normal-size text. #D31255 is 5.3:1 and is close enough to read as the same
   brand colour. Defined here because both pages load this file, and used only
   where the pink sits behind text: the brand pink is untouched everywhere
   else. */
:root {
  --pink-aa:      #D31255;
  --pink-aa-dark: #B80C46;
}

/* Decorative initials on a pink disc, below the generated block on the
   Membership page. Marked aria-hidden, but the letters are still read by
   sighted users, so they need the contrast. */
.fq-avatar { background: var(--pink-aa); }

/* The shared .quote-grid is three across, which leaves a single orphan card
   for four quotes. Two across pairs them evenly and still collapses to one
   column well before the mobile breakpoint. */
.tq-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 44px;
}
@media (max-width: 860px) { .tq-grid { grid-template-columns: 1fr; } }

.tq-card figure { margin: 0; }
.tq-card blockquote { margin: 0; }
.tq-card figcaption { margin-top: 2px; }
.tq-card cite span { display: block; font-weight: 400; margin-top: 2px; }

.estas-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 30px);
}
.estas-h {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--white);
  margin-bottom: 6px;
}
.estas-note {
  color: var(--grey);
  font-size: .93rem;
  margin-bottom: 18px;
  max-width: 62ch;
}

/* The reserved height is the point of this block: ESTAS is a third-party embed
   that can be blocked, fail or simply be slow, and with no floor the section
   would collapse to nothing and shift everything below it. The box holds its
   size whether the widget paints, errors or never arrives at all. */
.estas-frame {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
  overflow: hidden;
}
@media (max-width: 560px) { .estas-frame { min-height: 260px; } }

/* The widget paints on a light surface, so the status and fallback text shares
   that white panel and needs a dark colour rather than the page greys.
   #3d4459 on #fff is 8.9:1. */
.estas-status,
.estas-fallback p,
.estas-fallback-static {
  color: #3d4459;
  font-size: .93rem;
  text-align: center;
  margin: 0 auto;
  max-width: 52ch;
}
.estas-frame [hidden] { display: none; }

/* Reviews on Google. A separate card from the ESTAS block above it, because
   Google states it does not verify reviews and the two must not read as one
   endorsement. Same quote-card treatment as the member testimonials, so the
   three sources look like a set without looking interchangeable. */
.g-block {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 30px);
}

.g-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 20px;
}
/* The shared link colour is brand pink, which is 3.9:1 on the card background,
   under the 4.5:1 AA floor for normal text. Teal is 5.3:1 and is already the
   focus colour. Underlined too, so the link is not signalled by colour alone
   inside a paragraph. */
.g-agg,
.g-src {
  color: var(--teal);
  text-decoration: underline;
}
.g-agg { font-weight: 600; }
.g-checked { color: var(--grey); font-size: .88rem; }

/* Three across, straight to one column: two of three would leave an orphan. */
.g-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px) { .g-grid { grid-template-columns: 1fr; } }

/* The block behind them is already --card, so the cards take the next surface
   up or they disappear into it. */
.g-card { background: var(--card-2); }
.g-card figcaption { margin-top: 12px; display: grid; gap: 3px; }
.g-meta { color: var(--grey); font-size: .88rem; }
.g-src { font-size: .88rem; justify-self: start; }

/* The generated block ends flush with the Google card, so whatever a page puts
   after it has to supply its own separation. */
.founder-quote-spaced { margin-top: 40px; }