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

/* ---------------------------------------------------------------------------
 * Network content (Feature 7 Schicht 2)
 * Erfolgs-Pfad: kein spezielles Styling — der eingebettete Master-Inhalt
 * behält die Standard-Block-Darstellung des aktiven Themes.
 * Fallback-Pfad: eine freundliche Karte mit Link auf die Dachmarke, falls
 * die Master-Seite (noch) nicht existiert oder nicht geladen werden konnte.
 * ------------------------------------------------------------------------- */

.compendion-network-content--fallback {
	max-inline-size: 40rem;
	margin-block: var(--wp--preset--spacing--40);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 92%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

.compendion-network-content--fallback .compendion-network-content__title {
	margin-block-start: 0;
	font-size: var(--wp--preset--font-size--large);
}

.compendion-network-content__fallback-text {
	color: var(--wp--preset--color--muted);
	margin-block: var(--wp--preset--spacing--20);
}

.compendion-network-content__fallback-link {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 0.6rem 1.1rem;
	border-radius: 0.375rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
}

.compendion-network-content__fallback-link:hover,
.compendion-network-content__fallback-link:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}