/**
 * Single Insight article page.
 *
 * @package Skavend
 */

.single-insight .site-main,
.insa-page {
	background: #fdfbf7;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	overflow-x: hidden;
}

body.single-insight .site-header {
	margin-top: 12px;
	background: linear-gradient(180deg, rgba(253, 252, 247, 0.88), rgba(249, 247, 242, 0.7));
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.75) inset,
		0 10px 28px rgba(46, 60, 52, 0.05);
}

.insa-page {
	--insa-cream: #f8f1e7;
	--insa-green: #0b4232;
	--insa-green-2: #062c21;
	--insa-gold: #b58a55;
	--insa-gold-light: #e2bd80;
	--insa-text: #152520;
	--insa-muted: #5c6560;
	--serif: var(--font-serif, 'Playfair Display', Georgia, serif);
	--sans: var(--font-sans, 'DM Sans', system-ui, sans-serif);
}

.insa-page *,
.insa-page *::before,
.insa-page *::after {
	box-sizing: border-box;
}

.insa-shell {
	width: min(1080px, calc(100% - 64px));
	margin: 0 auto;
}

/* ═══════════════ HERO ═══════════════ */
.insa-hero {
	background: linear-gradient(112deg, var(--insa-cream) 0%, #f5ede2 46%, #f2e9db 100%);
}

.insa-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--insa-muted);
}

.insa-crumbs a { color: var(--insa-text); text-decoration: none; }
.insa-crumbs a:hover { color: var(--insa-gold); }

.insa-kicker {
	margin: 0 0 14px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--insa-gold);
}

.insa-title {
	margin: 0 0 26px;
	max-width: 22ch;
	font-family: var(--serif);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 700;
	line-height: 1.16;
	color: var(--insa-text);
}

.insa-byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 28px;
}

.insa-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

.insa-byline__body b { display: block; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--insa-text); }
.insa-byline__body span { display: block; font-family: var(--sans); font-size: 12px; color: var(--insa-muted); }

.insa-byline__meta {
	margin-left: auto;
	font-family: var(--sans);
	font-size: 12.5px;
	color: var(--insa-muted);
}

.insa-hero__media {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	aspect-ratio: 16 / 7;
	border-radius: 22px 22px 0 0;
	overflow: hidden;
	background: linear-gradient(150deg, #0f5b44, #062f24);
}

.insa-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════ LAYOUT ═══════════════ */
.insa-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	padding: 48px 0 64px;
	align-items: start;
}

.insa-content {
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.85;
	color: var(--insa-text);
}

.insa-content p { margin: 0 0 22px; }

.insa-content h2 {
	margin: 40px 0 16px;
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 700;
	color: var(--insa-text);
}

.insa-content h3 {
	margin: 32px 0 14px;
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 700;
	color: var(--insa-text);
}

.insa-content a { color: var(--insa-gold); text-decoration: underline; }
.insa-content ul,
.insa-content ol { margin: 0 0 22px; padding-left: 22px; }
.insa-content li { margin-bottom: 8px; }
.insa-content img { border-radius: 14px; }
.insa-content blockquote {
	margin: 28px 0;
	padding: 18px 24px;
	border-left: 3px solid var(--insa-gold);
	background: var(--insa-cream);
	border-radius: 0 12px 12px 0;
	font-style: italic;
	color: var(--insa-text);
}

.insa-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin: 32px 0;
}

.insa-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 14px; display: block; }

.insa-links {
	margin: 40px 0;
	padding: 22px 24px;
	background: var(--insa-cream);
	border-radius: 16px;
}

.insa-links h2 {
	margin: 0 0 14px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--insa-text);
}

.insa-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.insa-links li { display: flex; align-items: center; gap: 10px; }

.insa-links__ico { flex-shrink: 0; display: grid; place-items: center; color: var(--insa-gold); }

.insa-links a { font-size: 14px; text-decoration: none; color: var(--insa-green); font-weight: 600; }
.insa-links a:hover { text-decoration: underline; }

.insa-author-box {
	display: flex;
	gap: 18px;
	margin-top: 44px;
	padding: 24px;
	background: #fff;
	border: 1px solid rgba(6, 44, 33, 0.08);
	border-radius: 18px;
}

.insa-author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.insa-author-box b { display: block; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--insa-text); }
.insa-author-box span { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 12px; color: var(--insa-gold); font-weight: 700; }
.insa-author-box p { margin: 0; font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--insa-muted); }

/* ── Sidebar ── */
.insa-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }

.insa-aside__card {
	padding: 22px;
	background: #fff;
	border: 1px solid rgba(6, 44, 33, 0.08);
	border-radius: 16px;
}

.insa-aside__card h3 {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 700;
	color: var(--insa-text);
}

.insa-aside__card p {
	margin: 0 0 16px;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.55;
	color: var(--insa-muted);
}

.insa-share { display: flex; gap: 10px; }

.insa-share a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--insa-cream);
	color: var(--insa-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	transition: background 0.2s ease, color 0.2s ease;
}

.insa-share a:hover { background: var(--insa-green); color: #fff; }

.insa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 46px;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--insa-green), var(--insa-green-2));
	color: #f5e8d3;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.insa-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.insa-btn:hover { color: #f5e8d3; text-decoration: none; }

/* ═══════════════ RELATED ═══════════════ */
.insa-related { padding: 0 0 80px; }

.insa-related h2 {
	margin: 0 0 24px;
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 700;
	color: var(--insa-text);
}

.insa-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.insa-related__card {
	display: block;
	text-decoration: none;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(6, 44, 33, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insa-related__card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(10, 48, 36, 0.1); }

.insa-related__media { aspect-ratio: 16 / 10; background: linear-gradient(150deg, #0f5b44, #062f24); position: relative; }
.insa-related__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insa-related__media .ins-card__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--insa-gold-light); }

.insa-related__card h4 {
	margin: 14px 16px 6px;
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--insa-text);
}

.insa-related__card span {
	display: block;
	margin: 0 16px 16px;
	font-family: var(--sans);
	font-size: 11.5px;
	color: var(--insa-muted);
}

@media (max-width: 1024px) {
	.insa-layout { grid-template-columns: 1fr; }
	.insa-aside { position: static; flex-direction: row; }
	.insa-aside__card { flex: 1; }
}

@media (max-width: 760px) {
	.insa-shell { width: calc(100% - 40px); }
	.insa-hero__media { aspect-ratio: 4 / 3; border-radius: 18px; }
	.insa-byline__meta { margin-left: 0; width: 100%; }
	.insa-aside { flex-direction: column; }
	.insa-related__grid { grid-template-columns: 1fr; }
	.insa-content { font-size: 15px; }
}