/* ============================================================
   Interview-prep hub and answer boxes.
   The drill widget itself lives in /drill/drill.css, because the
   /learn articles embed it too.
   ============================================================ */

/* ── Hub ────────────────────────────────────────────────── */
.iv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-block: var(--sp-6); }
.iv-card {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: border-color 0.15s, transform 0.15s;
}
.iv-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.iv-card-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.iv-card-title { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: var(--sp-2); }
.iv-card-sub { display: block; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.iv-card-count { display: block; font-size: 12px; color: var(--text-muted); margin-top: var(--sp-3); }

.answer-box {
  border-left: 3px solid var(--accent);
  background: var(--accent-muted);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5);
  margin-block: var(--sp-5);
}
.answer-box .answer-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3);
}
.answer-box p { margin-bottom: var(--sp-3); }
.answer-box p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .dr-result-actions .btn { width: 100%; }
}