/* ==========================================================================
   SIGMA SCANNER — quicktrust.css
   §2a Quick trust bar · rating + downloads + traders + avatar stack,
   one glass card inside the hero, directly above .hero__pillars (now
   commented out in index.html in favour of this).

   .quicktrust is just the in-hero positioning wrapper — it replaces
   .hero__pillars's own margin-block-start (var(--sp-8)) so the card
   keeps the same vertical rhythm the pillars had, without this file
   needing to know anything about hero.css's layout beyond that one
   number. .hero__inner (flex column, align-items:center) does the
   actual centring, the same way it already centres every other hero
   child — no hero.css edits needed for that part.

   Pixel-matched against a supplied reference, not restyled to this
   file's own taste: exact divider colour/height, dark (not brand-green)
   stat numbers, and one row of same-size avatar circles ending in a
   same-size "10K+" circle. The rating tiles / "4.6/5" / Trustpilot
   logo+wordmark are no longer drawn here at all — they're the supplied
   assets/trustpilot-rating-badge.png (see index.html's comment on that
   <img> for where it came from), so this file only positions it.

   Markup is grouped into three .quicktrust__row blocks (rating+brand,
   the two stats, avatars+label) specifically so mobile can stack three
   clean rows instead of an item-by-item wrap — see the responsive block
   at the bottom.
   ========================================================================== */

