/*
 * Single blog post. No mockup — styled to match the design system.
 */

.fcls-post-wrap { max-width: 760px; margin: 0 auto; }

.fcls-post-thumb { border-radius: 12px; overflow: hidden; margin-bottom: 36px; aspect-ratio: 16/9; }
.fcls-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fcls-post-content { font-size: 16.5px; color: var(--charcoal-soft); line-height: 1.75; }
.fcls-post-content p { margin: 0 0 22px; }
.fcls-post-content h2, .fcls-post-content h3, .fcls-post-content h4 { margin: 40px 0 16px; color: var(--charcoal); }
.fcls-post-content h2 { font-size: 24px; }
.fcls-post-content h3 { font-size: 20px; }
.fcls-post-content h4 { font-size: 17px; }
.fcls-post-content ul, .fcls-post-content ol { margin: 0 0 22px; padding-left: 22px; }
.fcls-post-content ul { list-style: disc; }
.fcls-post-content ol { list-style: decimal; }
.fcls-post-content li { margin-bottom: 8px; }
.fcls-post-content a { color: var(--red); font-weight: 700; text-decoration: underline; }
.fcls-post-content strong, .fcls-post-content b { color: var(--charcoal); font-weight: 700; }
.fcls-post-content img { border-radius: 10px; margin: 8px 0 22px; }
.fcls-post-content blockquote {
	border-left: 3px solid var(--red); margin: 0 0 22px; padding: 4px 0 4px 20px;
	font-style: italic; color: var(--gray-600);
}

.fcls-post-back { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--gray-300); }
.fcls-post-back a { font-weight: 700; color: var(--red); font-size: 14.5px; }
.fcls-post-back a:hover { color: var(--red-dark); }

/* Social share links — used both in the dark page-hero and again above
   "Back to all articles" on a white background, so colors are scoped to
   each context rather than assumed. */
.fcls-share { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.fcls-share-label { font-size: 13px; font-weight: 700; color: var(--gray-600); }
.fcls-share a, .fcls-share button {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gray-300);
	color: var(--charcoal-soft); background: transparent; cursor: pointer; transition: all .15s ease;
	padding: 0;
}
.fcls-share a:hover, .fcls-share button:hover { border-color: var(--red); color: var(--red); }
.fcls-share button.is-copied { border-color: var(--red); color: var(--red); }

.fcls-page-hero .fcls-share { justify-content: center; margin-top: 22px; }
.fcls-page-hero .fcls-share-label { color: rgba(255,255,255,.6); }
.fcls-page-hero .fcls-share a, .fcls-page-hero .fcls-share button {
	border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.85);
}
.fcls-page-hero .fcls-share a:hover, .fcls-page-hero .fcls-share button:hover { border-color: #f3a6a6; color: #f3a6a6; }

@media (max-width: 560px) {
	.fcls-post-content { font-size: 15.5px; }
	.fcls-post-content h2 { font-size: 21px; }
	.fcls-post-content h3 { font-size: 18px; }
}