/*
 * Video discovery feed and homepage video strip styles.
 *
 * The feed is a dark, full-height, vertical snap-scroll surface, one video per
 * screen, in the TikTok pattern. Vertical (9:16) videos fill the height;
 * horizontal videos letterbox in the middle. The overlay carries the listing
 * identity, the View listing action, and the creator credit. The strip is a
 * light horizontal scroller of thumbnails for the Elementor homepage.
 */

/* ===== Feed page ===== */
.ph-discover {
	background: #14161f;
	min-height: 100vh;
	position: relative;
}

.ph-discover__top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: var(--ph-space-3);
	padding: var(--ph-space-3) var(--ph-space-4);
	background: linear-gradient(to bottom, rgba(20, 22, 31, 0.85), rgba(20, 22, 31, 0));
}
body.admin-bar .ph-discover__top { top: 32px; }

.ph-discover__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #fff;
	text-decoration: none;
	font-size: var(--ph-text-small);
	font-weight: 600;
	flex-shrink: 0;
}
.ph-discover__back .dashicons { font-size: 16px; width: 16px; height: 16px; }

.ph-discover__areas {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.ph-discover__areas::-webkit-scrollbar { display: none; }

.ph-discover__area {
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	font-size: var(--ph-text-small);
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: none;
	border-radius: var(--ph-radius-pill);
	padding: 7px 14px;
	transition: background 0.15s;
}
.ph-discover__area:hover { background: rgba(255, 255, 255, 0.24); }
.ph-discover__area.is-active { background: var(--ph-color-primary); }

/* Snap container. Uses dynamic viewport height (dvh) so the iOS Safari address
   bar does not eat the bottom of each slide and force a scroll to reach the
   action bar. Falls back to vh on browsers without dvh. */
.ph-discover__feed {
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
}
body.admin-bar .ph-discover__feed { height: calc(100vh - 32px); height: calc(100dvh - 32px); }

.ph-discover__slide {
	position: relative;
	height: 100vh;
	height: 100dvh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.admin-bar .ph-discover__slide { height: calc(100vh - 32px); height: calc(100dvh - 32px); }

/* The stage holds the poster then the player iframe */
.ph-discover__stage {
	position: relative;
	background: #000;
	overflow: hidden;
	border-radius: var(--ph-radius-md);
}
.ph-discover__stage--v {
	height: 86vh;
	aspect-ratio: 9 / 16;
	max-width: 94vw;
}
.ph-discover__stage--h {
	width: min(94vw, 960px);
	aspect-ratio: 16 / 9;
}

.ph-discover__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.ph-discover__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Overlay: identity bottom-left, action bottom-right, credit above */
.ph-discover__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ph-space-3);
	padding: var(--ph-space-4);
	pointer-events: none;
	background: linear-gradient(to top, rgba(20, 22, 31, 0.75), rgba(20, 22, 31, 0));
}
.ph-discover__overlay > * { pointer-events: auto; }

.ph-discover__info {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	min-width: 0;
}
.ph-discover__logo {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	flex-shrink: 0;
}
.ph-discover__meta { display: flex; flex-direction: column; min-width: 0; }
.ph-discover__name {
	color: #fff;
	font-weight: 700;
	font-size: var(--ph-text-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ph-discover__sub {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--ph-text-small);
}

.ph-discover__actions { flex-shrink: 0; }
.ph-discover__view {
	display: inline-block;
	background: var(--ph-color-primary);
	color: #fff;
	text-decoration: none;
	font-size: var(--ph-text-small);
	font-weight: 700;
	border-radius: var(--ph-radius-pill);
	padding: 9px 16px;
	white-space: nowrap;
}
.ph-discover__view:hover { filter: brightness(0.95); color: #fff; }

.ph-discover__credit {
	position: absolute;
	top: -28px;
	left: var(--ph-space-4);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--ph-text-label);
	background: rgba(20, 22, 31, 0.55);
	border-radius: var(--ph-radius-pill);
	padding: 4px 10px;
}

.ph-discover__status {
	position: fixed;
	bottom: var(--ph-space-5);
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;
	color: #fff;
	background: rgba(20, 22, 31, 0.8);
	border-radius: var(--ph-radius-pill);
	padding: 8px 16px;
	font-size: var(--ph-text-small);
}
.ph-discover__status[hidden] { display: none; }

/* ===== Homepage video strip ===== */
.ph-vstrip { margin: var(--ph-space-5) 0; }
.ph-vstrip__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ph-space-3);
}
.ph-vstrip__title {
	font-size: var(--ph-text-h3);
	margin: 0;
	color: var(--ph-color-ink);
}
.ph-vstrip__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ph-color-primary);
	text-decoration: none;
	font-size: var(--ph-text-small);
	font-weight: 600;
}
.ph-vstrip__all .dashicons { font-size: 15px; width: 15px; height: 15px; }

