/* Eduardo Portfolio Player - mimics the current Sonaar/BeBuilder look. Prefix .epp- only. */
.epp {
	--epp-accent: #fec233; /* Theme accent (Sonaar wave progress colour on the live site). */
	--epp-bg: #1a1a1a;
	--epp-text: #fff;
	--epp-muted: #bbb;
	--epp-wave: rgba(255, 255, 255, .3);
	/* Full-bleed out of Betheme's 1220px content wrapper. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 0 90px;
	background: var(--epp-bg);
	color: var(--epp-text);
	text-align: left;
}
.epp *, .epp *::before, .epp *::after { box-sizing: border-box; }
body.epp-page { overflow-x: hidden; } /* Avoid the 100vw scrollbar overflow. */

/* Switch "hide = css": hide the old BeBuilder design (nothing deleted), never the block holding the player.
   :has() rule for modern browsers; player.js adds .epp-old-builder as fallback. Kept as two rules on purpose
   (a browser without :has() drops only the first). */
.epp-hide-builder .entry-content .mfn-builder-content:not(:has(.epp)),
.epp-hide-builder .entry-content .mfn-builder-content:has(.epp) > :not(.epp):not(:has(.epp)) { display: none !important; }
.epp-hide-builder .epp-old-builder { display: none !important; }

/* Hero: featured image over a blurred copy of itself (like the "-blur.jpg" backgrounds). */
body.epp-page #Content { padding-top: 0; } /* Betheme's 30px gap above the content left a dark strip over the hero. */
.epp-hero { position: relative; overflow: hidden; padding: 140px 15px 110px; background: #222b35; text-align: center; }
.epp .epp-hero img.epp-hero-bg {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	max-width: none !important; /* Beats ".portfolio.type-portfolio img { max-width: 750px !important }" */
	object-fit: cover; filter: blur(24px) brightness(.55); transform: scale(1.2);
}
.epp .epp-hero img.epp-hero-img { position: relative; display: block; margin: 0 auto; width: auto; max-width: min(616px, 100%) !important; height: auto; }

/* Player box: ~556px dark box with soft shadow, overlapping the hero. */
.epp-box {
	position: relative; width: 556px; max-width: calc(100% - 30px); margin: 0 auto;
	padding: 35px 25px 40px; background: var(--epp-bg); box-shadow: 0 0 20px 0 rgba(0, 0, 0, .36);
}
.epp > .epp-box:first-child { margin-top: 60px; }
.epp-hero + .epp-box { margin-top: -100px; }

.epp .epp-box .epp-title {
	margin: 0 0 25px; padding: 0; font: 700 40px/1.25 Montserrat, sans-serif; letter-spacing: 0;
	color: var(--epp-text); text-align: center;
}

.epp-player { display: flex; align-items: center; gap: 10px; }
.epp-cur, .epp-rem { flex: 0 0 auto; min-width: 36px; font: 400 11px/1 "Open Sans", sans-serif; color: var(--epp-muted); }
.epp-rem { text-align: right; }
.epp-wave { display: block; flex: 1 1 0; min-width: 0; width: 100%; height: 70px; cursor: pointer; }

/* Buttons: reset Betheme's generic button styles (specificity 0,3,1). */
.epp .epp-box button.epp-play,
.epp .epp-box button.epp-track { all: unset; box-sizing: border-box; cursor: pointer; }
/* Betheme adds an absolutely positioned ::after to every button; with the box as containing block it
   covered the whole player and swallowed every click. Kill generic pseudo-elements (play keeps its own ::before). */
.epp .epp-box button.epp-track::before,
.epp .epp-box button.epp-track::after,
.epp .epp-box button.epp-play::after { content: none !important; display: none !important; }

.epp .epp-box button.epp-play {
	position: relative; flex: 0 0 auto; width: 54px; height: 54px; margin-right: 6px;
	border: 4px solid var(--epp-text); border-radius: 50%;
}
.epp .epp-box button.epp-play::before { /* play triangle */
	content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -8px 0 0 -4px;
	border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--epp-text);
}
.epp.is-playing .epp-box button.epp-play::before { /* pause bars */
	/* border-box: 12px wide = two 4px bars + 4px gap. (4px wide made the borders touch: one bar.) */
	width: 12px; height: 16px; margin: -8px 0 0 -6px; border-width: 0 4px; border-color: var(--epp-text);
}

.epp .epp-box .epp-list { list-style: none; margin: 30px 0 0; padding: 0 30px; }
.epp .epp-box .epp-list li { list-style: none; margin: 0; padding: 0; }
.epp .epp-box button.epp-track {
	display: flex; align-items: center; width: 100%; padding: 23px 0;
	font: 700 18px/1.3 Montserrat, sans-serif; color: var(--epp-text); text-align: left;
}
.epp .epp-box button.epp-track:hover,
.epp .epp-box button.epp-track.is-current { color: var(--epp-accent); }
.epp-tri {
	flex: 0 0 auto; width: 0; height: 0; margin-right: 8px;
	border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor;
}
.epp-num { flex: 0 0 auto; margin-right: .35em; }
.epp-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.epp-dur { flex: 0 0 auto; margin-left: 15px; font-size: 12px; }

/* Visible keyboard focus. */
.epp .epp-box button.epp-play:focus-visible,
.epp .epp-box button.epp-track:focus-visible,
.epp .epp-wave:focus-visible { outline: 2px solid var(--epp-accent); outline-offset: 3px; }

@media (max-width: 767px) {
	.epp-hero { padding: 90px 15px 110px; }
	.epp .epp-box .epp-title { font-size: 30px; }
	.epp-box { padding: 30px 15px 30px; }
	.epp .epp-box .epp-list { padding: 0 5px; }
	.epp .epp-box button.epp-track { padding: 16px 0; font-size: 16px; }
}
@media (max-width: 480px) {
	.epp .epp-box .epp-title { font-size: 24px; }
	.epp .epp-box button.epp-play { width: 46px; height: 46px; }
	.epp .epp-box button.epp-track { font-size: 13px; }
}