/**
 * Dog Father Pro — Inner page styling (posts, archives, 404).
 * Clean, readable, no scroll motion. Brand chrome only.
 */

.df-page {
	padding-top: 120px;
	padding-bottom: var(--df-sp-10);
	min-height: 70vh;
}
.df-page__inner {
	max-width: var(--df-container-narrow);
}
.df-page__head {
	margin-bottom: var(--df-sp-8);
	text-align: left;
}
.df-page__title {
	font-size: var(--df-fs-h1);
	margin-bottom: var(--df-sp-4);
}
.df-page__desc { color: var(--df-fg-muted); font-size: var(--df-fs-h4); }
.df-page__meta {
	display: flex;
	gap: var(--df-sp-4);
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--df-sp-4);
}
.df-page__thumb {
	margin-bottom: var(--df-sp-7);
	border-radius: var(--df-radius-lg);
	overflow: hidden;
}
.df-page__thumb img { width: 100%; }
.df-page__content {
	font-size: var(--df-fs-body);
	line-height: var(--df-lh-loose);
	color: var(--df-fg);
}
.df-page__content h2 { font-size: var(--df-fs-h3); margin-top: var(--df-sp-7); margin-bottom: var(--df-sp-3); }
.df-page__content h3 { font-size: var(--df-fs-h4); margin-top: var(--df-sp-6); margin-bottom: var(--df-sp-3); }
.df-page__content p { margin-bottom: var(--df-sp-4); color: var(--df-fg-muted); }
.df-page__content a { color: var(--df-gold); text-decoration: underline; text-decoration-color: rgba(254,194,8,0.3); text-underline-offset: 3px; }
.df-page__content a:hover { text-decoration-color: var(--df-gold); }
.df-page__content ul, .df-page__content ol { margin: 0 0 var(--df-sp-4) var(--df-sp-5); }
.df-page__content ul { list-style: disc; }
.df-page__content ol { list-style: decimal; }
.df-page__content li { margin-bottom: var(--df-sp-2); color: var(--df-fg-muted); }
.df-page__content blockquote {
	border-left: 3px solid var(--df-gold);
	padding-left: var(--df-sp-5);
	font-style: italic;
	color: var(--df-fg);
	margin: var(--df-sp-6) 0;
}
.df-page__content img { border-radius: var(--df-radius); margin: var(--df-sp-5) 0; }
.df-page__content pre {
	background: var(--df-bg-elevated);
	padding: var(--df-sp-5);
	border-radius: var(--df-radius);
	overflow-x: auto;
	font-size: var(--df-fs-small);
	border: 1px solid var(--df-bg-line);
}

/* Post list cards */
.df-posts {
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-7);
}
.df-post {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--df-sp-6);
	padding-bottom: var(--df-sp-7);
	border-bottom: 1px solid var(--df-bg-line);
}
.df-post__thumb {
	border-radius: var(--df-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.df-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.df-post__meta {
	display: flex;
	gap: var(--df-sp-3);
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--df-sp-3);
}
.df-post__title { font-size: var(--df-fs-h3); margin-bottom: var(--df-sp-3); }
.df-post__title a { color: var(--df-fg); }
.df-post__title a:hover { color: var(--df-gold); }
.df-post__excerpt { color: var(--df-fg-muted); margin-bottom: var(--df-sp-4); }
.df-post__more {
	font-size: var(--df-fs-small);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-gold);
}

.df-pagination {
	margin-top: var(--df-sp-8);
	display: flex;
	justify-content: center;
	gap: var(--df-sp-3);
}
.df-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--df-sp-3);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-sm);
	color: var(--df-fg-muted);
	font-size: var(--df-fs-small);
}
.df-pagination .page-numbers.current { background: var(--df-gold); color: var(--df-bg); border-color: var(--df-gold); }
.df-pagination a.page-numbers:hover { border-color: var(--df-gold); color: var(--df-gold); }

.df-page__empty { color: var(--df-fg-muted); font-size: var(--df-fs-h4); }

/* 404 */
.df-page--404 .df-page__inner { max-width: 640px; text-align: center; }
.df-404 { display: flex; flex-direction: column; align-items: center; padding-block: var(--df-sp-9); }
.df-404__paw { color: var(--df-gold); opacity: 0.3; margin-bottom: var(--df-sp-5); }
.df-404 .df-eyebrow { justify-content: center; }
.df-404__title { font-size: var(--df-fs-h1); margin-bottom: var(--df-sp-4); }
.df-404__lead { color: var(--df-fg-muted); font-size: var(--df-fs-h4); margin-bottom: var(--df-sp-7); max-width: 480px; }
.df-404__actions { display: flex; gap: var(--df-sp-4); flex-wrap: wrap; justify-content: center; }

@media (max-width: 720px) {
	.df-post { grid-template-columns: 1fr; }
	.df-post__thumb { aspect-ratio: 16 / 9; }
}

