/* CLAUDE: assets/css/blog-categories.css – Styling für Blog-Kategorie-Navigation */
/* CLAUDE: Grid-Layout für Haupt-Kategorien auf Blog-Seite */
/* CLAUDE: 3 Spalten Desktop, 2 Tablet, 1 Mobil (wie Post-Cards) */
/* CLAUDE: Max. 200 Zeilen, nur Kategorie-Styles */

/* ========================================
   CLAUDE: Kategorie-Section (Container)
   ======================================== */

/* CLAUDE: Section-Container (Full-Width innerhalb content-wrapper) */
.blog-categories-section {
	/* CLAUDE: Spacing oberhalb (nach Hero/Header) */
	margin-top: clamp(2rem, 5vw, 4rem);
	margin-bottom: clamp(3rem, 6vw, 5rem);
	/* CLAUDE: Padding für mobile Geräte */
	padding: 0 var(--spacing-m, 1.5rem);
}

/* CLAUDE: Section-Titel (H2) */
.blog-categories-section__title {
	/* CLAUDE: Typografie */
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text-dark, #1a1a1a);
	/* CLAUDE: Spacing */
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	/* CLAUDE: Text-Ausrichtung (zentriert oder links) */
	text-align: center;
}

/* CLAUDE: Trennlinie zwischen Kategorien und Artikeln */
.blog-section-divider {
	/* CLAUDE: Styling */
	border: none;
	border-top: 1px solid var(--color-border, #e0e0e0);
	/* CLAUDE: Spacing */
	margin: clamp(3rem, 6vw, 5rem) 0;
	/* CLAUDE: Breite (max. content-width) */
	max-width: var(--content-max-width, 1400px);
	margin-left: auto;
	margin-right: auto;
}

/* ========================================
   CLAUDE: Kategorie-Grid (Layout)
   ======================================== */

/* CLAUDE: Grid-Container (3 Spalten Desktop) */
.blog-categories-grid {
	/* CLAUDE: Grid-Layout */
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* CLAUDE: 3 gleich große Spalten */
	gap: clamp(1.5rem, 3vw, 2rem);         /* CLAUDE: Abstand zwischen Cards */
	/* CLAUDE: Max-Width (wie ddi-grid) */
	max-width: var(--content-max-width, 1400px);
	margin: 0 auto;
	/* CLAUDE: Liste-Reset (falls <ul> genutzt wird) */
	list-style: none;
	padding: 0;
}

/* CLAUDE: Tablet (2 Spalten ab 768px) */
@media (max-width: 1024px) {
	.blog-categories-grid {
		grid-template-columns: repeat(2, 1fr); /* CLAUDE: 2 Spalten */
	}
}

/* CLAUDE: Mobil (1 Spalte ab 640px) */
@media (max-width: 640px) {
	.blog-categories-grid {
		grid-template-columns: 1fr; /* CLAUDE: Volle Breite */
		gap: 1.25rem;               /* CLAUDE: Kleinerer Gap */
	}
}

/* ========================================
   CLAUDE: Kategorie-Card (Einzelne Card)
   ======================================== */

/* CLAUDE: Card-Container */
.blog-category-card {
	/* CLAUDE: Box-Styling (ähnlich wie .ddi-card) */
	background: var(--color-white, #ffffff);
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: 8px;
	/* CLAUDE: Transition für Hover-Effekt */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* CLAUDE: Overflow (für Hover-Scale) */
	overflow: hidden;
}

/* CLAUDE: Hover-Effekt (Lift + Shadow) */
.blog-category-card:hover {
	/* CLAUDE: Leichtes Anheben */
	transform: translateY(-4px);
	/* CLAUDE: Schatten verstärken */
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* CLAUDE: Card-Link (gesamte Card klickbar) */
.blog-category-card__link {
	/* CLAUDE: Flexbox (vertical Layout) */
	display: flex;
	flex-direction: column;
	/* CLAUDE: Padding */
	padding: clamp(1.25rem, 3vw, 2rem);
	/* CLAUDE: Link-Reset */
	text-decoration: none;
	color: inherit;
	/* CLAUDE: Min-Height (für gleichmäßige Cards) */
	min-height: 280px;
	/* CLAUDE: Transition */
	transition: background-color 0.3s ease;
}

/* CLAUDE: Hover-Effekt für Link */
.blog-category-card__link:hover {
	/* CLAUDE: Leichter Hintergrund bei Hover */
	background-color: var(--color-bg-light, #f9f9f9);
}

/* ========================================
   CLAUDE: Card-Header (Icon + Title)
   ======================================== */

/* CLAUDE: Header-Container (Flexbox) */
.blog-category-card__header {
	/* CLAUDE: Flexbox (horizontal) */
	display: flex;
	align-items: center;
	gap: 1rem;
	/* CLAUDE: Spacing unterhalb */
	margin-bottom: 1rem;
}

/* CLAUDE: Icon/Emoji */
.blog-category-card__icon {
	/* CLAUDE: Größe */
	font-size: clamp(2rem, 4vw, 2.5rem);
	/* CLAUDE: Zentriert */
	display: flex;
	align-items: center;
	justify-content: center;
	/* CLAUDE: Flex-Shrink verhindern */
	flex-shrink: 0;
	/* CLAUDE: Optional: Hintergrund-Circle */
	width: 60px;
	height: 60px;
	background: var(--color-primary-light, #e8f4f8);
	border-radius: 50%;
}

/* CLAUDE: Kategorie-Titel (H3) */
.blog-category-card__title {
	/* CLAUDE: Typografie */
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text-dark, #1a1a1a);
	/* CLAUDE: Spacing */
	margin: 0;
	/* CLAUDE: Transition für Hover */
	transition: color 0.3s ease;
}

/* CLAUDE: Titel-Hover (wenn Card gehovered wird) */
.blog-category-card__link:hover .blog-category-card__title {
	/* CLAUDE: Primary-Color bei Hover */
	color: var(--color-primary, #0066cc);
}

/* ========================================
   CLAUDE: Card-Body (Intro-Text)
   ======================================== */

/* CLAUDE: Body-Container (Flex-Grow) */
.blog-category-card__body {
	/* CLAUDE: Flex-Grow (nimmt verfügbaren Platz) */
	flex-grow: 1;
	/* CLAUDE: Spacing unterhalb */
	margin-bottom: 1.25rem;
}

/* CLAUDE: Intro-Text */
.blog-category-card__intro {
	/* CLAUDE: Typografie */
	font-size: clamp(0.9rem, 1.8vw, 1rem);
	line-height: 1.6;
	color: var(--color-text-muted, #666666);
	/* CLAUDE: Spacing */
	margin: 0;
}

/* ========================================
   CLAUDE: Card-Footer (Count + Children)
   ======================================== */

/* CLAUDE: Footer-Container */
.blog-category-card__footer {
	/* CLAUDE: Flexbox (vertical) */
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	/* CLAUDE: Border-Top (Trennlinie) */
	padding-top: 1rem;
	border-top: 1px solid var(--color-border-light, #f0f0f0);
}

/* CLAUDE: Artikel-Anzahl Badge */
.blog-category-card__count {
	/* CLAUDE: Typografie */
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary, #0066cc);
	/* CLAUDE: Display */
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* CLAUDE: Unterkategorien-Container */
.blog-category-card__children {
	/* CLAUDE: Flexbox (wrap) */
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* CLAUDE: Unterkategorie-Tag (Badge) */
.blog-category-card__child-tag {
	/* CLAUDE: Badge-Styling */
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-muted, #666666);
	background: var(--color-bg-light, #f5f5f5);
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	/* CLAUDE: Transition */
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* CLAUDE: Tag-Hover */
.blog-category-card__link:hover .blog-category-card__child-tag {
	/* CLAUDE: Leichter Darkening bei Hover */
	background: var(--color-border, #e0e0e0);
	color: var(--color-text-dark, #1a1a1a);
}

/* CLAUDE: "und X weitere" Badge */
.blog-category-card__child-more {
	/* CLAUDE: Styling (gleich wie child-tag, aber italic) */
	font-size: 0.75rem;
	font-style: italic;
	color: var(--color-text-muted, #999999);
	padding: 0.25rem 0.5rem;
}