/* Knöpfe im Look der Linkliste (Theme 4.2.1, LinkBoard `hd-link-card`): Glas-Karte,
   Icon-Kachel in Mint, fetter Titel, Unterzeile, Pfeil. Glas-Werte aus dem Theme. */

.hdc-grid {
	list-style: none; margin: 0 0 24px; padding: 0;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem;
}
.hdc-grid:has(+ .hdc-grid) { margin-bottom: .75rem; }
.hdc-grid > li { display: flex; min-width: 0; margin: 0; }
.hdc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hdc-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.hdc {
	--hdc-mint: var(--wp--preset--color--bright-teal, #06d6a0);
	position: relative; box-sizing: border-box;
	display: flex; align-items: center; gap: 1rem;
	width: 100%; min-width: 0; margin: 0;
	padding: .85rem 1.25rem .85rem .85rem;
	background: var(--hd-glass-bg, rgba(255, 255, 255, .06));
	border: 1px solid var(--hd-glass-border, rgba(255, 255, 255, .12));
	border-radius: 18px;
	box-shadow: 0 6px 24px rgba(9, 30, 46, .18);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	color: inherit; font: inherit; line-height: 1.3; text-align: left; text-decoration: none;
	cursor: pointer; appearance: none;
	transition: transform 250ms var(--hd-ease, ease), background-color 250ms var(--hd-ease, ease), border-color 250ms var(--hd-ease, ease), box-shadow 250ms var(--hd-ease, ease);
}
/* Auf dem Verlauf (body.hd-gradient-bg) dunkleres Glas wie in der Linkliste, sonst wird es
   im Grün blass. Auf dem dunklen Blatt der Landingpage bleibt das helle Glas. */
:where(body.hd-gradient-bg) .hdc {
	--hd-glass-bg: rgba(9, 30, 46, .34);
	--hd-glass-bg-hover: rgba(9, 30, 46, .5);
	--hd-glass-border: rgba(255, 255, 255, .16);
	--hd-glass-border-hover: rgba(255, 255, 255, .4);
}
:where(body.hd-gradient-bg) .hdp-card .hdc {
	--hd-glass-bg: rgba(255, 255, 255, .06);
	--hd-glass-bg-hover: rgba(255, 255, 255, .1);
	--hd-glass-border: rgba(255, 255, 255, .12);
	--hd-glass-border-hover: rgba(255, 255, 255, .3);
}
.hdc:hover, .hdc:focus-visible {
	transform: translateY(-2px);
	background-color: var(--hd-glass-bg-hover, rgba(255, 255, 255, .1));
	border-color: var(--hd-glass-border-hover, rgba(255, 255, 255, .3));
	box-shadow: 0 10px 34px rgba(9, 30, 46, .28);
	color: inherit; text-decoration: none;
}
.hdc:active { transform: translateY(0); }
.hdc:focus-visible { outline: 2px solid var(--hdc-mint); outline-offset: 2px; }

.hdc__icon {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
	background: rgba(255, 255, 255, .08); color: var(--hdc-mint);
}
.hdc__icon svg { width: 26px; height: 26px; }
.hdc__icon img { width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: inherit; }
.hdc__glyph {
	display: block; width: 26px; height: 26px; background: currentColor;
	-webkit-mask: var(--hdp-i) center / contain no-repeat; mask: var(--hdp-i) center / contain no-repeat;
}
.hdc__initials, .hdc__num { font-weight: 800; font-size: 1rem; letter-spacing: .02em; }
.hdc__num { font-size: .9rem; }

.hdc__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.hdc__title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.hdc__sub { font-size: .875rem; line-height: 1.4; opacity: .75; }

.hdc__arrow { flex: 0 0 auto; font-size: 1.1rem; opacity: .5; transition: transform 200ms var(--hd-ease, ease), opacity 200ms var(--hd-ease, ease); }
.hdc:hover .hdc__arrow, .hdc:focus-visible .hdc__arrow { opacity: 1; transform: translateX(3px); }
.hdc--back:hover .hdc__arrow, .hdc--back:focus-visible .hdc__arrow { transform: translateX(-3px); }

/* Hervorgehoben (wie „Highlight“ in der Linkliste) */
.hdc--highlight { border-color: var(--hdc-mint); box-shadow: 0 0 0 1px rgba(6, 214, 160, .35), 0 0 28px rgba(6, 214, 160, .25); }

/* Kleine Karten für die zweite Reihe (weitere Plattformen) */
.hdc--small { gap: .75rem; padding: .6rem .9rem .6rem .6rem; border-radius: 14px; }
.hdc--small .hdc__icon { width: 38px; height: 38px; border-radius: 10px; }
.hdc--small .hdc__icon svg, .hdc--small .hdc__glyph { width: 21px; height: 21px; }
.hdc--small .hdc__title { font-size: .95rem; }

/* Episodenlisten (Übersicht nach Jahren, Gast-Seite) */
.hdlist--cards { gap: .6rem; margin-bottom: 1.5rem; }
.hdlist--cards .hdc__num { font-size: .82rem; }

/* Episodenseite: Karten unter dem Player, Blättern als Kartenpaar */
.hdep__cards { margin: .9rem 0 0; }
.hdep__pager.hdc-grid { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hdep-line); }
.hdep__pager.hdc-grid a { max-width: none; margin: 0; }

@media (max-width: 560px) {
	.hdc-grid--auto, .hdep__pager.hdc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
	.hdc { gap: .8rem; padding: .75rem 1rem .75rem .75rem; }
	.hdc-grid--2 { gap: .5rem; }
	.hdc--small { gap: .55rem; padding: .5rem .6rem .5rem .5rem; }
	.hdc--small .hdc__icon { width: 34px; height: 34px; }
	.hdc--small .hdc__title { font-size: .88rem; }
	.hdc--small .hdc__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hdc, .hdc__arrow { transition: none; }
	.hdc:hover, .hdc:focus-visible { transform: none; }
}