/*
 * Compendion component styles.
 *
 * Patterns and template parts should use semantic class names with the
 * compendion- prefix when block settings are not expressive enough.
 */

.compendion-podcast-front-page {
	--compendion-podcast-accent: var(--wp--preset--color--primary);
	--compendion-podcast-contrast: var(--wp--preset--color--contrast);
	--compendion-podcast-surface: var(--wp--preset--color--surface);
}

.compendion-site-header {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.compendion-site-footer {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.compendion-network-note {
	background: color-mix(in srgb, var(--wp--preset--color--compendion) 82%, var(--wp--preset--color--base));
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.25rem;
	padding: clamp(1rem, 3vw, 1.5rem);
}

.compendion-card {
	border-radius: 1.5rem;
	overflow: hidden;
}

.compendion-network-kicker {
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--30);
}

.compendion-site-footer a {
	text-underline-offset: 0.16em;
}

.compendion-footer-links {
	list-style: none;
	padding-left: 0;
}

.compendion-hero-card,
.compendion-podcast-card,
.compendion-support-card {
	background: var(--compendion-podcast-surface, var(--wp--preset--color--surface));
	border: 1px solid var(--wp--preset--color--line);
	padding: clamp(1.25rem, 4vw, 2rem);
}

.compendion-kicker {
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.compendion-podcast-cover-placeholder {
	aspect-ratio: 1;
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.5rem;
	box-shadow: 0 1rem 3rem color-mix(in srgb, var(--compendion-podcast-accent, currentColor) 12%, transparent);
	color: var(--wp--preset--color--muted);
	display: flex;
	justify-content: center;
	min-height: 12rem;
}

.compendion-podcast-cover-placeholder p {
	opacity: 0.68;
}

.compendion-podcast-cover {
	margin-inline: auto;
}

.compendion-podcast-cover :where(img) {
	aspect-ratio: 1;
	border-radius: 1.25rem;
	box-shadow: 0 1rem 3rem color-mix(in srgb, var(--compendion-podcast-accent, currentColor) 16%, transparent);
	height: auto;
	object-fit: cover;
	width: min(100%, 20rem);
}

.compendion-support-card {
	min-height: 100%;
}

.compendion-featured-episode-card {
	border-inline-start: 0.3rem solid var(--wp--preset--color--primary);
	padding-inline-start: clamp(1rem, 3vw, 1.5rem);
}

.compendion-featured-episode-card .podlove-web-player {
	margin-block: var(--wp--preset--spacing--30);
}

.compendion-episode-list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.compendion-episode-card {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding: clamp(1.25rem, 4vw, 2rem);
}

.compendion-episode-card time {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.compendion-episode-card .wp-block-post-title {
	margin-block: 0.35rem 0.65rem;
}

.compendion-episode-card .wp-block-post-excerpt__more-link {
	display: inline-flex;
	min-height: 3.125rem;
	align-items: center;
	text-underline-offset: 0.16em;
}

.compendion-support-card {
	border-block-start: 0.35rem solid var(--wp--preset--color--accent);
}