.ph-vstrip__row {
	display: flex;
	gap: var(--ph-space-3);
	overflow-x: auto;
	padding-bottom: var(--ph-space-2);
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.ph-vstrip__row::-webkit-scrollbar { display: none; }

.ph-vstrip__card {
	position: relative;
	flex: 0 0 auto;
	width: 150px;
	aspect-ratio: 9 / 16;
	border-radius: var(--ph-radius-md);
	overflow: hidden;
	background: var(--ph-color-ink);
	text-decoration: none;
	box-shadow: var(--ph-shadow-card);
}
.ph-vstrip__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s;
}
.ph-vstrip__card:hover .ph-vstrip__thumb { transform: scale(1.04); }

.ph-vstrip__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 30px;
	width: 30px;
	height: 30px;
	opacity: 0.9;
}

.ph-vstrip__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 10px 10px;
	color: #fff;
	font-size: var(--ph-text-label);
	font-weight: 600;
	background: linear-gradient(to top, rgba(20, 22, 31, 0.85), rgba(20, 22, 31, 0));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Hide the site header on the discover feed page so the full dark screen
   shows edge to edge with no nav bar interrupting. The feed has its own
   back-arrow in .ph-discover__top. The live header is an Elementor header
   template, so we target the Elementor header location and any sticky/fixed
   wrapper Elementor outputs, as well as the theme's own header. */
body.ph-discover-page .ph-site-header,
body.ph-discover-page .elementor-location-header,
body.ph-discover-page [data-elementor-type="header"],
body.ph-discover-page header.elementor-location-header,
body.ph-discover-page .elementor-sticky--active,
body.ph-discover-page header.elementor {
	display: none !important;
}
/* Some sticky-header setups leave a placeholder spacer behind; collapse it. */
body.ph-discover-page .elementor-sticky__spacer {
	height: 0 !important;
	min-height: 0 !important;
}

@media (max-width: 600px) {
	/* Contain the video the way the listing-page video overlay does: the whole
	   clip is visible, letterboxed against the dark feed, never cropped or
	   zoomed. The stage width is the smaller of the full viewport width OR the
	   width that lets a correctly-proportioned box fit in the height left after
	   reserving room for the top area pills and the bottom action bar. That
	   reserved space keeps the View listing button on screen with no scroll. */
	.ph-discover__stage--v {
		height: auto;
		border-radius: 0;
		width: min(100vw, calc((100dvh - 168px) * 9 / 16));
		max-width: 100vw;
		aspect-ratio: 9 / 16;
	}
	.ph-discover__stage--h {
		width: min(100vw, calc((100dvh - 168px) * 16 / 9));
		max-width: 100vw;
		border-radius: 0;
		aspect-ratio: 16 / 9;
	}

	/* Push the contained video up so the reserved space sits at the bottom for
	   the action bar, clear of the top area pills. */
	.ph-discover__slide {
		align-items: flex-start;
		padding-top: 64px;
	}

	/* The overlay becomes a solid bar pinned to the bottom of the slide, always
	   visible, holding the listing identity and the View listing button. */
	.ph-discover__overlay {
		align-items: center;
		padding: 14px var(--ph-space-4) calc(14px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(to top, rgba(20, 22, 31, 0.98) 60%, rgba(20, 22, 31, 0));
	}
	.ph-discover__credit { top: -24px; }

	.ph-vstrip__card { width: 124px; }

	/* Location area pills sit inside .ph-discover__top which is z-index 30.
	   Keep the top bar above everything else so pills never overlap the nav. */
	.ph-discover__top { z-index: 50; }
}