/* Prometheus Shorts — grid + reel overlay (Instagram-style).
   Every surface is a forced 9:16 frame; non-vertical sources letterbox on
   solid black, never crop. Theme hooks: --pshorts-accent, --pshorts-radius. */

/* ---------- poster grid ---------- */
.pshorts-grid {
	display: grid;
	grid-template-columns: repeat(var(--pshorts-cols, 4), 1fr);
	gap: 16px;
}
/* Cap the grid at 4 even rows (16 tiles) on desktop; extras stay in the
   DOM so the reel overlay can still reach them by scrolling. */
.pshorts-card:nth-child(n+17) { display: none; }

@media (max-width: 1000px) {
	.pshorts-grid { grid-template-columns: repeat(3, 1fr); }
	/* 3-col layouts cap at 15 (5 even rows). */
	.pshorts-card:nth-child(n+16) { display: none; }
}
@media (max-width: 700px) {
	/* Instagram-style: keep 3 columns on phones, tighter gutters.
	   Cap at 15 tiles (5 even rows) — extras hide; still reachable in
	   the reel by swiping and via deep links. */
	.pshorts-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
	.pshorts-play svg { width: 34px; height: 34px; }
}

.pshorts-card {
	position: relative;
	aspect-ratio: 9 / 16;
	border: 0;
	padding: 0;
	background: #000; /* letterbox bars for non-vertical posters */
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--pshorts-radius, 6px);
}
.pshorts-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain; /* never crop — black bars top/bottom instead */
	display: block;
	transition: transform 0.25s ease;
}
.pshorts-card:hover img,
.pshorts-card:focus-visible img { transform: scale(1.04); }

