/* =============================================================================
   BLOG CARDS & LIJST — Arnout Rebel Photography
   .ar-blog-*  gebruikt in blog-recent.php, archive.html, search.html
   ============================================================================= */

/* ── Blog archief pagina ── */
.ar-blog-archive {
	width: 100% !important;
	max-width: none !important;
	padding-left: max(3rem, calc(50% - 600px)) !important;
	padding-right: max(3rem, calc(50% - 600px)) !important;
	box-sizing: border-box !important;
}

/* Breadcrumb zit al in de padded container — geen eigen zijdelingse padding */
.ar-blog-archive .ar-breadcrumbs {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ar-blog-archive__header {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.ar-blog-archive__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
	font-weight: 500 !important;
	text-align: center !important;
	margin-bottom: 0 !important;
}

.ar-blog-archive__content {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Kolommen en eerste kolom — geen extra linker offset */
.ar-blog-archive .ar-archive-layout {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

.ar-blog-archive .ar-archive-main {
	padding-left: 0 !important;
	min-width: 0;
}

/* ── Blog sectie (homepage) ── */
.ar-blog-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
	padding-left: max(3rem, calc(50% - 600px)) !important;
	padding-right: max(3rem, calc(50% - 600px)) !important;
}

.ar-gallery-section {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
}

.ar-blog-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ar-blog-section__label {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--light);
}

.ar-blog-section__link {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	border-bottom: 0.5px solid var(--wp--preset--color--dark);
	padding-bottom: 1px;
	transition: opacity 0.2s ease;
}

.ar-blog-section__link:hover {
	opacity: 0.6;
}

/* Blog kaarten grid — grid staat op de wp-block-post-template, niet op de query wrapper */
.ar-blog-grid .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.5rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

.ar-blog-grid .wp-block-post-template > li {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

/* Featured image in blog card */
.ar-blog-grid .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.ar-blog-grid .wp-block-post-featured-image a,
.ar-blog-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ar-blog-grid .wp-block-post-template > li:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.ar-blog-card {
	display: flex;
	flex-direction: column;
}

.ar-blog-card__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.ar-blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ar-blog-card:hover .ar-blog-card__thumb img {
	transform: scale(1.04);
}

.ar-blog-card__meta {
	font-size: 0.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--light);
	margin-bottom: 0.25rem;
}

.ar-blog-card__title {
	font-size: 0.875rem !important;
	font-weight: 500;
	color: var(--wp--preset--color--dark);
	line-height: 1.4;
	margin-bottom: 0.25rem;
}

.ar-blog-card__title a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.ar-blog-card__title a:hover {
	opacity: 0.7;
}

.ar-blog-card__excerpt {
	font-size: 0.8125rem !important;
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

.ar-blog-card__read {
	font-size: 0.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	border-bottom: 0.5px solid var(--wp--preset--color--dark);
	padding-bottom: 1px;
	display: inline-block;
	margin-top: auto;
	transition: opacity 0.2s ease;
}

.ar-blog-card__read:hover {
	opacity: 0.6;
}

/* ── Blog lijstweergave (archief) ── */
.ar-blog-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ar-blog-list__item {
	gap: 1.5rem;
	padding: var(--wp--preset--spacing--50) 0;
	align-items: flex-start !important;
}

.ar-blog-list__thumb {
	flex-shrink: 0;
	width: 220px;
	overflow: hidden;
}

.ar-blog-list__thumb img {
	width: 220px;
	height: 165px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.ar-blog-list__item:hover .ar-blog-list__thumb img {
	transform: scale(1.03);
}

.ar-blog-list__body {
	flex: 1;
	min-width: 0;
}

.ar-blog-list__title {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	margin-bottom: 0.375rem;
}

.ar-blog-list__title a {
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.ar-blog-list__title a:hover {
	opacity: 0.7;
}

.ar-blog-list__excerpt {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
	margin-top: 0.5rem;
}

.ar-blog-list__excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	border-bottom: 0.5px solid var(--wp--preset--color--dark);
	padding-bottom: 1px;
	margin-top: 0.75rem;
	transition: opacity 0.2s ease;
}

.ar-blog-list__excerpt .wp-block-post-excerpt__more-link:hover {
	opacity: 0.6;
}

.ar-blog-list__divider {
	margin: 0 !important;
	border-color: var(--wp--preset--color--border) !important;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1023px) {
	.ar-blog-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 767px) {
	.ar-blog-grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	.ar-blog-list__item {
		flex-direction: column;
		gap: 1rem;
	}

	.ar-blog-list__thumb,
	.ar-blog-list__thumb img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* ── Post tag pills ── */
.ar-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.75rem;
}

.ar-post-tags a {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--preset--color--dark);
	background-color: var(--wp--preset--color--warm);
	border-radius: 999px;
	padding: 0.25rem 0.625rem;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.ar-post-tags a:hover {
	background-color: var(--wp--preset--color--border);
}

.ar-post-tags .wp-block-post-terms__separator {
	display: none;
}