/*
 * Mitglieder und ihre Autos (inc/garage.php): Markenfilter, Fotoraster der Mitglieder, Fahrzeugseite,
 * Fahrerprofil mit Datenschildern, Formularseiten.
 * Seitenkopf, Galerie und Pfeil-Link kommen aus seiten.css und uscd.css.
 */

/* Abschnitte der dynamischen Seiten: volle Breite, Inhalt in 78rem */
.uscd-g-abschnitt {
	padding: calc(var(--uscd-abschnitt) * 0.85) var(--uscd-rand);
}

.uscd-g-innen {
	max-width: 78rem;
	margin-inline: auto;
}

.uscd-g-abschnitt h2 {
	margin-top: 0;
}

:is(.uscd-g-abschnitt--navy, .uscd-g-abschnitt--nacht) {
	color: #fff;
}

:is(.uscd-g-abschnitt--navy, .uscd-g-abschnitt--nacht) :is(h2, h3) {
	color: #fff;
}

:is(.uscd-g-abschnitt--navy, .uscd-g-abschnitt--nacht) .uscd-einleitung {
	color: var(--uscd-stahl-hell);
}

.uscd-g-abschnitt .uscd-einleitung {
	margin-top: 1rem;
}

/* Baujahr hinter dem Autonamen: Oswald mit festen Ziffern, auf Dunkel in Orange */
.uscd-baujahr {
	font-family: var(--uscd-oswald);
	font-weight: 500;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--uscd-stahl);
}

:is(.has-navy-background-color, .has-nacht-background-color) .uscd-baujahr {
	color: var(--uscd-orange);
}

/* Markenfilter: klebt oben wie die Sprungleiste der Inhaltsseiten */
.uscd-markenleiste {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 15;
	padding-inline: var(--uscd-rand);
	background: var(--uscd-nacht);
	border-bottom: 1px solid rgba(169, 187, 208, 0.18);
}

.uscd-markenleiste__liste {
	display: flex;
	gap: clamp(1.25rem, 0.5rem + 2vw, 2.4rem);
	max-width: 78rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.uscd-markenleiste__liste::-webkit-scrollbar {
	display: none;
}

.uscd-markenleiste__liste > li {
	flex: none;
	margin: 0;
}

.uscd-markenleiste__liste a {
	display: block;
	height: var(--uscd-sprung-h);
	line-height: var(--uscd-sprung-h);
	font-family: var(--uscd-oswald);
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--uscd-stahl-hell);
	transition: color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.uscd-markenleiste__liste a[aria-current] {
	color: #fff;
	box-shadow: inset 0 -3px 0 var(--uscd-orange);
}

@media (hover: hover) {
	.uscd-markenleiste__liste a:hover {
		color: #fff;
	}
}

.uscd-markenleiste__liste a:focus-visible {
	outline-offset: -3px;
}

.uscd-markenleiste__zahl {
	margin-left: 0.2em;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

.uscd-mitglieder-abschnitt {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--uscd-sprung-h));
}

/* Fotoraster der Mitglieder: Autofoto, unten links ragt das Profilfoto hinein, daneben Nickname und Autos */
.uscd-mitglieder {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uscd-mitglieder--reihe {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.uscd-mitglied {
	position: relative;
	margin: 0;
}

.uscd-mitglied[hidden] {
	display: none;
}

.uscd-mitglied__foto {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 4px;
	background: var(--uscd-nacht);
}

.uscd-mitglied__bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.uscd-mitglied:hover .uscd-mitglied__bild {
	transform: scale(1.04);
}

.uscd-mitglied__foto--leer,
.uscd-autokachel__foto--leer {
	background: linear-gradient(160deg, var(--uscd-navy) 0%, var(--uscd-nacht) 100%);
	box-shadow: inset 0 0 0 1px rgba(169, 187, 208, 0.22);
}

.uscd-mitglied__foto--leer span,
.uscd-autokachel__foto--leer span {
	font-family: var(--uscd-oswald);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uscd-stahl-hell);
}

.uscd-mitglied__text {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: start;
	padding: 0.7rem 0 0 0.75rem;
}

.uscd-mitglied__text:not(:has(.uscd-mitglied__avatar)) {
	grid-template-columns: minmax(0, 1fr);
	padding-left: 0;
}

.uscd-mitglied__avatar {
	position: relative;
	z-index: 1;
	grid-row: 1 / span 2;
	width: 4.5rem;
	height: 4.5rem;
	margin-top: -2.6rem;
	object-fit: cover;
	border: 3px solid var(--uscd-navy);
	border-radius: 6px;
	background: var(--uscd-nacht);
}

h3.uscd-mitglied__name {
	margin: 0;
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.55rem);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	overflow-wrap: anywhere;
}

