/* ========================================================================================
 * video-feature.css - .video-feature, a full-width video card with a caption over its
 * lower edge (live course pages: "Discover why dentists choose the TMJ International
 * Mini-Residency" over Vimeo 1222154126).
 *
 * The player itself is an Anchor Universal Popup video card ([anchor_popup id="..."],
 * .up-video-card, which opens the theater popup on click, Enter or Space); this component
 * only frames it and lays the caption over it.
 *
 * The caption MUST carry the popup's trigger class ({{popup-class:<slug>}}). The plugin
 * only wires up a class-triggered popup when an element with its trigger class is on the
 * page (frontend.js attach()); a card rendered by [anchor_popup] alone does not count, so
 * without the class the card's click does nothing. The class on the caption also makes
 * the caption itself a trigger, so the whole block opens the video:
 *   - over the card (600px and up) the caption ignores pointer events and the click lands
 *     on the card (keeping its hover zoom);
 *   - stacked under the card (below 600px) it takes clicks through the trigger class.
 * The frame clips its children (overflow:hidden), so the card's own focus outline would
 * be cut off: the focus ring is drawn on the frame instead.
 * ======================================================================================== */

.video-feature{position:relative;border-radius:var(--cd-r-lg);overflow:hidden;box-shadow:var(--cd-shadow-2)}
/* display:block: the plugin's card is inline-block, which sat it on a text line and left an
   8px descender strip under the video inside the frame, where the caption's scrim showed. */
.video-feature .up-video-card{--up-card-radius:0px;display:block;margin:0;max-width:none;width:100%}
.video-feature .up-video-card:focus-visible{outline:none;box-shadow:none;border-radius:0}
.video-feature:has(.up-video-card:focus-visible){box-shadow:var(--cd-ring),var(--cd-shadow-2)}
.video-feature__caption{
	position:absolute;inset:auto 0 0 0;z-index:2;pointer-events:none;
	display:flex;flex-direction:column;align-items:center;gap:var(--cd-1);
	padding:var(--cd-9) var(--cd-6) var(--cd-6);text-align:center;
	background:linear-gradient(to top,color-mix(in srgb,var(--cd-ground-deep) 92%,transparent) 0%,color-mix(in srgb,var(--cd-ground-deep) 55%,transparent) 55%,transparent 100%);
}
.video-feature__title{color:var(--cd-white);font-size:var(--cd-h4);font-weight:600;letter-spacing:0}
.video-feature__text{color:var(--cd-white);font-size:var(--cd-body);max-width:62ch}
@media (max-width:599px){
	.video-feature__caption{position:static;padding:var(--cd-5);background:var(--cd-ground-deep);pointer-events:auto;cursor:pointer}
}