/* ============================================================================
   BLOG (Go-native public pages) — 1:1 with the live WordPress nav.ro/blog theme.
   This file carries ONLY the blog-scoped rules (header.blog* + section.blog*),
   lifted verbatim from the WP "NAV.RO Blog" theme stylesheets:
     wp-content/themes/nav/style.min.css          (base, <=600)
     wp-content/themes/nav/css/responsive-tablet.min.css   (@media >=601)
     wp-content/themes/nav/css/responsive-desktop.min.css  (@media >=993)
   The responsive GRID + reset (.row/.col/.wrapper/.l6/.m4/.s12/.xl8/.centered,
   *{box-sizing}, body reset) come from resort.min.css, which the GLOBAL
   new.index.min.css already @imports on every page — so it is NOT duplicated
   here. The chrome (mega-menu, footer) is the Go app's; this file never styles
   it. Reactions (like/unlike) and comments are DROPPED (no Go backend).
   The .chroma.* block at the very bottom is the Go-only syntax palette (the WP
   blog used enlighterjs; the Go blog renders code via chroma — github-light to
   match renderer.go: WithStyle("github") + WithClasses(true)).
   ========================================================================== */

/* NOTE: .spr-2 (the shared sprite, used by the fixed-nav logo AND the search-field
   magnifier) is owned by new.index.min.css, which ships a hi-DPI @media override
   to sprite_2_retina.webp. blog.css loads AFTER the base, so re-declaring .spr-2
   here with the plain sprite clobbered that retina override on 2x screens — the
   logo rendered blurry. Do NOT redefine .spr-2 in blog.css (BLOG-LOGO-RETINA). */

/* ============================================================================
   HERO — header.blog  (the teal->blue gradient band + cover photo + search)
   ========================================================================== */
header.blog {
	color: #fff;
	position: relative;
	height: auto;
	overflow: visible;
}
header.blog .wrapper {
	position: relative;
	height: 100%;
	font-size: 0;
	overflow: visible;
}
header.blog .cover {
	background-image: url(/imgs/blog-header.jpg);
	/* kill the legacy `header .cover { animation: bgZoom 30s infinite alternate }`
	   Ken-Burns zoom — its slow drift read as the whole page moving (BLOG legacy bug). */
	animation: none;
}
header.blog .text {
	padding: 130px 0 20px;
	height: 100%;
	text-align: center;
}
header.blog .text .col {
	vertical-align: middle;
	height: 100%;
}
header.blog .text .col-2 {
	margin-top: 30px;
}
header.blog .text h1 {
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: 600;
}
header.blog .text .descr,
section.blog .layer-1 .art-box .excerpt p {
	font-size: 14px;
	font-weight: 200;
}
header.blog .text h2 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}
header.blog .search-field {
	border-radius: 23px;
	background-color: rgba(255, 255, 255, .8);
	height: 46px;
	position: relative;
	overflow: hidden;
	width: 270px;
	display: inline-block;
	margin-top: 20px;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	transition: box-shadow .2s;
}
header.blog .search-field.lb-focused {
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .3);
}
header.blog .search-field:after {
	background-image: url(/imgs/sprite_2.webp);
	background-size: 880px 790px;
	display: block;
	top: 0;
	bottom: 0;
	content: '';
	position: absolute;
	width: 23px;
	height: 23px;
	left: 15px;
	margin: auto;
	background-position: -537px -123px;
}
/* hi-DPI: swap to the 2x sprite so the magnifier is crisp on retina (mirrors the
   base CSS .spr-2 retina override; same 880x790 coordinate system, image only). */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	header.blog .search-field:after { background-image: url('/imgs/sprite_2_retina.webp'); }
}
header.blog .search-field input[type=text] {
	display: block;
	border: 0;
	height: 100%;
	font-size: 16px;
	font-weight: 200;
	margin-left: 50px;
	width: 76%;
	text-align: left;
	padding-left: 22px;
	color: #09757a;
	background-color: transparent;
}
header.blog .search-field input[type=text]::-webkit-input-placeholder {
	color: #09757a;
	background-color: rgba(0, 190, 188, .1);
}
header.blog .search-field input[type=text]::-moz-placeholder {
	color: #09757a;
	background-color: rgba(0, 190, 188, .1);
}
header.blog .search-field input[type=text]::placeholder {
	color: #09757a;
	background-color: transparent;
}

/* ============================================================================
   LAYER 1 — the #fff content panel (article list / single + sidebar)
   ========================================================================== */
section.blog .layer-1 {
	/* BLOG-Z: transparent so the fixed .blog-aurora shows through in the margin
	   around the glass .wrapper (was #fafafa, an opaque panel behind the old card). */
	background-color: transparent;
	padding-bottom: 50px;
}
section.blog .layer-1 .toc-menu {
	overflow: visible;
}
/* ============================================================================
   BLOG-Z — MEGA TECH wrapper: a glass panel with an animated conic-gradient
   border, an inner mesh shimmer, a cursor spotlight + corner markers, floating
   (via margin) over a fixed aurora backdrop (.blog-aurora, rendered before the
   hero). Scope is ONLY this outer chrome — every existing inner block (techstrip,
   techtabs, post rows, sidebar art-box, article-tech) is kept untouched.
   font-size:0 stays DROPPED here (LEGACY-CSS-AUDIT-2 / BLOG-Y-FIX-2) and is
   re-applied narrowly on .pagination below.
   ========================================================================== */
section.blog .layer-1 .wrapper {
	position: relative;
	z-index: 1; /* lift the card above the teal hero where the negative top margin overlaps it */
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.65);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: none;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.5) inset,
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 8px 32px -8px rgba(0, 190, 188, 0.25),
		0 24px 48px -16px rgba(0, 113, 185, 0.2),
		0 48px 96px -24px rgba(139, 92, 246, 0.15);
	overflow: visible; /* BLOG-AA: sticky side panels need a non-clipping ancestor (the list grid has no floats to clear now) */
	isolation: isolate;
	margin: -35px auto 32px; /* pull the whole card UP to overlap header.blog .wrapper by ~35px */
	max-width: 1400px;
}
@property --mega-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
/* animated conic-gradient ring — the dual mask keeps only the 1.5px border edge
   (content-box XOR full box), not a filled rectangle. Standard `mask` added
   alongside `-webkit-mask` so the ring also renders in Firefox (the brief shipped
   webkit-only, which left FF without the ring). */