.uscd-mitglied__link {
	color: inherit;
	text-decoration: none;
}

/* Die ganze Karte führt zum Profil, die Autos darunter zu ihren eigenen Seiten */
.uscd-mitglied__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.uscd-mitglied__link:focus-visible {
	outline: none;
}

.uscd-mitglied:has(.uscd-mitglied__link:focus-visible) {
	outline: 3px solid var(--uscd-orange);
	outline-offset: 6px;
	border-radius: 4px;
}

.uscd-mitglied:hover .uscd-mitglied__name {
	text-decoration: underline;
	text-decoration-color: var(--uscd-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.uscd-mitglied__autos {
	position: relative;
	z-index: 2;
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--uscd-stahl-hell);
}

.uscd-mitglied__autos li {
	margin: 0;
}

.uscd-mitglied__autos a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.35);
}

.uscd-mitglied__autos a:hover {
	text-decoration-color: var(--uscd-orange);
}

.uscd-mitglied__leer {
	margin: 0.4rem 0 0;
	color: var(--uscd-stahl-hell);
}

/* Fotokacheln einzelner Autos (Fahrzeugseite) */
.uscd-autokacheln {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uscd-autokachel {
	margin: 0;
}

.uscd-autokachel a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.uscd-autokachel__foto {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 4px;
	background: var(--uscd-nacht);
}

.uscd-autokachel__bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.uscd-autokachel a:hover .uscd-autokachel__bild {
	transform: scale(1.04);
}

.uscd-autokachel__name {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--uscd-oswald);
	font-weight: 600;
	font-size: 1.175rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.uscd-autokachel a:hover .uscd-autokachel__name {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.uscd-autokachel__fahrer {
	display: block;
	margin-top: 0.15rem;
	font-size: 1.0625rem;
	color: var(--uscd-stahl);
}

:is(.has-navy-background-color, .has-nacht-background-color) .uscd-autokachel__fahrer {
	color: var(--uscd-stahl-hell);
}

/* Datenschild im Profil: Foto links, rechts auf Nachtblau mit roter Signalkante das Baujahr in Orange */
.uscd-buehne {
	overflow: hidden;
	background: var(--uscd-nacht);
	border-radius: 4px;
	color: #fff;
}

.uscd-buehne__foto {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--uscd-nacht);
}

.uscd-buehne__foto > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.uscd-buehne__bild {
	display: block;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.uscd-buehne__foto:hover .uscd-buehne__bild {
	transform: scale(1.04);
}

.uscd-buehne__ohne-foto {
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, var(--uscd-navy) 0%, var(--uscd-nacht) 100%);
}

.uscd-buehne__ohne-foto span {
	font-family: var(--uscd-oswald);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uscd-stahl-hell);
}

.uscd-buehne__daten {
	padding: 1.15rem clamp(1.1rem, 0.8rem + 1vw, 1.6rem) 1.3rem;
	border-top: 3px solid var(--uscd-rot);
}

.uscd-buehne__kopf {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.uscd-buehne__jahr {
	flex: none;
	margin: 0;
	font-family: var(--uscd-oswald);
	font-weight: 600;
	font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem);
	line-height: 1.1;
	color: var(--uscd-orange);
	font-variant-numeric: tabular-nums;
}

.uscd-buehne__name {
	min-width: 0;
}

h3.uscd-buehne__titel {
	margin: 0;
	font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem);
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}

.uscd-buehne__titel a {
	color: inherit;
	text-decoration: none;
}

.uscd-buehne__titel a:hover {
	text-decoration: underline;
	text-decoration-color: var(--uscd-orange);
	text-decoration-thickness: 2px;
}

.uscd-buehne__spitzname {
	margin: 0.25rem 0 0;
	font-style: italic;
	color: var(--uscd-stahl-hell);
}

