/* ============================================
   VERLINGO BLOG — styles (uses tokens from styles.css)
   ============================================ */

/* ===== Blog hero ===== */
.blog-hero {
	padding: 84px 0 56px;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background:
		radial-gradient(700px 320px at 80% 0%, rgba(34, 211, 238, 0.08), transparent 65%),
		var(--paper);
}

.blog-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan-hairline), transparent);
}

.blog-hero-inner {
	max-width: 720px;
}

.blog-hero h1 {
	font-size: clamp(40px, 5vw, 68px);
	font-weight: 560;
	letter-spacing: -0.04em;
	line-height: 1.0;
	margin-top: 20px;
}

.blog-hero h1 .accent {
	color: var(--cyan-2);
}

.blog-hero p {
	margin-top: 22px;
	font-size: 19px;
	line-height: 1.5;
	color: var(--mute);
	max-width: 56ch;
	text-wrap: pretty;
}

/* ===== Category filter row ===== */
.blog-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 36px;
}

.blog-filter {
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: white;
	font-size: 14px;
	font-weight: 450;
	color: var(--mute);
	letter-spacing: -0.01em;
	transition: all .18s ease;
	cursor: pointer;
}

.blog-filter:hover {
	color: var(--ink);
	border-color: var(--ink);
}

.blog-filter.active {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* ===== Featured post ===== */
.blog-featured {
	padding: 64px 0 0;
}

.featured-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	background: white;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform .25s ease, box-shadow .25s ease;
}

.featured-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 32px 64px -24px rgba(10, 10, 11, 0.2);
}

.featured-visual {
	position: relative;
	min-height: 380px;
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(34, 211, 238, 0.18), transparent 60%),
		linear-gradient(160deg, var(--ink) 0%, #14141A 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.featured-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(ellipse 80% 80% at center, black 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 20%, transparent 80%);
}

/* Decorative chat/voice glyph in featured visual */
.fv-orb {
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.35), rgba(34, 211, 238, 0) 70%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fv-orb::before,
.fv-orb::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(34, 211, 238, 0.4);
	animation: fvPulse 3s ease-out infinite;
}

.fv-orb::after {
	animation-delay: 1.5s;
}

@keyframes fvPulse {
	0% {
		transform: scale(0.7);
		opacity: 1;
	}

	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

.fv-core {
	width: 64px;
	height: 64px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	box-shadow: 0 0 40px rgba(34, 211, 238, 0.6);
	z-index: 1;
}

.fv-core svg {
	width: 30px;
	height: 30px;
}

.featured-body {
	padding: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.featured-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyan-2);
	background: var(--cyan-soft);
	border: 1px solid var(--cyan-hairline);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.featured-body h2 {
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 540;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.featured-body p {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--mute);
	text-wrap: pretty;
}

.featured-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.author-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	flex-shrink: 0;
}

.featured-meta .author-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.featured-meta .author-info strong {
	font-size: 14px;
	font-weight: 500;
}

.featured-meta .author-info span {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--mute);
	letter-spacing: 0.04em;
}

.featured-read {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}

.featured-read svg {
	width: 15px;
	height: 15px;
	transition: transform .2s ease;
}

.featured-card:hover .featured-read svg {
	transform: translateX(3px);
}

/* ===== Post grid ===== */
.blog-grid-section {
	padding: 72px 0 120px;
}

.blog-grid-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 36px;
}

.blog-grid-head h3 {
	font-size: 24px;
	font-weight: 540;
	letter-spacing: -0.025em;
}

.blog-grid-head .count {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--mute);
	letter-spacing: 0.04em;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: white;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.post-card:hover {
	transform: translateY(-4px);
	border-color: var(--cyan-hairline);
	box-shadow: 0 20px 40px -20px rgba(10, 10, 11, 0.18);
}

.post-thumb {
	height: 180px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.post-thumb svg.thumb-icon {
	width: 46px;
	height: 46px;
	position: relative;
	z-index: 1;
}

.post-thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(ellipse 80% 80% at center, black 10%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 10%, transparent 75%);
}

