/*
 * Single opportunity ("watch") page — player + meta header.
 *
 * Watch.php emits a bare <video> or <iframe> inside .isjac-watch__player.
 * Without intrinsic dimensions, both render at the user-agent default
 * (iframes are 300×150) which collapses Streamyard / Vimeo embeds to a
 * thumbnail-sized box. The aspect-ratio + width:100% pattern below makes
 * the player fill the entry-content column at a true 16:9 frame.
 *
 * The `--video` (HTML5 <video>) and `--embed` (iframe) variants share the
 * same wrapper; the only difference is the controls UA renders inside.
 */

.isjac-watch {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-5);
}

/* Eyebrow + subtitle are rendered into the theme's .entry-header via Kadence's
 * `kadence_single_before_entry_title` / `kadence_single_after_entry_title`
 * actions (see Watch.php). They reuse .entry-taxonomies / .entry-meta so they
 * inherit the artist-blog single-post chrome — no styling needed here.
 * Only the dotted-underline affordance on the hover-swappable time stays. */
.isjac-watch__when-time {
	border-bottom: 1px dotted var(--isjac-color-rule);
	cursor: help;
}

/* Responsive 16:9 player. aspect-ratio handles the box; the child fills it.
 * max-width caps the player on very wide content surfaces so a single embed
 * doesn't dominate the page on a 1290px column. */
.isjac-watch__player {
	margin: 0;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	background: var(--isjac-color-ink);
	border-radius: var(--isjac-radius-md);
	overflow: hidden;
}

.isjac-watch__player > video,
.isjac-watch__player > iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Upgrade + upcoming cards mirror the donate page's Champion breakout chrome:
 * paper surface, full row, 8px brand-deep accent on the left, square-left /
 * rounded-right radius, resting shadow. Matching the donate Champion treatment
 * marks "this is the apex offer in this surface" with a visual vocabulary the
 * site already establishes elsewhere. */
.isjac-watch__upgrade,
.isjac-watch__upcoming {
	padding: var(--isjac-space-6);
	background: var(--isjac-surface-card);
	border: 1px solid var(--isjac-color-rule);
	border-left: 8px solid var(--isjac-color-brand-deep);
	border-radius: 0 var(--isjac-radius-md) var(--isjac-radius-md) 0;
	box-shadow: var(--isjac-shadow-card);
}

.isjac-watch__upgrade h2,
.isjac-watch__upcoming h2 {
	margin: 0 0 var(--isjac-space-3);
	font-size: var(--isjac-font-size-lg);
	color: var(--isjac-color-ink);
}

.isjac-watch__upgrade p,
.isjac-watch__upcoming p {
	margin: 0 0 var(--isjac-space-4);
	color: var(--isjac-text-muted);
	max-width: 60ch;
}

.isjac-watch__upgrade p:last-child,
.isjac-watch__upcoming p:last-child {
	margin-bottom: 0;
}