/* "Watch Videos" block on condition pages. Written by clinic-social/tools/site_videos.py;
   the player is js/gj-page-videos.js. */
.gj-pv { padding: 48px 16px; background: #f4f8fc; color: #0b2e4a; font-family: 'Poppins', 'Mukta', system-ui, sans-serif; }
.gj-pv-in { max-width: 1100px; margin: 0 auto; }
.gj-pv h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 3.5vw, 1.9rem); font-weight: 700; color: #0b2e4a; text-align: center; border: 0; padding: 0; }
/* Some pages style every h2 (left-aligned, underlined); this heading stays the same everywhere. */
html body .gj-pv h2 { text-align: center; }
html body .gj-pv h2::before, html body .gj-pv h2::after { content: none !important; display: none !important; }
.gj-pv-sub { margin: 0 0 24px; text-align: center; color: #4a6175; font-size: .95rem; }
.gj-pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
.gj-pv-card { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.gj-pv-card:hover .gj-pv-t { color: #0e6fb8; }
.gj-pv-card:focus-visible { outline: 3px solid #0e6fb8; outline-offset: 3px; border-radius: 12px; }
.gj-pv-wide { grid-column: span 2; }
.gj-pv-frame { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: #d8e4ee; box-shadow: 0 4px 14px rgba(11, 46, 74, .14); }
.gj-pv-wide .gj-pv-frame { aspect-ratio: 16 / 9; }
.gj-pv-frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; transition: transform .25s; }
.gj-pv-card:hover img { transform: scale(1.04); }
.gj-pv-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(11, 46, 74, .78); }
.gj-pv-play::after { content: ""; position: absolute; left: 21px; top: 15px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.gj-pv-t { display: block; margin-top: 8px; font-size: .92rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.gj-pv-m { display: block; margin-top: 2px; font-size: .78rem; color: #5a7185; }
.gj-pv-more { margin-top: 20px; }
.gj-pv-more summary { display: block; width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 10px 22px; border-radius: 999px; background: #0b2e4a; color: #fff; font-weight: 600; font-size: .95rem; text-align: center; cursor: pointer; list-style: none; }
.gj-pv-more summary::-webkit-details-marker { display: none; }
.gj-pv-more[open] summary { background: #4a6175; }
.gj-pv-text { max-width: 820px; margin: 24px auto 0; font-size: .9rem; line-height: 1.6; }
.gj-pv-text summary { text-align: center; color: #0e6fb8; font-weight: 600; cursor: pointer; }
.gj-pv-text dl { margin: 14px 0 0; }
.gj-pv-text dt { margin-top: 14px; font-weight: 600; }
.gj-pv-text dd { margin: 2px 0 0; color: #3d5468; }
.gj-pv-note { margin: 22px 0 0; text-align: center; font-size: .8rem; color: #5a7185; }

/* Player window */
/* Pages reset margins with "* { margin: 0 }", and a dialog is centred by its auto margin - so state it here. */
html body dialog.gj-pv-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; }
.gj-pv-dlg { width: min(960px, 100vw - 24px); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 14px; background: #000; color: #fff; overflow: hidden; }
.gj-pv-dlg.tall { width: min(420px, 100vw - 24px, (100dvh - 90px) * 9 / 16); }
.gj-pv-dlg::backdrop { background: rgba(4, 16, 28, .86); }
.gj-pv-dlg-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; font: 600 .9rem/1.3 'Poppins', 'Mukta', system-ui, sans-serif; }
.gj-pv-dlg-bar span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* one line: a taller bar would cut off the video's controls */
.gj-pv-dlg-bar button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.gj-pv-dlg-box { aspect-ratio: 16 / 9; background: #000; }
.gj-pv-dlg.tall .gj-pv-dlg-box { aspect-ratio: 9 / 16; }
.gj-pv-dlg-box video, .gj-pv-dlg-box iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .gj-pv-frame img { transition: none; } .gj-pv-card:hover img { transform: none; } }