/* Blog single-post layout — modeled on growthviral.co's article pages:
   dark title hero with author/date, then a 3-part row (sticky share rail +
   article body + sticky sidebar with featured media/TOC/CTA), closing with
   a related-posts strip that reuses the blog page's .blog-grid/.blog-card
   component instead of duplicating it. */

/* Left-aligned instead of .page-hero's centered treatment — long-form
   titles + a byline row read better left-aligned than centered.
   UNUSED as of the .post-header experiment below — single.php no longer
   references these classes, but they're kept intact here so reverting is
   just swapping the markup in single.php back to this class set. */
.post-hero { background: #1f1346; padding-top: 48px; padding-bottom: 40px; }
.post-hero__category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 16px;
}
.post-hero__title {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.15;
	color: #ffffff;
	max-width: 760px;
	letter-spacing: -0.5px;
	margin-bottom: 24px;
}
.post-hero__meta { display: flex; align-items: center; gap: 12px; }
.post-hero__avatar-img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.post-hero__meta-text { display: flex; flex-direction: column; }
.post-hero__author { font-size: 14px; font-weight: 600; color: #ffffff; }
.post-hero__date { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

@media (max-width: 768px) {
	.post-hero { padding-top: 32px; padding-bottom: 32px; }
	.post-hero__title { font-size: 28px; margin-bottom: 20px; }
}

/* Post layout (currently in use) — .post-layout is a flex row with two
   top-level items: .post-layout__main (header + share-rail/body, stacked
   normally) and .post-sidebar (TOC only, sticky). */
.post-layout { display: flex; align-items: flex-start; gap: 40px; }
.post-layout__main { flex: 1 1 auto; min-width: 0; }

.post-header { padding-top: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border); margin-bottom: 40px; }
.post-header__category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 16px;
}
.post-header__title {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.15;
	color: var(--color-ink);
	max-width: 760px;
	letter-spacing: -0.5px;
	margin-bottom: 24px;
}
/* Featured image — static in normal flow (not sticky) between the title
   and the byline, capped to the same 760px measure as the title. See the
   comment atop single.php for why this can't just be moved back into the
   sticky sidebar alongside the TOC without re-introducing the cutoff bug. */
.post-header__media {
	width: 100%;
	max-width: 760px;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-card);
	margin-bottom: 24px;
}
.post-header__meta { display: flex; align-items: center; gap: 12px; }
.post-header__avatar-img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.post-header__meta-text { display: flex; flex-direction: column; }
.post-header__author { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.post-header__date { font-size: 13px; color: var(--color-body); }

@media (max-width: 768px) {
	.post-header { padding-bottom: 24px; }
	.post-header__title { font-size: 28px; margin-bottom: 20px; }
}

/* Share rail + article body row. position:sticky here is safe next to a
   column that never scrolls horizontally — this is not the
   overflow-x:auto + sticky combination that caused the real WebKit
   page-drag bug on the pricing compare table; there's no horizontal
   scroll region anywhere in this layout. */
.post-content-row { display: flex; align-items: flex-start; gap: 40px; padding-bottom: 56px; }

.post-share {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.post-share__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-body); margin-bottom: 4px; }
.post-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f5f5f6;
	color: var(--color-ink);
}
.post-share__link:hover { background: var(--color-hero-bg); color: var(--color-purple); }
.post-share__copy.is-copied { background: #dcfce7; color: #16a34a; }

.post-body { flex: 1 1 auto; min-width: 0; max-width: 720px; font-size: 16px; line-height: 1.7; color: var(--color-body); }
.post-body h2 { font-size: 26px; font-weight: 700; color: var(--color-ink); margin-top: 40px; margin-bottom: 16px; scroll-margin-top: 96px; }
.post-body h3 { font-size: 20px; font-weight: 700; color: var(--color-ink); margin-top: 28px; margin-bottom: 12px; scroll-margin-top: 96px; }
.post-body p { margin-bottom: 20px; }
.post-body ul,
.post-body ol { margin: 0 0 20px; padding-left: 22px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: var(--color-purple); text-decoration: underline; }
.post-body strong { color: var(--color-ink); font-weight: 700; }
.post-body img { border-radius: var(--radius-card); margin: 24px 0; }
.post-body blockquote {
	margin: 24px 0;
	padding: 16px 24px;
	border-left: 3px solid var(--color-purple);
	background: var(--color-hero-bg);
	border-radius: 0 12px 12px 0;
	font-style: italic;
	color: var(--color-ink);
}

.table-scroll { overflow-x: auto; margin-bottom: 20px; }
.table-scroll table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }
.table-scroll th { text-align: left; padding: 10px 16px; background: var(--color-hero-bg); color: var(--color-ink); font-weight: 700; }
.table-scroll td { padding: 10px 16px; border-bottom: 1px solid var(--color-border); }

