/* ============================================================
   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: 20px 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;
}
/* TAG-LESS ITEM — the grid above reserves a fixed 104px first column for the
   provenance tag. Modules that forbid source language omit that tag, which
   drops the paragraph INTO the 104px column and renders it one word per line.
   When the paragraph is the only child, span every column instead. */
.hy-callout__item > p:only-child { grid-column: 1 / -1; }

.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; }
}