/* ─── Shared: overlay title for hero + category cards ────────────── */
/*
 * Apply via className="overlay-title" on any title block that sits
 * over a cover image. Category archive cards will reuse this class.
 */
.overlay-title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-style: italic;
	color: #ffffff;
	text-align: center;
	text-shadow:
		0 2px 16px rgba(0,0,0,0.75),
		0 1px 4px  rgba(0,0,0,0.55);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.15;
}

/* When title is a link (archive cards), ensure <a> inherits white */
.overlay-title a {
	color: #ffffff;
	text-decoration: none;
}

/* ─── Remove gap between header and hero ─────────────────────────── */

.single main.wp-block-group {
	margin-top: 0;
}

/* ─── Post hero (core/cover with useFeaturedImage) ───────────────── */

.post-hero.wp-block-cover {
	min-height: clamp(200px, 22vw, 320px);
	background-color: #3d3631;
}

@media (max-width: 767px) {
	.post-hero.wp-block-cover {
		min-height: clamp(160px, 48vw, 230px);
	}
}

/* ─── Byline ─────────────────────────────────────────────────────── */

.post-byline.wp-block-group {
	display: flex !important;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* Consistent Karla across all byline elements */
.post-byline .wp-block-avatar,
.post-byline .wp-block-post-author-name,
.post-byline .wp-block-post-date,
.post-byline .wp-block-post-terms,
.post-byline .wp-block-post-terms a {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.post-byline .wp-block-post-terms a {
	text-decoration: underline;
}

/* Dot separators after author name and date */
.post-byline .wp-block-post-author-name::after,
.post-byline .wp-block-post-date::after {
	content: " · ";
}

/* ─── Share buttons ──────────────────────────────────────────────── */

.post-share {
	display: flex;
	align-items: center;
	gap: 10px;
}

.post-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	transition: color 0.2s ease;
	line-height: 1;
}

.post-share__btn:hover {
	color: var(--wp--preset--color--foreground);
}

@media (max-width: 767px) {
	.post-share {
		width: 100%;
		justify-content: flex-start;
		padding-top: 18px;
	}
}

/* ─── Related posts ──────────────────────────────────────────────── */

.related-posts {
	border-top: 1px solid rgba(0,0,0,0.12);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--80);
}

.related-posts__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--wp--preset--spacing--50);
}

.related-posts__heading {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
	color: var(--wp--preset--color--foreground);
}

.related-posts__see-all {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
}

.related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.related-posts__image-link {
	display: block;
	overflow: hidden;
	margin-bottom: 12px;
	aspect-ratio: 4 / 3;
	background-color: #3d3631;
}

.related-posts__image-placeholder {
	width: 100%;
	height: 100%;
}

.related-posts__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.related-posts__image-link:hover .related-posts__image {
	transform: scale(1.04);
}

.related-posts__title {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	font-weight: 400;
	margin: 0;
	line-height: 1.3;
}

.related-posts__title a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.related-posts__title a:hover {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.related-posts__grid {
		grid-template-columns: 1fr;
	}
}