/**
 * blog-detail.css — templates/single.html (blog post detail)
 *
 * Converts ui/design/blog-detail-page.html. Every rule is scoped to
 * .blog-single / .blog-* so the global enqueue (functions.php
 * wp2025custom_pattern_css_files) is inert on other templates. Also fed to
 * add_editor_style() — prose rules must resolve in the editor too.
 *
 * Section 1 = LAYOUT (Phase 2 skeleton). Section 2 = DETAIL (Phase 3).
 */

/* ======================================================================
   1. LAYOUT
   ====================================================================== */

/* --- Hero ------------------------------------------------------------ */
.blog-hero {
	margin-top: var(--wp--preset--spacing--40);
}

/* let the hero media span wider than the 645px content measure */
.blog-hero.is-layout-constrained > * {
	max-width: none;
}

/* dynamic-image-container is display:block;width:100%;height:100% and needs a
   sized parent — give the wrapper the aspect ratio itself. */
.blog-hero .wp-block-wp2025custom-dynamic-image-container {
	aspect-ratio: 16 / 8;
	overflow: hidden;
	max-width: 1200px;
	margin-inline: auto;
}

.blog-hero .wp-block-post-featured-image,
.blog-hero .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* --- Article header ------------------------------------------------- */
.blog-article-header {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--40);
}

.blog-article-header__category {
	display: inline-flex;
	width: fit-content;
}

.blog-article-header__meta {
	align-items: center;
	gap: 0.4rem 0.75rem;
}

.blog-article-header__avatar img,
.blog-article-header__avatar .wp-block-avatar__image {
	width: 40px;
	height: 40px;
}

