/* ============================================================
   Arcanium · High-yield (NBME) callout (shared)
   The standing exam-facing distilled-points block. Visually
   distinct from body content, clearly labeled, and reusable on
   every page of a module (and beyond). Each item can be marked
   lecture vs. board-extension so the distinction stays honest.

   Loaded globally; drop it in by markup:

     <aside class="hy-callout">
       <div class="hy-callout__head">
         <span class="hy-callout__badge">High-yield (NBME)</span>
         <span class="hy-callout__sub">Exam-facing distilled points</span>
       </div>
       <ul class="hy-callout__list">
         <li class="hy-callout__item">
           <span class="hy-tag hy-tag--lecture">Lecture</span>
           <p><strong>Point:</strong> body copy.</p>
         </li>
         <li class="hy-callout__item">
           <span class="hy-tag hy-tag--ext">Board extension</span>
           <p><strong>Point:</strong> body copy.</p>
         </li>
       </ul>
     </aside>

   Optional: place inside <article class="topic-section-card full-width">.
   ============================================================ */

.hy-callout {
    display: block;
    margin: 16px 0 0;
    padding: 14px 16px 16px;
    border: 1px solid rgba(94, 92, 230, 0.28);
    border-radius: var(--radius-md, 18px);
    background: rgba(94, 92, 230, 0.06);
}

.hy-callout__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 10px;
}
.hy-callout__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #5e5ce6;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.hy-callout__badge::before {
    content: "★";
    font-size: 11px;
    line-height: 1;
}
.hy-callout__sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #667085);
}

.hy-callout__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.hy-callout__item {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.hy-callout__item > p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text, #111318);
}
.hy-callout__item > p strong { font-weight: 800; }

/* lecture vs. board-extension provenance tags */
.hy-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hy-tag--lecture {
    background: rgba(52, 199, 89, 0.14);
    color: #1f8f43;
    border: 1px solid rgba(52, 199, 89, 0.3);
}
.hy-tag--ext {
    background: rgba(10, 132, 255, 0.1);
    color: var(--accent-strong, #0066cc);
    border: 1px solid rgba(10, 132, 255, 0.28);
}

/* ---- danger / "don't-miss" variant — red. For a clinical must-not-miss hook
   (e.g. a look-alike organism you'd otherwise anchor on). Same structure; the
   ★ badge becomes a ⚠ and the whole block goes red. ---- */
.hy-callout--danger {
    border-color: rgba(229, 72, 77, 0.34);
    background: rgba(229, 72, 77, 0.06);
}
.hy-callout--danger .hy-callout__badge { background: #e5484d; }
.hy-callout--danger .hy-callout__badge::before { content: "⚠"; }
.hy-tag--danger {
    background: rgba(229, 72, 77, 0.12);
    color: #c1361a;
    border: 1px solid rgba(229, 72, 77, 0.32);
}

@media (max-width: 600px) {
    .hy-callout__item { grid-template-columns: 1fr; gap: 4px; }
}