/*
Theme Name: Vantage Child (GEDASYS)
Description: Child-Theme fuer Vantage. Enthaelt das ueberarbeitete Design der Blog-Uebersicht in den GEDASYS-Farben. Benoetigt WordPress 5.5+ (get_template_part mit $args).
Author: GEDASYS
Template: vantage
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: vantage-child
*/

/* ==========================================================================
   Blog-Uebersicht (home.php) - Kartenlayout
   ========================================================================== */

.gedasys-blog-list {
	--gedasys-blue-dark: #286081;
	--gedasys-blue-light: #3ea0cf;
	--gedasys-navy: #0f2f3f;

	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Vantage stylt article.post (style.css:1251ff.) mit eigenem Rand, Abstaenden und
   Clearfix-Pseudoelementen. post_class() setzt diese Klasse weiterhin, daher hier zuruecksetzen.
   Die :before/:after-Reste waeren im Flex-Container sonst zusaetzliche Flex-Items. */
.gedasys-blog-list article.post {
	margin: 0;
}

.gedasys-blog-list article.post:before,
.gedasys-blog-list article.post:after {
	content: none;
}

/* --- Karte ---------------------------------------------------------------- */

/* Der :last-child-Zweig ist noetig, weil Vantage in style.css:1363 mit
   article.post:last-child { border-bottom: 0; padding-bottom: 0 } (0,2,1) zuschlaegt -
   sonst fehlen bei der untersten Karte der Rahmen unten und das untere Padding. */
.gedasys-blog-list article.gedasys-card,
.gedasys-blog-list article.gedasys-card:last-child {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.5rem;
	/* Der Rahmen ist immer vorhanden, nur transparent - so springt beim Hover nichts. */
	border: 2px solid transparent;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.gedasys-blog-list article.gedasys-card:hover,
.gedasys-blog-list article.gedasys-card:focus-within,
.gedasys-blog-list article.gedasys-card:last-child:hover,
.gedasys-blog-list article.gedasys-card:last-child:focus-within {
	border-color: var(--gedasys-hover-border);
}

/* --- Bild ----------------------------------------------------------------- */

.gedasys-card__media {
	flex: 0 0 240px;
	max-width: 240px;
	line-height: 0;
}

.gedasys-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.gedasys-card--no-media .gedasys-card__body {
	flex: 1 1 100%;
}

/* --- Text ----------------------------------------------------------------- */

.gedasys-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.gedasys-card__meta {
	margin: 0 0 0.4em;
	font-size: 0.8125em;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.gedasys-card__sep {
	margin: 0 0.4em;
}

.gedasys-card__title {
	margin: 0 0 0.4em;
	font-size: 1.5em;
	line-height: 1.25;
}

.gedasys-card__title a {
	text-decoration: none;
	border: 0;
}

/* "Stretched link": macht die gesamte Karte anklickbar, ohne <a> zu verschachteln. */
.gedasys-card__link:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* Die Kategorielinks liegen darueber und bleiben eigenstaendig klickbar. */
.gedasys-card__cats a {
	position: relative;
	z-index: 1;
}

/* the_excerpt() liefert <p>-Absaetze, daher Abstaende an den Kindern setzen. */
.gedasys-card__excerpt {
	margin: 0 0 0.75em;
	line-height: 1.6;
}

.gedasys-card__excerpt p {
	margin: 0 0 0.6em;
}

.gedasys-card__excerpt p:last-child {
	margin-bottom: 0;
}

.gedasys-card__more {
	display: inline-block;
	font-size: 0.875em;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.gedasys-card__arrow {
	display: inline-block;
	transition: transform 0.18s ease;
}

.gedasys-card:hover .gedasys-card__arrow {
	transform: translateX(0.25em);
}

/* --- Farbvarianten -------------------------------------------------------- */

/* Weiss */
.gedasys-card--white {
	--gedasys-hover-border: var(--gedasys-blue-light);
	background-color: #ffffff;
	color: #1a1a1a;
}

.gedasys-card--white .gedasys-card__title a,
.gedasys-card--white .gedasys-card__more {
	color: var(--gedasys-blue-dark);
}

.gedasys-card--white .gedasys-card__meta,
.gedasys-card--white .gedasys-card__meta a {
	color: #5c6b73;
}

.gedasys-card--white .gedasys-card__excerpt {
	color: #33383b;
}

.gedasys-card--white:hover .gedasys-card__title a {
	color: var(--gedasys-blue-light);
}

/* Dunkelblau - weisse Schrift, Kontrast ca. 6,3:1 */
.gedasys-card--dark {
	--gedasys-hover-border: var(--gedasys-blue-light);
	background-color: var(--gedasys-blue-dark);
	color: #ffffff;
}

.gedasys-card--dark .gedasys-card__title a,
.gedasys-card--dark .gedasys-card__excerpt,
.gedasys-card--dark .gedasys-card__more {
	color: #ffffff;
}

.gedasys-card--dark .gedasys-card__meta,
.gedasys-card--dark .gedasys-card__meta a {
	color: #cfe4ef;
}

.gedasys-card--dark:hover .gedasys-card__title a {
	color: #cfe9f7;
}

/* Hellblau - dunkles Navy statt Weiss, sonst waere der Kontrast nur ca. 2,6:1 */
.gedasys-card--light {
	--gedasys-hover-border: var(--gedasys-blue-dark);
	background-color: var(--gedasys-blue-light);
	color: var(--gedasys-navy);
}

.gedasys-card--light .gedasys-card__title a,
.gedasys-card--light .gedasys-card__excerpt,
.gedasys-card--light .gedasys-card__more {
	color: var(--gedasys-navy);
}

.gedasys-card--light .gedasys-card__meta,
.gedasys-card--light .gedasys-card__meta a {
	color: #12414f;
}

.gedasys-card--light:hover .gedasys-card__title a {
	color: #06212e;
}

/* --- Tastaturbedienung ---------------------------------------------------- */

.gedasys-card__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Blaetternavigation --------------------------------------------------- */

.gedasys-blog-list .navigation {
	margin-top: 0.75rem;
}

/* --- Responsiv ------------------------------------------------------------ */

@media (max-width: 782px) {
	.gedasys-card {
		gap: 1.125rem;
		padding: 1.125rem;
	}

	.gedasys-card__media {
		flex-basis: 140px;
		max-width: 140px;
	}

	.gedasys-card__title {
		font-size: 1.25em;
	}
}

@media (max-width: 600px) {
	.gedasys-blog-list {
		gap: 0.875rem;
	}

	.gedasys-card {
		gap: 0.875rem;
		padding: 0.875rem;
	}

	.gedasys-card__media {
		flex-basis: 90px;
		max-width: 90px;
	}

	.gedasys-card__title {
		font-size: 1.0625em;
	}

	.gedasys-card__meta {
		font-size: 0.75em;
	}

	.gedasys-card__excerpt {
		font-size: 0.9375em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gedasys-card,
	.gedasys-card__arrow {
		transition: none;
	}

	.gedasys-card:hover .gedasys-card__arrow {
		transform: none;
	}
}