/* ==========================================================================
   Autorenbox und Trainer-Profilseiten
   ==========================================================================
   Liegt bewusst im Plugin und nicht im Theme: die functions.php des Themes
   ist gesperrt, und main.css darf niemand anfassen. Eingebunden wird die
   Datei aus includes/autor.php, abhaengig von shouraki-main.

   Alle Farben, Abstaende und Schriften kommen aus den Tokens in main.css.
   Keine eigenen Hex-Werte, keine eigenen Pixelgroessen. Ausrichtung
   durchgehend linksbuendig, wie es die Gestaltungslinie verlangt.
   ========================================================================== */

.sk-autor {
	margin-block: var(--sk-space-xl);
	padding: var(--sk-space-lg);
	background: var(--sk-color-panel);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
}

.sk-autor__eyebrow {
	margin: 0 0 var(--sk-space-sm);
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-eyebrow);
	letter-spacing: var(--sk-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sk-color-gold);
}

.sk-autor__karte {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-space-md);
	align-items: start;
}

/* Ab 540px steht das Bild links. Darunter, also auf jedem Telefon bis
   hinunter zu 320px, stapeln sich beide Spalten. */
@media (min-width: 540px) {
	.sk-autor__karte {
		grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
		gap: var(--sk-space-lg);
		align-items: center;
	}
}

.sk-autor__bild {
	min-width: 0;
}

.sk-autor__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	max-height: none;
	object-fit: cover;
	object-position: var(--sk-fokus, 50% 30%);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
}

/* Ohne gepflegtes Foto dieselbe Kachel wie sonst auf der Website, mit den
   Initialen. Bewusst kein Symbolfoto und kein erzeugtes Bild. */
.sk-autor__platzhalter .sk-ph__label {
	font-size: var(--sk-fs-h3);
	letter-spacing: 0.08em;
	color: var(--sk-color-text-muted);
}

.sk-autor__text {
	min-width: 0;
}

.sk-autor__text > * {
	margin-block: 0;
}

.sk-autor__text > * + * {
	margin-block-start: var(--sk-space-2xs);
}

.sk-autor__name {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-h4, var(--sk-fs-h3));
	line-height: var(--sk-lh-heading);
	color: var(--sk-color-heading);
}

.sk-autor__name-link {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid rgba(var(--sk-color-gold-rgb), 0.35);
	transition: border-color var(--sk-transition), color var(--sk-transition);
}

.sk-autor__name-link:hover,
.sk-autor__name-link:focus-visible {
	color: var(--sk-color-gold);
	border-block-end-color: var(--sk-color-gold);
}

.sk-autor__name-link:focus-visible {
	outline: var(--sk-focus-ring);
	outline-offset: var(--sk-focus-offset);
}

.sk-autor__rolle {
	font-size: var(--sk-fs-small);
	letter-spacing: 0.04em;
	color: var(--sk-color-text-dim);
}

.sk-autor__bio {
	font-size: var(--sk-fs-base);
	line-height: var(--sk-lh-body);
	color: var(--sk-color-text-muted);
	max-width: var(--sk-measure-tight, 62ch);
}

.sk-autor__stand {
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
}

/* Die Box steht seit dem 21.09.2026 als letztes Element vor dem Footer,
   ausgegeben an der Aktion get_footer. Dort greift das Raster von
   .entry-content nicht mehr, deshalb traegt sie einen eigenen Wrapper mit
   .sk-container. Der Abstand gehoert an den Wrapper, nicht an die Box:
   sonst stossen zwei Aussenabstaende aufeinander. */
.sk-autor-schluss {
	margin-block: var(--sk-space-2xl) var(--sk-space-3xl);
}

.sk-autor-schluss .sk-autor {
	margin-block: 0;
}

/* ==========================================================================
   Profilseite eines Trainers
   ========================================================================== */

.sk-profil__kopf {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-space-lg);
	align-items: start;
	margin-block-end: var(--sk-space-xl);
}

@media (min-width: 640px) {
	.sk-profil__kopf {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	}
}

.sk-profil__foto {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: var(--sk-fokus, 50% 30%);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
}

.sk-profil__rolle {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-eyebrow);
	letter-spacing: var(--sk-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sk-color-gold);
}

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

.sk-profil__kurs::before {
	content: none;
}

.sk-profil__kurs a {
	color: var(--sk-color-gold);
	text-decoration: none;
	border-block-end: 1px solid rgba(var(--sk-color-gold-rgb), 0.35);
}

.sk-profil__kurs a:focus-visible {
	outline: var(--sk-focus-ring);
	outline-offset: var(--sk-focus-offset);
}