section.blog .layer-1 .wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 20px;
	padding: 1.5px;
	background: conic-gradient(from var(--mega-angle, 0deg), #00bebc 0%, transparent 25%, #0071b9 50%, transparent 75%, #8b5cf6 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: mega-rotate 6s linear infinite;
	pointer-events: none;
	z-index: 2;
}
@keyframes mega-rotate { to { --mega-angle: 360deg; } }
/* Firefox / no-@property fallback: slide a linear gradient through the same ring */
@supports not (background: paint(something)) {
	section.blog .layer-1 .wrapper::before {
		background: linear-gradient(90deg, #00bebc, #0071b9, #8b5cf6, #00bebc);
		background-size: 200% 100%;
		animation: mega-shift 4s linear infinite;
	}
	@keyframes mega-shift { to { background-position: 200% 0; } }
}
/* inner mesh shimmer — ambient, low-opacity, below the spotlight */
section.blog .layer-1 .wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 10%, rgba(0, 190, 188, 0.08) 0%, transparent 40%),
		radial-gradient(circle at 80% 30%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
		radial-gradient(circle at 50% 90%, rgba(0, 113, 185, 0.06) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}
/* cursor spotlight — blog.js sets --mx/--my on it (pointer devices only) */
.wrapper-spotlight {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: 20px;
	background: radial-gradient(600px circle at var(--mx, -100%) var(--my, -100%), rgba(0, 190, 188, 0.12), transparent 40%);
}
/* L-shaped corner markers, one per corner (rotated) */
.wrapper-corner { position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 3; }
.wrapper-corner svg { width: 100%; height: 100%; }
.wrapper-corner.tl { top: 12px; left: 12px; }
.wrapper-corner.tr { top: 12px; right: 12px; transform: rotate(90deg); }
.wrapper-corner.bl { bottom: 12px; left: 12px; transform: rotate(-90deg); }
.wrapper-corner.br { bottom: 12px; right: 12px; transform: rotate(180deg); }
.wrapper-corner path { stroke: #00bebc; stroke-width: 1.5; fill: none; }
/* fixed aurora backdrop — three blurred brand blobs drifting behind a masked grid */
.blog-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #fafbfc; pointer-events: none; }
.blog-aurora .blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.22; animation: aurora-float 20s ease-in-out infinite; }
.blog-aurora .blob-1 { width: 600px; height: 600px; background: #00bebc; top: -100px; left: -100px; }
.blog-aurora .blob-2 { width: 700px; height: 700px; background: #8b5cf6; top: 40%; right: -200px; animation-delay: -7s; }
.blog-aurora .blob-3 { width: 500px; height: 500px; background: #0071b9; bottom: -100px; left: 30%; animation-delay: -14s; }
@keyframes aurora-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(80px, -50px) scale(1.1); }
	66% { transform: translate(-50px, 80px) scale(0.95); }
}
.blog-aurora .grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(0, 113, 185, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 113, 185, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
	mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
	section.blog .layer-1 .wrapper::before { animation: none; }
	.blog-aurora .blob { animation: none; }
}
section.blog .layer-1 .content {
	margin: 0 15px;
}

/* breadcrumb / menu-tree */
section.blog .layer-1 .menu-tree {
	padding: 30px 0 25px;
}
section.blog .layer-1 .menu-tree a {
	font-size: 24px;
	opacity: .88;
	color: #0071b9;
	font-weight: 400;
	text-decoration: none;
}
section.blog .layer-1 .menu-tree a.active,
section.blog .layer-1 article h2 {
	background: -webkit-linear-gradient(0deg, #0071b9 0, #00bebc 35%);
	color: #0071b9;
	-webkit-text-fill-color: transparent;
}
section.blog .layer-1 .menu-tree a.active {
	font-size: 24px;
	font-weight: 600;
	text-decoration: none;
	background-clip: border-box;
	-webkit-background-clip: text;
}
section.blog .layer-1 .info-line {
	font-size: 18px;
	margin-bottom: 30px;
}

/* aside (right sidebar) */
section.blog .layer-1 .aside {
	padding-left: 30px;
}
section.blog .layer-1 .aside h2 {
	font-size: 14px;
	color: #10bac6;
	margin-left: 10px;
	margin-bottom: 20px;
}

/* ---- art-box (list card + sidebar card) ---------------------------------- */
section.blog .layer-1 .art-box {
	border: 10px solid #f7f7f9;
	padding: 15px;
	margin-bottom: 20px;
	transition: border-color 250ms;
	background-color: rgba(0, 190, 188, .01);
}
section.blog .layer-1 .art-box:hover {
	border-color: #eaeaf2;
}
section.blog .layer-1 .aside .art-box {
	padding: 18px 0;
}
/* DEVIATION FROM WP (BLOG-Q): the live theme served a pre-sized 300x157
   thumbnail into .thumb, so the WP rule has no background-size. Our migration
   stored only the full-size cover, which at natural size crops to the top-left
   (ugly zoom-in). background-size:cover scales the full image down to fill the
   box, center-cropped — a proper thumbnail. Backlog BLOG-R generates real
   300x157 thumbnails at migration time and drops this override. */
section.blog .layer-1 .art-box .thumb {
	height: 200px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: top;
}
section.blog .layer-1 .art-box .inside {
	margin-top: 20px;
	position: relative;
}
section.blog .layer-1 .art-box h2 {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
section.blog .layer-1 .art-box .excerpt {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
section.blog .layer-1 .art-box a.btn-more,
section.blog .layer-1 .pagination a {
	color: #fff;
	background-image: -webkit-linear-gradient(0deg, #0071b9 0, #00bebc 100%);
	background-image: linear-gradient(0deg, #0071b9 0, #00bebc 100%);
	text-align: center;
}
section.blog .layer-1 .art-box a.btn-more {
	display: block;
	margin-top: 20px;
	border-radius: 15px;
	font-size: 14px;
	font-weight: 600;
	padding: 14px 30px;
}
section.blog .layer-1 .art-box .categ-link {
	font-size: 14px;
	color: #09757a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 20px;
	display: block;
	background-color: rgba(0, 190, 188, .1);
	padding: 5px;
	border-radius: 8px;
	max-width: 100px;
	text-align: center;
}
section.blog .layer-1 .art-box h3 {
	font-size: 18px;
	line-height: 28px;
}
section.blog .layer-1 .art-box .date {
	color: #10bac6;
	text-align: center;
}
section.blog .layer-1 .art-box .date span {
	display: block;
}
section.blog .layer-1 .art-box .date .d {
	font-size: 22px;
	font-weight: 600;
}
section.blog .layer-1 .art-box .date .m {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}
section.blog .layer-1 .art-box .date .y {
	font-size: 11px;
}
section.blog .layer-1 .art-box a.btn-read {
	margin-top: 20px;
	font-size: 13px;
	color: #10bac6;
	padding: 10px 20px;
	display: inline-block;
	border-radius: 15px;
	border: 1px solid #10bac6;
}
section.blog .layer-1 .art-box a.btn-more:hover span,
section.blog .layer-1 .art-box a.btn-read:hover span {
	display: block;
	animation: .3s forwards btt-hover-fx;
}
@keyframes btt-hover-fx {
	50% { opacity: 0; transform: translate3d(0, 100%, 0); }
	51% { opacity: 0; transform: translate3d(0, -100%, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---- pagination ---------------------------------------------------------- */
section.blog .layer-1 .pagination {
	padding: 10px 0 30px;
	font-size: 0; /* remove whitespace between the inline-block page links (was on .wrapper) */
}
section.blog .layer-1 .pagination a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 8px;
	display: inline-block;
	font-size: 14px;
	margin-right: 8px;
}

/* ---- single article body ------------------------------------------------- */
section.blog .layer-1 .art-content {
	margin-top: 20px;
	margin-bottom: 20px;
}
section.blog .layer-1 article a img {
	display: block;
}
section.blog .layer-1 article p {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 5px;
	margin-left: -6px;
	text-align: justify;
}
section.blog .layer-1 article h2 {
	font-size: 16px;
	margin-bottom: 5px;
	margin-top: 10px !important;
	line-height: 1.5;
	font-weight: 700;
	background-clip: border-box;
	-webkit-background-clip: text;
	padding: 5px 0;
	border-bottom: 1px solid rgba(0, 113, 185, .3);
}
section.blog .layer-1 article h3 {
	font-size: 18px;
	margin-top: 35px;
	margin-bottom: 5px;
	margin-left: 20px;
	line-height: 1.2;
	font-weight: 400;
	color: #0071b9;
	background: -webkit-linear-gradient(0deg, #0071b9 0, #00bebc 35%);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
section.blog .layer-1 article ol,
section.blog .layer-1 article ul {
	list-style-type: disclosure-closed;
	background-color: rgba(200, 223, 255, .1);
	color: #4d5b7c;
	margin: 15px;
	border: 8px solid rgba(0, 60, 86, .1);
}
section.blog .layer-1 article ol li,
section.blog .layer-1 article ul li {
	font-size: 16px;
	margin-left: 30px;
	padding: 10px;
}
section.blog .layer-1 article .alignleft {
	float: left;
	margin: 15px 15px 10px 0;
}
section.blog .layer-1 article .alignright {
	float: right;
	margin: 15px 0 10px 15px;
}
section.blog .layer-1 article .aligncenter {
	clear: both;
	display: block;
	margin: 15px auto;
}
section.blog .layer-1 article a {
	color: #0071b9;
	cursor: pointer;
	text-decoration: none;
}
section.blog .layer-1 article a:hover {
	text-decoration: none;
}

/* single article entry-meta / entry-footer (Go content-single markup) */
section.blog .layer-1 .entry-meta {
	margin-bottom: 15px;
}
section.blog .layer-1 .entry-meta .entry-date {
	font-size: 14px;
	color: #6a768f;
}
section.blog .layer-1 .entry-meta .entry-category a {
	font-size: 14px;
	color: #09757a;
	margin-left: 12px;
	background-color: rgba(0, 190, 188, .1);
	padding: 5px 10px;
	border-radius: 8px;
	text-decoration: none;
}
section.blog .layer-1 .entry-footer {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #e4e4e4;
	/* The dark-navy `footer{...}` bleed is fixed at the root (LEGACY-CSS-AUDIT
	   scoped it to `body>footer`), so the BLOG-T defensive background/color reset
	   is no longer needed here. */
}
/* Footer tags: light, inline links on the white panel — NOT the dark hero
   badges (header.blog .tags). WP renders the post tags as plain links here. */
section.blog .layer-1 .entry-tags a {
	display: inline-block;
	color: #10bac6;
	font-size: 14px;
	margin-right: 8px;
	text-decoration: none;
}
section.blog .layer-1 .entry-tags a:hover {
	color: #0071b9;
}

/* BLOG-T issue 2 — contain article-content overflow so wide media (images, code
   blocks, tables, iframes) scroll INSIDE their own box and never push the page
   sideways (the site-wide horizontal jitter). Scoped to section.blog .layer-1
   (the content that actually overflows) — NEVER html/body, which would turn the
   whole page into a scroll container. overflow-x:clip (not hidden) contains
   horizontally WITHOUT making the article a scroll container (hidden would force
   overflow-y to compute to auto). */
section.blog .layer-1 article,
section.blog .layer-1 .entry-content {
	max-width: 100%;
	overflow-x: clip;
}
section.blog .layer-1 .entry-content img,
section.blog .layer-1 .entry-content iframe {
	max-width: 100%;
	height: auto;
}
section.blog .layer-1 .entry-content pre,
section.blog .layer-1 .entry-content table {
	max-width: 100%;
	overflow-x: auto;
}

/* ============================================================================
   LAYER 2 — the stats band (categorii / articole / comentarii)
   ========================================================================== */
section.blog .layer-2 .wrapper {
	padding: 30px 0;
	font-size: 0;
}
section.blog .layer-2 .col {
	margin-bottom: 20px;
	position: relative;
	text-align: center;
}
section.blog .layer-2 .col strong {
	font-size: 20px;
	font-weight: 700;
	color: #0071b9;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
}
section.blog .layer-2 .col span {
	font-size: 17px;
	color: #192a41;
	display: inline-block;
	vertical-align: middle;
}

/* ============================================================================
   shared content widgets (WP block quote + nav table)
   ========================================================================== */
.wp-block-quote {
	display: block;
	padding: 2px 2px 2px 10px;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.42857143;
	color: #333;
	word-break: break-all;
	word-wrap: break-word;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-left: 3px solid #ccc;
	border-radius: 0;
}
.wp-block-code code {
	background-color: rgba(0, 190, 188, .1);
	color: #09757a;
	font-size: 14px;
	padding: 25px;
	border-style: dashed;
}
table.navTable {
	border: 1px solid #ddd;
	background-color: #fff;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	border-spacing: 0;
}
table.navTable td,
table.navTable th {
	border: 1px solid #ddd;
	padding: 4px 6px;
}
table.navTable tbody td {
	font-size: 14px;
	line-height: 1.4rem;
	color: #000;
}
table.navTable tr:nth-child(2n) {
	background: #f2f2f2;
}
table.navTable thead {
	background: #fff;
}
table.navTable thead th {
	font-size: 19px;
	font-weight: 700;
	color: #000;
	text-align: center;
	border-left: 1px solid #ddd;
}
table.navTable thead th:first-child {
	border-left: none;
}

/* ============================================================================
   @media >=601 (tablet)  — from responsive-tablet.min.css (blog-scoped)
   ========================================================================== */
@media only screen and (min-width: 601px) {
	header.blog .text h1,
	header.blog .text h2,
	section.blog .layer-2 .col strong {
		font-size: 26px;
	}
	header.blog .text .descr,
	section.blog .layer-1 .art-box .excerpt p,
	section.blog .layer-1 .aside h2,
	section.blog .layer-1 .menu-tree a,
	section.blog .layer-1 .pagination a,
	section.blog .layer-1 article p {
		font-size: 15px;
	}
	section.blog .layer-1 .art-box .inside {
		padding: 0 20px;
	}
	section.blog .layer-1 .art-box a.btn-more {
		display: inline-block;
	}
	section.blog .layer-1 .art-box h2,
	section.blog .layer-1 article h2,
	section.blog .layer-2 .col span {
		font-size: 20px;
	}
	section.blog .layer-2 .col {
		margin-bottom: 0;
	}
}

/* ============================================================================
   @media >=993 (desktop) — from responsive-desktop.min.css (blog-scoped)
   ========================================================================== */
@media only screen and (min-width: 993px) {
	header.blog {
		height: 500px;
	}
	header.blog .text {
		padding: 100px 0 72px;
	}
	header.blog .text .descr {
		font-size: 16px;
	}
	header.blog .text .col .centered {
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	header.blog .text .col-2 {
		background: rgba(255, 255, 255, .1);
		margin-top: 0;
	}
	header.blog .text h1 {
		font-size: 44px;
	}
	header.blog .text h2 {
		font-size: 30px;
	}
	section.blog .layer-1 .content {
		margin: 0 30px;
	}
	section.blog .layer-1 .menu-tree a {
		font-size: 24px;
	}
	section.blog .layer-1 .aside h2 {
		font-size: 18px;
	}
	section.blog .layer-1 .art-box {
		padding: 30px;
	}
	section.blog .layer-1 .art-box .inside {
		position: relative;
		padding: 0 30px;
		margin-top: 0;
	}
	section.blog .layer-1 .art-box h2 {
		font-size: 26px;
	}
	section.blog .layer-1 .pagination a {
		width: 42px;
		height: 42px;
		line-height: 42px;
		font-size: 16px;
	}
	section.blog .layer-1 article p {
		font-size: 16px;
		margin-bottom: 5px;
		margin-left: -6px;
	}
	section.blog .layer-1 article h2 {
		font-size: 24px;
		margin-bottom: 5px;
		margin-top: 25px;
		font-weight: 400;
		color: #0071b9;
	}
	section.blog .layer-2 .col {
		height: 77px;
		line-height: 77px;
	}
	section.blog .layer-2 .col:after {
		display: block;
		position: absolute;
		content: '';
		top: 0;
		right: 0;
		width: 2px;
		height: 77px;
		background-image: linear-gradient(90deg, rgba(33, 33, 33, 0) 0, #212121 50%, rgba(33, 33, 33, 0) 100%);
		opacity: .2;
	}
	section.blog .layer-2 .col:last-child:after {
		display: none;
	}
	section.blog .layer-2 .col strong {
		font-size: 36px;
	}
	section.blog .layer-1 .art-box .categ-link {
		right: 0;
		bottom: 0;
		position: absolute;
		margin-top: 0;
		display: inline;
	}
}

/* ============================================================================
   CODE BLOCKS — chroma <pre class="chroma light"><code>… inside .entry-content
   (the WP theme used enlighterjs; the Go blog renders code via chroma).
   ========================================================================== */
.entry-content pre {
	font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
	font-size: 14px;
	line-height: 1.55;
	background: rgba(0, 190, 188, .1);
	color: #09757a;
	border: 1px dashed rgba(9, 117, 122, .4);
	border-radius: 6px;
	padding: 18px 20px;
	overflow-x: auto;
	margin: 1.6em 0;
	-webkit-text-size-adjust: none;
}
.entry-content pre code {
	background: none;
	color: inherit;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: inherit;
}
.entry-content pre.chroma,
.entry-content pre.chroma.light {
	background: #f6f8fa;
	color: #1f2328;
	border: 1px solid #e4e4e4;
}

/* ---- chroma github-light token palette (matches renderer.go) ------------- */
.chroma.light .err { color: #f6f8fa; background-color: #82071e }
.chroma.light .k { color: #cf222e }
.chroma.light .kc { color: #cf222e }
.chroma.light .kd { color: #cf222e }
.chroma.light .kn { color: #cf222e }
.chroma.light .kp { color: #cf222e }
.chroma.light .kr { color: #cf222e }
.chroma.light .kt { color: #cf222e }
.chroma.light .na { color: #1f2328 }
.chroma.light .nc { color: #1f2328 }
.chroma.light .no { color: #0550ae }
.chroma.light .nd { color: #0550ae }
.chroma.light .ni { color: #6639ba }
.chroma.light .nl { color: #990000; font-weight: bold }
.chroma.light .nn { color: #24292e }
.chroma.light .nx { color: #1f2328 }
.chroma.light .nt { color: #0550ae }
.chroma.light .nb { color: #6639ba }
.chroma.light .bp { color: #6a737d }
.chroma.light .nv { color: #953800 }
.chroma.light .vc { color: #953800 }
.chroma.light .vg { color: #953800 }
.chroma.light .vi { color: #953800 }
.chroma.light .vm { color: #953800 }
.chroma.light .nf { color: #6639ba }
.chroma.light .fm { color: #6639ba }
.chroma.light .s { color: #0a3069 }
.chroma.light .sa { color: #0a3069 }
.chroma.light .sb { color: #0a3069 }
.chroma.light .sc { color: #0a3069 }
.chroma.light .dl { color: #0a3069 }
.chroma.light .sd { color: #0a3069 }
.chroma.light .s2 { color: #0a3069 }
.chroma.light .se { color: #0a3069 }
.chroma.light .sh { color: #0a3069 }
.chroma.light .si { color: #0a3069 }
.chroma.light .sx { color: #0a3069 }
.chroma.light .sr { color: #0a3069 }
.chroma.light .s1 { color: #0a3069 }
.chroma.light .ss { color: #032f62 }
.chroma.light .m { color: #0550ae }
.chroma.light .mb { color: #0550ae }
.chroma.light .mf { color: #0550ae }
.chroma.light .mh { color: #0550ae }
.chroma.light .mi { color: #0550ae }
.chroma.light .il { color: #0550ae }
.chroma.light .mo { color: #0550ae }
.chroma.light .o { color: #0550ae }
.chroma.light .ow { color: #0550ae }
.chroma.light .or { color: #0550ae }
.chroma.light .p { color: #1f2328 }
.chroma.light .c { color: #57606a }
.chroma.light .ch { color: #57606a }
.chroma.light .cm { color: #57606a }
.chroma.light .c1 { color: #57606a }
.chroma.light .cs { color: #57606a }
.chroma.light .cp { color: #57606a }
.chroma.light .cpf { color: #57606a }
.chroma.light .gd { color: #82071e; background-color: #ffebe9 }
.chroma.light .ge { color: #1f2328 }
.chroma.light .gi { color: #116329; background-color: #dafbe1 }
.chroma.light .go { color: #1f2328 }
.chroma.light .gl { text-decoration: underline }
.chroma.light .w { color: inherit }

/* tech strip — BLOG-U-POSITION: contained panel inside .wrapper, above the title */
:root {
  --tech-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  /* BLOG-AA side panels */
  --line: rgba(15, 23, 42, 0.1);
  --muted: #6b7280;
  --ink: #0d1117;
  --faded: #9ca3af;
}

/* On list pages, shrink the title block to its content width and centre it, with
   left-aligned content, so the prompt below starts exactly where "NAV.ro" starts.
   (Absent on the article page → plain block, title stays centred.) */
.blog-titlewrap--tech {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.blog-techstrip {
  /* Plain prompt line tucked directly UNDER the title — no panel/background
     (the chips strip in the right column keeps its own dark panel). */
  margin: 0 0 16px 0;
  position: relative;
  z-index: 6;
}
.blog-techstrip__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--tech-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.blog-techstrip__prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.blog-techstrip__prompt svg {
  width: 12px;
  height: 12px;
  color: #14ffe9;
  flex-shrink: 0;
}
.blog-techstrip__prompt .path {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.blog-techstrip__prompt .blog-techstrip__flag { color: #14ffe9; background: none; }
.blog-techstrip__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: #14ffe9;
  vertical-align: -0.1em;
  animation: blog-blink 1s steps(1) infinite;
}
@keyframes blog-blink { 50% { opacity: 0; } }
.blog-techstrip__chips {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.blog-techstrip__chips::-webkit-scrollbar { display: none; }
.blog-techstrip__chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.blog-techstrip__chips .chip svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
/* wow live-status bar (Linux-terminal palette): each field its own bright ANSI-ish
   colour popping on the darkened strip, a pulsing green live-dot on SYSTEM OPERATIONAL,
   and a lift on hover. */
.blog-techstrip__chips .chip {
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-techstrip__chips .chip:hover { transform: translateY(-1px); }
.blog-techstrip__chips .chip--ok   { color: #6ee7b7; background: rgba(16, 185, 129, 0.2);  border-color: rgba(16, 185, 129, 0.55); }
.blog-techstrip__chips .chip--info { color: #67e8f9; background: rgba(34, 211, 238, 0.2);  border-color: rgba(34, 211, 238, 0.55); }
.blog-techstrip__chips .chip--git  { color: #c4b5fd; background: rgba(167, 139, 250, 0.2); border-color: rgba(167, 139, 250, 0.55); }
.blog-techstrip__chips .chip--time { color: #fcd34d; background: rgba(251, 191, 36, 0.2);  border-color: rgba(251, 191, 36, 0.55); }
.blog-techstrip__chips .chip--ok:hover   { background: rgba(16, 185, 129, 0.32); }
.blog-techstrip__chips .chip--info:hover { background: rgba(34, 211, 238, 0.32); }
.blog-techstrip__chips .chip--git:hover  { background: rgba(167, 139, 250, 0.32); }
.blog-techstrip__chips .chip--time:hover { background: rgba(251, 191, 36, 0.32); }
.blog-techstrip__chips .chip--ok::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  animation: pulse-live 2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .blog-techstrip__chips .chip--ok::before { animation: none; }
}

/* Widen the hero content box at xl so the one-line chip strip has room to
   stretch left/right (the grid's .xl9 = 75% was too narrow). Scoped to the blog
   hero — does NOT touch the global .xl9 grid class. */
@media (min-width: 1400px) {
  header.blog .text .centered {
    width: 90%;
  }
}

/* Mobile responsive */
@media (max-width: 900px) {
  .blog-techstrip {
    padding: 10px 14px;
    margin-bottom: 20px;
  }
  .blog-techstrip__inner {
    gap: 8px;
  }
  .blog-techstrip__chips {
    width: 100%;
  }
  .blog-techstrip__chips .chip {
    font-size: 9.5px;
    padding: 3px 7px;
  }
}

/* ──── blog-techtabs — category tabs row (BLOG-V) ──── */
.blog-techtabs {
  /* now lives INSIDE the content card (.wrapper) as a transparent menu bar across its
     top, with a hairline separator dividing it from the content below. Transparent so
     it reads as part of the glass card (which still reveals the aurora behind it). */
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 8px;
  position: relative;
  z-index: 1;
}
.blog-techtabs__inner {
  max-width: none; /* span the card so all 10 tabs fit without h-scroll on desktop */
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.blog-techtabs__inner::-webkit-scrollbar { height: 4px; }
.blog-techtabs__inner::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.blog-techtabs__list {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 0;
  justify-content: center; /* center the tabs in the menu bar */
  position: relative; /* anchor for the sliding .techtab-ink */
}
.techtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 10px;
  font-family: var(--tech-mono);
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.techtab svg {
  width: 14px;
  height: 14px;
  color: #9ca3af;
  flex-shrink: 0;
  transition: color 0.15s;
}
.techtab .label {
  letter-spacing: 0.01em;
}
.techtab .count {
  background: #f3f4f6;
  color: #4b5563;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
}
.techtab:hover {
  color: #0d1117;
}
.techtab:hover svg { color: #0d1117; }
.techtab.is-active {
  color: #0d1117;
  border-bottom-color: #00bebc;
}
.techtab.is-active svg { color: #00bebc; }
.techtab.is-active .count {
  background: #00bebc;
  color: #ffffff;
}
/* magic-line: a single blue→teal ink that slides under the hovered tab and returns to
   the active one (positioned by blog.js). The static active border is hidden only when
   JS is live (.has-ink on the list), so without JS the active underline still shows. */
.blog-techtabs__list.has-ink .techtab.is-active { border-bottom-color: transparent; }
.techtab-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0071b9, #00bebc);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px rgba(0, 190, 188, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: left 0.32s cubic-bezier(0.65, 0, 0.35, 1), width 0.32s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .techtab-ink { transition: opacity 0.2s ease; }
}

.blog-techtabs__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 12px;
  background: #f3f5f8;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: var(--tech-mono);
  font-size: 12px;
  min-width: 240px;
  align-self: center;
  flex-shrink: 0;
}
.blog-techtabs__search .search-icon {
  display: inline-flex;
  color: #6b7280;
}
.blog-techtabs__search .search-icon svg { width: 14px; height: 14px; }
.blog-techtabs__search input {
  background: transparent;
  border: 0;
  outline: 0;
  flex: 1;
  font: inherit;
  color: #0d1117;
  min-width: 0;
}
.blog-techtabs__search input::placeholder { color: #9ca3af; }
.blog-techtabs__search .kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 10px;
  color: #6b7280;
  font-weight: 600;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .blog-techtabs__inner {
    padding: 0 16px;
    gap: 12px;
  }
  .blog-techtabs__search {
    display: none;
  }
  .techtab {
    padding: 12px 10px;
    font-size: 11px;
  }
}

/* ──── BLOG-W: tech post rows (main column) ──── */
.blog-list .post,
section.blog .layer-1 .post {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.post:hover {
  border-color: #0d1117;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.1);
}
.post-row {
  display: grid;
  grid-template-columns: auto 340px minmax(0,1fr); /* index sizes to #001 (15px gap); stats moved into the meta line, so no stats column — info gets the room */
  gap: 15px;
  align-items: center;
  padding: 14px 20px;
}
.post-index {
  font-family: var(--tech-mono);
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}
.post-cover {
  display: block;
  aspect-ratio: 16/10;
  border-radius: 6px;
  background-size: cover; /* fill the box (crop) — bigger, no letterbox */
  background-position: left center; /* anchor left so the NAV logo (left of the cover) stays visible */
  background-color: #f3f5f8;
  position: relative;
  overflow: hidden;
}
/* gradient overlay dropped: with background-size:contain it would darken the
   letterbox + the image itself; the full-res cover now shows in full. */
.post-info { min-width: 0; }

/* ============================================================================
   BLOG-AA — 3-column main layout (METRICS | posts | RECENT·LIVE + SUBSCRIBE),
   replacing the old 2-col .row.content. Side panels stick while you scroll.
   ========================================================================== */
.blog-main-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 280px;
  gap: 15px; /* uniform 15px between all boxes */
  align-items: start;
  padding: 15px;
}
.blog-main { min-width: 0; }
.blog-side-left, .blog-side-right {
  position: sticky;
  top: 15px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 15px; /* 15px between stacked panels */
}
@media (max-width: 1100px) {
  .blog-main-layout { grid-template-columns: 1fr; padding: 20px; }
  .blog-side-left, .blog-side-right { display: none; }
}

/* METRICS panel (left) */
.mini-panel {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.mini-panel-title {
  font-family: var(--tech-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.mini-panel-title svg { width: 12px; height: 12px; }
.mini-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-family: var(--tech-mono); font-size: 12px;
}
.mini-stat:last-child { border-bottom: 0; }
.mini-stat .key { flex: 1; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.mini-stat .key svg { width: 12px; height: 12px; color: var(--faded); flex-shrink: 0; }
.mini-stat .val { color: var(--ink); font-weight: 700; }
.mini-stat .val--accent {
  background: linear-gradient(135deg, #00bebc, #0071b9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
}

/* RECENT · LIVE panel (right, top) */
.activity-panel {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.activity-panel-title {
  font-family: var(--tech-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.activity-panel-title svg { width: 12px; height: 12px; }
.live-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981;
  animation: pulse-live 2s infinite; flex-shrink: 0;
}
@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.activity-item {
  display: grid; grid-template-columns: 32px 1fr; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
  text-decoration: none; color: inherit;
}
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-item:first-child { padding-top: 0; }
.activity-num { font-family: var(--tech-mono); font-size: 11px; color: #0071b9; font-weight: 700; padding-top: 2px; }
.activity-body h4 { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; color: var(--ink); }
.activity-item:hover .activity-body h4 { color: #0071b9; }
.activity-body .ts { font-family: var(--tech-mono); font-size: 10px; color: var(--faded); display: inline-flex; align-items: center; gap: 4px; }
.activity-body .ts svg { width: 10px; height: 10px; }

/* SUBSCRIBE panel (right, bottom) */
/* official-colors card (NOT dark — dark theme comes later): the brand blue->teal
   gradient + a soft dark wash on the right for white-text contrast, like the endpoint. */
.subscribe-panel {
  background:
    linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,.16)),
    linear-gradient(135deg, #0071b9, #00bebc);
  color: #fff; border-radius: 12px; padding: 20px;
  position: relative; overflow: hidden;
}
.subscribe-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.22), transparent 60%);
}
.subscribe-panel > * { position: relative; }
.subscribe-panel-title {
  font-family: var(--tech-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: #fff; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.subscribe-panel-title svg { width: 12px; height: 12px; }
.subscribe-panel h4 {
  font-size: 16px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 8px;
}
.subscribe-panel h4 svg { width: 14px; height: 14px; }
.subscribe-panel p { font-size: 12px; color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.subscribe-form { display: flex; flex-direction: column; gap: 8px; }
.subscribe-form input {
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px; padding: 10px 12px; color: #fff;
  font-family: var(--tech-mono); font-size: 12px; outline: 0; width: 100%;
}
.subscribe-form input::placeholder { color: rgba(255,255,255,0.7); }
.subscribe-form input:focus { border-color: #fff; background: rgba(255,255,255,0.22); }
.subscribe-form button {
  background: #fff; color: #0071b9; border: 0; border-radius: 6px; padding: 10px;
  font-family: var(--tech-mono); font-size: 12px; font-weight: 700; width: 100%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.subscribe-form button svg { width: 12px; height: 12px; }
.subscribe-form button:hover { background: #eafffb; }
.subscribe-form.is-done button { background: #d6fff8; color: #0071b9; cursor: default; }
.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tech-mono);
  font-size: 11px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.post-meta .cat-badge {
  padding: 2px 8px;
  border-radius: 4px;
  background: #f3f5f8;
  color: #1f2933;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.05em;
}
.post-meta .cat-badge svg { width: 11px; height: 11px; }
.cat-badge--hot   { background: rgba(0,190,188,.1); border-color: rgba(0,190,188,.3); color: #003a5c; }
.cat-badge--info  { background: rgba(0,113,185,.1); border-color: rgba(0,113,185,.3); color: #0071b9; }
.cat-badge--cool  { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.3); color: #8b5cf6; }
.cat-badge--warn  { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #f59e0b; }
.cat-badge--ok    { background: rgba(0,190,188,.1); border-color: rgba(0,190,188,.3); color: #00bebc; }
.post-meta .hash, .post-meta .ts {
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-meta .hash svg, .post-meta .ts svg {
  width: 11px; height: 11px; color: #9ca3af;
}
.post-meta .hash { color: #9ca3af; }
.post-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 4px;
  color: #0d1117;
}
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { color: #0071b9; }
/* the legacy WP `section.blog .layer-1 article h3` (more specific) was pushing the
   post-row title with margin-left:20px + margin-top:35px; reset it so the title
   starts at the same left edge as the excerpt. */
section.blog .layer-1 .post-title { margin: 0 0 4px; }
.post-excerpt {
  font-size: 12px; /* smaller so two lines of the article intro fit */
  color: #6b7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* show three lines of the intro */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.post-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--tech-mono);
  font-size: 11px;
  color: #6b7280;
}
.post-stats span {
  display: inline-flex; align-items: center; gap: 5px;
}
.post-stats svg { width: 12px; height: 12px; color: #9ca3af; }

@media (max-width: 900px) {
  .post-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
  }
  .post-cover { aspect-ratio: 16/8; max-height: 160px; }
  .post-index {
    position: absolute;
    top: 14px; right: 14px;
    background: #f3f5f8;
    padding: 2px 8px;
    border-radius: 4px;
  }
  .post { position: relative; }
}

/* ──── BLOG-X: article interior tech (/blog/{slug} only, scoped to .article-tech) ──── */
/* BLOG-X-HERO-RESTORE: the teal hero + the .blog-techtabs row now sit ABOVE this
   block (the hero clears the fixed 100px nav, as on the list pages), so the old
   110px nav-clearance top padding is gone — just normal breathing room inside the
   white content wrapper. */
/* The article content card AND the category menu align L-R with the site nav's
   .wrapper — i.e. they start/end exactly where the nav LOGO does (the logo is the
   first child of the nav's 1400px-centered .wrapper, which has no padding/margin).
   Scoped to the article via the .is-article hero so the list pages are untouched.
   (a) the content card keeps the global .wrapper width (1400 centered); drop only
       the L/R borders so the content's edge lands exactly on the logo's. */
header.blog.is-article ~ section.main.blog .layer-1 .wrapper {
  border-left: 0; border-right: 0;
  /* The legacy `.wrapper { overflow: hidden }` (clears the list pages' floated
     columns) breaks `position: sticky` on the article's TOC + right rail — a
     clipping ancestor disables sticky. The article uses grid/flex (no floats to
     clear), so override it to visible here so the sticky aside columns work. */
  overflow: visible;
}
/* (b) the article column fills the 1400 card, but pulled IN 15px on each side
       (the menu above stays flush with the logo; only the article insets). */
.article-tech { max-width: none; margin: 0; padding: 40px 15px; }
/* (c) the menu mirrors the same .wrapper (96% / 1400px@>=1400, centered, no padding)
       so its first tab starts on the logo's left edge. */
header.blog.is-article + .blog-techtabs .blog-techtabs__inner {
  width: 96%; max-width: 1400px; margin: 0 auto; padding: 0;
}
@media only screen and (min-width: 1400px) {
  header.blog.is-article + .blog-techtabs .blog-techtabs__inner { width: 1400px; }
}
/* The article hero shows the article's (long, sentence-length) title — cap it
   below the list hero's 44px desktop size (header.blog .text h1, >=993 query) so
   long titles wrap gracefully instead of dominating the band. Higher specificity
   (header.blog.is-article) overrides the base hero h1 at desktop; tablet (26px) +
   mobile (20px) are already small enough and left untouched. */
@media only screen and (min-width: 993px) {
  header.blog.is-article .text h1 { font-size: 34px; }
}

/* endpoint card — recolored from the dark terminal style to the nav.ro brand
   teal->blue gradient (#00bebc -> #0071b9, same as the hero / brand buttons), all
   text white. A faint left-side dark wash lifts white-text contrast over the
   lighter teal end without changing the brand identity. */
.endpoint {
  background:
    linear-gradient(to right, rgba(0,0,0,0) 45%, rgba(0,0,0,.18)),
    linear-gradient(to right, #0071b9 0, #00bebc 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--tech-mono);
  font-size: 12px;
  margin-bottom: 24px;
}
.endpoint-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.20);
}
.endpoint-method {
  background: #fff; color: #0071b9; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; font-size: 11px; letter-spacing: .04em;
}
.endpoint-path { color: #fff; }
.endpoint-path .seg { color: #d6fff8; font-weight: 600; }
.endpoint-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.endpoint-meta .ver { color: rgba(255,255,255,.78); }
.endpoint .item { display: inline-flex; align-items: center; gap: 5px; color: #eafffb; }
.endpoint svg { width: 13px; height: 13px; flex-shrink: 0; }
.endpoint-row:last-child { border-bottom: none; } /* single-row (list) endpoint: no dangling divider */
.endpoint-bottom {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px; color: rgba(255,255,255,.85);
}
.endpoint-bottom .item { color: rgba(255,255,255,.85); }
.endpoint-bottom strong { color: #fff; font-weight: 600; }
.article-tech .copy-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.45);
  border-radius: 5px; padding: 4px 10px; font: inherit; cursor: pointer;
}
.article-tech .copy-btn:hover { background: rgba(255,255,255,.28); }

/* title + metadata card */
/* BLOG-X-META-TOP: single-column header — the METADATA strip sits ABOVE the title
   (meta-card order:-1), then the title. (Was a 2-col title|meta grid where the cover
   filled the left column; the architect moved METADATA above the title, dropped the
   duplicate lead, and moved the cover into the body — see .art-body .art-cover.) */
.article-tech .art-title-section {
  display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px;
}
.article-tech .art-title-left { display: flex; flex-direction: column; min-width: 0; }
.article-tech .art-title-left h1 {
  font-family: 'Inter', system-ui, sans-serif; font-size: clamp(28px, 4vw, 40px);
  font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #0d1117; margin: 0 0 12px;
}
.article-tech .art-title-left .dek { font-size: 16px; line-height: 1.55; color: #6b7280; margin: 0; }
/* Cover: at the top of the article body, AS WIDE AS the content below it (fills the
   body column, capped by .art-body's own max-width), flanked by the TOC + actions
   columns. Centered with the body content (architect request). */
.article-tech .art-body .art-cover { aspect-ratio: 16/9; margin: 0 0 24px; }
.article-tech .meta-card {
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
  font-family: var(--tech-mono); font-size: 11px; overflow: hidden;
  transition: box-shadow 0.2s ease;
  /* compact metadata strip ABOVE the title: 14 fields in an auto-fill grid so it stays
     a few lines tall instead of a ~400px column. */
  order: -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.article-tech .meta-card:hover {
  box-shadow: 0 12px 32px -14px rgba(0, 190, 188, 0.45);
}
.article-tech .meta-row { transition: background 0.15s ease; }
.article-tech .meta-row:hover { background: rgba(0, 190, 188, 0.06); }
.article-tech .meta-card-title {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: #f3f5f8; border-bottom: 1px solid #e5e7eb; color: #4b5563;
  font-weight: 700; letter-spacing: .05em; grid-column: 1 / -1;
}
.article-tech .meta-card svg { width: 12px; height: 12px; flex-shrink: 0; }
.article-tech .meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 14px; border-bottom: 1px solid #f1f3f5;
}
.article-tech .meta-row:last-child { border-bottom: 0; }
.article-tech .meta-row .k { display: inline-flex; align-items: center; gap: 6px; color: #9ca3af; }
.article-tech .meta-row .v { color: #1f2933; font-weight: 600; text-align: right; }
.article-tech .meta-row .v.hash { color: #0071b9; }
.article-tech .meta-row .v.ok { display: inline-flex; align-items: center; gap: 4px; color: #00bebc; }

/* cover with grid overlay + corner labels */
.article-tech .art-cover {
  position: relative; aspect-ratio: 21/7; border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #0d1117;
  border: 1px solid #e5e7eb; margin-bottom: 28px;
}
.article-tech .art-cover-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.article-tech .art-cover-label, .article-tech .art-cover-corner {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--tech-mono); font-size: 11px; color: #fff;
  background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 4px 10px; border-radius: 6px;
}
.article-tech .art-cover-label { left: 14px; bottom: 14px; }
.article-tech .art-cover-corner { right: 14px; top: 14px; color: #14ffe9; }
.article-tech .art-cover svg { width: 12px; height: 12px; }

/* 3-col layout: TOC + body + side */
.article-tech .art-layout {
  display: grid; grid-template-columns: 200px minmax(0,1fr) 240px; gap: 28px; align-items: start;
}
.article-tech .art-toc { position: sticky; top: 20px; font-family: var(--tech-mono); }
.article-tech .art-toc-title { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9ca3af; margin-bottom: 12px; }
.article-tech .art-toc-title svg { width: 12px; height: 12px; }
/* TOC as a branch/tree: the spine + connectors + node dots are the official BLUE
   (#0071b9); the section TEXT eases blue → the official green (#00bebc) as the reader
   scrolls past it (scroll-spy in blog.js sets .is-read/.is-active). */
.article-tech .art-toc-list { list-style: none; margin: 0; padding: 0; }
.article-tech .art-toc-list li { position: relative; padding: 6px 0 6px 24px; }
.article-tech .art-toc-list li::before { /* vertical spine segment — blue branch */
  content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: #0071b9;
}
.article-tech .art-toc-list li:first-child::before { top: 15px; }            /* spine starts at the first node */
.article-tech .art-toc-list li:last-child::before { bottom: auto; height: 15px; } /* …and ends at the last */
.article-tech .art-toc-list li::after { /* horizontal branch connector — blue */
  content: ''; position: absolute; left: 12px; top: 14px; width: 10px; height: 2px; background: #0071b9;
}
.article-tech .art-toc-list li a {
  display: flex; align-items: center; gap: 7px; color: #0071b9; text-decoration: none;
  font-size: 13px; line-height: 1.4; transition: color 0.3s ease; /* eases blue → green */
}
.article-tech .art-toc-list li a::before { /* node dot on the blue spine */
  content: ''; position: absolute; left: 1px; top: 10px; width: 10px; height: 10px; border-radius: 50%;
  background: #ffffff; border: 2px solid #0071b9; box-sizing: border-box; z-index: 1; transition: all 0.25s;
}
.article-tech .art-toc-list li a svg { width: 13px; height: 13px; color: #0071b9; flex-shrink: 0; transition: color 0.3s ease; }
.article-tech .art-toc-list li .label { min-width: 0; }
/* hover + read (scrolled past) + active (current): the TEXT eases to the official green */
.article-tech .art-toc-list li a:hover,
.article-tech .art-toc-list li.is-read a,
.article-tech .art-toc-list li.is-active a,
.article-tech .art-toc-list li.active a { color: #00bebc; }
.article-tech .art-toc-list li a:hover svg,
.article-tech .art-toc-list li.is-read a svg,
.article-tech .art-toc-list li.is-active a svg,
.article-tech .art-toc-list li.active a svg { color: #00bebc; }
/* active (current) — bold; the node fills in (stays on the blue branch) */
.article-tech .art-toc-list li.is-active a,
.article-tech .art-toc-list li.active a { font-weight: 700; }
.article-tech .art-toc-list li.is-active a::before,
.article-tech .art-toc-list li.active a::before { background: #0071b9; border-color: #0071b9; }

/* Body text capped at 820px centered within its (full-width) grid column for
   readable line length — the TOC (left) + side (right) stay at the column edges. */
/* BLOG-Y-FIX-2: the legacy `section.blog .layer-1 .wrapper { font-size: 0 }`
   (an inline-block whitespace hack) cascades into .art-body. Paragraphs set their
   own 16px, but TIGHT list items (text directly in <li>, no <p>) + the ▸ bullets
   inherited font-size:0 → invisible. A base font-size restores them everywhere. */
.article-tech .art-body { min-width: 0; max-width: 820px; margin: 0 auto; font-size: 16px; }
/* ════════════ BLOG-Y: article body tech interior (scoped to .art-body) ════════════ */
/* Smooth anchor scroll + offset for the fixed 100px nav (blog.css loads on blog pages only). */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }

.article-tech .art-body p { color: #1f2933; margin: 1em 0; line-height: 1.75; font-size: 16px; }
.article-tech .art-body p strong { color: #0d1117; font-weight: 700; }

/* Headings with mono ## / ### prefix + anchor scroll offset */
.article-tech .art-body h2 {
  font-family: 'Inter', system-ui, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
  color: #0d1117; margin: 2em 0 0.5em; position: relative; padding-left: 32px; scroll-margin-top: 120px;
}
.article-tech .art-body h2::before {
  content: '##'; position: absolute; left: 0; top: 4px; font-family: var(--tech-mono);
  font-size: 18px; color: #00bebc; font-weight: 700;
}
.article-tech .art-body h3 {
  font-family: 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 700; margin: 1.8em 0 0.5em;
  color: #0d1117; position: relative; padding-left: 28px; scroll-margin-top: 120px;
}
.article-tech .art-body h3::before {
  content: '###'; position: absolute; left: 0; top: 2px; font-family: var(--tech-mono);
  font-size: 14px; color: #00bebc; font-weight: 700;
}
.article-tech .art-body h4 { font-size: 16px; font-weight: 700; margin: 1.6em 0 0.4em; color: #0d1117; }

/* Links — teal underline */
.article-tech .art-body a { color: #0071b9; text-decoration: none; border-bottom: 2px solid rgba(0,113,185,0.2); transition: border-color 0.15s; }
.article-tech .art-body a:hover { border-color: #0071b9; }

/* Inline code — mono + pink + gray chip (reset inside code blocks below) */
.article-tech .art-body code {
  background: #f3f5f8; border: 1px solid #e5e7eb; color: #ec4899; padding: 2px 6px;
  border-radius: 4px; font-family: var(--tech-mono); font-size: 0.9em;
}

/* Code blocks — light "silver" window style + macOS traffic lights + copy button.
   Recolored from dark to silver; the GitHub-dark chroma overrides are dropped so the
   original light chroma palette (.chroma.light, shipped above) applies on the light bg. */
.article-tech .art-body pre, .article-tech .art-body pre.chroma {
  background: #eef0f3; color: #1f2328; border-radius: 8px; overflow: hidden; margin: 1.5em 0;
  font-family: var(--tech-mono); font-size: 13px; border: 1px solid #d4d8de; position: relative; padding: 0;
}
.article-tech .art-body pre::before {
  content: ''; display: block; height: 36px; background-color: #e1e4e8; border-bottom: 1px solid #d4d8de;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 6px at 18px 18px, #ff5f57 6px, transparent 7px),
    radial-gradient(circle 6px at 38px 18px, #febc2e 6px, transparent 7px),
    radial-gradient(circle 6px at 58px 18px, #28c840 6px, transparent 7px);
}
.article-tech .art-body pre code {
  background: transparent; border: 0; color: #1f2328; padding: 16px 18px; display: block;
  white-space: pre; overflow-x: auto; font-size: 13px; border-radius: 0;
}
/* copy button — injected by blog.js, sits in the window header on the right */
.article-tech .art-body pre .code-copy {
  position: absolute; top: 6px; right: 10px; z-index: 3;
  font-family: var(--tech-mono); font-size: 11px; line-height: 1; cursor: pointer;
  padding: 5px 12px; border-radius: 6px;
  background: #ffffff; color: #0071b9; border: 1px solid #cfd4da; transition: all 0.15s;
}
.article-tech .art-body pre .code-copy:hover { background: #0071b9; color: #ffffff; border-color: #0071b9; }
.article-tech .art-body pre .code-copy.is-copied { background: #00bebc; color: #ffffff; border-color: #00bebc; }
.article-tech .art-body pre .code-copy.is-error { background: #ef4444; color: #ffffff; border-color: #ef4444; }

/* DNS-resolution "Flow DNS" diagram — a branded raw-HTML <pre class="dns-flow">
   (NOT a markdown code block) so it escapes the silver code style: the official
   teal (#00bebc) lines/arrows on a deep-blue terminal, white node "actors"
   (<span class="n">), a teal hairline + blue glow. Overrides the silver rules above
   via the extra .dns-flow class; the 3-dot window header (::before) is dropped. */
.article-tech .art-body pre.dns-flow {
  background: #0a2233;
  color: #00bebc;
  border: 1px solid rgba(0, 190, 188, 0.4);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 1.6em 0;
  font-family: var(--tech-mono);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: pre;
  overflow-x: auto;
  box-shadow: 0 0 0 1px rgba(0, 113, 185, 0.25), 0 14px 36px -14px rgba(0, 113, 185, 0.55);
}
.article-tech .art-body pre.dns-flow::before { display: none; } /* no silver window header */
.article-tech .art-body pre.dns-flow .n { color: #ffffff; font-weight: 700; } /* node actors */

/* Lists — teal ▸ bullets / mono zero-padded numbers.
   BLOG-Y-FIX: every counter/bullet rule uses the DIRECT-CHILD selector `>`. A <ul>
   nested inside an <ol><li> is NOT a direct child of the <ol>, so it gets teal
   bullets (not the ol counter) and never increments the step counter — previously
   the descendant selector made the A/AAAA/CNAME sub-items steal 04–08 and the main
   steps jump 03→09. */
.article-tech .art-body ul, .article-tech .art-body ol { padding-left: 0; list-style: none; margin: 1em 0; }

/* Ordered list — DIRECT children get the mono zero-padded counter */
.article-tech .art-body ol { counter-reset: olist; }
.article-tech .art-body ol > li {
  counter-increment: olist; position: relative; padding-left: 32px; margin-bottom: 10px;
  color: #1f2933; line-height: 1.7;
}
.article-tech .art-body ol > li::before {
  content: counter(olist, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font-family: var(--tech-mono); color: #0071b9; font-weight: 700; font-size: 13px;
}

/* Nested ordered list — its own teal counter; never touches the parent olist */
.article-tech .art-body ol ol { counter-reset: olist-sub; }
.article-tech .art-body ol ol > li { counter-increment: olist-sub; padding-left: 28px; }
.article-tech .art-body ol ol > li::before { content: counter(olist-sub, decimal-leading-zero); color: #00bebc; font-size: 12px; }

/* Unordered list (incl. nested inside an ol) — teal ▸ bullet, NO counter */
.article-tech .art-body ul > li, .article-tech .art-body ol ul > li {
  position: relative; padding-left: 24px; margin-bottom: 6px; color: #1f2933; line-height: 1.7;
}
.article-tech .art-body ul > li::before, .article-tech .art-body ol ul > li::before {
  content: '▸'; position: absolute; left: 4px; top: 0; color: #00bebc; font-weight: 700;
}

/* Nested-list spacing */
.article-tech .art-body li > ul, .article-tech .art-body li > ol { margin: 0.5em 0; }

/* Blockquotes — teal accent */
.article-tech .art-body blockquote {
  border-left: 4px solid #00bebc; background: rgba(0,190,188,0.04); margin: 1.5em 0; padding: 16px 20px;
  border-radius: 0 8px 8px 0; font-style: italic; color: #4b5563;
}
.article-tech .art-body blockquote p:first-child { margin-top: 0; }
.article-tech .art-body blockquote p:last-child { margin-bottom: 0; }

/* Tables — tech style */
.article-tech .art-body table {
  width: 100%; border-collapse: collapse; margin: 1.5em 0; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
}
.article-tech .art-body th {
  background: #f3f5f8; border-bottom: 1px solid #e5e7eb; padding: 10px 14px; text-align: left; font-family: var(--tech-mono);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;
}
.article-tech .art-body td { padding: 10px 14px; border-bottom: 1px solid #f3f5f8; color: #1f2933; }
.article-tech .art-body tr:last-child td { border-bottom: 0; }
.article-tech .art-body tbody tr:hover { background: #fafbfc; }

/* HR — gradient line */
.article-tech .art-body hr { border: 0; margin: 2em 0; height: 1px; background-image: linear-gradient(to right, transparent, #cbd5e1, transparent); }

/* Images / figures */
.article-tech .art-body img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e5e7eb; }
.article-tech .art-body figure { margin: 1.5em 0; text-align: center; }
.article-tech .art-body figcaption { font-family: var(--tech-mono); font-size: 11px; color: #6b7280; margin-top: 8px; font-style: italic; }

/* Drop cap — gradient teal→blue */
.article-tech .art-body > p:first-of-type::first-letter {
  font-family: var(--tech-mono); font-size: 64px; font-weight: 700; float: left; line-height: 1;
  padding: 0 12px 0 0; margin-top: 4px;
  background: linear-gradient(135deg, #00bebc 0%, #0071b9 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Callouts (Option A: a blockquote starting with **Tip:** / **Atenție:** / **OK:** → callout) */
.article-tech .art-body blockquote.callout {
  border-left: 4px solid #0071b9; background: rgba(0,113,185,0.05); font-style: normal; color: #1f2933;
  padding: 14px 18px 14px 48px; position: relative;
}
.article-tech .art-body blockquote.callout::before {
  content: 'i'; position: absolute; left: 14px; top: 15px; width: 22px; height: 22px; border-radius: 6px;
  background: #0071b9; color: #fff; font-family: var(--tech-mono); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.article-tech .art-body blockquote.callout p { color: #1f2933; }
.article-tech .art-body blockquote.callout--warn { border-left-color: #f59e0b; background: rgba(245,158,11,0.05); }
.article-tech .art-body blockquote.callout--warn::before { content: '!'; background: #f59e0b; }
.article-tech .art-body blockquote.callout--success { border-left-color: #00bebc; background: rgba(0,190,188,0.05); }
.article-tech .art-body blockquote.callout--success::before { content: '✓'; background: #00bebc; }

/* "Concluzie"/"Conclusion" section auto-wrapped as a success callout box (renderer
   conclusionTransformer): a green ✓ badge + the heading as the title + the body. */
.article-tech .art-body .art-conclusion {
  background: rgba(0,190,188,0.06); border: 1px solid rgba(0,190,188,0.28); border-left: 4px solid #00bebc;
  border-radius: 0 10px 10px 0; padding: 20px 24px 20px 64px; margin: 2.4em 0; position: relative;
}
.article-tech .art-body .art-conclusion::before {
  content: '✓'; position: absolute; left: 18px; top: 22px; width: 30px; height: 30px; border-radius: 8px;
  background: #00bebc; color: #ffffff; font-weight: 700; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.article-tech .art-body .art-conclusion h2 {
  margin: 0 0 10px; padding-left: 0; font-size: 19px; font-weight: 800; color: #00807e; scroll-margin-top: 120px;
}
.article-tech .art-body .art-conclusion h2::before { content: none; } /* drop the ## prefix inside the box */
.article-tech .art-body .art-conclusion p { color: #1f2933; }
.article-tech .art-body .art-conclusion > :last-child { margin-bottom: 0; }
.article-tech .art-body .art-conclusion > :first-child { margin-top: 0; }

/* Mobile: drop cap stays, headings reduced, code blocks scroll horizontally */
@media (max-width: 768px) {
  .article-tech .art-body h2 { font-size: 23px; }
  .article-tech .art-body h3 { font-size: 18px; }
  .article-tech .art-body p, .article-tech .art-body ul li, .article-tech .art-body ol li { font-size: 15px; }
  .article-tech .art-body pre code { font-size: 12px; }
}

/* right sidebar: actions + fingerprint + tags */
.article-tech .art-side-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.article-tech .art-side-card { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; }
.article-tech .art-side-card-title {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f5f8;
  border-bottom: 1px solid #e5e7eb; font-family: var(--tech-mono); font-size: 11px; color: #4b5563; font-weight: 700;
}
.article-tech .art-side-card svg { width: 12px; height: 12px; flex-shrink: 0; }
.article-tech .side-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.article-tech .side-actions button {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-family: var(--tech-mono);
  font-size: 12px; color: #1f2933; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer;
}
.article-tech .side-actions button:hover { border-color: #0d1117; color: #0d1117; }
.article-tech .side-actions button.full { justify-content: center; color: #b91c1c; border-color: rgba(185,28,28,.3); }
.article-tech .side-actions button svg { width: 13px; height: 13px; }
/* Like / Save toggled on (client-side) — official teal/green accent */
.article-tech .side-actions button.is-on { color: #00bebc; border-color: #00bebc; background: rgba(0,190,188,0.08); }
.article-tech .side-actions button.is-on svg { color: #00bebc; }
/* like counter badge on the Like button (pushed to the right) */
.article-tech .side-actions button .act-count { margin-left: auto; font-family: var(--tech-mono); font-size: 11px; font-weight: 700; color: #9ca3af; }
.article-tech .side-actions button.is-on .act-count { color: #00bebc; }

/* fingerprint — the brand blue→green gradient (matching the endpoint card), white text */
.article-tech .fingerprint {
  background:
    linear-gradient(to right, rgba(0,0,0,0) 45%, rgba(0,0,0,.18)),
    linear-gradient(to right, #0071b9 0, #00bebc 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  padding: 12px 14px; font-family: var(--tech-mono); font-size: 11px;
}
.article-tech .fingerprint-title { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; margin-bottom: 10px; }
.article-tech .fingerprint svg { width: 12px; height: 12px; flex-shrink: 0; }
.article-tech .fingerprint-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.article-tech .fingerprint-line .k { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75); }
.article-tech .fingerprint-line .v { color: #fff; }
.article-tech .fingerprint-line .v.acc { color: #d6fff8; }
.article-tech .fingerprint-line .v.ok { color: #d6fff8; }

.article-tech .tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.article-tech .tag-list .chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-family: var(--tech-mono);
  font-size: 11px; color: #4b5563; background: #f3f5f8; border: 1px solid #e5e7eb; border-radius: 100px; text-decoration: none;
}
.article-tech .tag-list .chip:hover { border-color: #00bebc; color: #00bebc; }
.article-tech .tag-list .chip svg { width: 10px; height: 10px; }

/* related entries — a responsive grid of vertical cards (cover on top); the grid
   auto-fits as many ~280px cards per row as the width allows (down to 1 on mobile). */
.article-tech .related-section {
  margin-top: 36px; border-top: 1px solid #e5e7eb; padding-top: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start;
}
.article-tech .related-section-header {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--tech-mono); font-size: 12px; color: #6b7280;
}
.article-tech .related-section-header .rh-left { display: inline-flex; align-items: center; gap: 6px; color: #0d1117; font-weight: 600; }
.article-tech .related-section-header svg { width: 13px; height: 13px; }
.article-tech .related-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px;
  text-decoration: none; transition: all .15s cubic-bezier(0.4,0,0.2,1);
}
.article-tech .related-card:hover { border-color: #00bebc; transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(0,0,0,.14); }
.article-tech .related-card .cov { width: 100%; aspect-ratio: 16/9; border-radius: 8px; background-size: cover; background-position: center; background-color: #f3f5f8; }
.article-tech .related-card .info { min-width: 0; }
.article-tech .related-card h4 { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: #0d1117; margin: 0 0 6px; line-height: 1.3; }
.article-tech .related-card .meta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--tech-mono); font-size: 11px; color: #9ca3af; }
.article-tech .related-card .meta svg { width: 11px; height: 11px; flex-shrink: 0; }
.article-tech .related-card .ts { display: none; } /* drop the trailing arrow in the grid card */

/* Mobile: 3-col → 1-col; TOC + side-right hidden */
@media (max-width: 1100px) {
  .article-tech .art-layout { grid-template-columns: 1fr; }
  .article-tech .art-toc, .article-tech .art-side-right { display: none; }
  .article-tech .art-title-section { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .endpoint-meta { margin-left: 0; }
  .article-tech .copy-btn { margin-left: 0; }
  .article-tech .related-section { grid-template-columns: repeat(2, 1fr); } /* 3 → 2 cols */
}
@media (max-width: 560px) {
  .article-tech .related-section { grid-template-columns: 1fr; } /* → 1 col on small mobile */
}