/**
 * Long-form watch page + long-form archive.
 * Dark, matches the app chrome. Scoped to .ek-watch / .ek-related / .ek-archive.
 */

.ek-watch,
.ek-archive {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 16px 64px;
	color: #f2f2f4;
}

/* ---------- Top bar alignment ----------
   The parent theme centres `header` inside `max-width:1200px`, and only the feed
   pages (`body.media-body` / `body.grid`) override that to full-bleed. Our long-form
   pages inherited the centred bar, so the EK logo sat ~15% in from the left on a wide
   screen while the home page's sat flush — the mark visibly jumped between pages.
   Match the feed: full width, same 30px gutter, so the logo lands in one place. */
body.post-type-archive-ek_video header,
body.single-ek_video header {
	max-width: 100%;
	padding: 0 30px;
}

/* ---------- Desktop: centered player, optional wide-screen ad rail ----------
   The player is ALWAYS centered in the viewport (never the YouTube left-shift).
   - Mobile / typical laptop (<1720px): single centered column, widened so the
     page isn't a narrow strip; inline banner stays under the player.
   - Wide monitor (>=1720px): equal 1fr side tracks frame a fixed centre column,
     so the sticky ad rail can sit in the right gutter WITHOUT pushing the player
     off-centre. Only then does the rail appear (space is available + stays
     symmetric); the rail carries the top ad, so the inline banner is dropped. */
.ek-watch__main { min-width: 0; }
.ek-watch__rail { display: none; }

@media (min-width: 1000px) {
	/* Widen + centre the content so wide screens aren't mostly empty gutter. */
	.ek-watch { max-width: none; }
	.ek-watch__main {
		max-width: 1040px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 1720px) {
	.ek-watch {
		display: grid;
		grid-template-columns: 1fr 1040px 1fr;
		align-items: start;
	}
	.ek-watch__main { grid-column: 2; margin: 0; }
	.ek-watch__rail {
		grid-column: 3;
		justify-self: start;
		width: 300px;
		margin-left: 28px;
		display: flex;
		flex-direction: column;
		gap: 16px;
		position: sticky;
		top: 16px;
	}
	.ek-watch__main .ek-watch__ad { display: none; }
}

/* ---------- Player ---------- */
/* Overlays (.ek-preroll, .ek-upnext) set display:grid/flex, which beats the UA
   [hidden]{display:none} — so hidden overlays would render anyway. Force hidden to win. */
.ek-player [hidden] { display: none !important; }
.ek-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.ek-player__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.82);
}
.ek-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Ad-free direct-stream player: our own <video> fills the stage like the iframe would. */
.ek-player__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #000;
	object-fit: contain;
}
.ek-player__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 84px;
	height: 84px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 24, 0.62);
	backdrop-filter: blur(4px);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform 0.15s ease, background 0.15s ease;
}
.ek-player__play:hover { transform: scale(1.06); background: rgba(233, 30, 99, 0.85); }
.ek-player__play-icon {
	width: 0;
	height: 0;
	margin-left: 6px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 24px solid #fff;
}
.ek-player__error,
.ek-watch__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #bbb;
	font-size: 14px;
}

