/* PKWY MUX — front-end styles. Kept minimal: Salient handles most chrome. */

/* Hide inline lightbox containers until the popup opens. Magnific Popup uses
   the .mfp-hide convention; we add our own backup in case the theme's flavor
   of Magnific Popup or fancybox doesn't include it. */
.pkwy-mux-lightbox-target,
.mfp-hide.pkwy-mux-lightbox-target {
	display: none !important;
}

/* Fallback dimensions for inline players when not constrained by the theme. */
.pkwy-mux mux-player {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Download link rendered below the player when the editor opts in to MP4
   static renditions and Mux has finished generating them. Inherits theme
   typography; we just add a small icon-style underscore on hover. */
.pkwy-mux .pkwy-mux-download {
	margin: 8px 0 0;
	font-size: 0.9em;
	text-align: right;
}
.pkwy-mux .pkwy-mux-download a {
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}
.pkwy-mux .pkwy-mux-download a:hover { border-bottom-style: solid; }

/* -----------------------------------------------------------------------
   Carousel layout for [pkwy_mux_playlist layout="carousel"]
   ---------------------------------------------------------------------
   Pure CSS scroll-snap track + minimal JS for prev/next + dots, no
   Slick/Swiper dependency. Works on any theme. The viewport hides the
   horizontal overflow; the track is a horizontal flex row that snaps
   to each item. Each item respects --pkwy-mux-item-min so small items
   pack tighter and large items get more room.
   -------------------------------------------------------------------- */
.pkwy-mux-playlist--carousel {
	--pkwy-mux-item-min: 280px;
	--pkwy-mux-gap: 16px;
	position: relative;
	margin: 0;
}
.pkwy-mux-playlist--carousel .pkwy-mux-carousel-viewport {
	overflow: hidden;
}
.pkwy-mux-playlist--carousel .pkwy-mux-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--pkwy-mux-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 0 0 8px;
	list-style: none;
	scrollbar-width: thin;
}
.pkwy-mux-playlist--carousel .pkwy-mux-carousel-track::-webkit-scrollbar { height: 6px; }
.pkwy-mux-playlist--carousel .pkwy-mux-carousel-track::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item {
	flex: 0 0 calc(100% - var(--pkwy-mux-gap));
	max-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	margin: 0;
	list-style: none;
}
.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item::marker { content: none; }
@media (min-width: 700px) {
	.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item {
		flex-basis: calc(50% - var(--pkwy-mux-gap));
	}
}
@media (min-width: 1100px) {
	.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item {
		flex-basis: calc(33.3333% - var(--pkwy-mux-gap));
	}
}
.pkwy-mux-playlist--carousel .pkwy-mux-playlist__item > * { max-width: 100%; }
.pkwy-mux-playlist--carousel .pkwy-mux-playlist__title {
	margin: 0 0 8px;
	font-size: 1rem;
	line-height: 1.3;
}

/* Prev / next buttons. Position offset just outside the viewport, mirrored
   either side. Kept neutral so themes (Salient included) don't have to
   restyle them. */
.pkwy-mux-carousel-btn {
	position: absolute;
	top: calc(50% - 22px);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid currentColor;
	background: rgba(255,255,255,0.92);
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: opacity 0.15s ease, transform 0.15s ease;
	padding: 0;
}
.pkwy-mux-carousel-btn:hover { background: #fff; transform: scale(1.05); }
.pkwy-mux-carousel-btn[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }
.pkwy-mux-carousel-btn--prev { left: -10px; }
.pkwy-mux-carousel-btn--next { right: -10px; }
@media (min-width: 700px) {
	.pkwy-mux-carousel-btn--prev { left: -20px; }
	.pkwy-mux-carousel-btn--next { right: -20px; }
}

/* Dots. Sit centered under the viewport. */
.pkwy-mux-carousel-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}
.pkwy-mux-carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid currentColor;
	background: transparent;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, background 0.15s ease;
}
.pkwy-mux-carousel-dot:hover { opacity: 1; }
.pkwy-mux-carousel-dot.is-active {
	background: currentColor;
	opacity: 1;
}

/* Page-header / row background overlay we injected. These mirror the
   positioning Salient applies to its own .nectar-video-wrap so the result
   is visually identical, but they're defensively scoped to our class so
   we never override Salient's own video bg. */
