/* ==========================================================
   Blue Devils DC
   Öffentliche Blog-Kategorieseite

   Datei:
   /assets/css/category.css
========================================================== */


/* ==========================================================
   1. Kategorienseite
========================================================== */

.category-page {
	position:relative;
}


/* ==========================================================
   2. Seitenkopf
========================================================== */

.category-page-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:30px;
	margin-bottom:32px;
	padding-bottom:26px;
	border-bottom:1px solid rgba(255,255,255,.075);
}

.category-page-head h2 {
	margin:3px 0 0;
	font-size:clamp(2rem, 4vw, 3.2rem);
	line-height:1.05;
	letter-spacing:-.04em;
	text-wrap:balance;
}

.category-page-head .btn {
	flex:0 0 auto;
}


/* ==========================================================
   3. Verlinkte Kategorie
========================================================== */

.blog-category-link {
	display:inline-flex;
	align-items:center;
	width:max-content;
	margin-bottom:13px;
	color:var(--primary2);
	font-size:.73rem;
	font-weight:900;
	letter-spacing:.075em;
	text-decoration:none;
	text-transform:uppercase;
}

.blog-category-link::after {
	content:"→";
	margin-left:7px;
	transition:transform .2s ease;
}

.blog-category-link:hover::after {
	transform:translateX(4px);
}


/* ==========================================================
   4. Pagination
========================================================== */

.blog-pagination {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px;
	margin-top:52px;
}

.blog-pagination-link,
.blog-pagination-arrow {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	height:44px;
	padding:0 13px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:14px;
	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.055),
			rgba(255,255,255,.025)
		);
	color:var(--text);
	font-weight:900;
	text-decoration:none;
	box-shadow:0 10px 26px rgba(0,0,0,.12);
	transition:
		transform .2s ease,
		border-color .2s ease,
		background .2s ease,
		box-shadow .2s ease;
}

.blog-pagination-arrow {
	font-size:1.45rem;
	line-height:1;
}

.blog-pagination-link:hover,
.blog-pagination-arrow:hover {
	transform:translateY(-2px);
	border-color:rgba(99,180,255,.36);
	background:rgba(28,140,255,.13);
	box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.blog-pagination-link.is-current {
	border-color:rgba(99,180,255,.45);
	background:
		linear-gradient(
			135deg,
			var(--primary),
			#2569d8
		);
	color:#fff;
	box-shadow:
		0 12px 30px rgba(28,140,255,.26),
		inset 0 1px 0 rgba(255,255,255,.18);
}

.blog-pagination-dots {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:32px;
	height:44px;
	color:var(--muted);
	font-size:1rem;
	font-weight:900;
}


/* ==========================================================
   5. Empty State
========================================================== */

.category-empty {
	position:relative;
	overflow:hidden;
}

.category-empty::before {
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(28,140,255,.12),
			transparent 38%
		);
}

.category-empty > * {
	position:relative;
	z-index:1;
}

.category-empty-link {
	margin-top:22px;
}


/* ==========================================================
   6. Tablet
========================================================== */

@media (max-width:900px) {

	.category-page-head {
		align-items:flex-start;
		flex-direction:column;
	}

}


/* ==========================================================
   7. Smartphone
========================================================== */

@media (max-width:680px) {

	.category-page-head {
		gap:20px;
		margin-bottom:26px;
		padding-bottom:22px;
	}

	.category-page-head h2 {
		font-size:2.15rem;
	}

	.blog-pagination {
		gap:6px;
		margin-top:38px;
	}

	.blog-pagination-link,
	.blog-pagination-arrow {
		min-width:39px;
		height:39px;
		padding:0 10px;
		border-radius:12px;
	}

	.blog-pagination-dots {
		min-width:24px;
		height:39px;
	}

}


/* ==========================================================
   8. Kleine Smartphones
========================================================== */

@media (max-width:420px) {

	.blog-pagination-link,
	.blog-pagination-arrow {
		min-width:36px;
		height:36px;
		padding:0 9px;
	}

	.blog-pagination-dots {
		height:36px;
	}

}


/* ==========================================================
   9. Reduzierte Animationen
========================================================== */

@media (prefers-reduced-motion:reduce) {

	.blog-category-link::after,
	.blog-pagination-link,
	.blog-pagination-arrow {
		transition:none;
	}

	.blog-category-link:hover::after,
	.blog-pagination-link:hover,
	.blog-pagination-arrow:hover {
		transform:none;
	}

}