/* ================================================================== */
/* BLOG ENHANCEMENTS                                                   */
/* ================================================================== */

/* Breadcrumb */
.df-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--df-sp-2);
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
	margin-bottom: var(--df-sp-5);
}
.df-breadcrumb a { color: var(--df-fg-muted); }
.df-breadcrumb a:hover { color: var(--df-gold); }
.df-breadcrumb span { color: var(--df-fg-faint); }

/* Focus keyword tag */
.df-page__focus-keyword {
	display: inline-block;
	font-size: var(--df-fs-tiny);
	color: var(--df-gold);
	background: var(--df-gold-glow);
	padding: 4px 12px;
	border-radius: var(--df-radius-full);
	margin-top: var(--df-sp-3);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	font-weight: 600;
}

/* Featured image caption */
.df-page__thumb { position: relative; }
.df-page__thumb-caption {
	font-size: var(--df-fs-small);
	color: var(--df-fg-faint);
	margin-top: var(--df-sp-3);
	text-align: center;
	font-style: italic;
}

/* Social share */
.df-page__share-top { margin-bottom: var(--df-sp-7); }
.df-page__share-bottom { margin-top: var(--df-sp-8); padding-top: var(--df-sp-6); border-top: 1px solid var(--df-bg-line); }
.df-share {
	display: flex;
	align-items: center;
	gap: var(--df-sp-3);
}
.df-share__label {
	font-size: var(--df-fs-small);
	font-weight: 600;
	color: var(--df-fg-muted);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-right: var(--df-sp-2);
}
.df-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--df-bg-line);
	color: var(--df-fg-muted);
	background: transparent;
	cursor: pointer;
	transition: all var(--df-dur-base) var(--df-ease-out);
}
.df-share__btn:hover {
	color: var(--df-bg);
	background: var(--df-gold);
	border-color: var(--df-gold);
	transform: translateY(-2px);
}

/* Tags */
.df-page__tags {
	margin-top: var(--df-sp-6);
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
}
.df-page__tags-label {
	font-weight: 600;
	margin-right: var(--df-sp-2);
}
.df-page__tags a {
	color: var(--df-gold);
	text-decoration: none;
}
.df-page__tags a:hover { text-decoration: underline; }

/* Author bio */
.df-author-bio {
	display: flex;
	gap: var(--df-sp-5);
	align-items: flex-start;
	margin-top: var(--df-sp-8);
	padding: var(--df-sp-6);
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius);
}
.df-author-bio__avatar {
	border-radius: 50% !important;
	border: 2px solid var(--df-gold);
}
.df-author-bio__label {
	display: block;
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.df-author-bio__name {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-h4);
	margin-bottom: var(--df-sp-2);
}
.df-author-bio__desc {
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
}

/* Related posts */
.df-related {
	margin-top: var(--df-sp-9);
	padding-top: var(--df-sp-7);
	border-top: 1px solid var(--df-bg-line);
}
.df-related__title {
	font-size: var(--df-fs-h3);
	margin-bottom: var(--df-sp-6);
}
.df-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--df-sp-5);
}
.df-related__card {
	display: flex;
	flex-direction: column;
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius);
	overflow: hidden;
	color: var(--df-fg);
	transition: transform var(--df-dur-base) var(--df-ease-out),
	            border-color var(--df-dur-base) var(--df-ease-out);
}
.df-related__card:hover {
	transform: translateY(-4px);
	border-color: var(--df-gold-deep);
	color: var(--df-fg);
}
.df-related__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.df-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.df-related__body {
	padding: var(--df-sp-4);
}
.df-related__date {
	display: block;
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--df-sp-2);
}
.df-related__name {
	font-family: var(--df-font-display);
	font-size: var(--df-fs-body);
	font-weight: 700;
	margin-bottom: var(--df-sp-2);
}
.df-related__excerpt {
	font-size: var(--df-fs-small);
	color: var(--df-fg-muted);
	line-height: var(--df-lh-normal);
}

@media (max-width: 768px) {
	.df-related__grid { grid-template-columns: 1fr; }
	.df-author-bio { flex-direction: column; }
}

/* ================================================================== */
/* BLOG LISTING (magazine style)                                       */
/* ================================================================== */
.df-blog-listing { padding-top: 140px; }
.df-blog-listing__head {
	text-align: center;
	margin-bottom: var(--df-sp-9);
}
.df-blog-listing__title {
	font-size: var(--df-fs-h1);
	margin-bottom: var(--df-sp-4);
}
.df-blog-listing__lead {
	font-size: var(--df-fs-h4);
	color: var(--df-fg-muted);
	max-width: 560px;
	margin-inline: auto;
}
.df-blog-listing .df-eyebrow { justify-content: center; }