/* Sidebar: TOC only, sticky as a direct child of .post-layout (which
   spans the full header+article height) — that's what gives it the
   entire article's scroll range to stay pinned in, and with no image
   sharing the box, the TOC gets the full height to work with too, plus
   the max-height/overflow-y safety net below for very long lists. */
.post-sidebar {
	position: sticky;
	top: 100px;
	width: 320px;
	flex-shrink: 0;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
.post-sidebar__media { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-card); margin-bottom: 24px; }
.post-toc { background: #f9f9fb; border-radius: var(--radius-card); padding: 24px; margin-bottom: 24px; }
.post-toc__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); margin-bottom: 12px; }
.post-toc__list { margin: 0; }
.post-toc__link {
	display: block;
	padding: 8px 0 8px 14px;
	border-left: 2px solid var(--color-border);
	font-size: 14px;
	color: var(--color-body);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.post-toc__link.is-active { color: var(--color-purple); border-left-color: var(--color-purple); font-weight: 600; }

.post-cta { position: relative; background: #f9f9fb; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 24px; text-align: center; }
.post-cta__title { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--color-ink); margin-bottom: 6px; }
.post-cta__desc { font-size: 14px; color: var(--color-body); margin-bottom: 16px; }
/* Dismiss button — only present on the floating variant (single.php only
   renders it there); harmless if .post-cta is ever reused elsewhere
   without it. */
.post-cta__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--color-body);
}
.post-cta__close:hover { background: var(--color-border); color: var(--color-ink); }

@media (max-width: 900px) {
	/* .post-header now carries its image internally (in normal flow), so
	   it only needs one order slot; .post-layout__main, .post-content-row,
	   and .post-sidebar are flattened (display:contents) so their
	   remaining children — header, share icons, TOC, body — become direct
	   items of .post-layout for reordering. */
	.post-layout { flex-direction: column; gap: 20px; }
	.post-layout__main { display: contents; }
	.post-content-row { display: contents; }
	.post-sidebar { display: contents; }

	.post-header { order: 1; }
	.post-share { order: 2; position: static; flex-direction: row; justify-content: center; width: 100%; }
	.post-toc { order: 3; margin-bottom: 0; }
	.post-body { order: 4; max-width: none; }
}

.post-related { background: #f5f5f6; }

/* Floating CTA — the same card used elsewhere (.post-cta), pulled out of
   normal flow and fixed to the bottom-left of the viewport. Appears once
   the reader has scrolled 10% into the page (single-post.js), and can be
   dismissed via .post-cta__close (single-post.js sets a flag so the
   scroll-position toggle doesn't just bring it back on the next tick).
   Left rather than centered/right so it doesn't sit under the Intercom
   launcher, which owns the bottom-right corner. */
.post-floating-cta {
	position: fixed;
	left: 24px;
	bottom: 24px;
	width: calc(100% - 48px);
	max-width: 300px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(16px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: 500;
}
.post-floating-cta.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

@media (max-width: 640px) {
	/* Match Intercom's default launcher offset (20px) so the card starts
	   at the same baseline as the chat bubble instead of floating higher. */
	.post-floating-cta { bottom: 20px; }
}