/* ==========================================================================
   Trainerkarten auf /kampfsportschule/ ([sk_trainer_grid])
   ==========================================================================
   Karte mit Profil: ganze Karte klickbar ueber einen Link auf dem Titel,
   der per ::after auf die Karte gestreckt wird (kein verschachtelter Link).
   Kurs-Chips liegen darueber und bleiben einzeln antippbar. Karte ohne
   Profil, aber mit Kurzbio: aufklappbar. Sonst keine Scheinaffordanz.

   Alle Werte kommen aus den Tokens in main.css.
   ========================================================================== */

.sk-trainer-karte__link {
	color: inherit;
	text-decoration: none;
}

.sk-card--link .sk-card__body {
	/* main.css setzt position: relative; damit wuerde die Linkflaeche nur den
	   Textteil decken. Static laesst sie bis an die Kartenkante reichen. */
	position: static;
}

.sk-trainer-karte__link::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Ueber dem Kartenfoto (.sk-card__media), unter den Kurs-Chips. */
	z-index: 2;
}

/* Der Fokusring sitzt auf der ganzen Karte, nicht nur auf dem Namen. */
.sk-trainer-karte__link:focus-visible {
	outline: none;
}

.sk-card--link:has(.sk-trainer-karte__link:focus-visible) {
	outline: var(--sk-focus-ring);
	outline-offset: var(--sk-focus-offset);
}

.sk-card--link {
	cursor: pointer;
}

.sk-trainer-karte__kurse {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk-trainer-karte__kurse li {
	margin: 0;
	padding: 0;
}

.sk-trainer-karte__chip {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--sk-space-3xs) var(--sk-space-xs);
	font-size: var(--sk-fs-small);
	line-height: 1.3;
	color: var(--sk-color-text);
	text-decoration: none;
	border: 1px solid rgba(var(--sk-color-gold-rgb), 0.55);
	border-radius: var(--sk-radius-sm);
	transition:
		border-color var(--sk-transition),
		background-color var(--sk-transition);
}

.sk-trainer-karte__chip:hover,
.sk-trainer-karte__chip:focus-visible {
	color: var(--sk-color-heading);
	border-color: var(--sk-color-gold);
	background-color: rgba(var(--sk-color-gold-rgb), 0.12);
}

.sk-trainer-karte__mehr {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-3xs);
	margin-block-start: auto !important;
	padding-block-start: var(--sk-space-2xs) !important;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sk-color-gold);
}

.sk-trainer-karte__chevron {
	flex: none;
	transition: transform var(--sk-transition);
}

.sk-card--link:hover .sk-trainer-karte__chevron,
.sk-card--link:focus-within .sk-trainer-karte__chevron {
	transform: translateX(0.25rem);
}

/* Aufklappbare Kurzbio ohne Profil */
.sk-trainer-karte__bio {
	margin-block-start: auto !important;
	border-block-start: 1px solid rgba(var(--sk-color-gold-rgb), 0.28);
}

.sk-trainer-karte__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-space-2xs);
	min-height: 2.75rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sk-color-gold);
}

.sk-trainer-karte__summary::-webkit-details-marker {
	display: none;
}

.sk-trainer-karte__bio[open] .sk-trainer-karte__chevron {
	transform: rotate(90deg);
}

.sk-trainer-karte__bio > p {
	margin: 0 0 var(--sk-space-2xs);
}

@media (prefers-reduced-motion: reduce) {
	.sk-trainer-karte__chevron,
	.sk-trainer-karte__chip {
		transition: none;
	}

	.sk-card--link:hover .sk-trainer-karte__chevron,
	.sk-card--link:focus-within .sk-trainer-karte__chevron {
		transform: none;
	}
}

/* Block "Kurse mit <Name>" auf dem Trainerprofil: gleiche Chips wie auf den Karten */
.sk-trainer-kurse {
	margin-block-start: var(--sk-space-xl);
}

.sk-trainer-kurse .sk-trainer-karte__kurse {
	margin-block-start: var(--sk-space-sm);
}