/* ========================================================================================
 * popup-panel.css - .popup-panel, the kit's content layout for Anchor Universal Popup
 * (anchor_popup) HTML popups: course day agendas, the all-days curriculum and the
 * "Why our course outshines" info popups (tools/content/popups/*.html, imported by
 * tools/import-popups.php).
 *
 * The plugin's own .up-content__inner pads its content 16px; plugin-skins.css cancels that
 * for a direct .popup-panel child so the header bar / lead photo run edge to edge. Parts:
 *   __head   deep header bar holding the title (day agendas; the plugin's white close
 *            button sits on it)
 *   __media  lead photo (info popups; the close button sits on the photo)
 *   __body   padded content: h3 subheads, p, .popup-panel__list
 * ======================================================================================== */

.popup-panel{display:flex;flex-direction:column;background:var(--cd-ground-raised);color:var(--cd-ink);font-family:var(--cd-font)}
.popup-panel__head{background:var(--cd-ground-deep);padding:var(--cd-5) var(--cd-8) var(--cd-5) var(--cd-6)}
.popup-panel__head h2{color:var(--cd-white);font-size:var(--cd-h3);line-height:1.2}
.popup-panel__media{display:block;width:100%;height:clamp(200px,34vw,340px);object-fit:cover}
.popup-panel__body{display:flex;flex-direction:column;gap:var(--cd-3);padding:var(--cd-6)}
.popup-panel__body h2{font-size:var(--cd-h3)}
.popup-panel__body h3{font-size:var(--cd-h4);margin-top:var(--cd-3)}
.popup-panel__body h3:first-child{margin-top:0}
.popup-panel__body p{font-size:var(--cd-body);line-height:1.65}
.popup-panel__list{margin:0;padding-left:1.2em;display:grid;gap:var(--cd-1)}
.popup-panel__list li::marker{color:var(--cd-ink-accent)}
.popup-panel .accordion-group{margin-top:var(--cd-3)}
.popup-panel .accordion__q .pill{margin-inline-start:auto}
@media (max-width:599px){
	.popup-panel__head{padding:var(--cd-4) var(--cd-8) var(--cd-4) var(--cd-4)}
	.popup-panel__body{padding:var(--cd-4)}
}
.popup-panel__body h4{font-size:var(--cd-body);color:var(--cd-ink-brand);margin-top:var(--cd-2)}
.popup-panel__schedule{display:grid;gap:0;margin:0;border-top:1px solid var(--cd-line)}
.popup-panel__schedule > div{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:var(--cd-4);padding:var(--cd-2) 0;border-bottom:1px solid var(--cd-line);font-size:var(--cd-small)}
.popup-panel__schedule dt{font-family:var(--cd-mono);color:var(--cd-ink-muted)}
.popup-panel__schedule dd{margin:0;color:var(--cd-ink-strong)}
@media (max-width:599px){.popup-panel__schedule > div{grid-template-columns:minmax(0,1fr);gap:0}}

/* __items: a short ordered set shown in full, no expand/collapse (owner feedback
 * 21-manuals-popup.png: the three course manuals, in session order). Each __item is a
 * title + session pill row over its description, separated by a hairline. */
.popup-panel__items{margin:var(--cd-3) 0 0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--cd-line)}
.popup-panel__item{display:flex;flex-direction:column;gap:var(--cd-2);padding:var(--cd-4) 0;border-bottom:1px solid var(--cd-line)}
.popup-panel__item-head{display:flex;align-items:center;justify-content:space-between;gap:var(--cd-3);flex-wrap:wrap}
.popup-panel__item-head h3{margin:0}