.uscd-buehne__werte {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.5rem;
	margin: 1rem 0 0;
	border-top: 1px solid rgba(169, 187, 208, 0.22);
}

.uscd-buehne__werte > div {
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(169, 187, 208, 0.22);
}

.uscd-buehne__werte dt {
	font-family: var(--uscd-oswald);
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uscd-stahl-hell);
}

.uscd-buehne__werte dd {
	margin: 0.1rem 0 0;
	font-family: var(--uscd-oswald);
	font-weight: 500;
	font-size: 1.175rem;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.uscd-buehne__link {
	margin: 1.1rem 0 0;
}

.uscd-stellplaetze {
	display: grid;
	gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

.uscd-buehne--stellplatz {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.uscd-buehne--stellplatz .uscd-buehne__foto {
	aspect-ratio: auto;
	min-height: 20rem;
}

.uscd-buehne--stellplatz .uscd-buehne__daten {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Ohne Foto: nur das Datenschild, keine leere Bildspalte */
.uscd-buehne--ohne-foto.uscd-buehne--stellplatz {
	grid-template-columns: minmax(0, 1fr);
}

.uscd-zurueck {
	margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important;
}

.uscd-eigenes-profil.uscd-g-abschnitt {
	padding-block: 1.5rem;
}

.uscd-eigenes-profil .uscd-g-innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.uscd-eigenes-profil p {
	margin: 0;
	font-weight: 700;
}

.uscd-eigenes-profil .wp-block-buttons {
	gap: 0.75rem;
}

/* Seitenkopf: ohne Foto Nachtblau; Fahrzeugseite und Profil */
.uscd-seitenkopf--ohne-foto.wp-block-cover {
	background: var(--uscd-nacht);
}

.uscd-seitenkopf__termin a {
	color: #fff;
	text-decoration-color: var(--uscd-orange);
}

.uscd-seitenkopf__avatar {
	display: block;
	width: 5.5rem;
	height: 5.5rem;
	margin-bottom: 1.1rem;
	object-fit: cover;
	border: 2px solid #fff;
	border-radius: 6px;
}

/* Seitenkopf der Mitgliederseite: Text links, das Vereinskennzeichen am Charger-Heck bleibt hell */
.uscd-seitenkopf--garage .wp-block-cover__background {
	background:
		linear-gradient(90deg, rgba(8, 26, 45, 0.92) 0%, rgba(8, 26, 45, 0.74) 30%, rgba(8, 26, 45, 0.16) 50%, rgba(8, 26, 45, 0) 66%),
		linear-gradient(0deg, rgba(8, 26, 45, 0.6) 0%, rgba(8, 26, 45, 0) 26%) !important;
}

.uscd-seitenkopf--garage .uscd-seitenkopf__einleitung {
	max-width: 30em;
}

/* Kurzer Seitenkopf über Formularen (Profil bearbeiten, Anmelden, Registrieren, Konto, Meine Autos) */
.uscd-seitenkopf--kurz.wp-block-cover {
	min-height: clamp(19rem, 38svh, 25rem);
}

/* Auto ohne Foto: knapper Kopf, dafür das Foto des Fahrers größer */
.uscd-seitenkopf--auto.uscd-seitenkopf--kurz.wp-block-cover {
	min-height: 0;
}

.uscd-seitenkopf--auto.uscd-seitenkopf--kurz .uscd-seitenkopf__avatar {
	width: 7.5rem;
	height: 7.5rem;
}

/* Formularseiten: Formular unter dem kurzen Seitenkopf. Die Felder selbst gestaltet plugins.css. */
.uscd-seite .uscd-formular {
	padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) calc(var(--uscd-abschnitt) * 0.85);
}

/* Die Formularspalte steht auf der Inhaltskante, bündig mit dem Text im Seitenkopf.
   Ultimate Member setzt die Formularbreite per Inline-Stil (450px), hier füllt es die Spalte. */
.uscd-seite .uscd-formular > * {
	margin-left: max(0px, (100% - 78rem) / 2) !important;
	margin-right: auto !important;
}

.uscd-formular .um {
	max-width: min(100%, 36rem) !important;
}

.uscd-formular--breit .um {
	max-width: min(100%, 52rem) !important;
}

.uscd-formular__hinweis {
	margin-top: 2rem !important;
	padding-top: 1.25rem;
	border-top: 1px solid var(--uscd-linie);
	color: var(--uscd-stahl);
}

/* Fahrzeugseite: Datenblatt und Geschichte */
.uscd-auto__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 3rem clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}


.uscd-datenblatt {
	margin: 1.5rem 0 0;
	border-top: 2px solid var(--uscd-navy);
}

.uscd-datenblatt > div {
	display: grid;
	grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 3fr);
	gap: 1rem;
	align-items: baseline;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--uscd-linie);
}