.df-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--df-sp-6);
}
.df-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--df-bg-elevated);
	border: 1px solid var(--df-bg-line);
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	color: var(--df-fg);
	text-decoration: none;
	transition: transform var(--df-dur-base) var(--df-ease-out),
	            border-color var(--df-dur-base) var(--df-ease-out),
	            box-shadow var(--df-dur-base) var(--df-ease-out);
}
.df-blog-card:hover {
	transform: translateY(-6px);
	border-color: var(--df-gold-deep);
	box-shadow: var(--df-shadow);
	color: var(--df-fg);
}
.df-blog-card--featured {
	grid-column: span 2;
	flex-direction: row;
}
.df-blog-card__img {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--df-bg-subtle);
	flex-shrink: 0;
}
.df-blog-card--featured .df-blog-card__img { width: 55%; aspect-ratio: auto; }
.df-blog-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--df-dur-slow) var(--df-ease-out);
}
.df-blog-card:hover .df-blog-card__img img { transform: scale(1.06); }
.df-blog-card__img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(10,10,11,0.6) 100%);
}
.df-blog-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Posts without a photograph get a deliberate cover rather than an empty
	   grey box, so a blog full of text-only posts still looks composed. Once
	   real photos exist these disappear on their own. */
	background:
		radial-gradient(circle at 30% 25%, rgba(254, 194, 8, 0.10), transparent 55%),
		linear-gradient(135deg, #101013 0%, #1B1B21 100%);
	color: rgba(254, 194, 8, 0.22);
	position: relative;
	overflow: hidden;
}
.df-blog-card__img--placeholder span {
	display: flex;
	transform: scale(2.1);
	transform-origin: center;
}
.df-blog-card__img--placeholder::after {
	content: '';
	position: absolute;
	inset: auto auto 0 0;
	width: 42px;
	height: 2px;
	margin: 0 0 18px 18px;
	background: var(--df-gold);
	opacity: 0.55;
}
.df-blog-card__body {
	padding: var(--df-sp-5);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.df-blog-card--featured .df-blog-card__body {
	padding: var(--df-sp-7);
	justify-content: center;
}
.df-blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-sp-3);
	font-size: var(--df-fs-tiny);
	color: var(--df-fg-faint);
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--df-sp-3);
}
.df-blog-card__cat { color: var(--df-gold); font-weight: 600; }
.df-blog-card__title {
	font-family: var(--df-font-display);
	font-weight: 700;
	line-height: var(--df-lh-snug);
	margin-bottom: var(--df-sp-3);
}
.df-blog-card--featured .df-blog-card__title { font-size: var(--df-fs-h2); }
.df-blog-card:not(.df-blog-card--featured) .df-blog-card__title { font-size: var(--df-fs-h4); }
.df-blog-card__excerpt {
	color: var(--df-fg-muted);
	font-size: var(--df-fs-body);
	line-height: var(--df-lh-normal);
	margin-bottom: var(--df-sp-4);
	flex: 1;
}
.df-blog-card__readmore {
	font-size: var(--df-fs-small);
	font-weight: 600;
	letter-spacing: var(--df-ls-wide);
	text-transform: uppercase;
	color: var(--df-gold);
}

.df-blog-empty {
	text-align: center;
	padding: var(--df-sp-11) var(--df-sp-6);
}
.df-blog-empty__icon {
	display: inline-block;
	color: var(--df-gold);
	opacity: 0.3;
	margin-bottom: var(--df-sp-5);
}
.df-blog-empty h2 { font-size: var(--df-fs-h2); margin-bottom: var(--df-sp-4); }
.df-blog-empty p { color: var(--df-fg-muted); max-width: 480px; margin: 0 auto var(--df-sp-6); }

@media (max-width: 768px) {
	.df-blog-grid { grid-template-columns: 1fr; }
	.df-blog-card--featured { flex-direction: column; }
	.df-blog-card--featured .df-blog-card__img { width: 100%; aspect-ratio: 16 / 10; }
	.df-blog-card--featured .df-blog-card__title { font-size: var(--df-fs-h3); }
}

/* Comments */
.df-comments { margin-top: var(--df-sp-9); padding-top: var(--df-sp-7); border-top: 1px solid var(--df-bg-line); }
.df-comments h2 { font-size: var(--df-fs-h3); margin-bottom: var(--df-sp-5); }
.comment-list { display: flex; flex-direction: column; gap: var(--df-sp-5); }
.comment-body { padding: var(--df-sp-5); background: var(--df-bg-elevated); border-radius: var(--df-radius); border: 1px solid var(--df-bg-line); }
.comment-author { font-weight: 700; color: var(--df-fg); }
.comment-meta { font-size: var(--df-fs-small); color: var(--df-fg-faint); margin-bottom: var(--df-sp-3); }
.comment-content { color: var(--df-fg-muted); }
.comment-reply-link { color: var(--df-gold); font-size: var(--df-fs-small); }