/* ============================================================
   Blog archive (black) + single (white) + product-style gallery
   ============================================================ */

body.df-blog-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

body.df-blog-page .df-footer {
	margin-top: auto;
	flex-shrink: 0;
}

/* Archive / journal listing — black */
body.df-blog-archive {
	background: var(--df-black);
}

.df-main--blog {
	background: var(--df-black);
	color: var(--df-white);
	padding-top: var(--df-site-offset);
}

/* Single post — white */
body.df-blog-single {
	background: var(--df-white);
}

.df-main--blog-single {
	background: var(--df-white);
	color: var(--df-dark);
	padding-top: var(--df-site-offset);
}

/* ── Archive header ── */

.df-blog-archive__head {
	max-width: 1680px;
	margin: 0 auto;
	padding: var(--df-sp-12) var(--df-gutter-x) var(--df-sp-10);
}

.df-blog-archive__brand {
	display: inline-block;
	font-family: var(--df-font-body);
	font-size: clamp(0.7rem, 1.1vw, 0.8125rem);
	font-weight: 400;
	letter-spacing: var(--df-track-wider);
	text-transform: uppercase;
	color: var(--df-white);
	text-decoration: none;
	padding-bottom: var(--df-sp-2);
	border-bottom: 1px solid var(--df-white);
	margin-bottom: var(--df-sp-8);
}

.df-blog-archive__title {
	font-family: var(--df-font-heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 400;
	line-height: var(--df-lh-heading);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--df-white);
	margin: 0 0 var(--df-sp-4);
}

.df-blog-archive__desc {
	font-family: var(--df-font-body);
	font-size: 0.9rem;
	line-height: var(--df-lh-body);
	color: var(--df-white-muted);
	margin: 0;
	max-width: 36rem;
}

.df-blog-archive__cats {
	margin-top: var(--df-sp-8);
}

.df-blog-archive__cats-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-sp-4) var(--df-sp-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-blog-archive__cat {
	font-family: var(--df-font-body);
	font-size: 0.7rem;
	letter-spacing: var(--df-track-wide);
	text-transform: uppercase;
	color: var(--df-white);
	text-decoration: none;
	opacity: 0.7;
	transition: opacity var(--df-ease);
}

.df-blog-archive__cat:hover,
.df-blog-archive__cat.is-active {
	opacity: 1;
}

/* ── Archive grid ── */

.df-blog-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--df-sp-10) var(--df-sp-6);
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 var(--df-gutter-x) var(--df-sp-20);
}

.df-blog-archive__grid .df-blog-card {
	flex: none;
	width: 100%;
}

.df-blog-archive__empty {
	max-width: 1680px;
	margin: 0 auto;
	padding: var(--df-sp-16) var(--df-gutter-x) var(--df-sp-24);
	font-family: var(--df-font-body);
	font-size: 0.9rem;
	color: var(--df-white-muted);
}

.df-blog-archive__pagination {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 var(--df-gutter-x) var(--df-sp-20);
}

.df-blog-archive__pagination .nav-links,
.df-blog-archive__pagination .page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--df-sp-4) var(--df-sp-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-blog-archive__pagination a,
.df-blog-archive__pagination span {
	font-family: var(--df-font-body);
	font-size: 0.75rem;
	letter-spacing: var(--df-track-wide);
	text-transform: uppercase;
	color: var(--df-white);
	text-decoration: none;
}

.df-blog-archive__pagination a:hover {
	opacity: 0.7;
}

/* ── Single post — full width ── */

.df-blog-single {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 0 var(--df-sp-20);
}

.df-blog-single__inner {
	max-width: 1680px;
	margin: 0 auto;
	padding: var(--df-sp-10) var(--df-gutter-x) 0;
}

.df-blog-single__back {
	display: inline-block;
	font-family: var(--df-font-body);
	font-size: 0.7rem;
	letter-spacing: var(--df-track-wide);
	text-transform: uppercase;
	color: var(--df-dark);
	text-decoration: none;
	opacity: 0.65;
	margin-bottom: var(--df-sp-8);
	transition: opacity var(--df-ease);
}

.df-blog-single__back:hover {
	opacity: 1;
}

/* Featured + ACF gallery — same product gallery logic */
.df-blog-single .df-product-gallery {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.df-blog-single__featured {
	margin: 0 0 var(--df-sp-10);
}

.df-blog-single__gallery {
	max-width: 1680px;
	margin: var(--df-sp-16) auto 0;
	padding: 0 var(--df-gutter-x);
}

.df-blog-single .df-product-gallery__hero {
	overflow: hidden;
	background: var(--df-product-surface);
}

.df-blog-single .df-product-gallery__hero .woocommerce-product-gallery__image,
.df-blog-single .df-product-gallery__thumbs .woocommerce-product-gallery__image {
	margin: 0;
	background: var(--df-product-surface);
}

.df-blog-single .df-product-gallery__hero .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
	.df-blog-single .df-product-gallery__hero .woocommerce-product-gallery__image:hover img {
		transform: scale(1.02);
	}
}

.df-blog-single .df-product-gallery__thumbs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.df-blog-single .df-product-gallery__thumbs .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: opacity 0.4s ease;
}

