/* NSS Article Extras — front-end styles for single posts.
   Scoped with .nss-* classes so they won't collide with Breakdance output. */

:root {
	--nss-accent: #ce2127; /* Natural Stone Group brand red (from live site) */
	--nss-ink: #1f2933;
	--nss-muted: #5b6570;
	--nss-line: #e3e6ea;
	--nss-radius: 10px;
}

/* ===================================================================
 * Host template overrides (Breakdance "Fallback: Single Post", ID 8)
 * Scoped to .nss-article-active so only layout posts are affected:
 *  - hide the template's own title + post-meta (our hero owns them)
 *  - widen the narrow content container so the layout has room
 * =================================================================== */
body.nss-article-active .bde-heading-8-101,
body.nss-article-active .bde-post-meta-8-105 { display: none !important; }
body.nss-article-active .bde-section-8-100 .section-container {
	max-width: 1180px !important;
	width: 100% !important;
}
body.nss-article-active .bde-rich-text-8-102 { max-width: none !important; }

/* ===================================================================
 * Article layout (composed by [nss_article])
 * =================================================================== */
.nss-article { max-width: 1120px; margin: 0 auto; }

/* ---- Hero: two columns (text left, image right) ---- */
.nss-article__hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	margin: 0 0 2.75rem;
}
.nss-article__hero--nomedia { grid-template-columns: 1fr; max-width: 760px; }
.nss-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--nss-accent);
}
.nss-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 3.4vw, 2.85rem);
	line-height: 1.08;
	font-weight: 800;
	color: var(--nss-ink);
	letter-spacing: -0.01em;
}
.nss-hero__standfirst {
	margin: 0 0 1.5rem;
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--nss-muted);
}
.nss-hero__figure { margin: 0; }
.nss-hero__figure img,
.nss-article__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--nss-radius);
}
.nss-hero__caption {
	margin-top: 0.6rem;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--nss-muted);
}
.nss-hero__caption a { color: var(--nss-muted); }

/* ---- Byline ---- */
.nss-byline { display: flex; align-items: center; gap: 0.7rem; }
.nss-byline__avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.nss-byline__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	align-items: center;
	color: var(--nss-muted);
	font-size: 0.95rem;
}
.nss-byline__author { font-weight: 600; color: var(--nss-ink); }
.nss-byline__sep { opacity: 0.45; }

/* ---- Body grid: main (left) + sticky TOC sidebar (right) ---- */
.nss-article__grid { display: block; }
.nss-article__main { min-width: 0; }
@media (min-width: 1000px) {
	.nss-article__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 3.5rem;
		align-items: start;
	}
}
/* No TOC (e.g. short news posts): single centred column, no empty sidebar. */
.nss-article__grid--full { display: block; max-width: 820px; margin: 0 auto; }
.nss-article__hero--nomedia { margin-left: auto; margin-right: auto; }