.thumb-cyan {
	background: linear-gradient(150deg, #0E1A1D, #06343B);
	color: var(--cyan);
}

.thumb-indigo {
	background: linear-gradient(150deg, #14141F, #1E1B45);
	color: #A5B4FC;
}

.thumb-ink {
	background: linear-gradient(150deg, #14141A, #26262E);
	color: var(--cyan);
}

.thumb-emerald {
	background: linear-gradient(150deg, #0E1A14, #103A2A);
	color: #6EE7B7;
}

.thumb-amber {
	background: linear-gradient(150deg, #1F1810, #3A2A10);
	color: #FCD34D;
}

.thumb-rose {
	background: linear-gradient(150deg, #1F1016, #45132B);
	color: #FDA4C0;
}

.post-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.post-cat {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyan-2);
	margin-bottom: 12px;
}

.post-card h4 {
	font-size: 19px;
	font-weight: 540;
	letter-spacing: -0.02em;
	line-height: 1.22;
	color: var(--ink);
}

.post-card p {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mute);
	text-wrap: pretty;
}

.post-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 20px;
}

.post-foot .author-avatar {
	width: 28px;
	height: 28px;
	font-size: 11px;
}

.post-foot .pf-meta {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--mute);
	letter-spacing: 0.02em;
}

.post-foot .pf-meta strong {
	color: var(--ink);
	font-weight: 500;
}

/* ===== Newsletter band ===== */
.blog-news {
	background:
		radial-gradient(700px 300px at 50% 0%, rgba(34, 211, 238, 0.10), transparent 60%),
		var(--ink);
	color: var(--paper);
	border-radius: 28px;
	padding: 64px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ink-2);
}

.blog-news::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

.blog-news-inner {
	position: relative;
	z-index: 1;
	max-width: 540px;
	margin: 0 auto;
}

.blog-news h3 {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 540;
	letter-spacing: -0.03em;
	color: var(--paper);
}

.blog-news h3 .accent {
	color: var(--cyan);
}

.blog-news p {
	margin-top: 14px;
	color: rgba(244, 244, 240, 0.65);
	font-size: 16px;
}

.news-form {
	display: flex;
	gap: 10px;
	margin-top: 28px;
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
}

.news-form input {
	flex: 1;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 14px 20px;
	color: var(--paper);
	font: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color .15s ease, background .15s ease;
}

.news-form input::placeholder {
	color: rgba(244, 244, 240, 0.4);
}

.news-form input:focus {
	border-color: var(--cyan);
	background: rgba(255, 255, 255, 0.08);
}

.news-foot {
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: rgba(244, 244, 240, 0.45);
}

/* ===== Article page ===== */
.article-head {
	padding: 64px 0 48px;
	border-bottom: 1px solid var(--line);
	position: relative;
}

.article-head .container {
	max-width: 1100px;
	padding: 0 32px;
}

.article-head h1 {
	font-size: clamp(36px, 4.8vw, 60px);
	font-weight: 560;
	letter-spacing: -0.04em;
	line-height: 1.04;
	max-width: 24ch;
	text-wrap: balance;
}

.article-head .standfirst {
	margin-top: 22px;
	font-size: 20px;
	line-height: 1.5;
	color: var(--mute);
	text-wrap: pretty;
	max-width: 60ch;
}

.article-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--mute);
	letter-spacing: 0.04em;
	margin-bottom: 28px;
}

.article-breadcrumb a {
	color: var(--mute);
	transition: color .15s ease;
}

.article-breadcrumb a:hover {
	color: var(--cyan-2);
}

.article-breadcrumb svg {
	width: 13px;
	height: 13px;
}

.article-cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyan-2);
	background: var(--cyan-soft);
	border: 1px solid var(--cyan-hairline);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 22px;
}

.article-byline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
}

.article-byline .author-avatar {
	width: 46px;
	height: 46px;
	font-size: 15px;
}

.article-byline .ab-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.article-byline .ab-info strong {
	font-size: 15px;
	font-weight: 500;
}

.article-byline .ab-info span {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--mute);
	letter-spacing: 0.03em;
}

.article-share {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

.article-share a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mute);
	transition: all .15s ease;
}

.article-share a:hover {
	color: var(--cyan-2);
	border-color: var(--cyan-hairline);
	background: var(--cyan-soft);
}

.article-share svg {
	width: 16px;
	height: 16px;
}

/* Article hero banner */
.article-banner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 36px 32px 0;
}

.article-banner-slot {
	display: block;
	width: 100%;
	height: 440px;
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-card);
}

/* Article body — typographic flow */
.article-body {
	padding: 56px 0 80px;
}

.article-layout {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 64px;
	align-items: start;
}

.article-content {
	max-width: 720px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--ink-2);
	letter-spacing: -0.011em;
}

.article-content>*+* {
	margin-top: 26px;
}

.article-content h2 {
	font-size: 30px;
	font-weight: 560;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin-top: 52px;
	line-height: 1.15;
	scroll-margin-top: 90px;
}

.article-content h3 {
	font-size: 22px;
	font-weight: 560;
	letter-spacing: -0.022em;
	color: var(--ink);
	margin-top: 40px;
	scroll-margin-top: 90px;
}

.article-content p {
	color: var(--ink-2);
}