/* --- Article body / prose ----------------------------------------- */
.blog-article-body > * {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.blog-article-body figure,
.blog-article-body .wp-block-image,
.blog-article-body .wp-block-video,
.blog-article-body .wp-block-embed,
.blog-article-body .wp-block-gallery,
.blog-article-body .wp-block-code,
.blog-article-body .wp-block-audio,
.blog-article-body blockquote {
	margin-block: var(--wp--preset--spacing--40);
}

.blog-article-body .wp-block-gallery {
	--wp--style--gallery-gap: 0.75rem;
}

/* --- Downloads (wp:file list, authored in content) ----------------- */
.blog-article-body .wp-block-file {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
}

.blog-article-body .wp-block-file__button {
	margin-left: auto;
}

/* --- Author bio --------------------------------------------------- */
.blog-author-bio {
	margin-top: var(--wp--preset--spacing--60);
	gap: 1rem;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.blog-author-bio__avatar {
	flex: 0 0 auto;
}

.blog-author-bio__avatar img,
.blog-author-bio__avatar .wp-block-avatar__image {
	width: 56px;
	height: 56px;
}

.blog-author-bio__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Tags + share ---------------------------------------------------- */
.blog-tags-share {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
}

.blog-tags-share__row {
	gap: 1rem 1.5rem;
}

.blog-tags-share__tags a {
	display: inline-block;
}

.blog-share {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

.blog-share__btn {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--sk-blog--radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Comments ------------------------------------------------------- */
.blog-comments-wrap {
	margin-top: var(--wp--preset--spacing--60);
}

.blog-comment {
	gap: 1rem;
	flex-wrap: nowrap;
	align-items: flex-start;
}

.blog-comment__avatar {
	flex: 0 0 auto;
}

.blog-comment__avatar img,
.blog-comment__avatar .wp-block-avatar__image {
	width: 40px;
	height: 40px;
}

.blog-comment__body {
	flex: 1 1 auto;
	min-width: 0;
}

.blog-comment__head {
	gap: 0.75rem;
	align-items: baseline;
}

/* threaded replies — indent the nested comment list */
.blog-comments .wp-block-comment-template ol {
	list-style: none;
	margin: 1.5rem 0 0;
	padding-left: 2rem;
}

/* --- Related ------------------------------------------------------- */
/* Card + grid come from blog-section.php's markup (.blog-card /
   .blog-section__grid) — styled by blog-card.css + blog-section.css. Only the
   section wrapper is styled here (see DETAIL below). */


/* ======================================================================
   2. DETAIL  (Phase 3)
   ====================================================================== */

/* --- Hero ---------------------------------------------------------- */
.blog-hero .wp-block-wp2025custom-dynamic-image-container {
	border-radius: var(--wp--custom--sk-blog--radius-card);
	max-height: 50vh;
}

/* --- Article header ---------------------------------------------- */
.blog-article-header__category {
	align-items: center;
	background: color-mix(in srgb, var(--wp--preset--color--pastel-3) 35%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35rem 0.9rem;
	border-radius: var(--wp--custom--sk-blog--radius-pill);
	margin-bottom: 1rem;
	line-height: 1;
}

.blog-article-header__category a {
	text-decoration: none;
}

.blog-article-header__title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.016em;
	margin-bottom: 1.5rem;
}

.blog-article-header__meta {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}

.blog-article-header__meta > :not(:first-child)::before {
	content: "·";
	opacity: 0.5;
	margin-right: 0.6rem;
}

.blog-article-header__author,
.blog-article-header__author a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: none;
}

/* --- Prose ------------------------------------------------------- */
.blog-article-body {
	color: var(--wp--preset--color--contrast);
}

.blog-article-body p,
.blog-article-body li {
	line-height: 1.6;
}

.blog-article-body p strong,
.blog-article-body li strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.blog-article-body :is(h2, h3) {
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.016em;
	scroll-margin-top: 5.5rem;
}

.blog-article-body h2 {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0.75rem;
}

.blog-article-body h3 {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0.5rem;
}

.blog-article-body :where(a):not(.wp-element-button) {
	color: var(--wp--preset--color--accent-3);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.blog-article-body :not(pre) > code {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	padding: 0.08em 0.35em;
	font-size: 0.9em;
}

/* Blockquote — gold rule, surface fill, italic (PRESERVED) */
.blog-article-body .wp-block-quote {
	border: 0;
	border-left: 3px solid var(--wp--preset--color--pastel-3);
	background: var(--wp--preset--color--background-2);
	border-radius: 0 4px 4px 0;
	padding: 1rem 1.5rem;
	font-style: italic;
	color: var(--wp--preset--color--contrast);
}

/* Dark code block (D4 — chrome + copy button dropped, SIMPLIFIED) */
.blog-article-body .wp-block-code {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--sk-blog--radius-card);
	border: 1px solid var(--wp--preset--color--accent-6);
	padding: 1.5rem;
	overflow-x: auto;
}

.blog-article-body .wp-block-code code {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	white-space: pre;
}

/* Figures / media — rounded frame */
.blog-article-body :is(figure.wp-block-image, .wp-block-video, .wp-block-embed__wrapper) img,
.blog-article-body .wp-block-video video,
.blog-article-body .wp-block-embed iframe {
	border-radius: var(--wp--custom--sk-blog--radius-card);
}

.blog-article-body figcaption {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.blog-article-body .wp-block-gallery figure {
	border-radius: var(--wp--custom--sk-blog--radius-card);
	overflow: hidden;
}

/* --- Downloads (wp:file rows) ---------------------------------- */
.blog-article-body .wp-block-file {
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--wp--custom--sk-blog--radius-card);
	background: var(--wp--preset--color--base);
	margin-block: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}

.blog-article-body .wp-block-file > a:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.blog-article-body .wp-block-file__button {
	border-radius: var(--wp--custom--sk-blog--radius-pill);
}

/* --- Author bio card ------------------------------------------ */
.blog-author-bio {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--wp--custom--sk-blog--radius-card);
	background: var(--wp--preset--color--background-2);
}

.blog-author-bio__name,
.blog-author-bio__name a {
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: block;
	margin-bottom: 0.25rem;
}

.blog-author-bio__desc {
	color: var(--wp--preset--color--accent-4);
	margin: 0;
}

/* --- Tags + share ------------------------------------------- */
.blog-tags-share {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.blog-share__btn {
	border: 1px solid var(--wp--preset--color--accent-6);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-4);
}

.blog-share__btn:hover {
	color: var(--wp--preset--color--contrast);
}

/* --- Comments (deltas only — base styling inherited from twentytwentyfive) - */
.blog-comments__title {
	letter-spacing: -0.016em;
	margin-bottom: 1.5rem;
}

.blog-comment {
	margin-bottom: 1.5rem;
}

.blog-comment__author {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.blog-comments .wp-block-comment-template ol {
	border-left: 1px solid var(--wp--preset--color--accent-6);
}

/* --- Related section wrapper ------------------------------- */
/* Cards use .blog-card (blog-card.css) + .blog-section__grid (blog-section.css) —
   nothing card-level here. */
.blog-related__title {
	font-size: clamp(1.75rem, 3vw, 2.15rem);
	letter-spacing: -0.016em;
	margin-bottom: 1.5rem;
}