/* Blog-Uebersicht und Kategorie-Archive (Karten, Raster, Seitenzahlen).
   Vorher als <style> in den Solene-Vorlagen blog-standard.php und archive.php,
   seit T58 eine Datei fuer beide. */
/* ═══════════════════════════════════════════════
   BLOG OVERVIEW — HAC & ELEKTRO LAIMER
   Hauptfarbe: #BAC6AE  |  Sekundär: #1D89F6
   ═══════════════════════════════════════════════ */

:root {
	--hac-bg:    var(--hac-grund, #FAF9F6);
	--hac-card:  var(--hac-flaeche-erhoeht, #FFFFFF);
	--hac-text:  var(--hac-schrift-stark, var(--hac-farbe-text-dunkel, #1a1a1a)); /* Titel, Namen */
	--hac-muted: var(--hac-schrift-leise, var(--hac-farbe-text-leise, #6b6b6b));  /* Datum – vorher #84847c, 3,8:1 */
	--hac-line:  var(--hac-linie, #E4E0D8);
	--hac-main:  #BAC6AE;    /* fest: Hauptfarbe: Salbeigrün */
	--hac-dark:  var(--hac-farbe-gruen-tief, #4d5f3b);  /* Kategorie, fest: Schrift auf dem gruenen Schild */    /* Dunkel-Variante für Text auf Salbeigrün */
	--hac-acc:   var(--hac-farbe-blau, #1d89f6);         /* Linien, Rahmen */
	--hac-acc-text: var(--hac-schrift-blau, var(--hac-farbe-blau-dunkel, #0363c3)); /* Blau als Schrift – #1d89f6 hat nur 3,5:1 */    /* Sekundärfarbe: Blau */
	--hac-sans:  'Roboto', 'Trebuchet MS', Arial, sans-serif;
	--hac-serif: 'Roboto Slab', 'Trebuchet MS', serif;
}

.hac-blog-wrap {
	background: var(--hac-bg);
	max-width: 1240px;
	margin: 0 auto;
	padding: 60px 32px 96px;
	box-sizing: border-box;
}

/* ────────────────────────────────────────────
   TOP ROW  (2fr + 1fr)
──────────────────────────────────────────── */
.hac-top-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 28px;
	margin-bottom: 28px;
}

/* ────────────────────────────────────────────
   CARD BASE  (gilt für alle Karten)
──────────────────────────────────────────── */
.hac-card {
	background: var(--hac-card);
	box-shadow: 0 2px 14px rgba(0,0,0,.07);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .3s, transform .3s;
}

.hac-card:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,.13);
	transform: translateY(-3px);
}

/* ── Bild (16:9 überall – kein manuelles Zuschneiden) ── */
.hac-card__img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	flex-shrink: 0;
}

.hac-card__img .hac-img,
.hac-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s ease;
}

.hac-card:hover .hac-card__img .hac-img,
.hac-card:hover .hac-card__img img {
	transform: scale(1.05);
}

.hac-card__img--empty {
	aspect-ratio: 16 / 9;
	background: var(--hac-flaeche, #d4e4cf);
}

/* ── Content-Bereich ── */
.hac-card__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Breitere Karte: etwas mehr Luft */
.hac-card--wide .hac-card__body {
	padding: 24px 28px 28px;
}

/* ── Meta (Kategorie + Datum) ── */
.hac-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.hac-card__cat {
	font-family: var(--hac-sans);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	padding: 3px 9px;
	background: var(--hac-main);
	color: var(--hac-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s;
}

.hac-card__cat:hover { background: var(--hac-acc); color: #fff; } /* fest: Weiss auf Blau */

.hac-card__date {
	font-family: var(--hac-sans);
	font-size: 10.5px;
	color: var(--hac-muted);
}

/* ── Titel ── */
.hac-card__title {
	font-family: var(--hac-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.35;
	color: var(--hac-text);
	margin: 0 0 10px;
	display: block;
	transition: color .2s;
}

/* Breite Karte = größerer Titel */
.hac-card--wide .hac-card__title {
	font-size: clamp(18px, 1.8vw, 22px);
	margin-bottom: 12px;
}

.hac-card:hover .hac-card__title { color: var(--hac-acc-text); }

/* ── Excerpt ── */
.hac-card__excerpt {
	font-family: var(--hac-sans);
	font-size: 13px;
	line-height: 1.7;
	color: var(--hac-schrift, #4d504a);
	margin: 0 0 18px;
	flex: 1;
}

/* ── Overlay-Link (deckt die ganze Karte ab, SEO-Titel im sr-only) ── */
.hac-card {
	position: relative;
}

.hac-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	outline-offset: 3px;
}

/* sr-only: für Screen-Reader & SEO, visuell unsichtbar */
.hac-card__link .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Kategorie-Link über dem Overlay */
.hac-card__cat {
	position: relative;
	z-index: 2;
}

/* ── Weiterlesen (dekorativ, nicht klickbar) ── */
.hac-read-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--hac-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hac-text);
	border-bottom: 1.5px solid var(--hac-text);
	padding-bottom: 2px;
	align-self: flex-start;
	transition: color .2s, border-color .2s;
	pointer-events: none; /* Overlay-Link übernimmt den Klick */
}

.hac-read-more::after { content: '→'; transition: transform .2s; }

/* Hover-Effekte via übergeordneter Karte */
.hac-card:hover .hac-read-more { color: var(--hac-acc-text); border-color: var(--hac-acc); }
.hac-card:hover .hac-read-more::after { transform: translateX(3px); }

/* ────────────────────────────────────────────
   3-SPALTEN-GRID (restliche Beiträge)
──────────────────────────────────────────── */
.hac-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 60px;
}

/* ────────────────────────────────────────────
   KEIN POST
──────────────────────────────────────────── */
.hac-no-posts {
	text-align: center;
	padding: 80px 20px;
	font-family: var(--hac-sans);
	color: var(--hac-muted);
	font-size: 15px;
}

/* ────────────────────────────────────────────
   PAGINATION
──────────────────────────────────────────── */
.hac-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}

.hac-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 8px;
	font-family: var(--hac-sans);
	font-size: 12px;
	font-weight: 500;
	color: var(--hac-text);
	border: 1.5px solid var(--hac-line);
	text-decoration: none;
	background: var(--hac-card);
	transition: background .2s, color .2s, border-color .2s;
}

.hac-pagination .page-numbers:hover,
.hac-pagination .page-numbers.current {
	background: var(--hac-acc);
	color: #fff; /* fest: Weiss auf Blau */
	border-color: var(--hac-acc);
}

.hac-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────── */
@media (max-width: 960px) {
	.hac-top-row { grid-template-columns: 1fr 1fr; }
	.hac-grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.hac-blog-wrap { padding: 40px 16px 64px; }
	.hac-top-row   { grid-template-columns: 1fr; }
	.hac-grid      { grid-template-columns: 1fr; gap: 16px; }
}