/* ---- Table of contents (numbered, right sidebar, sticky) ---- */
.nss-toc {
	border: 1px solid var(--nss-line);
	border-radius: var(--nss-radius);
	padding: 1.25rem 1.4rem;
	font-size: 0.95rem;
	background: #fff;
}
.nss-toc__title {
	margin: 0 0 0.5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78rem;
	color: var(--nss-muted);
}
.nss-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: nss-toc; }
.nss-toc__item { counter-increment: nss-toc; border-top: 1px solid var(--nss-line); }
.nss-toc__item:first-child { border-top: none; }
.nss-toc__item a {
	position: relative;
	display: block;
	padding: 0.6rem 0 0.6rem 2.3rem;
	color: var(--nss-ink);
	text-decoration: none;
	line-height: 1.35;
}
.nss-toc__item a::before {
	content: counter(nss-toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #b7bec7;
}
.nss-toc__item a:hover { color: var(--nss-accent); }
.nss-toc__item--l3 a { padding-left: 3rem; font-size: 0.9em; color: var(--nss-muted); }
@media (min-width: 1000px) {
	.nss-toc { position: sticky; top: 100px; max-height: calc(100vh - 140px); overflow: auto; }
}

/* ---- Callout boxes ---- */
.nss-callout {
	border: 1px solid var(--nss-line);
	border-left: 4px solid var(--nss-accent);
	border-radius: var(--nss-radius);
	padding: 1rem 1.25rem;
	margin: 1.75rem 0;
	background: #f8f9fa;
}
.nss-callout__title { margin: 0 0 0.4rem; font-weight: 700; color: var(--nss-ink); }
.nss-callout__body > :first-child { margin-top: 0; }
.nss-callout__body > :last-child { margin-bottom: 0; }
.nss-callout--warning { border-left-color: #c92a2a; background: #fff5f5; }
.nss-callout--warning .nss-callout__title { color: #c92a2a; }
.nss-callout--tip { border-left-color: #2b8a3e; background: #f4fbf5; }
.nss-callout--tip .nss-callout__title { color: #2b8a3e; }
.nss-callout--short-answer {
	border: 1px solid #f3d6d7;
	border-left: 4px solid var(--nss-accent);
	background: #fdf2f2;
	padding: 1.4rem 1.6rem;
	margin-top: 0;
}
.nss-callout--short-answer .nss-callout__title {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	color: var(--nss-accent);
}
.nss-callout--short-answer .nss-callout__title::before { content: "\2726\00a0\00a0"; }
.nss-callout--short-answer .nss-callout__body { font-size: 1.05rem; line-height: 1.6; }

/* ---- Article body typography (Breakdance doesn't style raw post content) ---- */
.nss-article__main { font-size: 1.075rem; line-height: 1.75; color: var(--nss-ink); }
.nss-article__main > h2 {
	font-size: 1.65rem;
	line-height: 1.25;
	font-weight: 700;
	margin: 2.5rem 0 0.9rem;
	scroll-margin-top: 100px;
}
.nss-article__main > h3 {
	font-size: 1.3rem;
	line-height: 1.3;
	font-weight: 700;
	margin: 2rem 0 0.7rem;
	scroll-margin-top: 100px;
}
.nss-article__main p { margin: 0 0 1.15rem; }
.nss-article__main ul,
.nss-article__main ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.nss-article__main li { margin: 0.4rem 0; }
.nss-article__main a { color: var(--nss-accent); }
.nss-article__main img { max-width: 100%; height: auto; border-radius: var(--nss-radius); }
.nss-article__main table { width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: 0.98rem; }
.nss-article__main th,
.nss-article__main td { text-align: left; padding: 0.7rem 0.9rem; border: 1px solid var(--nss-line); vertical-align: top; }
.nss-article__main thead th { background: #f8f9fa; font-weight: 700; }
.nss-article__main figure { margin: 0 0 1.6rem; }
.nss-article__main blockquote {
	margin: 1.5rem 0;
	padding: 0.4rem 1.25rem;
	border-left: 4px solid var(--nss-accent);
	color: var(--nss-muted);
	font-style: italic;
}

/* ---- FAQ accordion ---- */
.nss-faq { margin: 2.5rem 0; }
.nss-faq__title { margin: 0 0 1rem; }
.nss-faq__item { border-bottom: 1px solid var(--nss-line); padding: 0.9rem 0; }
.nss-faq__q {
	cursor: pointer;
	font-weight: 600;
	color: var(--nss-ink);
	list-style: none;
	position: relative;
	padding-right: 1.75rem;
}
.nss-faq__q::-webkit-details-marker { display: none; }
.nss-faq__q::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--nss-accent);
}
.nss-faq__item[open] .nss-faq__q::after { content: "\2212"; }
.nss-faq__a { padding-top: 0.6rem; color: var(--nss-muted); }
.nss-faq__a > :first-child { margin-top: 0; }

/* ---- Author bio ---- */
.nss-author {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	border: 1px solid var(--nss-line);
	border-radius: var(--nss-radius);
	padding: 1.25rem 1.5rem;
	margin: 2.5rem 0;
	background: #fff;
}
.nss-author__media img { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; }
.nss-author__label {
	margin: 0 0 0.2rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--nss-muted);
}
.nss-author__name { margin: 0 0 0.35rem; font-weight: 700; font-size: 1.05rem; }
.nss-author__role { font-weight: 400; color: var(--nss-muted); }
.nss-author__creds { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--nss-muted); }
.nss-author__desc { margin: 0 0 0.5rem; }
.nss-author__link a { color: var(--nss-accent); text-decoration: none; }
.nss-author__link a:hover { text-decoration: underline; }

/* ---- Related articles ---- */
.nss-related {
	margin: 3rem 0 0;
	border-top: 1px solid var(--nss-line);
	padding-top: 2rem;
}
.nss-related__title { margin: 0 0 1.25rem; }
.nss-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.nss-related__card { display: block; text-decoration: none; color: var(--nss-ink); }
.nss-related__img { width: 100%; height: auto; border-radius: var(--nss-radius); margin-bottom: 0.5rem; }
.nss-related__cardtitle { font-weight: 600; line-height: 1.3; }
.nss-related__card:hover .nss-related__cardtitle { color: var(--nss-accent); }

/* ===================================================================
 * Article feed / archive grid ([nss_article_feed])
 * =================================================================== */
.nss-feed {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
}
.nss-feed__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--nss-line);
	border-radius: var(--nss-radius);
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nss-feed__card:hover {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
	transform: translateY(-3px);
}
.nss-feed__imglink {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f2f3f5;
}
.nss-feed__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nss-feed__img--ph { background: linear-gradient(135deg, #ececec, #f7f7f7); }
.nss-feed__content { padding: 1.15rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nss-feed__eyebrow {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nss-accent);
}
.nss-feed__title { margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 700; }
.nss-feed__title a { color: var(--nss-ink); text-decoration: none; }
.nss-feed__card:hover .nss-feed__title a { color: var(--nss-accent); }
.nss-feed__excerpt { margin: 0; color: var(--nss-muted); font-size: 0.95rem; line-height: 1.55; }
.nss-feed__meta { margin: 0.25rem 0 0; color: var(--nss-muted); font-size: 0.85rem; }
.nss-feed__dot { opacity: 0.5; }
.nss-feed__pagination {
	display: flex;
	gap: 0.4rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 3rem 0 0;
}
.nss-feed__pagination a,
.nss-feed__pagination span {
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--nss-line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--nss-ink);
	line-height: 1;
}
.nss-feed__pagination a:hover { border-color: var(--nss-accent); color: var(--nss-accent); }
.nss-feed__pagination .current { background: var(--nss-accent); color: #fff; border-color: var(--nss-accent); }

/* ---- Responsive: stack hero, show TOC above content ---- */
@media (max-width: 999px) {
	.nss-article__hero { grid-template-columns: 1fr; gap: 1.5rem; }
	.nss-hero__media { order: -1; }
	.nss-article__aside { margin-top: 2rem; }
}