/*
Theme Name: Wechselzone
Theme URI: https://example.com/wechselzone
Author: G. Wahl
Description: Sportliches Block-Theme für Triathlon- und Wettkampfberichte. Anthrazit/Grau mit Signal-Akzent, Swim-Bike-Run-Piktogrammen, Hero-Banner, Disziplinen-Kacheln und einer Rennbericht-Vorlage mit Wettkampf-Steckbrief.
Version: 1.0.4
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wechselzone
Tags: blog, block-patterns, full-site-editing, wide-blocks, custom-colors, editor-style, style-variations
*/

/* ---------- Grundlagen ---------- */

.wp-site-blocks > * {
	margin-block-start: 0;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.15s ease;
}

.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Links in dunklen Bereichen */
.has-dark-background-color a:where(:not(.wp-element-button)),
.has-dark-2-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent);
}

.has-dark-background-color a:where(:not(.wp-element-button)):hover,
.has-dark-2-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--light);
}

/* ---------- Kopfbereich ---------- */

.wz-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

.wz-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--light);
}

/* ---------- Kleine Label ("Kicker") ---------- */

.wz-kicker {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.wz-kicker::before {
	content: "";
	width: 2rem;
	height: 3px;
	background: currentColor;
	flex-shrink: 0;
}

.has-dark-background-color .wz-kicker,
.has-dark-2-background-color .wz-kicker,
.wp-block-cover .wz-kicker {
	color: var(--wp--preset--color--accent);
}

.has-text-align-center.wz-kicker {
	justify-content: center;
}

/* ---------- Swim · Bike · Run Streifen ---------- */

.wz-tristripe {
	height: 6px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--light-2) 0 33.33%,
		var(--wp--preset--color--accent) 33.33% 66.66%,
		var(--wp--preset--color--dark-2) 66.66% 100%);
	border: 0;
	margin: 0;
}

/* ---------- Hero mit schräger Kante ---------- */

.wz-hero {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.wz-hero h1 {
	line-height: 0.95;
}

.wz-hero h1 em {
	font-style: normal;
	color: var(--wp--preset--color--accent);
}

/* ---------- Piktogramme ---------- */

.wz-icon {
	display: inline-flex;
	line-height: 0;
}

.wz-icon svg {
	width: 3rem;
	height: 3rem;
}

.wz-icon--sm svg {
	width: 1.75rem;
	height: 1.75rem;
}

.wz-icon--accent {
	color: var(--wp--preset--color--accent);
}

.wz-icons-row {
	display: flex;
	gap: 1rem;
	align-items: center;
}

/* ---------- Karten (Beitragsliste) ---------- */

.wz-card {
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	border-top: 4px solid transparent;
}

.wz-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(31, 34, 38, 0.12);
	border-top-color: var(--wp--preset--color--accent);
}

.wz-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

/* Bild immer komplett zeigen (kein Zuschnitt), freie Fläche anthrazit */
.wz-card .wp-block-post-featured-image img {
	object-fit: contain !important;
	background-color: var(--wp--preset--color--dark);
}

.wz-card .wp-block-read-more {
	margin-top: auto;
	text-decoration: none;
}

/* Kategorie als Pille */
.wz-pill a {
	display: inline-block;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--light);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.2rem 0.6rem;
	border-radius: 2px;
}

.wz-pill a:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--dark);
}

.wz-pill .wp-block-post-terms__separator {
	display: none;
}

.wz-pill a + a,
.wz-pill span + a {
	margin-left: 0.35rem;
}

/* ---------- Beitragsliste ---------- */

.wz-list {
	list-style: none;
	padding: 0;
}

.wz-list-item {
	position: relative;
	border-left: 4px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wz-list-item:hover {
	border-left-color: var(--wp--preset--color--accent);
	box-shadow: 0 10px 28px rgba(31, 34, 38, 0.1);
}

/* Ganze Zeile anklickbar über den Titel-Link */
.wz-list-item .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wz-list-item .wz-pill a {
	position: relative;
	z-index: 1;
}

.wz-list-thumb {
	flex-shrink: 0;
	margin: 0;
	overflow: hidden;
}

.wz-list-thumb img {
	object-fit: contain !important;
	background-color: var(--wp--preset--color--dark);
}

.wz-list-body {
	flex: 1;
	min-width: 0;
}

.wz-list-body .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wz-list-arrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
	transition: transform 0.2s ease;
}

.wz-list-item:hover .wz-list-arrow {
	transform: translateX(4px);
}

@media (max-width: 600px) {
	.wz-list-item {
		flex-wrap: wrap !important;
	}

	.wz-list-thumb {
		width: 100% !important;
	}

	.wz-list-arrow {
		display: none;
	}
}

/* ---------- Disziplinen-Kacheln ---------- */

.wz-discipline {
	transition: transform 0.25s ease;
	border-bottom: 4px solid var(--wp--preset--color--accent);
}

.wz-discipline:hover {
	transform: translateY(-4px);
}

/* ---------- Zahlen / Statistik ---------- */

.wz-stat-number {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

/* ---------- Wettkampf-Steckbrief ---------- */

.wp-block-table.wz-factsheet table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.wz-factsheet td {
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.6rem 0;
	vertical-align: top;
}

.wp-block-table.wz-factsheet tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.wz-factsheet td:first-child {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--light-2);
	width: 38%;
	padding-right: 1rem;
}

.wp-block-table.wz-factsheet td:last-child {
	font-family: var(--wp--preset--font-family--mono);
}

.wz-time {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Im Steckbrief ersetzt das Stoppuhr-Icon den Strich */
.wz-factsheet-box .wz-kicker::before {
	display: none;
}

/* Fazit-Box */
.wz-verdict {
	border-left: 4px solid var(--wp--preset--color--accent);
}

/* ---------- Beitrag ---------- */

.wz-post-hero {
	background-color: var(--wp--preset--color--dark);
}

.wz-post-hero .wp-block-post-title {
	line-height: 1;
}

.wp-block-post-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.wp-block-post-navigation-link a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.04em;
}

/* ---------- Mobil ---------- */

@media (max-width: 781px) {
	.wz-hero {
		clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wz-card,
	.wz-list-item,
	.wz-list-arrow,
	.wz-discipline,
	.wp-block-button__link {
		transition: none;
	}
}