/* ============================================================
   Reviews index — the ten firms we cover, one card each.

   Built on commun/design-system.css: the page is scoped to `.bfp`
   and only the pieces that sheet does not have are defined here,
   under the `rv-` prefix (same convention as `dc-`, `rk-`, `ax-`).

   Every card carries the same three rows in the same order, so the
   set reads down a column as well as across. Nothing here encodes a
   ranking: the order is editorial and stated as such on the page.
   ============================================================ */

.rv{
  --rv-recess:var(--bfp-recess);
  --rv-rule:rgba(237,232,223,.07);
  --rv-dim:#8A97AC;
}

/* ---------- hero ------------------------------------------------- */

.rv-hero{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:32px}
.rv-hero__mark{width:56px;height:56px;margin-bottom:12px}
.rv-hero h1{margin-bottom:12px}
.rv-hero .bfp-lede{max-width:62ch;font-size:17px}

/* The `.rv` prefix on the paragraph rules is not decoration: the shared sheet
   sets `.bfp p{margin:0 0 16px}`, which outranks a lone class selector. */
.rv .rv-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:4px 0 0;font-size:12px;color:var(--rv-dim);
}
.rv-meta b{color:var(--bfp-champagne);font-weight:700}
.rv-meta time{font-variant-numeric:tabular-nums}

/* ---------- the grid --------------------------------------------- */

.rv-set{margin-top:48px;scroll-margin-top:80px}
.rv-set>h2{margin-bottom:20px}
.rv-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  list-style:none;margin:0;padding:0;
}
.rv-grid>li{min-width:0;display:flex}

.rv-card{
  display:flex;flex-direction:column;gap:13px;width:100%;
  padding:20px;background:var(--bfp-surface);
  border:1px solid var(--bfp-edge);border-radius:var(--bfp-radius);
}

/* Apex is first and lit because it is the primary affiliate partner and
   the only review published, not because it scored higher at anything.
   The disclosure at the foot of the page says so in words. */
.rv-card--lead{
  border-color:rgba(240,206,128,.42);
  background:linear-gradient(180deg,rgba(240,206,128,.05),transparent 42%),var(--bfp-surface);
}

/* ---------- card head -------------------------------------------- */

.rv-card__top{display:flex;align-items:center;gap:13px}

.rv-tile{
  flex:none;display:grid;place-items:center;
  width:52px;height:52px;padding:8px;
  background:var(--rv-recess);border:1px solid var(--bfp-line);border-radius:12px;
}
/* A definite box rather than a percentage maximum: inside a centred grid
   WebKit collapses an image sized only by maxima and draws nothing. */
.rv-tile img{width:100%;height:100%;object-fit:contain}

/* Two marks are drawn dark on transparent and would disappear on the
   recess. They get their own ground instead of being recoloured. */
.rv-tile--light{background:#F4F1EA;border-color:rgba(237,232,223,.18)}

.rv-card__id{min-width:0;flex:1 1 auto}
.rv-card__id h3{
  margin:0;font-size:18px;line-height:1.25;color:#fff;
  font-variation-settings:"wdth" 94,"wght" 700;letter-spacing:-.015em;
}
.rv-card__shape{
  display:block;margin-top:4px;font-size:11.5px;line-height:1.45;color:var(--rv-dim);
  font-variant-numeric:tabular-nums;
}

.rv-chip{
  flex:none;align-self:flex-start;
  font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;white-space:nowrap;
  color:var(--rv-dim);border:1px solid rgba(237,232,223,.14);
}
.rv-chip--partner{color:var(--bfp-champagne);border-color:rgba(240,206,128,.36)}

.rv .rv-card__text{
  margin:0;font-size:13px;line-height:1.62;color:var(--bfp-muted);
}

/* ---------- the three rows --------------------------------------- */

.rv-facts{margin:0;padding:0;border-top:1px solid var(--rv-rule)}
.rv-facts>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--rv-rule);
}
.rv-facts dt{
  flex:none;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rv-dim);
}
.rv-facts dd{
  margin:0;text-align:right;font-size:12.5px;line-height:1.45;
  color:var(--bfp-text);font-variant-numeric:tabular-nums;
}
.rv-facts dd small{display:block;font-size:10.5px;color:var(--rv-dim)}

/* ---------- card foot -------------------------------------------- */

.rv-card__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-top:auto;padding-top:4px;
}
.rv .rv-stamp{margin:0;font-size:11px;color:var(--rv-dim);font-variant-numeric:tabular-nums}
.rv-card__foot .bfp-btn{padding:10px 16px;font-size:13px}

/* ---------- notes under the set ---------------------------------- */

.rv .rv-note{
  margin:24px 0 0;padding:14px 16px;
  border-left:2px solid var(--bfp-champagne);background:rgba(240,206,128,.06);
  font-size:12.5px;line-height:1.7;color:var(--bfp-muted);
}
.rv-note b{color:var(--bfp-text)}

.rv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rv-cols h3{margin:0 0 8px}
.rv-cols p:last-child{margin-bottom:0}

.rv-pending{
  margin-top:24px;padding:14px 16px;
  border:1px dashed rgba(240,206,128,.42);border-radius:10px;
  font-size:12.5px;line-height:1.7;color:var(--bfp-muted);
}
.rv-pending b{color:var(--bfp-champagne)}
.rv-pending p{margin:0}

/* ---------- responsive ------------------------------------------- */

@media(max-width:999px){
  .rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-cols{grid-template-columns:1fr}
}
@media(max-width:640px){
  .rv-grid{grid-template-columns:1fr;gap:14px}
  .rv-card{padding:18px}
  .rv-set{margin-top:32px}
  .rv-hero{margin-bottom:24px}
  .rv-hero .bfp-lede{font-size:16px}
  .rv-card__foot .bfp-btn{width:100%;justify-content:center}
  .rv-stamp{width:100%}
}