/* ============================================================
   RAR MEDICAL MICROBIOLOGY · "Pharyngitis" styles
   Scoped to .rar-topic-content.

   The page is built from the SAME shared building blocks as RAR
   Pathology topic pages — the topic-workspace shell chrome,
   .topic-section-card / .section-label, .solid-text-card,
   .atl-figure (+ .atl-figure__src), and the .vasc-tbd scaffold
   placeholder. Those own all typography, color (#111111 reader text),
   spacing, and background. This file only sizes the oropharynx figure
   and spaces the page-level credit line — no re-declared chrome.
   Prefix: phx-.
   ============================================================ */

/* ---------- Hover-definition tooltips must never be clipped or covered ----------
   The shared .cav-term tooltip is an absolutely-positioned ::after (z-index 25).
   Raise it on every RAR topic page so no later card / sticky panel stacks over it,
   and make sure the card wrappers that hold terms don't clip the upward bubble. */
.rar-topic-content .cav-term::after { z-index: 80; }
.rar-topic-content .topic-section-card,
.rar-topic-content .solid-text-card,
.rar-topic-content .sp-card,
.rar-topic-content .atl-card,
.rar-topic-content .pneu-org,
.rar-topic-content .hy-callout { overflow: visible; }

/* ---------- Section 1: text left, figure right (fills the wasted whitespace) ---------- */
.rar-topic-content .phx-s1-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    gap: 22px;
    align-items: start;
}
@media (max-width: 860px) {
    .rar-topic-content .phx-s1-split { grid-template-columns: 1fr; }
}

/* ---------- Oropharynx figure (raster shrinks to fit; never enlarges) ---------- */
.rar-topic-content .phx-figure {
    margin: 0;
    max-width: 100%;
}
.rar-topic-content .phx-s1-split .phx-figure { align-self: stretch; }
.rar-topic-content .phx-figure .atl-figure__img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* ---------- Placeholder mounts (filled by later builds; note = shared .vasc-tbd) ---------- */
.rar-topic-content .phx-mount { margin: 2px 0 0; }

/* ---------- Single page-level image credit (uses shared .atl-figure__src look) ---------- */
.rar-topic-content .phx-page-credits { margin-top: 20px; }

/* ---------- Section 3 · organism cards (reuse .atl-card.pneu-org; only layout here) ---------- */
.rar-topic-content .phx-org-lead {
    margin: 0 0 14px;
    color: #111111;
    font-size: 15px;
    line-height: 1.55;
}
.rar-topic-content .phx-org-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
}
/* each card is a vertical stack so the button pins to the bottom */
.rar-topic-content .phx-org { display: flex; flex-direction: column; }
.rar-topic-content .phx-org-class {
    margin: 0 0 12px;
    color: #111111;
    font-size: 13px;
    line-height: 1.5;
}
.rar-topic-content .phx-org-fig {
    margin: 0 0 12px;
    max-width: 100%;
}
.rar-topic-content .phx-org-fig .atl-figure__img {
    width: 100%;
    height: 180px;          /* uniform card image height; raster shrinks to fit */
    object-fit: cover;
    border-radius: 12px;
}
.rar-topic-content .phx-org .pneu-org-list { flex: 1 1 auto; }
/* Fusobacterium card — zoomable Lemierre flow (ZoomableFigure) */
.rar-topic-content .phx-lemierre-fig { margin: 0 0 12px; }
.rar-topic-content .phx-lemierre-fig .zf-stage { max-width: 100%; }
/* flow path + waypoints + emboli (native SVG in the ZoomableFigure viewBox) */
.rar-topic-content .lem-path { stroke: rgba(225, 29, 72, 0.5); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 15; }
.rar-topic-content .lem-hot { cursor: pointer; outline: none; }
.rar-topic-content .lem-dot { fill: #e11d48; stroke: #fff; stroke-width: 5; transition: fill .12s; }
.rar-topic-content .lem-ring { fill: #e11d48; opacity: .45; transform-box: fill-box; transform-origin: center; animation: lemPulse 2.1s ease-out infinite; }
.rar-topic-content .lem-hot.is-active .lem-dot { fill: #a10f35; }
.rar-topic-content .lem-hot.is-pulse .lem-ring { opacity: .8; }
.rar-topic-content .lem-hot:focus-visible .lem-dot { stroke: #ffd2dd; stroke-width: 8; }
.rar-topic-content .lem-p { fill: #e11d48; stroke: #fff; stroke-width: 2; }
@keyframes lemPulse { 0% { transform: scale(.55); opacity: .55; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rar-topic-content .lem-ring { animation: none; opacity: .3; } }
.rar-topic-content .lem-toggle {
    padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(225, 29, 72, 0.4);
    background: rgba(225, 29, 72, 0.08); color: #a10f35; font-size: 13px; font-weight: 750; cursor: pointer;
}
.rar-topic-content .lem-toggle:hover { background: rgba(225, 29, 72, 0.14); }
.rar-topic-content .phx-lemierre-fig .zf-controls { text-align: center; }
.rar-topic-content .phx-org-btn {
    margin-top: 14px;
    align-self: flex-start;
    font-size: 13.5px;
}