/* =====================================================================
   Top Grade Movers — pages/single-post.css
   Single blog post (single.php): hero band, featured image bleed, article
   typography, tags + share row, author card, related posts. Shared
   furniture (header, footer, CTA band) is styled elsewhere; the "You Might
   Also Like" cards reuse .blog-card/.blog-badge/.blog-meta from blog.css.
   ===================================================================== */

/* ---------------------------------------------------------------
   Hero: breadcrumb, category badge, title, byline
   --------------------------------------------------------------- */
.single-hero {
	background: #f2f2f2;
	padding-block: 56px 170px;
	text-align: center;
}

.single-hero__inner {
	max-width: 900px;
	margin-inline: auto;
}

.single-hero__breadcrumb .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	list-style: none;
	padding: 0;
	font-size: var(--body-size-2xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

.single-hero__breadcrumb .breadcrumb__item { display: inline-flex; align-items: center; }
.single-hero__breadcrumb .breadcrumb__link { color: var(--text-muted-soft); }
.single-hero__breadcrumb .breadcrumb__link:hover { color: var(--primary-color); }
.single-hero__breadcrumb .breadcrumb__separator,
.single-hero__breadcrumb .breadcrumb__current { color: var(--primary-color); }

.single-hero__badge {
	display: inline-flex;
	margin-bottom: 20px;
	background: var(--primary-color);
	color: var(--text-color-light);
	font-size: 11px;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: 1.32px;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: var(--radius-2);
	margin-top:20px;
}

.single-hero__title {
	margin: 0 0 20px;
	font-size: clamp(2rem, 4vw, 3.125rem);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.1;
	color: var(--heading-color);
}

.single-hero__meta {
	justify-content: center;
	font-size: var(--body-size-xs);
}

/* ---------------------------------------------------------------
   Featured image: bleeds over the hero's bottom edge
   --------------------------------------------------------------- */
.single-media {
	position: relative;
	z-index: 2;
	max-width: 980px;
	margin: -120px auto 0;
	border-radius: var(--radius-8);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.single-media img {
	display: block;
	width: 100%;
	height: 480px;
	object-fit: cover;
	margin: 0;
}

/* ---------------------------------------------------------------
   Article body
   --------------------------------------------------------------- */
.single-section { padding-block: 70px 40px; }

.single-section__col {
	max-width: 800px;
	margin-inline: auto;
}

.single-content { font-size: 17px; line-height: 1.95; color: #333; }

.single-content p,
.single-content ul,
.single-content ol {
	margin: 0 0 24px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.single-content ul, .single-content ol { padding-left: 1.4em; }

/* The article's opening paragraph reads as a larger "lead" line — handled
   here so editors just type a normal paragraph first, no manual styling. */
.single-content > p:first-of-type {
	font-size: 19px;
	line-height: 1.85;
	color: #3a3a3a;
}

.single-content h2 {
	margin: 44px 0 16px;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -.45px;
	line-height: 1.2;
	color: var(--heading-color);
}

.single-content h3 {
	margin: 32px 0 12px;
	font-size: 21px;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.21px;
	line-height: 1.35;
	color: var(--heading-color);
}

.single-content > h2:first-child,
.single-content > h3:first-child { margin-top: 0; }

.single-content blockquote {
	margin: 8px 0 24px;
	padding: 26px 32px 26px 32px;
	background: var(--light-bg);
	border-left: 4px solid var(--primary-color);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	color: #0f0f0f;
	line-height: 1.6;
}

.single-content blockquote p { margin: 0; font-size: inherit; color: inherit; }

.single-content figure.wp-block-image { margin: 32px 0; }

.single-content figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-8);
	box-shadow: 0 24px 46px -26px rgba(var(--black-rgb), .35);
}

.single-content figure.wp-block-image figcaption {
	margin-top: 12px;
	text-align: center;
	font-size: 12.5px;
	color: var(--text-muted-soft);
}

.single-content a { color: var(--primary-color); font-weight: var(--font-weight-bold); }

/* ---------------------------------------------------------------
   Tags + Share
   --------------------------------------------------------------- */
.single-tags-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	padding-block: 29px;
	border-block: 1px solid var(--border-color);
}

.single-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-tags__pill {
	display: inline-flex;
	padding: 9px 18px;
	border-radius: var(--radius-30);
	background: var(--light-bg);
	font-size: 12px;
	font-weight: var(--font-weight-bold);
	color: var(--text-input);
	transition: color var(--transition-base);
}

.single-tags__pill:hover { color: var(--primary-color); }

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

.single-share__label {
	margin-right: 6px;
	font-size: 12px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--text-muted-soft);
}

.single-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-pill);
	background: none;
	color: var(--text-input);
	transition: border-color var(--transition-base), color var(--transition-base);
}

.single-share__link:hover,
.single-share__link.is-copied { border-color: var(--primary-color); color: var(--primary-color); }

/* ---------------------------------------------------------------
   Author card
   --------------------------------------------------------------- */
.author-card {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: center;
	margin-top: 40px;
	padding: 34px;
	background: var(--light-bg);
	border-radius: var(--radius-md);
}

.author-card__avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 3px solid var(--background-color);
	box-shadow: 0 10px 24px -10px rgba(var(--black-rgb), .25);
	object-fit: cover;
	flex-shrink: 0;
}

.author-card__eyebrow {
	margin: 0 0 5px;
	font-size: 12px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: var(--primary-color);
}

.author-card__name {
	margin: 0 0 3px;
	font-size: 19px;
	font-weight: var(--font-weight-extrabold);
	color: var(--heading-color);
}

.author-card__bio { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-muted-soft); }

/* ---------------------------------------------------------------
   Related posts ("You Might Also Like")
   --------------------------------------------------------------- */
.single-related { padding-block: 20px 60px; }

.single-related__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 36px;
}

.single-related__title {
	margin: 0;
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -.48px;
	color: var(--heading-color);
}

.single-related__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--body-size-2xs);
	font-weight: var(--font-weight-bold);
	color: var(--primary-color);
}

.single-related__link .tg-icon { transition: transform var(--transition-base); }
.single-related__link:hover .tg-icon { transform: translateX(4px); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.single-hero { padding-block: 48px 130px; }
	.single-media { margin-top: -80px; }
	.single-media img { height: 340px; }
	.single-section { padding-block: 50px 30px; }
}

@media (max-width: 575.98px) {
	.single-hero { padding-block: 36px 90px; }
	.single-media { margin-top: -50px; }
	.single-media img { height: 220px; }
	.single-content blockquote { padding: 20px 22px; font-size: 17px; }
	.author-card { padding: 24px; }
	.author-card__avatar { width: 64px; height: 64px; }
	.single-tags-share { justify-content: flex-start; }
}