/* Podcast Marquee Block styles */

.pmb-wrap {
	--pmb-visible: 3;
	--pmb-gap: 32px;
	--pmb-bg: #1F3F73;
	--pmb-text: #FFFFFF;
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--pmb-bg, transparent);
	color: var(--pmb-text);
	padding: 24px 20px;
	box-sizing: border-box;
}

/* Used when the block sits inside a section/row that already has its
   own background — lets that background show through with no double
   layer or extra padding boxing it in. */
.pmb-wrap.pmb-wrap--transparent {
	background: transparent;
	padding: 0;
}

.pmb-track {
	display: flex;
	gap: var(--pmb-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	padding: 4px 4px 8px;
	flex: 1 1 auto;
	cursor: grab;

	/* No visible scrollbar — navigation is via the arrow buttons
	   (swipe/drag still works, it's just not shown as a scrollbar). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pmb-track::-webkit-scrollbar {
	display: none;
}
.pmb-track.pmb-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.pmb-item {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--pmb-gap) * (var(--pmb-visible) - 1))) / var(--pmb-visible));
	min-width: 220px; /* fallback floor so cards don't get crushed on narrow screens */
	display: flex;
	flex-direction: column;
}

.pmb-item-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.pmb-thumb {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9, expressed as a % of width so it holds regardless of any inline width/height the image itself carries */
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pmb-item:hover .pmb-thumb {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
}
.pmb-thumb img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	aspect-ratio: auto !important;
	display: block;
	object-fit: cover;
}

.pmb-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0 4px;
}

.pmb-title {
	margin: 0 0 8px !important;
	padding-top: 22px !important;
	padding-bottom: 22px !important;
	font-size: .95rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--pmb-text);
}

.pmb-date {
	margin: auto 0 0 !important;
	font-size: .8rem !important;
	font-weight: 400 !important;
	color: var(--pmb-text);
	opacity: .8;
}

.pmb-empty {
	opacity: .8;
	font-style: italic;
}

/* Arrows: plain chevrons, no circle/border, sitting flush with the edges */
.pmb-arrow {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--pmb-text);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .9;
	transition: opacity .15s ease;
}
.pmb-arrow:hover {
	opacity: 1;
}
.pmb-arrow:disabled {
	opacity: .25;
	cursor: default;
}

/* Responsive fallback: never show more than 2 on small screens,
   regardless of the "visible" setting, so cards stay usable. */
@media (max-width: 700px) {
	.pmb-item {
		flex-basis: calc((100% - var(--pmb-gap)) / 2);
	}
}
@media (max-width: 460px) {
	.pmb-item {
		flex-basis: calc(100% - 40px);
	}
	.pmb-wrap {
		padding: 28px 12px;
	}
}