.pshorts-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pshorts-play svg {
	width: 52px;
	height: 52px;
	fill: var(--pshorts-accent, #fff);
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
	opacity: 0.9;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.pshorts-card:hover .pshorts-play svg,
.pshorts-card:focus-visible .pshorts-play svg { transform: scale(1.15); opacity: 1; }

/* ---------- reel overlay ---------- */
/* No tap-highlight boxes or accidental selection on any overlay control. */
.pshorts-overlay,
.pshorts-overlay button,
.pshorts-overlay a,
.pshorts-card {
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
}
.pshorts-overlay button:focus,
.pshorts-overlay a:focus {
	outline: none;
}
.pshorts-overlay button:focus-visible,
.pshorts-overlay a:focus-visible {
	outline: 2px solid var(--pshorts-accent, #fff); /* keyboard users keep a ring */
	outline-offset: 2px;
}

.pshorts-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(8, 8, 9, 0.97);
	display: none;
}
.pshorts-overlay.open { display: block; }

.pshorts-feed {
	height: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pshorts-feed::-webkit-scrollbar { display: none; }
/* Touch devices use JS gesture snapping — native snap would fight it. */
.pshorts-feed.pshorts-touchsnap {
	scroll-snap-type: none;
	overscroll-behavior: contain;
}

.pshorts-slide {
	position: relative;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Description panel — desktop: absolutely positioned left of the frame,
   anchored to the bottom of the screen. Out of flex flow so the video
   stays perfectly centered regardless of panel presence.
   The frame is centered and min(100vh, 100vw*16/9) tall, so its half-width
   is that value * 9/32 = 0.28125. */
.pshorts-desc {
	/* Inside the frame: 100% = frame width, so bottom:0 is the video's
	   bottom edge on every screen aspect. */
	position: absolute;
	bottom: 56px; /* desktop: lifted off the viewport floor */
	right: calc(100% + 28px);
	width: clamp(0px, calc(50vw - 50% - 48px), 320px);
	max-height: 50%;
	overflow-y: auto;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.6;
}
.pshorts-desc h3 {
	margin: 0 0 10px;
	font-size: 17px;
	color: #fff;
}
.pshorts-desc p { margin: 0; white-space: pre-line; }

/* Info toggle (mobile/tablet): bottom-left circle inside the frame. */
.pshorts-info {
	position: absolute;
	bottom: 14px;
	left: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.pshorts-info:hover { background: rgba(0, 0, 0, 0.8); }
.pshorts-info svg { width: 20px; height: 20px; fill: #fff; }

/* Tablet + mobile: description is a collapsed-by-default bottom sheet over
   the frame; the info button toggles it, tapping the sheet dismisses it. */
@media (max-width: 1100px) {
	.pshorts-info { display: flex; }
	/* visibility/opacity toggles (not display): a layout change inside the
	   snap scroller makes browsers re-snap, jittering the video when the
	   feed rested a few px off the snap point after a swipe. */
	.pshorts-slide.desc-open .pshorts-info { visibility: hidden; opacity: 0; }
	.pshorts-desc {
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.15s ease;
		right: auto;
		position: absolute;
		/* Inside the frame: flush to its left/bottom edges; stop short of
		   the audio button's column so it's never covered. */
		left: 0;
		transform: none;
		bottom: 0;
		width: calc(100% - 68px);
		max-height: 45%;
		background: rgba(0, 0, 0, 0.82);
		border-radius: 0 12px 0 0;
		padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
		z-index: 3;
		cursor: pointer; /* tap anywhere on the sheet to dismiss */
		user-select: none;
		-webkit-user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
	.pshorts-slide.desc-open .pshorts-desc { visibility: visible; opacity: 1; }
}

/* Forced 9:16 stage, even on desktop. Clamps to viewport width on phones. */
.pshorts-frame {
	position: relative;
	aspect-ratio: 9 / 16;
	height: min(100%, calc(100vw * 16 / 9));
	background: #000;
}
.pshorts-frame video {
	width: 100%;
	height: 100%;
	object-fit: contain; /* square/landscape sources letterbox on black */
	background: #000;
	display: block;
}

/* Paused-only center glyph: translucent circle, white triangle. */
.pshorts-pauseglyph {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none; /* taps fall through to the video */
}
.pshorts-slide.paused .pshorts-pauseglyph { display: flex; }
.pshorts-pauseglyph svg {
	width: 44px;
	height: 44px;
	fill: #fff;
	/* No extra offset: the triangle path sits right-of-center within its
	   viewBox already, which is exactly the optical correction needed. */
}

/* Buffering spinner: shown while the browser waits on video data. */
.pshorts-spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--pshorts-accent, #fff);
	display: none;
	pointer-events: none;
	animation: pshorts-spin 0.8s linear infinite;
}
.pshorts-slide.buffering .pshorts-spinner { display: block; }
@keyframes pshorts-spin {
	to { transform: rotate(360deg); }
}

/* Audio toggle: bottom-right circle inside the frame. */
.pshorts-audio {
	position: absolute;
	bottom: 14px;
	right: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.pshorts-audio:hover { background: rgba(0, 0, 0, 0.8); }
.pshorts-audio svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

/* Action rail: social links + share (Instagram-style column). Desktop: right
   of the frame; mobile: over the frame's right edge, above the audio button. */
.pshorts-rail {
	position: absolute;
	bottom: 8vh;
	left: calc(50% + min(100vh, 100vw * 16 / 9) * 0.28125 + 20px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pshorts-rail-btn {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
}
.pshorts-rail-btn:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.08); }
.pshorts-rail-btn svg { width: 22px; height: 22px; fill: #fff; }
@media (max-width: 700px) {
	.pshorts-rail {
		left: auto;
		right: calc((100vw - min(100vw, 100vh * 9 / 16)) / 2 + 14px);
		bottom: 150px; /* clear the audio button */
	}
}

.pshorts-toast {
	position: fixed;
	bottom: 34px;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	z-index: 3;
	background: var(--pshorts-accent, #fff);
	color: #111;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.pshorts-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.pshorts-close {
	position: fixed;
	/* Clear WP admin bar / site headers / mobile status bars; align with nav column. */
	top: calc(38px + env(safe-area-inset-top, 0px));
	right: 48px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}
.pshorts-close:hover { background: var(--pshorts-accent, rgba(255, 255, 255, 0.3)); color: #111; }
@media (max-width: 700px) {
	/* Snap inside the 9:16 frame's view area (the chevron column it was
	   aligned with is hidden on mobile). Frame width = min(100vw, 100vh*9/16). */
	.pshorts-close {
		top: calc(14px + env(safe-area-inset-top, 0px));
		right: calc((100vw - min(100vw, 100vh * 9 / 16)) / 2 + 14px);
	}
}

/* Instagram-style nav: large chevron circles, pulled in from the edge. */
.pshorts-nav {
	position: fixed;
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pshorts-nav button {
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
}
.pshorts-nav button svg { width: 28px; height: 28px; fill: #fff; }
.pshorts-nav button:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.06); }
.pshorts-nav button:disabled { opacity: 0.25; cursor: default; transform: none; }
@media (max-width: 700px) {
	.pshorts-nav { display: none; } /* touch devices swipe */
}