.article-content a {
	color: var(--cyan-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.article-content strong {
	color: var(--ink);
	font-weight: 600;
}

.article-content ul,
.article-content ol {
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.article-content li {
	padding-left: 6px;
}

.article-content li::marker {
	color: var(--cyan-2);
}

.article-content blockquote {
	margin: 40px 0;
	padding: 8px 0 8px 28px;
	border-left: 3px solid var(--cyan);
	font-size: 24px;
	font-weight: 480;
	letter-spacing: -0.025em;
	line-height: 1.4;
	color: var(--ink);
	font-family: var(--font-sans);
}

.article-content blockquote cite {
	display: block;
	margin-top: 14px;
	font-size: 14px;
	font-style: normal;
	font-family: var(--font-mono);
	color: var(--mute);
	letter-spacing: 0.02em;
}

.article-content figure {
	margin: 40px 0;
}

.article-content figure .fig-box {
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	background: linear-gradient(160deg, var(--ink), #14141A);
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.article-content figure .fig-box::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: radial-gradient(ellipse 80% 80% at center, black 10%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 10%, transparent 80%);
}

.article-content figcaption {
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--mute);
	text-align: center;
	letter-spacing: 0.02em;
}

.article-content .callout {
	background: var(--cyan-soft);
	border: 1px solid var(--cyan-hairline);
	border-radius: var(--r-lg);
	padding: 24px 26px;
	margin: 40px 0;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.article-content .callout svg {
	width: 22px;
	height: 22px;
	color: var(--cyan-2);
	flex-shrink: 0;
	margin-top: 2px;
}

.article-content .callout p {
	margin: 0;
	font-size: 16px;
	color: var(--ink-2);
}

.article-content .callout strong {
	color: var(--ink);
}

.article-content hr {
	border: none;
	border-top: 1px solid var(--line);
	margin: 48px 0;
}

.article-content .lead {
	font-size: 21px;
	line-height: 1.55;
	color: var(--ink);
	font-weight: 450;
}

/* Sticky TOC sidebar */
.article-toc {
	position: sticky;
	top: 92px;
}

.article-toc .toc-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 16px;
}

.article-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 1px solid var(--line);
}

.article-toc a {
	display: block;
	padding: 7px 0 7px 16px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	font-size: 13.5px;
	color: var(--mute);
	line-height: 1.4;
	transition: color .15s ease, border-color .15s ease;
}

.article-toc a:hover {
	color: var(--ink);
}

.article-toc a.active {
	color: var(--cyan-2);
	border-left-color: var(--cyan);
	font-weight: 500;
}

.toc-progress {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.toc-progress-bar {
	height: 4px;
	background: var(--paper-3);
	border-radius: 999px;
	overflow: hidden;
}

.toc-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
	border-radius: 999px;
	transition: width .1s linear;
}

.toc-progress-label {
	margin-top: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--mute);
	letter-spacing: 0.04em;
}

/* Article footer: tags + author bio + related */
.article-foot {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 32px 0;
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--line);
}

.article-tag {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	font-size: 13px;
	color: var(--ink-2);
	transition: all .15s ease;
}

.article-tag:hover {
	border-color: var(--cyan-hairline);
	color: var(--cyan-2);
}

.author-bio {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 40px 0;
	border-bottom: 1px solid var(--line);
}

.author-bio .author-avatar {
	width: 64px;
	height: 64px;
	font-size: 22px;
	flex-shrink: 0;
}

.author-bio .bio-text h4 {
	font-size: 18px;
	font-weight: 540;
	letter-spacing: -0.02em;
}

.author-bio .bio-text .bio-role {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--cyan-2);
	letter-spacing: 0.04em;
	margin-top: 2px;
}

.author-bio .bio-text p {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mute);
}

/* Related posts */
.related {
	padding: 80px 0 120px;
	background: var(--paper-2);
	border-top: 1px solid var(--line);
}

.related h3 {
	font-size: 24px;
	font-weight: 540;
	letter-spacing: -0.025em;
	margin-bottom: 32px;
}

/* ===== NEW: Article tables ===== */
.article-content table {
	width: 100%;
	margin: 40px 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	font-size: 15px;
	line-height: 1.5;
}

.article-content thead th {
	background: var(--paper-2);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
	text-align: left;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
}

.article-content tbody td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	vertical-align: top;
}

.article-content tbody tr:last-child td {
	border-bottom: none;
}

.article-content tbody tr:nth-child(even) td {
	background: var(--paper-2);
}

.article-content tbody tr {
	transition: background .15s ease;
}

.article-content td strong {
	color: var(--ink);
}

/* First column reads as the row label */
.article-content tbody td:first-child {
	color: var(--ink);
	font-weight: 500;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
	.featured-card {
		grid-template-columns: 1fr;
	}

	.featured-visual {
		min-height: 240px;
	}

	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.article-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.article-toc {
		display: none;
	}
}

@media (max-width: 680px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}

	.featured-body {
		padding: 28px;
	}

	.blog-news {
		padding: 48px 24px;
	}

	.news-form {
		flex-direction: column;
	}

	.news-form .btn {
		justify-content: center;
	}

	.article-content {
		font-size: 17px;
	}

	.article-share {
		display: none;
	}

	.article-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.article-content thead th,
	.article-content tbody td {
		padding: 12px 14px;
	}
}