/* Podcast Carousel — vertical stack, active card centered and bright,
   neighbours faded and inset, outline-ring play + nav controls. Looping
   when there are 3+ episodes. Scoped under .pcast; control styles are
   hardened with !important so the active theme can't recolor them. */
.pcast{
	--pc-accent:#c44536;
	--pc-card-h:84px;
	--pc-gap:16px;      /* keep in sync with GAP in frontend.js */
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	max-width:500px;
	margin:0 auto;
}
.pcast *{box-sizing:border-box}

/* neutralise theme button styling for our controls */
.pcast button{
	margin:0;padding:0;font:inherit;line-height:0;
	-webkit-appearance:none;appearance:none;
	background:none;background-image:none;
	box-shadow:none;text-shadow:none;text-transform:none;
}
.pcast i{font-style:normal;line-height:1}
.pcast-thumb i{font-size:24px}
.pcast-play i{font-size:22px}
.pcast-arrow i{font-size:26px}

.pcast-row{display:flex;align-items:stretch;gap:16px}

/* viewport (height is also set from JS to fit 1–3 cards) */
.pcast-viewport{
	position:relative;
	flex:1;
	height:calc(var(--pc-card-h) * 3 + var(--pc-gap) * 2);
	overflow:hidden;
}
.pcast-track{position:absolute;inset:0}

/* cards (absolutely positioned; JS sets transform/opacity) */
.pcast-card{
	position:absolute;left:0;right:0;top:0;
	display:flex;align-items:center;gap:18px;
	height:var(--pc-card-h);
	padding:0 20px;
	border-radius:16px;
	background:var(--pc-accent);
	color:#fff;
	cursor:pointer;
	opacity:0;
	transform:translateY(0) scale(.85);
	user-select:none;
	will-change:transform,opacity;
}
.pcast.pcast-ready .pcast-card{
	transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .38s ease;
}
.pcast-card.is-active{box-shadow:0 14px 30px rgba(0,0,0,.28)}

/* thumbnail */
.pcast-thumb{
	position:relative;
	width:56px;height:56px;flex:0 0 56px;
	border-radius:12px;
	background:#fff;
	display:grid;place-items:center;
	color:#b3b3b3;
}
.pcast-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}

/* text */
.pcast-meta{flex:1;min-width:0}
.pcast-title{
	font-weight:800;text-transform:uppercase;letter-spacing:.5px;
	font-size:18px;line-height:1.15;color:#fff;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcast-sub{
	font-size:13px;font-weight:400;color:rgba(255,255,255,.92);margin-top:3px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* controls row (holds listen and/or watch buttons) */
.pcast-controls{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* play / pause — outline ring (hardened) */
.pcast .pcast-play{
	flex:0 0 auto;
	width:50px;height:50px;border-radius:50%;
	border:2px solid rgba(255,255,255,.9) !important;
	background:transparent !important;
	color:#fff !important;
	cursor:pointer;
	display:flex !important;align-items:center !important;justify-content:center !important;
	padding:0 !important;
	transition:background .15s,transform .1s;
}
.pcast .pcast-play:hover,
.pcast .pcast-play:focus{background:rgba(255,255,255,.16) !important}
.pcast .pcast-play:focus{outline:none}
.pcast .pcast-play:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.45) !important}
.pcast .pcast-play:active{transform:scale(.92)}
.pcast-ic-play{margin-left:1px}
.pcast-ic-pause{display:none}
.pcast-card.is-playing .pcast-ic-play{display:none}
.pcast-card.is-playing .pcast-ic-pause{display:block}
.pcast-card.pcast-nomedia .pcast-play,
.pcast .pcast-play:disabled{opacity:.45;cursor:default}

/* nav arrows — outline rings (hardened so the theme can't recolor them) */
.pcast-nav{display:flex;flex-direction:column;justify-content:center;gap:38px}
.pcast .pcast-arrow{
	width:48px;height:48px;border-radius:50%;
	border:2px solid rgba(255,255,255,.85) !important;
	background:transparent !important;
	color:#fff !important;
	cursor:pointer;
	display:flex !important;align-items:center !important;justify-content:center !important;
	padding:0 !important;
	filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
	transition:transform .1s,background .15s;
}
.pcast .pcast-arrow:hover,
.pcast .pcast-arrow:focus{background:rgba(255,255,255,.16) !important}
.pcast .pcast-arrow:focus{outline:none}
.pcast .pcast-arrow:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.45) !important}
.pcast .pcast-arrow:active{transform:scale(.92)}

.pcast-empty{opacity:.7;font-style:italic}

/* video badge on the thumbnail */
.pcast-badge{
	position:absolute;right:-5px;bottom:-5px;
	width:22px;height:22px;border-radius:50%;
	background:var(--pc-accent);color:#fff;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.pcast-badge i{font-size:12px}

/* video lightbox */
.pcast-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.pcast-modal[hidden]{display:none}
.pcast-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.pcast-modal-box{position:relative;width:min(900px,100%);background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.pcast-modal-body{line-height:0}
.pcast .pcast-modal-close{
	position:absolute;top:8px;right:8px;z-index:2;
	width:38px;height:38px;border-radius:50%;
	border:none !important;cursor:pointer;
	background:rgba(0,0,0,.55) !important;color:#fff !important;
	display:flex !important;align-items:center !important;justify-content:center !important;
	padding:0 !important;
}
.pcast .pcast-modal-close:hover{background:rgba(0,0,0,.82) !important}
.pcast-modal-close i{font-size:20px}
.pcast-embed{position:relative;width:100%;padding-bottom:56.25%;height:0}
.pcast-embed iframe{position:absolute !important;inset:0;width:100% !important;height:100% !important;border:0}
.pcast-video{display:block;width:100%;max-height:80vh;background:#000}
body.pcast-modal-open{overflow:hidden}

@media (max-width:600px){
	.pcast{--pc-card-h:78px}
	.pcast .pcast-arrow{width:44px;height:44px}
	.pcast-title{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
	.pcast.pcast-ready .pcast-card{transition:opacity .2s}
}