.pkwy-mux-bg-injected {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.pkwy-mux-bg-injected .nectar-video-inner {
	width: 100%;
	height: 100%;
	position: relative;
}
.pkwy-mux-bg-injected .nectar-video-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

/* Hide the playback-rate ("1x") button on every embed. The primary mechanism
   is the `playbackrates="1"` attribute we set in the render layer (Mux Player
   hides the button when only one rate is configured). These CSS rules are a
   defensive fallback for older mux-player versions that ignore that. */
mux-player::part(playbackrate-button),
mux-player::part(playback-rate-button),
mux-player::part(media-playback-rate-button),
mux-player::part(playbackrate),
mux-player::part(playback-rate),
mux-player::part(rate),
mux-player::part(rate-button),
mux-player::part(playback-rate-container) {
	display: none !important;
}
/* Wildcards just in case the part name includes "rate" anywhere. */
mux-player::part(*-rate-*),
mux-player::part(*rate*) {
	display: none !important;
}
/* Last-resort: target media-chrome element directly inside mux-player's
   light DOM (some builds slot the controls there rather than in shadow). */
mux-player media-playback-rate-button,
mux-player media-control-bar [aria-label*="speed" i],
mux-player media-control-bar [aria-label*="rate" i] {
	display: none !important;
}

/* Audio chrome is a slim controls bar — never enforce an aspect ratio,
   even if a parent (theme, page builder, etc.) tries to. */
.pkwy-mux--audio,
.pkwy-mux--audio mux-player {
	aspect-ratio: auto !important;
	height: auto;
}
.pkwy-mux--audio mux-player {
	width: 100%;
}

/* Video chrome defaults to 16:9. Scoped to the video wrapper so it never
   leaks into audio embeds on the same page. */
.pkwy-mux--video mux-player {
	aspect-ratio: 16 / 9;
}

/* When the lightbox container is shown by Magnific Popup, give the player a
   reasonable max-width so it doesn't overflow the viewport. */
.mfp-content .pkwy-mux-lightbox-target {
	display: block !important;
	width: min(96vw, 1280px);
	max-width: 96vw;
	margin: 0 auto;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}
.mfp-content .pkwy-mux-lightbox-target mux-player {
	width: 100%;
	max-height: 90vh;
}

/* Single Stream page — used by both the auto-injected (the_content filter)
   path and our custom single-pkwy_stream.php template. */
.pkwy-mux-single {
	margin: 0 0 32px;
}
.pkwy-mux-single mux-player {
	display: block;
	width: 100%;
}

/* Custom single template.
   Three sections: title (container-bound), player (full-width breakout),
   body (container-bound — so WPBakery rows in the_content honor their
   In Container / Full Width Type setting). */
.pkwy-mux-single-wrap {
	width: 100%;
	padding: 150px 0 80px;
	box-sizing: border-box;
}
@media (max-width: 999px) {
	.pkwy-mux-single-wrap { padding-top: 100px; }
}
.pkwy-mux-single__top { padding-bottom: 32px; }
.pkwy-mux-single__body { padding-top: 32px; }

/* Player section: full-width breakout from the title/body containers. */
.pkwy-mux-single__player-wrap {
	width: 100%;
	margin: 0 0 16px;
}
.pkwy-mux-single__player {
	max-width: 1600px;
	margin: 0 auto;
}
.pkwy-mux-single__player .pkwy-mux mux-player {
	width: 100%;
}
.pkwy-mux-single--audio .pkwy-mux-single__player {
	max-width: 900px;
	padding: 0 24px;
}

.pkwy-mux-single__crumb {
	margin: 0 0 8px;
	font-size: 0.92em;
	opacity: 0.7;
}
.pkwy-mux-single__crumb a,
.pkwy-mux-single__back-link {
	color: inherit;
	text-decoration: none;
}
.pkwy-mux-single__crumb a:hover,
.pkwy-mux-single__back-link:hover {
	color: var(--media-accent-color, #1cb0a2);
}
.pkwy-mux-single__title {
	margin: 0 0 12px;
	line-height: 1.15;
}
.pkwy-mux-single__terms {
	margin: 0 0 28px;
	font-size: 0.9em;
	opacity: 0.7;
}
.pkwy-mux-single__excerpt {
	font-size: 1.15em;
	color: #555;
	margin: 0 0 24px;
	line-height: 1.55;
}
.pkwy-mux-single__excerpt p:last-child { margin-bottom: 0; }
.pkwy-mux-single__content {
	line-height: 1.7;
	margin: 0 0 40px;
}
.pkwy-mux-single__footer {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 24px;
	margin-top: 40px;
}
.pkwy-mux-single__back-link {
	font-size: 0.95em;
	opacity: 0.8;
}

/* Stream archive grid (templates/archive-pkwy_stream.php). */
.pkwy-mux-archive {
	padding: 50px 0 80px;
}
.pkwy-mux-archive__header {
	margin-bottom: 40px;
	text-align: center;
}
.pkwy-mux-archive__title {
	margin: 0 0 12px;
}
.pkwy-mux-archive__desc {
	color: #555;
	max-width: 720px;
	margin: 0 auto;
}
.pkwy-mux-archive-grid {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.pkwy-mux-archive-item {
	margin: 0;
	list-style: none !important;
	padding-left: 0;
}
/* Salient (and many themes) inject ::marker bullets on <li> elements
   regardless of the parent list-style. Suppress them explicitly. */
.pkwy-mux-archive-grid > li::marker,
.pkwy-mux-archive-grid > li::-webkit-details-marker,
.pkwy-mux-archive-item::marker {
	content: none !important;
	display: none !important;
	color: transparent !important;
	font-size: 0 !important;
}
.pkwy-mux-archive-item__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.pkwy-mux-archive-item__link:hover .pkwy-mux-archive-item__thumb {
	transform: scale(1.02);
}
.pkwy-mux-archive-item__link:hover .pkwy-mux-archive-item__title {
	color: var(--media-accent-color, #1cb0a2);
}
.pkwy-mux-archive-item__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: #1d1d1d;
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
}
.pkwy-mux-archive-item--audio .pkwy-mux-archive-item__thumb {
	background: linear-gradient(135deg, #2a3f54 0%, #1a2733 100%);
}
.pkwy-mux-archive-item__audio-icon {
	width: 48px;
	height: 48px;
}
.pkwy-mux-archive-item__duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 2px 8px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 12px;
	border-radius: 3px;
	font-variant-numeric: tabular-nums;
}
.pkwy-mux-archive-item__title {
	margin: 14px 0 4px;
	font-size: 1.15em;
	transition: color 0.2s ease;
}
.pkwy-mux-archive-item__excerpt {
	margin: 0;
	color: #555;
	font-size: 0.92em;
	line-height: 1.5;
}
.pkwy-mux-archive__empty {
	padding: 60px 0;
	text-align: center;
	color: #888;
}
.pkwy-mux-archive__pagination {
	margin-top: 50px;
	text-align: center;
}
@media (max-width: 999px) {
	.pkwy-mux-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 690px) {
	.pkwy-mux-archive-grid { grid-template-columns: 1fr; }
}

/* Single Playlist page — items are listed vertically with a number + title
   above each player. */
.pkwy-mux-playlist-single__items {
	padding: 24px 0 32px;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__items {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__item {
	margin: 0 0 40px;
	list-style: none !important;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__item::marker {
	content: none !important;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__item-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 12px;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__item-num {
	font-size: 0.92em;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
	min-width: 28px;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__title {
	margin: 0;
	font-size: 1.15em;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__title a {
	color: inherit;
	text-decoration: none;
}
.pkwy-mux-playlist-single .pkwy-mux-playlist__title a:hover {
	color: var(--media-accent-color, #1cb0a2);
}

/* Archive: playlist cards use a different fallback icon + a fancier
   gradient for the "no thumbnail" state. */
.pkwy-mux-archive-item--playlist .pkwy-mux-archive-item__thumb--audio,
.pkwy-mux-archive-item--playlist.pkwy-mux-archive-item--no-thumb .pkwy-mux-archive-item__thumb {
	background: linear-gradient(135deg, #1cb0a2 0%, #2a3f54 100%);
}
.pkwy-mux-archive-item__playlist-icon {
	width: 48px;
	height: 48px;
	color: rgba(255, 255, 255, 0.85);
}
.pkwy-mux-archive-item__count {
	font-variant-numeric: tabular-nums;
}

/* Placeholder shown to logged-in editors when a stream isn't ready. */
.pkwy-mux-placeholder {
	display: inline-block;
	padding: 8px 12px;
	background: #fff5d6;
	color: #7a5f00;
	border-radius: 4px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pkwy-mux-placeholder--missing { background: #fbd3d8; color: #8a1f2c; }

/* Playlist layouts. */
.pkwy-mux-playlist__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pkwy-mux-playlist__item {
	margin: 0 0 24px;
}
.pkwy-mux-playlist__title {
	margin: 0 0 8px;
	font-size: 1.1em;
}
.pkwy-mux-playlist--grid .pkwy-mux-playlist__items {
	display: grid;
	grid-template-columns: repeat(var(--pkwy-mux-cols, 2), 1fr);
	gap: 24px;
}
.pkwy-mux-playlist--grid.pkwy-mux-playlist--cols-1 .pkwy-mux-playlist__items { --pkwy-mux-cols: 1; }
.pkwy-mux-playlist--grid.pkwy-mux-playlist--cols-2 .pkwy-mux-playlist__items { --pkwy-mux-cols: 2; }
.pkwy-mux-playlist--grid.pkwy-mux-playlist--cols-3 .pkwy-mux-playlist__items { --pkwy-mux-cols: 3; }
.pkwy-mux-playlist--grid.pkwy-mux-playlist--cols-4 .pkwy-mux-playlist__items { --pkwy-mux-cols: 4; }
@media (max-width: 690px) {
	.pkwy-mux-playlist--grid .pkwy-mux-playlist__items { grid-template-columns: 1fr; }
}