/*
 * 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;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	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;
}

.wp-element-button,
.wp-block-button__link {
	color: var(--compendion-color-on-primary, var(--wp--preset--color--contrast));
}

.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);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	padding: clamp(1.25rem, 4vw, 2rem);
}

.compendion-hero-card :where(.compendion-kicker, p, a),
.compendion-podcast-card :where(.compendion-kicker, p, a),
.compendion-support-card :where(.compendion-kicker, p, a) {
	color: inherit;
}

.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: var(--compendion-color-surface-soft, color-mix(in srgb, var(--wp--preset--color--surface) 92%, var(--wp--preset--color--base)));
	color: var(--compendion-color-on-surface-soft, var(--compendion-color-on-surface, 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(--compendion-color-on-surface-soft-muted, inherit);
	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.15rem;
	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);
}

/*
 * Mitwirkende-Visitenkarte (Feature 8 / Schicht 4).
 * Render-Quelle: includes/person-shortcode.php — `[compendion-person ...]`.
 * Bewusst kompakt gehalten; Sub-Sites koennen die Klassen ueberschreiben,
 * ohne die HTML-Struktur anzufassen.
 */
.compendion-person {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin: 0;
	padding: var(--wp--preset--spacing--20, 1rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 96%, var(--wp--preset--color--contrast));
}

.compendion-person__avatar {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.compendion-person__caption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.compendion-person__name {
	font-weight: 600;
	line-height: 1.2;
}

.compendion-person__role {
	color: var(--wp--preset--color--muted);
	font-size: 0.9em;
}

.compendion-person__link {
	margin-top: 0.25rem;
	font-size: 0.85em;
	text-underline-offset: 0.16em;
}

/* ---------------------------------------------------------------------------
 * Contributors list ([compendion-contributors])
 * Zwei Sektionen ("In der aktuellen Folge" / "Alle Mitwirkenden") als
 * Avatar-Grid. Zwei Dichten:
 *   - .is-density-cards: bei wenigen Personen → größere Karten.
 *   - .is-density-tiles: bei vielen Personen → kompakte Tiles.
 * Farben kommen ausschließlich aus dem theme.json-Palette-System
 * (--wp--preset--color--*), damit jede Sub-Site die eigene Tönung erbt.
 * ------------------------------------------------------------------------- */

.compendion-contributors-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40);
}

.compendion-contributors-section__heading {
	font-size: var(--wp--preset--font-size--large);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.compendion-contributors-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(0.85rem, 2.5vw, 1.25rem);
}

.compendion-contributors-section.is-density-cards .compendion-contributors-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.compendion-contributors-section.is-density-tiles .compendion-contributors-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}

.compendion-contributors-card {
	background: var(--compendion-color-surface-soft, color-mix(in srgb, var(--wp--preset--color--surface) 92%, var(--wp--preset--color--base)));
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	color: var(--compendion-color-on-surface-soft, var(--wp--preset--color--contrast));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: clamp(0.85rem, 2.5vw, 1.15rem);
	text-align: center;
}

.compendion-contributors-section.is-density-tiles .compendion-contributors-card {
	gap: 0.45rem;
	padding: 0.7rem 0.55rem;
}

.compendion-contributors-avatar {
	aspect-ratio: 1;
	border-radius: 999px;
	display: block;
	overflow: hidden;
	width: clamp(3.25rem, 8vw, 4.75rem);
}

.compendion-contributors-section.is-density-cards .compendion-contributors-avatar {
	width: clamp(4.5rem, 12vw, 6.5rem);
}

.compendion-contributors-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.compendion-contributors-avatar.is-initials {
	align-items: center;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 28%,
		var(--wp--preset--color--surface)
	);
	color: var(--wp--preset--color--contrast);
	display: flex;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.04em;
	/* Hue-rotate fügt pro-Person Akzent hinzu, ohne hartkodierte Hex-Werte. */
	filter: hue-rotate(calc(var(--compendion-contributor-hue, 0) * 1deg));
}

.compendion-contributors-avatar__initials {
	font-size: clamp(1rem, 2.4vw, 1.6rem);
	line-height: 1;
}

.compendion-contributors-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.compendion-contributors-card__name {
	font-weight: 700;
	line-height: 1.2;
	font-size: var(--wp--preset--font-size--medium);
}

.compendion-contributors-section.is-density-tiles .compendion-contributors-card__name {
	font-size: var(--wp--preset--font-size--small);
}

.compendion-contributors-pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	justify-content: center;
}

.compendion-contributors-pill {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 28%, var(--wp--preset--color--base));
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	display: inline-block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.55rem;
	text-decoration: none;
}

.compendion-contributors-pill:hover,
.compendion-contributors-pill:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--contrast));
}