/* ============================================================
   recognition.css — /recognition page body
   Badge showcase + assessment outcomes + signals.
   Uses the site design tokens (style.css :root). Nunito, brand.
   ============================================================ */

/* shared section header: title left, lede right (like the mockup,
   but in the site's type system) */
.rec-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; margin-bottom:34px;
}
.rec-head h2{ margin:0; }
.rec-head .eyebrow{ margin-bottom:10px; }
.rec-head__lede{ max-width:52ch; margin:0; color:var(--text); font-size:1.02rem; }
@media (max-width:820px){
  .rec-head{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ---------- 1. Badge showcase ---------- */
.rec-shell{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
  gap:18px; padding:18px; border-radius:var(--radius-lg);
  background:linear-gradient(145deg,#ece7fb,#faf8ff 60%,#f1edfa);
  box-shadow:var(--shadow);
}
@media (max-width:900px){ .rec-shell{ grid-template-columns:1fr; } }

/* selected badge preview (left) */
.rec-preview{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:26px; min-height:520px;
}
.rec-preview::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(104,101,231,.12),rgba(104,101,231,0));
  pointer-events:none;
}
.rec-preview__top{ display:flex; justify-content:space-between; align-items:center; gap:12px; position:relative; z-index:1; }
.rec-preview__label{ font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.rec-preview__kind{ font-size:.72rem; font-weight:700; color:var(--primary-d); background:var(--bg-soft); padding:6px 11px; border-radius:999px; }
.rec-preview__icon{
  width:112px; height:112px; margin:30px 0 20px;
  display:grid; place-items:center;
}
.rec-preview__icon img{ width:100%; height:100%; object-fit:contain; }
.rec-preview__title{ font-size:1.9rem; line-height:1.08; margin:0 0 8px; }
.rec-preview__sub{ font-size:.92rem; font-weight:800; color:var(--primary); margin-bottom:16px; }
.rec-preview__desc{ font-size:1rem; line-height:1.6; color:var(--text); margin:0; min-height:6.4rem; }
.rec-preview__meta{ display:grid; gap:0; margin-top:auto; padding-top:22px; }
.rec-meta-row{
  display:flex; justify-content:space-between; gap:18px;
  border-top:1px solid var(--line); padding:11px 0; font-size:.84rem;
}
.rec-meta-row span{ color:var(--muted); }
.rec-meta-row strong{ color:var(--text-dark); text-align:right; }
.rec-preview__strip{
  margin-top:16px; padding:12px 15px; border-radius:12px;
  background:#eaf9f1; color:#17845a; font-size:.82rem; font-weight:800;
}

/* badges panel (right) */
.rec-panel{ background:rgba(255,255,255,.7); border:1px solid #ece7fb; border-radius:18px; padding:26px; }
.rec-panel h3{ margin:0 0 6px; font-size:1.4rem; }
.rec-panel>p{ color:var(--text); margin:0 0 20px; }
.rec-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (max-width:620px){ .rec-grid{ grid-template-columns:1fr; } }

.rec-badge{
  appearance:none; width:100%; min-height:70px; cursor:pointer;
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:12px; border-radius:14px; border:1px solid var(--line);
  background:#fff; color:var(--text-dark); transition:.18s ease;
  font-family:inherit;
}
.rec-badge:hover,.rec-badge:focus-visible,.rec-badge.is-active{
  border-color:#a9a3f2; transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(88,61,190,.10); outline:none; background:#fdfcff;
}
.rec-badge.is-active{ box-shadow:inset 0 0 0 1px #a9a3f2,0 9px 24px rgba(88,61,190,.10); }
.rec-badge__icon{
  width:44px; height:44px; flex:0 0 44px;
  display:grid; place-items:center;
}
.rec-badge__icon img{ width:100%; height:100%; object-fit:contain; }
.rec-badge__copy strong{ display:block; font-size:.9rem; line-height:1.2; font-weight:800; }
.rec-badge__copy span{ display:block; color:var(--muted); font-size:.72rem; margin-top:3px; }
.rec-note{ margin-top:16px; padding:12px 14px; border-radius:12px; background:#fff; border:1px solid var(--line); color:var(--muted); font-size:.7rem; line-height:1.5; }

/* legal disclaimer under the showcase */
.rec-legal{
  display:flex; gap:12px; align-items:flex-start; margin-top:22px;
  padding:16px 18px; border-radius:14px; background:#fff; border:1px solid var(--line);
}
.rec-legal svg{ flex:0 0 22px; width:22px; height:22px; color:var(--primary); margin-top:2px; }
.rec-legal p{ margin:0; font-size:.85rem; line-height:1.6; color:var(--text); }

/* ---------- 2. Assessment outcomes ---------- */
.rec-outcome-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .rec-outcome-grid{ grid-template-columns:1fr; } }
.rec-outcome{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); }
.rec-outcome__mark{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-weight:900; font-size:1.2rem; margin-bottom:16px; }
.rec-outcome__status{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.rec-outcome h3{ font-size:1.25rem; margin:0 0 6px; }
.rec-outcome p{ color:var(--text); margin:0; line-height:1.6; }
.rec-outcome--pass  .rec-outcome__mark{ background:#eaf9f1; color:#17845a; }
.rec-outcome--pass  .rec-outcome__status{ color:#17845a; }
.rec-outcome--review .rec-outcome__mark{ background:#fff6e6; color:#b06e17; }
.rec-outcome--review .rec-outcome__status{ color:#b06e17; }
.rec-outcome--fail  .rec-outcome__mark{ background:#ffeef1; color:#a54755; }
.rec-outcome--fail  .rec-outcome__status{ color:#a54755; }
.rec-privacy{ margin:20px 0 0; color:var(--muted); font-size:.9rem; }

/* ---------- 3. Signals ---------- */
.rec-signal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .rec-signal-grid{ grid-template-columns:1fr; } }
.rec-signal{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); }
.rec-signal__symbol{
  display:inline-grid; place-items:center; min-width:56px; height:48px; padding:0 14px;
  border-radius:12px; background:var(--bg-soft); color:var(--primary-d);
  font-size:1.35rem; font-weight:900; margin-bottom:18px;
}
.rec-signal small{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:800; display:block; margin-bottom:4px; }
.rec-signal h3{ margin:0 0 8px; font-size:1.25rem; }
.rec-signal p{ color:var(--text); line-height:1.6; margin:0; }