@layer components {

  .quicktrust { inline-size: 100%; margin-block-start: var(--sp-8); }

  /* Radius from the system scale, not a one-off number — --r-2xl (28px)
     is this scale's "large" step, reserved for hero/product-adjacent
     surfaces, which is exactly what this now is since it lives inside
     .hero. Shadow reuses --shadow-md/--shadow-lg rather than a bespoke
     rgb() recipe, and drops the extra 1px border this card carried
     before: a border AND a shadow on the same edge doubles up the
     boundary, which reads heavier than either alone. Nearby precedent —
     .hero__pillars, which sat in this exact spot before, used no filled
     container at all ("a tinted box here would compete with the browser
     panel directly beneath it", per that rule's own comment in
     hero.css) — a plain shadow, no border, is the middle ground between
     that restraint and a fully boxed card. */
  .quicktrust__card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    inline-size: 90%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-block: 18px;
    padding-inline: var(--sp-7);
    border-radius: var(--r-2xl);
    background: #fff;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--dur-fast) var(--ease-out-quad), transform var(--dur-fast) var(--ease-out-quad);
  }
  .quicktrust__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .quicktrust__row { display: flex; align-items: center; gap: var(--sp-5); flex: none; }

  /* ---------- DIVIDERS — exact spec: 1px, #E8E8E8, ~30px tall --------- */
  .quicktrust__divider { inline-size: 1px; block-size: 30px; background: #E8E8E8; flex: none; }
  /* The dividers BETWEEN rows only exist as verticals on the single-line
     desktop layout; the responsive block below turns them into
     horizontal rules once the rows stack. */
  .quicktrust__divider--row { display: block; }

  /* ---------- SECTION 1+2 · "Excellent" + supplied Trustpilot badge ---
     The tiles, "4.6/5", divider and star+wordmark are all baked into
     assets/trustpilot-rating-badge.png (cropped from the supplied
     assets/trustpilot-rating.png down to just its opaque pixels) —
     nothing here draws them. Height is fixed and width auto so the
     badge scales as one unit at the source's own 1108:100 aspect ratio;
     scaling by height keeps its internal proportions (tile size, text
     size, the gap before "Trustpilot") exactly as supplied instead of
     stretching. */
  /* Supporting text tier — Satoshi 500. */
  .quicktrust__rating-word {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--ink-800);
    white-space: nowrap;
  }
  .quicktrust__tp-badge { display: block; block-size: 28px; inline-size: auto; flex: none; }

  /* ---------- SECTION 3/4 · STAT (downloads / verified traders) ------- */
  .quicktrust__row--stats { gap: var(--sp-6); }
  .quicktrust__section--stat { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
  /* Main numbers — Satoshi 700. Originally IBM Plex Mono, then Inter,
     now Satoshi — one face across the whole site per direct instruction.
     font-variant-numeric stays: Satoshi's own GSUB table ships a `tnum`
     (tabular figures) feature (confirmed with fontTools), so numeric
     alignment isn't tied to being a mono face. The small negative
     tracking is what keeps a bold numeral at this size from reading
     loose — the face's default spacing is tuned for body text, not big
     display figures. */
  .quicktrust__section--stat b {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-bold);
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    white-space: nowrap;
  }
  /* Labels — Satoshi 400. */
  .quicktrust__section--stat span {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink-400);
    white-space: nowrap;
  }

  /* ---------- SECTION 5 · PEOPLE (avatar stack) ------------------------ */
  .quicktrust__section--people { display: flex; align-items: center; gap: var(--sp-3); }

  .quicktrust__avatars { display: inline-flex; align-items: center; }
  .quicktrust__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / .12);
    font-style: normal;
    flex: none;
  }
  .quicktrust__avatar + .quicktrust__avatar { margin-inline-start: -10px; }
  .quicktrust__avatar .ss-icon { inline-size: 16px; block-size: 16px; color: var(--ink-600); }

  /* Neutral tonal variants (not saturated rainbow colours) — reads as
     "premium anonymous avatars" rather than a template's default
     placeholder confetti, and stays inside the product's own cool-neutral
     / sage palette instead of clashing with it. */
  .quicktrust__avatar--1 { background: linear-gradient(135deg, #E7ECE9, #CFE0D5); }
  .quicktrust__avatar--2 { background: linear-gradient(135deg, #E6EAF1, #CBD8E8); }
  .quicktrust__avatar--3 { background: linear-gradient(135deg, #F0E9E3, #E3D4C7); }
  .quicktrust__avatar--4 { background: linear-gradient(135deg, #EAE6F0, #D8CDE6); }

  /* Same size and position as the four avatars before it — the reference
     shows "10K+" as a fifth circle in the same row, not a small badge
     pinned to a corner. Brand/important tier — Satoshi 600 (resolves to
     the 700 file; Satoshi has no static 600 cut, see README). */
  .quicktrust__avatar--count {
    background: var(--signal-500);
    color: #fff;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold);
    font-size: 10.5px;
    letter-spacing: -0.01em;
  }

  /* "Traders trust" is supporting text (Satoshi 500); "Sigma Scanner"
     is called out at the brand/important tier (Satoshi 600) — see the
     <b> around it in index.html. */
  .quicktrust__people-label {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: 12px;
    line-height: 1.35;
    color: var(--ink-600);
    white-space: nowrap;
  }
  .quicktrust__people-label b { font-weight: var(--fw-semibold); color: var(--ink-800); }

  /* ========================================================================
     RESPONSIVE
     Desktop: exactly the reference — one row, nowrap, vertical dividers.
     Tablet: same single row, gaps and type scaled down to fit.
     Mobile: three stacked rows (rating+brand / stats / people), each row
     still a tidy horizontal cluster, separated by horizontal rules
     instead of verticals.
     ======================================================================== */

  /* ---- ≥ 1024 desktop — the reference, unmodified ---- */
  @media (min-width: 1024px) {
    .quicktrust__card { flex-wrap: nowrap; gap: var(--sp-7); padding-inline: var(--sp-8); }
  }

  /* ---- 720–1023 tablet — same single row, tightened ---- */
  @media (min-width: 720px) and (max-width: 1023px) {
    .quicktrust__card { gap: var(--sp-5); padding-inline: var(--sp-6); }
    .quicktrust__row { gap: var(--sp-4); }
    .quicktrust__row--stats { gap: var(--sp-4); }
    .quicktrust__section--stat b { font-size: 19px; }
  }

  /* ---- < 720 mobile — stack into three centred rows ---- */
  @media (max-width: 719px) {
    .quicktrust__card {
      inline-size: 100%;
      flex-direction: column;
      align-items: stretch;
      border-radius: var(--r-xl);
      padding: var(--sp-5) var(--sp-5);
      gap: var(--sp-4);
    }
    .quicktrust__row { justify-content: center; flex-wrap: wrap; row-gap: var(--sp-2); }
    .quicktrust__row--stats { justify-content: space-evenly; }
    .quicktrust__section--people { justify-content: center; }

    /* Vertical → horizontal: a 30px-tall vertical rule reads as a typo
       once its row has already wrapped onto its own line; a full-width
       horizontal one is what actually separates stacked rows. */
    .quicktrust__divider--row { inline-size: 100%; block-size: 1px; }

    .quicktrust__people-label { text-align: start; }
  }
}