/* Fase Network Design Framework — Gutenberg Single Post.
 * Scoped to an explicit class on the Single Posts template; no theme files or
 * theme-internal selectors are required.
 */
.fase-single-post {
	--fase-post-ink: #17191c;
	--fase-post-muted: #4c5560;
	--fase-post-line: #d6dbe0;
	--fase-post-panel: #f1f3f5;
	--fase-post-blue: #075da7;
	--fase-post-accent: #f3a21b;
	--fase-post-width: 800px;
	color: var(--fase-post-ink);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.68;
}

.fase-post-header-meta {
	display: block !important;
	gap: 0 !important;
	row-gap: 0 !important;
	margin-block: 0 !important;
	padding-block: 0 !important;
}
.fase-post-header-meta > .wp-block-group {
	box-sizing: border-box;
	min-height: 0 !important;
	height: auto !important;
	margin-block: 0 8px !important;
	padding-block: 0 !important;
}
.fase-post-header-meta > .wp-block-group .wp-block-post-title {
	margin-block: 0 10px !important;
	padding-block: 0 !important;
}
.fase-post-header-meta .wp-block-post-author-name { margin: 0 !important; }
.fase-post-header-meta .wp-block-post-date {
	display: none !important;
}
.fase-author-byline {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	width: min(var(--fase-post-width), calc(100% - 40px)) !important;
	max-width: var(--fase-post-width);
	margin: 0 auto 8px !important;
}
.fase-author-byline__name { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; white-space: nowrap; }
.fase-author-byline__author-link { color: var(--fase-post-ink); font-weight: 650; text-decoration: none; }
.fase-author-byline__author-link:hover, .fase-author-byline__author-link:focus-visible { color: var(--fase-post-blue); text-decoration: underline; text-underline-offset: .15em; }
.fase-author-byline__title { color: var(--fase-post-muted); font-size: 13px; font-weight: 400; line-height: 1.35; }
.fase-author-byline__updated { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-left: auto; color: var(--fase-post-muted); font-size: 14px; line-height: 1.3; text-align: right; }
.fase-author-byline__updated-label,
.fase-author-byline__updated-date { display: block; }
.fase-post-author-avatar,
.fase-post-author-bio-avatar { display: block; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.fase-post-author-avatar { width: 48px; height: 48px; }

/* Keep the post header compact even if the editor template adds block spacing. */
.fase-single-post .fase-post-header-meta,
.fase-single-post .fase-post-header-meta > *,
.fase-single-post .fase-post-header-meta > .wp-block-group > * {
	margin-block-start: 0 !important;
}
.fase-single-post .fase-post-header-meta .wp-block-post-title { margin-block-end: 10px !important; }
.fase-post-header-meta + .fase-single-post { margin-block-start: 12px !important; }

.fase-post-breadcrumbs {
	box-sizing: border-box;
	width: min(800px, calc(100% - 40px));
	max-width: 800px;
	margin: 18px auto 10px;
	color: var(--fase-post-muted);
	font-size: 14px;
	line-height: 1.5;
}
.fase-post-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fase-post-breadcrumbs li + li::before { content: "/"; margin-inline-end: .35em; color: var(--fase-post-muted); }

/* Yoast Breadcrumbs is a public block and sits before the content group in
 * the current Hostinger AI template, so scope it by its own class as well as
 * the template's optional custom class. */
body.single-post .wp-block-yoast-seo-breadcrumbs,
body.single-post .fase-post-breadcrumbs {
	box-sizing: border-box;
	width: min(800px, calc(100% - 40px));
	max-width: 800px;
	margin: 18px auto 10px;
	color: #4c5560;
	font-size: 14px;
	line-height: 1.5;
}

body.single-post .wp-block-yoast-seo-breadcrumbs a,
.fase-post-breadcrumbs a {
	color: #075da7;
	text-decoration: none;
}
body.single-post .wp-block-yoast-seo-breadcrumbs a:hover,
.fase-post-breadcrumbs a:hover { text-decoration: underline; }

.fase-single-post > .wp-block-yoast-seo-breadcrumbs,
.fase-single-post .wp-block-post-title,
.fase-single-post .wp-block-post-author-name,
.fase-single-post .wp-block-post-date,
.fase-single-post .wp-block-post-featured-image,
.fase-single-post .wp-block-post-excerpt,
.fase-single-post .wp-block-post-content,
.fase-single-post .wp-block-post-terms,
.fase-single-post .wp-block-post-author-biography,
.fase-single-post .wp-block-comments {
	box-sizing: border-box;
	width: min(var(--fase-post-width), calc(100% - 40px));
	max-width: var(--fase-post-width);
	margin-inline: auto;
}

.fase-single-post > .wp-block-yoast-seo-breadcrumbs,
.fase-single-post .wp-block-post-title,
.fase-single-post .wp-block-post-author-name,
.fase-single-post .wp-block-post-date {
	width: min(var(--fase-post-width), calc(100% - 40px));
}

.fase-single-post > .wp-block-yoast-seo-breadcrumbs {
	margin-block: 18px 10px;
	color: var(--fase-post-muted);
	font-size: 14px;
	line-height: 1.5;
}

.fase-single-post > .wp-block-yoast-seo-breadcrumbs a,
.fase-single-post .wp-block-post-content a,
.fase-single-post .fase-post-toc a {
	color: var(--fase-post-blue);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.fase-single-post .wp-block-post-title {
	margin-block: 0 10px;
	font-size: 32px !important;
	font-weight: 750;
	line-height: 1.12;
	letter-spacing: -.025em;
}

.fase-single-post .wp-block-post-author-name {
	margin-block: 0 2px;
	font-size: 16px;
	font-weight: 650;
}

.fase-single-post .wp-block-post-date {
	margin-block: 0 18px;
	color: var(--fase-post-muted);
	font-size: 14px;
}

.fase-single-post .wp-block-post-featured-image {
	margin-block: 4px 14px;
}

.fase-single-post .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.fase-single-post .wp-block-post-excerpt {
	margin-block: 12px 18px;
	color: #343b42;
	font-size: 17px;
	font-style: italic;
	line-height: 1.5;
}

.fase-single-post .wp-block-post-content > :first-child { margin-block-start: 0; }
.fase-single-post .wp-block-post-content > :last-child { margin-block-end: 0; }
.fase-single-post .wp-block-post-content p { margin-block: 0 1em; }

/* Code blocks use the article's sans-serif type and size, with a quiet card
 * treatment. Wrapping long lines avoids horizontal scrolling on mobile. */
.fase-single-post .wp-block-post-content pre.wp-block-code {
	box-sizing: border-box;
	max-width: 100%;
	margin-block: 1em;
	padding: 1rem 1.25rem;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #e9edf2;
	color: #1f2937;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	overflow-x: hidden;
}
.fase-single-post .wp-block-post-content pre.wp-block-code code {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	white-space: inherit;
	overflow-wrap: inherit;
}

.fase-single-post .wp-block-post-content h2 {
	margin-block: 1.35em .225em;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	font-weight: 720;
	line-height: 1.25;
}
.fase-single-post .wp-block-post-content h2 + .wp-block-image {
	margin-block-start: 20px !important;
}
.fase-single-post .wp-block-post-content h3 {
	margin-block: 1.15em .4em;
	font-size: clamp(1.12rem, 2.5vw, 1.35rem);
	line-height: 1.3;
}
.fase-single-post .wp-block-post-content ul,
.fase-single-post .wp-block-post-content ol {
	margin-block: 0 40px !important;
	padding-inline-start: 1.4em;
}
.fase-single-post .wp-block-post-content > ul:last-child,
.fase-single-post .wp-block-post-content > ol:last-child {
	margin-block-end: 18px !important;
}
.fase-single-post .wp-block-post-content > ul:last-child > li,
.fase-single-post .wp-block-post-content > ol:last-child > li {
	margin-block: .15em;
}
.fase-single-post .wp-block-post-content li { margin-block: .25em; }
.fase-single-post .wp-block-post-content blockquote {
	margin-inline: 0;
	padding: .25em 0 .25em 1em;
	border-inline-start: 4px solid var(--fase-post-accent);
	font-style: italic;
}
.fase-single-post .wp-block-post-content figure,
.fase-single-post .wp-block-post-content img {
	max-width: 100%;
	height: auto;
}
.fase-single-post .wp-block-post-content figure img { border-radius: 8px; }

/* Framework-owned Table of Contents panel. */
.fase-single-post .fase-post-toc {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 18px 0 24px;
	padding: 14px 16px;
	border: 1px solid #cbd1d7;
	border-radius: 12px;
	background: var(--fase-post-panel);
	color: var(--fase-post-ink);
}
.fase-single-post .fase-post-toc > :first-child { margin-block-start: 0; }
.fase-single-post .fase-post-toc > :last-child { margin-block-end: 0; }
.fase-single-post .wp-block-post-content .fase-post-toc h2.fase-post-toc__title {
	margin: 0 0 6px;
	font-size: 20px !important;
	font-weight: 700;
	line-height: 1.3;
}
.fase-single-post .fase-post-toc__list { margin: 0; padding-inline-start: 1.2em; }
.fase-single-post .fase-post-toc__list li { margin-block: 3px; line-height: 1.45; }

.fase-single-post .wp-block-post-terms {
	margin-block: 4px 26px;
	font-size: 15px;
}

.fase-single-post .wp-block-post-author-biography {
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin: 0;
	color: #343b42;
	font-size: 15px;
	line-height: 1.55;
}
.fase-single-post .fase-author-card {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 18px;
	width: min(var(--fase-post-width), calc(100% - 40px));
	max-width: var(--fase-post-width);
	margin: 16px auto 24px;
	padding: 16px 18px;
	border: 1px solid var(--fase-post-line);
	border-radius: 14px;
	background: #f8f9fa;
}
.fase-post-author-bio-avatar { width: 76px; height: 76px; }
.fase-author-card__content { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.fase-author-card__identity { display: flex; flex-direction: column; line-height: 1.35; }
.fase-author-card__name { color: var(--fase-post-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.fase-author-card__name:hover { color: var(--fase-post-blue); text-decoration: underline; text-underline-offset: .15em; }
.fase-author-card__title { color: var(--fase-post-muted); font-size: 13px; }
.fase-author-card__content > :first-child { margin-block-start: 0; }
.fase-author-card__content > :last-child { margin-block-end: 0; }
.fase-author-card__linkedin { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--fase-post-blue); font-size: 14px; font-weight: 650; text-decoration: none; }
.fase-author-card__linkedin-icon { display: block; width: 14px; height: 14px; fill: currentColor; }
.fase-author-card__linkedin:hover { text-decoration: underline; text-underline-offset: .15em; }

.fase-single-post .fase-related-posts { margin-block: 20px 28px; }
.fase-single-post .fase-related-posts h2 { margin-block: 0 12px; font-size: 21px; line-height: 1.3; }
.fase-single-post .fase-related-posts ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.fase-single-post .fase-related-posts li { min-width: 0; }
.fase-single-post .fase-related-posts a { display: flex; height: 100%; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.fase-single-post .fase-related-posts img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.fase-single-post .fase-related-posts li > a > span { display: -webkit-box; min-height: 75px; overflow: hidden; color: inherit; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.fase-single-post .fase-related-posts a:hover span,
.fase-single-post .fase-related-posts a:focus-visible span { color: var(--fase-post-blue); text-decoration: underline; text-underline-offset: .15em; }
.fase-single-post .fase-youtube-video-section { margin-block: 24px; }
.fase-single-post .fase-youtube-video-section h2 { margin-block: 0 12px; font-size: 21px; line-height: 1.3; }
.fase-single-post .fase-youtube-video { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #111; }
.fase-single-post .fase-youtube-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.fase-single-post .wp-block-comments { margin-block: 24px; }
.fase-single-post .wp-block-comments h2,
.fase-single-post .wp-block-comments h3 { font-size: 21px; line-height: 1.3; }
.fase-single-post .wp-block-comments input:not([type="submit"]),
.fase-single-post .wp-block-comments textarea {
	box-sizing: border-box;
	max-width: 100%;
	border: 1px solid var(--fase-post-line);
	border-radius: 10px;
}
.fase-single-post .wp-block-comments input[type="submit"] {
	border: 0;
	border-radius: 8px;
	background: #315f6b;
	color: #fff;
	padding: 9px 16px;
}

@media (max-width: 600px) {
	body.single-post .wp-block-yoast-seo-breadcrumbs { width: calc(100% - 36px); }
	.fase-single-post {
		--fase-post-width: 100%;
		font-size: 16px;
		line-height: 1.62;
	}
	.fase-single-post.has-global-padding .wp-block-post-content {
		width: calc(100% + 12px);
		max-width: none;
		margin-inline: -6px !important;
	}
	.fase-single-post.has-global-padding .wp-block-post-title {
		width: calc(100% + 12px);
		max-width: none;
		margin-inline: -6px !important;
	}
	.fase-single-post.has-global-padding .fase-author-byline,
	.fase-single-post.has-global-padding .wp-block-post-featured-image,
	.fase-single-post.has-global-padding .wp-block-post-excerpt {
		width: calc(100% + 12px) !important;
		max-width: none;
		margin-inline: -6px !important;
	}
	.fase-single-post.has-global-padding .wp-block-post-terms,
	.fase-single-post.has-global-padding .fase-author-card,
	.fase-single-post.has-global-padding .wp-block-comments {
		width: calc(100% + 12px) !important;
		max-width: none;
		margin-inline: -6px !important;
	}
	.fase-single-post .wp-block-post-title {
		font-size: 22px !important;
		text-align: center !important;
	}
	.fase-single-post .fase-author-byline__name,
	.fase-single-post .fase-author-byline__updated {
		font-size: 14px;
		line-height: 1.3;
	}
	.fase-single-post .fase-author-byline__title {
		font-size: inherit;
		line-height: inherit;
	}
	.fase-single-post .fase-author-byline__updated {
		gap: 0;
	}
	body.single-post .wp-block-yoast-seo-breadcrumbs,
	body.single-post .fase-post-breadcrumbs { width: calc(100% - 36px); }
	.fase-single-post .wp-block-post-excerpt { font-size: 16px; }
	.fase-single-post .fase-post-toc { padding: 13px 14px; }
	.fase-single-post .fase-related-posts ul { grid-template-columns: minmax(0, 1fr); }
	.fase-post-author-avatar { width: 44px; height: 44px; }
	.fase-single-post .fase-author-card { align-items: flex-start; gap: 12px; width: calc(100% - 36px); margin-block: 14px 20px; padding: 13px; padding-right: 10px; }
	.fase-post-author-bio-avatar { width: 64px; height: 64px; }
	.fase-author-card__content { gap: 4px; }
	.fase-author-card__name { font-size: 15px; }
	.fase-author-card__content .wp-block-post-author-biography { font-size: 14px; }
}
