/* Podcast Marquee Block styles */

/* Layout: a grid so the arrows can sit at the sides, in the header, or
   (on mobile) centered under the cards without changing the markup. */
.pmb-wrap {
	--pmb-visible: 3;
	--pmb-gap: 32px;
	--pmb-accent: var(--wp--preset--color--tertiary, #ffde16);
	--pmb-accent-text: var(--wp--preset--color--primary, #2b549b);
	position: relative;

	/* Defaults for the block's Typography controls; card text scales from these (em). */
	font-size: 1rem;
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat');
	line-height: 1.5;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"header header header"
		"prev track next"
		"progress progress progress"
		"footer footer footer";
	column-gap: 12px;
	align-items: center;
	box-sizing: border-box;
}

/* Header-placed (or no) arrows: the track takes the full width. */
.pmb-wrap.pmb-arrows-header .pmb-track,
.pmb-wrap.pmb-arrows-none .pmb-track {
	grid-column: 1 / -1;
}

/* Header: optional title/description on the left, arrows on the right */
.pmb-header {
	grid-area: header;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}
.pmb-heading {
	flex: 1 1 auto;
	min-width: 0;
}
.pmb-heading-title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--x-large, 2em);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}
.pmb-heading-desc {
	margin: 0;
	max-width: 60ch;
	color: inherit;
}
.pmb-arrows {
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
}

.pmb-track {
	grid-area: 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;
	scroll-padding-inline: 4px; /* match the padding so snapping to the first card lands at scrollLeft 0 */
	min-width: 0;
	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 */
	margin-bottom: 20px;
	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;
}

/* Card text order: date, title, description */
.pmb-body {
	padding: 0 4px;
}

p.pmb-date,
.pmb-title,
.pmb-title,
.pmb-excerpt {
	line-height: inherit;
	color: inherit;
}

p.pmb-date,
.pmb-title {
	margin: 0 0 20px;
}

.pmb-title {
	font-size: 1.4rem;
	font-weight: 700;
}

p.pmb-date,
.pmb-excerpt {
	font-size: 1rem;
	font-weight: 400;
}

.pmb-empty {
	grid-column: 1 / -1;
	opacity: .8;
	font-style: italic;
}

/* Arrows: filled accent circles with a triangle */
.pmb-arrow {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--pmb-accent);
	color: var(--pmb-accent-text);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s ease, transform .15s ease;
}
.pmb-arrow span {
	display: flex; /* no line box, so no descender gap under the svg */
}
.pmb-arrow svg {
	display: block; /* not baseline-aligned */
	width: 36px; /* even, so (54 - 36) / 2 stays a whole pixel and doesn't shift on hover scale */
	height: 36px;
	fill: currentColor;
}
.pmb-arrow:hover:not(:disabled) {
	transform: scale(1.08);
}
.pmb-arrow:disabled {
	opacity: .5;
	cursor: default;
}

/* Keyboard-only focus ring (:focus-visible never fires for mouse clicks). */
.pmb-arrow:focus-visible,
.pmb-item-link:focus-visible {
	outline: 2px dotted var(--wp--preset--color--tertiary, #ffde16);
	outline-offset: 3px;
}
.pmb-arrow--prev {
	grid-area: prev;
}
.pmb-arrow--next {
	grid-area: next;
}

/* Progress bar: a thin line with an accent thumb (position set by script.js) */
.pmb-progress {
	grid-area: progress;
	position: relative;
	height: 4px;
	margin: 24px 0 0;
}
.pmb-progress::before {
	content: "";
	position: absolute;
	inset: 1px 0;
	background: currentColor;
	opacity: .85;
}
.pmb-progress-thumb {
	position: absolute;
	top: 0;
	left: var(--pmb-thumb-left, 0%);
	width: var(--pmb-thumb-width, 15%);
	height: 4px;
	background: var(--pmb-accent);
}

/* Footer CTA: a core Button block (InnerBlocks), styled by the theme/editor. */
.pmb-footer {
	grid-area: footer;
	margin-top: 24px;
}

/* 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);
	}
}

/* Mobile: heading on top, then cards, with the arrows centered underneath
   whichever placement is chosen. The header wrappers drop out of the grid
   so the arrows can be placed on their own row. */
@media (max-width: 700px) {
	.pmb-wrap {
		grid-template-columns: 1fr auto auto 1fr;
		grid-template-areas:
			"header header header header"
			"track track track track"
			". prev next ."
			"progress progress progress progress"
			"footer footer footer footer";
	}
	.pmb-header,
	.pmb-arrows {
		display: contents;
	}
	.pmb-heading {
		grid-area: header;
		margin-bottom: 24px;
	}
	.pmb-wrap .pmb-track {
		grid-column: 1 / -1;
	}
	.pmb-arrow {
		margin-top: 20px;
	}
	.pmb-arrow--prev {
		margin-right: 6px;
	}
	.pmb-arrow--next {
		margin-left: 6px;
	}
}
@media (max-width: 460px) {
	.pmb-item {
		flex-basis: calc(100% - 40px);
	}
}