/*
 * Hairtec Blog Detail — blogoverzicht (/blogs/).
 * Eigen, lichte stylesheet: het archief laadt NIET de artikel-CSS/JS.
 * Alles is gescoped onder .htbd-arch-*; tokens vallen terug op vaste waarden
 * zodat het ook werkt wanneer de :root-variabelen van de artikelpagina ontbreken.
 */

.htbd-arch-hero,
.htbd-arch-list {
	--ha-primary: var(--htbd-primary, #223558);
	--ha-deep: var(--htbd-deep, #0a184a);
	--ha-soft: var(--htbd-soft, #EEEFF2);
	--ha-line: #EEEFF2;
	--ha-border: #d7dae3;
	--ha-text: #3c4356;
	--ha-muted: #767676;
	--ha-body: #5C5C5C;
	--ha-ph: #E8EBF1;
	font-family: inherit;
}

/* Volledige breedte-band kan 100vw gebruiken; voorkom een horizontale
 * scrollbalk zonder `clip` (zie het 1.6.3-incident): alleen `hidden`. */
html:has(.htbd-arch-hero) { overflow-x: hidden; }
html:has(.htbd-arch-hero) body { overflow-x: hidden; }

/* ------------------------------------------------------------- Kop / hero */

.htbd-arch-hero {
	background: var(--ha-soft);
	/* Achtergrond vol-breed, maar de inhoud blijft exact op de breedte van de
	 * Elementor-container waarin de widget staat (negatieve marge = padding),
	 * zodat kop, "Populaire artikelen" en header op één lijn staan. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* De zijpadding spiegelt normaal de containermarge; de max() is de
	 * vloer voor breakpoints waar de Elementor-container vol-breed wordt
	 * (anders plakt de inhoud tegen de schermrand). */
	padding: 28px max(24px, calc(50vw - 50%)) 32px;
	/* Schildert de band omhoog onder de (sticky) header; geen layout-effect. */
	box-shadow: 0 -160px 0 0 var(--ha-soft);
}
.htbd-arch-crumb {
	font-size: 12px;
	color: var(--ha-muted);
	margin: 0 0 18px;
}
.htbd-arch-crumb a { color: var(--ha-muted) !important; text-decoration: none; }
.htbd-arch-crumb a:hover { color: var(--ha-primary) !important; }
.htbd-arch-crumb .htbd-arch-sep { margin: 0 6px; color: #9aa1ad; }
.htbd-arch-crumb strong { color: var(--ha-primary); font-weight: 600; }

.htbd-arch-hero-grid {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* Koppen erven de sitetypografie (thema/kit: Europa, eigen maat en gewicht);
 * we zetten alleen marge en kleur. */
.htbd-arch-hero h1.htbd-arch-title {
	margin: 0;
	color: var(--ha-primary);
}
.htbd-arch-intro {
	margin: 16px 0 0;
	max-width: 760px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ha-text);
}
.htbd-arch-intro a { color: var(--ha-primary) !important; font-weight: 600; text-decoration: underline; }

.htbd-arch-search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-top: 18px;
	width: 380px;
	max-width: 100%;
	background: #fff;
	border: 1px solid var(--ha-border);
	border-radius: 999px;
	padding: 4px 6px 4px 20px;
	color: var(--ha-muted);
}
.htbd-arch-search svg { flex: none; }
.htbd-arch-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	padding: 9px 0 !important;
	margin: 0;
	font-size: 14px;
	font-family: inherit;
	color: var(--ha-primary);
	outline: none;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.htbd-arch-search input[type="search"]::placeholder { color: var(--ha-muted); }
.htbd-arch-search button[type="submit"] {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--ha-primary) !important;
	color: #fff !important;
	padding: 0 !important;
	cursor: pointer;
	line-height: 0;
}
.htbd-arch-search button[type="submit"]:hover { background: var(--ha-deep) !important; }

/* ------------------------------------------------- Gedeeld: media + meta */

.htbd-arch-ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ha-ph);
	color: #5C6B8A;
	overflow: hidden;
	flex: none;
}
.htbd-arch-ph img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}

.htbd-arch-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--ha-muted);
}
.htbd-arch-meta .htbd-arch-dot { color: var(--ha-border); }
.htbd-arch-shield {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ha-primary);
	font-weight: 600;
}
.htbd-arch-shield svg { flex: none; }

/* ---------------------------------------------------------- Bloglijst */

.htbd-arch-list { padding: 8px 0 0; }

/* Zachte tegels: elke post in een lichtgrijze tegel met het beeld erin.
 * Geen zwevende foto's, geen leadkaart — egaal raster. */
.htbd-arch-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.htbd-arch-card {
	display: block;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	background: #F5F6F8;
	border-radius: 20px;
	padding: 12px;
	transition: background .15s ease;
}
.htbd-arch-card:hover { background: var(--ha-soft); }
.htbd-arch-card .htbd-arch-ph { aspect-ratio: 16 / 10; border-radius: 12px; }
.htbd-arch-card h3 {
	margin: 14px 4px 0;
	font-size: 19px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--ha-primary);
}
.htbd-arch-card:hover h3 { color: var(--ha-deep); }
.htbd-arch-card .htbd-arch-meta { margin: 8px 4px 12px; font-size: 12px; }
.htbd-arch-empty {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ha-body);
}

/* ------------------------------------------------------------ Paginering */

.htbd-arch-pagewrap {
	margin-top: 20px;
	padding-top: 32px;
	border-top: 1px solid var(--ha-line);
	text-align: center;
}
.htbd-arch-pages {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.htbd-arch-pages a.page-numbers,
.htbd-arch-pages span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border-radius: 999px !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: var(--ha-primary) !important;
	line-height: 1 !important;
}
.htbd-arch-pages a.page-numbers:hover { background: var(--ha-soft) !important; }
.htbd-arch-pages span.page-numbers.current { background: var(--ha-primary) !important; color: #fff !important; }
.htbd-arch-pages span.page-numbers.dots { color: var(--ha-muted) !important; min-width: 24px; }
.htbd-arch-pages .page-numbers svg { display: block; }

/* ------------------------------------------------------------- Responsief */

@media (max-width: 1024px) {
	.htbd-arch-hero-grid { flex-direction: column; align-items: stretch; gap: 20px; }
	.htbd-arch-search { width: 100%; max-width: 480px; }
	.htbd-arch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 640px) {
	.htbd-arch-hero { padding: 22px max(16px, calc(50vw - 50%)) 24px; }
	.htbd-arch-search { max-width: none; }
	.htbd-arch-intro { font-size: 14px; }
	.htbd-arch-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.htbd-arch-card h3 { font-size: 17px; margin-top: 12px; }
	.htbd-arch-card .htbd-arch-meta { margin: 6px 4px 10px; }
	.htbd-arch-pages a.page-numbers,
	.htbd-arch-pages span.page-numbers { min-width: 38px; height: 38px; font-size: 13px !important; }
}