.uscd-datenblatt dt {
	font-family: var(--uscd-oswald);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uscd-stahl);
}

.uscd-datenblatt dd {
	margin: 0;
	font-family: var(--uscd-oswald);
	font-weight: 500;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	color: var(--uscd-navy);
	font-variant-numeric: tabular-nums;
}

.uscd-auto__geschichte p {
	max-width: 38em;
}

.uscd-auto-fotos .uscd-galerie {
	margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) !important;
}

/* Am Steuer: neben dem Datenblatt, solange es keine Geschichte gibt */
.uscd-auto__fahrer .uscd-fahrerkarte__bild {
	box-shadow: none;
}

/* Am Steuer */
.uscd-fahrerkarte {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.5rem clamp(1.5rem, 1rem + 2vw, 2.5rem);
	align-items: start;
}

.uscd-fahrerkarte__bild {
	width: clamp(5.5rem, 4rem + 4vw, 7.5rem);
	height: clamp(5.5rem, 4rem + 4vw, 7.5rem);
	object-fit: cover;
	border-radius: 6px;
	box-shadow: var(--uscd-schatten);
}

.uscd-fahrerkarte__text > * {
	margin: 0;
}

.uscd-fahrerkarte__name {
	margin-top: 0.75rem !important;
	font-family: var(--uscd-oswald);
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1.1;
	text-transform: uppercase;
}

.uscd-fahrerkarte__name a {
	color: var(--uscd-navy);
	text-decoration: none;
}

.uscd-fahrerkarte__seit {
	margin-top: 0.3rem !important;
	color: var(--uscd-stahl);
}

.uscd-fahrerkarte__ueber {
	margin-top: 1rem !important;
	max-width: 38em;
}

.uscd-fahrerkarte__text .uscd-pfeil-link {
	margin-top: 1.25rem !important;
}

.uscd-fahrerkarte__weitere.wp-block-heading {
	margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 1.1rem;
	font-size: 1.3rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Mehr Autos aus dem Verein */
.uscd-auto-mehr__kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem 2rem;
	margin-bottom: 1.5rem;
}

.uscd-auto-mehr__kopf > * {
	margin: 0;
}

/* Tablet */
@media (max-width: 960px) {
	.uscd-mitglieder,
	.uscd-mitglieder--reihe,
	.uscd-autokacheln {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.uscd-auto__raster,
	.uscd-buehne--stellplatz {
		grid-template-columns: minmax(0, 1fr);
	}

	.uscd-buehne--stellplatz .uscd-buehne__foto {
		aspect-ratio: 3 / 2;
		min-height: 0;
	}

}

/* Handy */
@media (max-width: 600px) {
	.uscd-mitglieder {
		grid-template-columns: minmax(0, 1fr);
	}

	.uscd-autokacheln {
		gap: 1.25rem 0.6rem;
	}

	.uscd-markenleiste__liste {
		padding-right: 2.5rem;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
	}

	.uscd-markenleiste__liste a {
		font-size: 1.0625rem;
	}

	.uscd-buehne__werte {
		grid-template-columns: minmax(0, 1fr);
	}

	.uscd-fahrerkarte {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Hochkant: die Rückleuchten ins Bild, der Text liegt unten auf dem Verlauf */
	.uscd-seitenkopf--garage .wp-block-cover__image-background {
		object-position: 74% 50% !important;
	}

	.uscd-seitenkopf--garage .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(8, 26, 45, 0.96) 0%, rgba(8, 26, 45, 0.86) 52%, rgba(8, 26, 45, 0) 82%) !important;
	}
}