/* TDN Video Player
   v1.3.2: fullscreen fix for vertical videos. The player had no
   :fullscreen rules, so in fullscreen a portrait video kept
   width:100% / height:auto, overflowed the (landscape) screen and
   was clipped by the wrap. The stage now fills the screen and the
   video is contained, so vertical videos fit the full screen
   height, centered.
   v1.3.1: watermark plate line-height fix (the stage's line-height: 0
   collapsed the plate to a stripe behind the glyphs).
   v1.3.0: restyled to the TDN Marquee red rebrand. All colors, fonts,
   radii and the focus ring come from the theme's design tokens
   (var(--tdn-red) #e51a3e, --tdn-red-deep #b0102d, --tdn-gold #c8922a,
   --brand-rule red-to-gold gradient, Inter / Barlow Condensed /
   DM Serif Display), with the same values as fallbacks. Markup and
   behavior classes are unchanged from v1.2.0. */

.tdnvp-wrap {
	position: relative;
	width: 100%;
	margin: 1.5em auto;
	background: #000;
	border: 1px solid var(--rule, #e6e6ec);
	border-radius: var(--r-lg, 14px);
	overflow: hidden;
	font-family: var(--font-body, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* Signature red-to-gold brand rule along the top edge, matching the
   masthead rule from the rebrand. */
.tdnvp-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 8;
	pointer-events: none;
	background: var(--brand-rule, linear-gradient(90deg, #e51a3e 0%, #e51a3e 38%, #c8922a 100%));
}

.tdnvp-stage {
	position: relative;
	width: 100%;
	line-height: 0;
}

.tdnvp-video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}

/* ---- Watermark overlay ---- */
.tdnvp-watermark {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;       /* never blocks clicks on the video */
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 14px 18px;
}

.tdnvp-watermark__text {
	display: inline-block;
	color: #fff;
	opacity: 0.6;
	font-family: var(--font-condensed, "Barlow Condensed", "Arial Narrow", sans-serif);
	font-size: clamp(14px, 2.2vw, 23px);
	font-weight: 600;
	line-height: 1.25;   /* required: the stage sets line-height: 0, which would collapse the plate behind the text */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
	user-select: none;
	white-space: nowrap;
	padding: 3px 9px 3px 10px;
	border-left: 3px solid var(--tdn-red, #e51a3e);
	border-radius: var(--r-sm, 4px);
	background: rgba(8, 8, 10, 0.38);
}

/* ---- Centered big play button ---- */
.tdnvp-bigplay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 7;
	width: 76px;
	height: 76px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	opacity: 1;
	box-shadow: 0 8px 28px rgba(11, 11, 13, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.9);
	transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.tdnvp-bigplay:hover {
	transform: translate(-50%, -50%) scale(1.06);
}

.tdnvp-bigplay:focus-visible {
	outline: none;
	box-shadow: 0 8px 28px rgba(11, 11, 13, 0.45), 0 0 0 2px #fff, 0 0 0 5px var(--tdn-red, #e51a3e);
}

.tdnvp-bigplay__bg {
	fill: var(--tdn-red, #e51a3e);
	transition: fill 0.15s ease;
}

.tdnvp-bigplay:hover .tdnvp-bigplay__bg {
	fill: var(--tdn-red-deep, #b0102d);
}

.tdnvp-bigplay__tri {
	fill: #fff;
}

/* Hide the big play button while the video is actually playing. */
.tdnvp-wrap.tdnvp-playing .tdnvp-bigplay {
	opacity: 0;
	pointer-events: none;
}

/* ---- Credit / attribution line ---- */
.tdnvp-credit {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	max-width: 65%;
	padding: 12px 16px;
	pointer-events: none;
}

.tdnvp-credit__text {
	display: inline-block;
	color: #fff;
	font-family: var(--font-condensed, "Barlow Condensed", "Arial Narrow", sans-serif);
	font-size: clamp(12px, 1.8vw, 16px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.05em;
	padding: 4px 9px 4px 10px;
	border-left: 3px solid var(--tdn-red, #e51a3e);
	border-radius: var(--r-sm, 4px);
	background: rgba(8, 8, 10, 0.55);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
	user-select: none;
}

/* ---- Controls ---- */
.tdnvp-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: linear-gradient(to top, rgba(8, 8, 10, 0.78), rgba(8, 8, 10, 0));
	opacity: 0;
	transition: opacity 0.2s ease;
	line-height: 1;
}

.tdnvp-wrap:hover .tdnvp-controls,
.tdnvp-wrap.tdnvp-paused .tdnvp-controls {
	opacity: 1;
}

.tdnvp-btn {
	background: none;
	border: 0;
	border-radius: var(--r-sm, 4px);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	padding: 6px 8px;
	line-height: 1;
	transition: color 0.15s ease;
}

.tdnvp-btn:hover {
	color: var(--accent, #ff4a66);
}

.tdnvp-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(8, 8, 10, 0.6), 0 0 0 4px var(--accent, #ff4a66);
}

.tdnvp-progress {
	position: relative;
	flex: 1;
	height: 5px;
	background: rgba(255, 255, 255, 0.28);
	border-radius: 3px;
	cursor: pointer;
	transition: height 0.15s ease;
}

.tdnvp-wrap:hover .tdnvp-progress {
	height: 8px;
}

.tdnvp-progress__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: var(--tdn-red, #e51a3e);
	border-radius: 3px;
}

/* Knob at the head of the progress fill, shown while hovering. */
.tdnvp-progress__fill::after {
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--tdn-red, #e51a3e);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.tdnvp-wrap:hover .tdnvp-progress__fill::after {
	opacity: 1;
}

.tdnvp-time {
	color: #fff;
	font-family: var(--font-condensed, "Barlow Condensed", "Arial Narrow", sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	font-variant-numeric: tabular-nums;
	min-width: 38px;
	text-align: center;
}

.tdnvp-video::-webkit-media-controls { display: none !important; }

/* ---- Share button ---- */
.tdnvp-share svg {
	display: block;
}

/* "Link copied" toast anchored above the controls bar. */
.tdnvp-share-tip {
	position: absolute;
	bottom: 100%;
	right: 10px;
	margin-bottom: 10px;
	padding: 6px 11px;
	background: var(--ink, #0b0b0d);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-left: 3px solid var(--tdn-red, #e51a3e);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: var(--r-md, 8px);
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.tdnvp-share-tip.tdnvp-show {
	opacity: 1;
	transform: none;
}

/* ---- Fullscreen ----
   The wrap is the fullscreen element (player.js calls
   wrap.requestFullscreen()). The stage fills the whole screen and
   the video is contained inside it, so a vertical video fits the
   full screen height, centered with black at the sides, instead of
   overflowing and being clipped. The watermark, credit, big play
   button and controls live inside the stage, so they span the
   screen the way they do in other players' fullscreen modes. */
.tdnvp-wrap:fullscreen,
.tdnvp-wrap:-webkit-full-screen {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.tdnvp-wrap:fullscreen .tdnvp-stage,
.tdnvp-wrap:-webkit-full-screen .tdnvp-stage {
	position: absolute;
	inset: 0;
}

.tdnvp-wrap:fullscreen .tdnvp-video,
.tdnvp-wrap:-webkit-full-screen .tdnvp-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.tdnvp-bigplay,
	.tdnvp-bigplay__bg,
	.tdnvp-controls,
	.tdnvp-progress,
	.tdnvp-progress__fill::after,
	.tdnvp-btn,
	.tdnvp-share-tip {
		transition: none;
	}
}