/* ---------- Pre-roll gate ---------- */
.ek-preroll {
	position: absolute;
	inset: 0;
	background: #000;
	z-index: 4;
}
.ek-preroll__stage { position: absolute; inset: 0; }
.ek-preroll__stage video,
.ek-preroll__stage iframe { width: 100%; height: 100%; object-fit: contain; border: 0; }
/* EKVast's own skip button, styled for the watch-page overlay. */
.ek-preroll .ek-ad-skip {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 5;
	padding: 8px 16px;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

/* ---------- Up-next ---------- */
.ek-upnext {
	position: absolute;
	inset: 0;
	z-index: 6;
	background: rgba(0, 0, 0, 0.78);
	display: grid;
	place-content: center;
	gap: 10px;
	text-align: center;
	padding: 20px;
}
.ek-upnext__label { color: #aaa; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.ek-upnext__link { color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; }
.ek-upnext__link:hover { color: #e91e63; }
.ek-upnext__cancel {
	justify-self: center;
	margin-top: 8px;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: transparent;
	color: #ddd;
	cursor: pointer;
}

/* ---------- Meta row ---------- */
.ek-watch__meta { padding: 16px 2px 0; }
.ek-watch__title { font-size: 20px; line-height: 1.3; margin: 0 0 10px; font-weight: 700; }
/* Our own view count. Absent below the display threshold — never a "0 views" line. */
.ek-watch__views { color: #8a8a92; font-size: 13px; margin: -4px 0 10px; }
.ek-watch__views[hidden] { display: none; }
.ek-watch__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.ek-watch__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ek-chip {
	font-size: 12px;
	color: #cfcfd6;
	background: rgba(255, 255, 255, 0.08);
	padding: 4px 10px;
	border-radius: 999px;
	text-decoration: none;
}
.ek-chip:hover { background: rgba(233, 30, 99, 0.25); color: #fff; }
/* Collapsed by default: one row of tags, the rest behind the +N chip. nth-of-type counts
   the <a> chips only, so the <button> is never one of the hidden ones. */
.ek-watch__tags.is-collapsed a.ek-chip:nth-of-type(n + 4) { display: none; }
.ek-chip--more {
	font-family: inherit;
	border: 1px solid rgba(233, 30, 99, 0.45);
	background: rgba(233, 30, 99, 0.12);
	color: #f48fb1;
	cursor: pointer;
}
.ek-chip--more:hover { background: rgba(233, 30, 99, 0.3); color: #fff; }
.ek-chip--more:focus-visible { outline: 2px solid #e91e63; outline-offset: 2px; }
.ek-watch__actions { display: flex; gap: 8px; }
.ek-act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: #eee;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ek-act:hover { background: rgba(255, 255, 255, 0.12); }
.ek-act--save.is-active { background: #e91e63; border-color: #e91e63; color: #fff; }
.ek-act__icon { font-size: 15px; line-height: 1; }
.ek-watch__attrib { color: #8a8a92; font-size: 12px; margin: 10px 0 0; }

/* ---------- Ad slots ---------- */
/* The watch banner sits directly under the player. ExoClick's banner type has no mobile
   size (no 320x50/320x100 — only 160x600 / 300x250 / 300x500 / 728x90 / 900x250), so the
   wide unit is a 900x250 served at its natural size and scaled down to the column:
   the slot reserves the *scaled* box via aspect-ratio (so the page never jumps when the
   creative lands), and the <ins> is scaled into it. --ek-ad-w/--ek-ad-h are printed by
   ek_ad_slot(); --ek-ad-fit is set by watch.js from the slot's real width. */
/* The wrapper carries the natural size (from ek_ad_dims_style) and reserves the SCALED
   box, so the page never jumps when the creative lands. The slot inside is laid out at
   the creative's true size and scaled down as a whole — scaling the slot rather than the
   <ins> is deliberate: AdProvider discards our <ins> and renders into a <div> of its own,
   so anything keyed to `ins` would miss the actual ad and leave it clipped at full size. */
.ek-watch__ad {
	--w: var(--ek-ad-w, 300);
	--h: var(--ek-ad-h, 250);
	position: relative;
	width: 100%;
	max-width: calc(var(--w) * 1px);
	aspect-ratio: var(--w) / var(--h);
	margin: 16px auto 0;
	overflow: hidden;
}
.ek-watch__ad .ek-ad-slot {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center; /* a creative smaller than the zone size centres in the box. */
	width: calc(var(--w) * 1px);
	height: calc(var(--h) * 1px);
	transform: scale(var(--ek-ad-fit, 1));
	transform-origin: top left;
}
/* Dev/zen fixture: same box as the live unit so the layout is testable without an ad. */
.ek-watch__ad .ek-ad-slot--fixture {
	width: calc(var(--w) * 1px);
	height: calc(var(--h) * 1px);
}
.ek-ad-slot { min-height: 0; }
.ek-ad-slot--fixture {
	width: 300px;
	height: 250px;
	display: grid;
	place-items: center;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #777;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
/* Rail slots: sized by placement so the fixture (dev) and the live <ins> (prod)
   reserve the same box. 300x250 medium rectangle + 300x500 half-page. */
.ek-watch__rail .ek-ad-slot { width: 100%; }
.ek-watch__rail .ek-ad-slot--fixture { width: 100%; height: auto; }
.ek-watch__rail [data-placement="rail_top"] { min-height: 250px; }
.ek-watch__rail [data-placement="rail_sticky"] { min-height: 500px; }

/* ---------- Related grid + unified card ---------- */
.ek-related { margin-top: 28px; }
.ek-related__heading,
.ek-archive__heading { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.ek-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}
/* Desktop: fewer, larger tiles. At 180px the 1040px column packed ~5 thumbnails
   too small to read; a fixed 4-up gives each card room to breathe. */
@media (min-width: 1000px) {
	.ek-related__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px 18px;
	}
	.ek-related .ek-card__title { font-size: 14.5px; margin-top: 10px; }
}
/* The .ek-card rules moved to css/cards.css — the same card is now rendered by the
   homepage and /categories too, which don't load this stylesheet. Enqueued as a
   dependency of watch.css, so nothing here changes visually. */

/* ---------- Shorts strip ----------
   A horizontal-scroll rail of 9:16 cards — the escape-hatch into the swipe feed.
   Kept visually distinct from the landscape "More to watch" grid on purpose. */
.ek-shorts { margin-top: 28px; }
.ek-shorts__heading { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.ek-shorts__strip {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
	scrollbar-width: thin;
}
.ek-shorts__strip .ek-card {
	flex: 0 0 auto;
	width: 150px;
	scroll-snap-align: start;
}
/* Cards already render 9:16 via .ek-card--short; the strip only sizes + scrolls them. */

/* ---------- Archive ----------
   Full-bleed on desktop with the header's 30px gutter, so the grid's left edge lines
   up with the EK logo. Capped well above any real monitor rather than left unbounded,
   so an ultrawide doesn't stretch a row into a dozen thumbnails. */
/* dense packing so a full-width Shorts band woven mid-grid doesn't leave the
   trailing cells of the preceding row empty (the band only fits a complete row,
   so grid would otherwise shove it down and orphan those cells). */
.ek-archive__grid { margin-top: 4px; grid-auto-flow: row dense; }

/* ---------- Search "Shorts ·" band ----------
   Full-width band between long-form rows. Two placement variants render in the DOM; CSS
   shows the mobile-position one on narrow screens, the desktop-position one on wide. */
.ek-archive__shorts { grid-column: 1 / -1; margin: 10px 0 6px; }
.ek-archive__shorts--d { display: none; }          /* mobile: show the --m slot */
@media (min-width: 1000px) {
	.ek-archive__shorts--m { display: none; }      /* desktop: show the --d slot */
	.ek-archive__shorts--d { display: block; }
}
.ek-archive__shorts .ek-shorts__heading { font-size: 15px; margin-bottom: 12px; }
/* The "Shorts ·" heading already labels the band — drop the redundant per-card pink pill. */
.ek-archive__shorts .ek-card__badge--short { display: none; }
/* Roomier rail: bigger cards + more gap so they don't read as squished. */
.ek-archive__shorts .ek-shorts__strip { gap: 14px; padding-bottom: 8px; }
.ek-archive__shorts .ek-shorts__strip .ek-card { width: 168px; }
.ek-archive__shorts .ek-card__title { font-size: 12.5px; -webkit-line-clamp: 1; margin-top: 6px; }
@media (min-width: 1000px) {
	.ek-archive__shorts .ek-shorts__heading { font-size: 17px; margin-bottom: 14px; }
	.ek-archive__shorts .ek-shorts__strip { gap: 18px; }
	.ek-archive__shorts .ek-shorts__strip .ek-card { width: 208px; }
	.ek-archive__shorts .ek-card__title { font-size: 14px; }
}

@media (min-width: 1000px) {
	.ek-archive {
		max-width: 1920px;
		padding: 16px 30px 64px;
	}
	.ek-archive__heading { font-size: 26px; margin-bottom: 20px; }
	/* Bigger tiles: at 180px a 1600px row packed 8 thumbnails too small to judge. */
	.ek-archive__grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 20px 18px;
	}
	.ek-archive .ek-card__title { font-size: 15px; margin-top: 10px; }
	.ek-archive .ek-card__badge { font-size: 13px; padding: 3px 8px; right: 8px; bottom: 8px; }
}
.ek-archive__pager { margin-top: 28px; text-align: center; }
.ek-archive__pager .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	margin: 0 3px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: #ddd;
	text-decoration: none;
}
.ek-archive__pager .page-numbers.current { background: #e91e63; color: #fff; }
.ek-archive__empty { color: #888; }

/* ---------- Browse controls (search / sort / length / tag chips) ----------
   Sits between the heading and the grid. Dark, matches the app chrome; the pink
   accent (#e91e63) marks the active tag + focus, same as the pager. */
.ek-browse {
	--ek-ctrl-h: 42px; /* one fixed control height so input + select bottoms line up */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 14px;
	margin: 0 0 14px;
}
/* All three controls are now uniform label+field columns, so their labels line up
   across the top and their inputs across the bottom — no more lone search box floating
   below the labelled selects. */
.ek-browse__field--search { flex: 1 1 260px; min-width: 200px; }
.ek-browse__search {
	position: relative;
	display: flex;
	width: 100%;
}
/* On the web the bar had room to spare, so the search field ballooned and starved the
   Sort/Length selects. Cap it and stop it growing; the selects get the freed space. */
@media (min-width: 760px) {
	.ek-browse { gap: 14px 16px; }
	.ek-browse__field--search { flex: 0 1 340px; }
	.ek-browse__field { min-width: 150px; }
	.ek-browse__field select { min-width: 150px; }
}
.ek-browse__search input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--ek-ctrl-h);
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: rgba(255, 255, 255, 0.06);
	color: #f2f2f4;
	font-size: 14px;
}
.ek-browse__search input::placeholder { color: #8a8a92; }
.ek-browse__search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: var(--ek-ctrl-h);
	box-sizing: border-box;
	padding: 0;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: #e91e63;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ek-browse__search button:hover { background: #f0356f; }
.ek-browse__search button svg { display: block; }
/* Sort/Length are <label>s; the theme gives every <label> a bottom margin, which (with
   the row's flex-end alignment) floated them 5px above the search <div>. Zero it. */
.ek-browse__field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.ek-browse__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #8a8a92;
}
.ek-browse__field select {
	height: var(--ek-ctrl-h);
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: #f2f2f4;
	font-size: 14px;
	line-height: normal;
	cursor: pointer;
}
.ek-browse input:focus,
.ek-browse select:focus { outline: 2px solid #e91e63; outline-offset: 1px; }

/* Tag autocomplete dropdown (js/archive-browse.js). Anchored to the search field. */
.ek-browse__suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 30;
	margin: 0;
	padding: 4px;
	list-style: none;
	max-height: 320px;
	overflow-y: auto;
	background: #1b1b20;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.ek-browse__suggest[hidden] { display: none; }
.ek-browse__suggest-item {
	padding: 9px 12px;
	border-radius: 7px;
	color: #e6e6ea;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ek-browse__suggest-item::before {
	content: "#";
	color: #e91e63;
	font-weight: 700;
	margin-right: 6px;
}
.ek-browse__suggest-item.is-active,
.ek-browse__suggest-item:hover { background: rgba(233, 30, 99, 0.22); color: #fff; }

.ek-browse__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}
.ek-chip {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: #cdcdd4;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}
.ek-chip:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ek-chip.is-active {
	background: #e91e63;
	border-color: #e91e63;
	color: #fff;
	font-weight: 600;
}

@media (min-width: 760px) {
	.ek-watch__title { font-size: 24px; }
}