.df-blog-single .df-product-gallery__hero .woocommerce-product-gallery__image a,
.df-blog-single .df-product-gallery__thumbs .woocommerce-product-gallery__image a {
	display: block;
	cursor: zoom-in;
}

.df-blog-single .df-product-gallery__thumbs .woocommerce-product-gallery__image:hover img {
	opacity: 0.88;
}

.df-blog-single__meta {
	max-width: 42rem;
	margin: 0 auto var(--df-sp-8);
	text-align: center;
}

.df-blog-single__cats {
	font-family: var(--df-font-body);
	font-size: 0.65rem;
	letter-spacing: var(--df-track-widest);
	text-transform: uppercase;
	color: var(--df-gray-mid);
	margin: 0 0 var(--df-sp-4);
}

.df-blog-single__cats a {
	color: inherit;
	text-decoration: none;
}

.df-blog-single__cats a:hover {
	color: var(--df-dark);
}

.df-blog-single__title {
	font-family: var(--df-font-heading);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 400;
	line-height: var(--df-lh-heading);
	letter-spacing: 0.01em;
	color: var(--df-dark);
	margin: 0 0 var(--df-sp-4);
}

.df-blog-single__subtitle {
	font-family: var(--df-font-body);
	font-size: clamp(0.95rem, 1.5vw, 1.125rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--df-gray-mid);
	margin: 0 0 var(--df-sp-4);
}

.df-blog-single__date {
	font-family: var(--df-font-body);
	font-size: 0.7rem;
	letter-spacing: var(--df-track-wide);
	text-transform: uppercase;
	color: var(--df-gray-mid);
	margin: 0;
}

.df-blog-single__content {
	max-width: 42rem;
	margin: 0 auto;
	font-family: var(--df-font-body);
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	font-weight: 300;
	line-height: var(--df-lh-body);
	color: var(--df-dark);
}

.df-blog-single__content > *:first-child {
	margin-top: 0;
}

.df-blog-single__content p {
	margin: 0 0 var(--df-sp-6);
}

.df-blog-single__content a {
	color: var(--df-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.df-blog-single__content h2,
.df-blog-single__content h3 {
	font-family: var(--df-font-heading);
	font-weight: 400;
	color: var(--df-dark);
	margin: var(--df-sp-10) 0 var(--df-sp-4);
}

.df-blog-single__content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: var(--df-sp-8) 0;
}

.df-blog-single__content ul,
.df-blog-single__content ol {
	margin: 0 0 var(--df-sp-6);
	padding-left: var(--df-sp-6);
}

.df-blog-single__content blockquote {
	margin: var(--df-sp-8) 0;
	padding-left: var(--df-sp-6);
	border-left: 1px solid var(--df-gray-light);
	font-style: italic;
	color: var(--df-gray-mid);
}

@media (max-width: 1023px) {
	.df-blog-archive__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--df-sp-8) var(--df-sp-4);
	}
}

@media (max-width: 768px) {
	.df-blog-archive__head {
		padding-top: var(--df-sp-8);
		padding-bottom: var(--df-sp-8);
	}

	.df-blog-archive__grid {
		grid-template-columns: 1fr;
		gap: var(--df-sp-10);
		padding-bottom: var(--df-sp-16);
	}

	.df-blog-single__inner {
		padding-top: var(--df-sp-6);
	}

	.df-blog-single__gallery {
		margin-top: var(--df-sp-12);
	}
}