/**
 * Easy Blog Manager — архивен изглед (shortcode [easy_blog]).
 *
 * Самостоятелен слой в собствен namespace `.ebm-x`. Не наследява и не се бие
 * със стария frontend.css (той обслужва статиите и админ панела). Всички
 * цветове идват от --ebm-* променливите, които EBM_Theme инжектира според
 * настройките за марка и светла/тъмна схема — тук не се пише твърд цвят.
 */

/* =========================================================
 *  ТОКЕНИ
 * ========================================================= */
.ebm-x {
	/* Собствена светла палитра. Нарочно НЕ следва светло/тъмната настройка на
	   плъгина: блокът се вгражда в чужда тема (често тъмна) и трябва да е
	   четим сам по себе си — светъл фон, тъмни букви. От марката се вземат
	   само акцентните цветове. */
	--x-page: #ffffff;
	--x-paper: #ffffff;
	--x-surface: #f6f7f9;
	--x-surface-2: #eceff3;
	--x-line: #e4e7ec;
	--x-line-strong: #d2d7df;
	--x-ink: #151b23;
	--x-body: #3d4854;
	--x-muted: #6c7784;
	--x-gold: var(--ebm-brass, #c2a36b);
	--x-gold-deep: var(--ebm-brass-deep, #a9863c);
	--x-gold-soft: var(--ebm-brass-soft, rgba(194, 163, 107, .14));
	--x-accent: var(--ebm-accent, #0f7391);

	--x-r-lg: 22px;
	--x-r-md: 15px;
	--x-r-sm: 10px;
	--x-shadow: 0 18px 44px rgba(21, 27, 35, .09);
	--x-shadow-sm: 0 4px 16px rgba(21, 27, 35, .06);

	--x-display: 'Advent Pro', sans-serif;
	--x-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--x-cols: 3;

	position: relative;
	max-width: 1340px;
	margin: 0 auto;
	padding: clamp(16px, 2.4vw, 30px);
	border-radius: 26px;
	background: var(--x-page);
	font-family: var(--x-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--x-body);
	-webkit-font-smoothing: antialiased;
}

.ebm-x *,
.ebm-x *::before,
.ebm-x *::after { box-sizing: border-box; }

.ebm-x h1,
.ebm-x h2,
.ebm-x h3,
.ebm-x h4 {
	font-family: var(--x-display);
	font-weight: 600;
	color: var(--x-ink);
	letter-spacing: -.015em;
	margin: 0;
}

.ebm-x a { color: inherit; }

/* фокус — видим и в двете схеми */
.ebm-x a:focus-visible,
.ebm-x button:focus-visible,
.ebm-x input:focus-visible {
	outline: 2px solid var(--x-gold);
	outline-offset: 3px;
	border-radius: 6px;
}

/* съдържанието стои над евентуални декоративни слоеве */
.ebm-x > * { position: relative; z-index: 1; }

/* =========================================================
 *  КОСМИЧЕСКА ЛЕНТА (ВРЕП) — анимираният хиро на блога
 * ========================================================= */
.ebm-x-cosmos {
	position: relative;
	min-height: 400px;
	overflow: hidden;
	margin-bottom: 26px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-lg);
	background:
		radial-gradient(120% 140% at 78% 10%, rgba(194, 163, 107, .16), transparent 62%),
		linear-gradient(160deg, #fffdf8 0%, #f7f4ed 52%, #f1eee6 100%);
	box-shadow: var(--x-shadow);
	isolation: isolate;
}

.ebm-x-cosmos-scene {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ebm-c-svg { width: 100%; height: 100%; display: block; }

/* лек паралакс — стойността се задава от archive.js */
.ebm-x-cosmos-scene { transform: translate3d(var(--x-par-x, 0px), var(--x-par-y, 0px), 0); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

.ebm-x-cosmos-body {
	position: relative;
	z-index: 2;
	max-width: 620px;
	padding: 58px 48px 54px;
	color: var(--x-body);
}

.ebm-x-cosmos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 253, 248, .94) 10%, rgba(255, 253, 248, .68) 48%, rgba(255, 253, 248, 0) 80%);
}

.ebm-x-cosmos-body .ebm-x-eyebrow { color: var(--x-gold); }
.ebm-x-cosmos-body .ebm-x-eyebrow::before { background: linear-gradient(90deg, var(--x-gold), transparent); }

.ebm-x-cosmos-body h1 {
	font-size: clamp(36px, 4.8vw, 62px);
	line-height: 1.02;
	margin: 14px 0 0;
	color: var(--x-ink);
	text-wrap: balance;
}

.ebm-x-cosmos-body > p {
	margin: 12px 0 0;
	max-width: 48ch;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--x-muted);
}

.ebm-x-top-stats {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 18px;
	font-size: 12.5px;
	color: var(--x-muted);
}

.ebm-x-top-stats b {
	font-family: var(--x-display);
	font-size: 21px;
	font-weight: 700;
	color: var(--x-gold);
	margin-right: 6px;
}

.ebm-x-top-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.ebm-x-cosmos-body .ebm-x-btn { background: rgba(255, 255, 255, .7); }
.ebm-x-cosmos-body .ebm-x-btn:hover { color: #fff; background: var(--x-gold-deep); border-color: var(--x-gold-deep); }


/* =========================================================
 *  ХИРО С ВИДЕО
 *
 *  Със снимка отзад лентата става тъмна: светъл текст върху космос се
 *  чете по-добре от тъмен, а контрастът със светлия блог отдолу прави
 *  началото да изглежда като корица.
 * ========================================================= */
.ebm-x-cosmos.has-video {
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	background: #070c18;
	border-color: rgba(255, 255, 255, .08);
}

.ebm-x-cosmos-yt,
.ebm-x-cosmos-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Плеърът е 16:9 и се мащабира да покрие лентата, без черни ленти. */
.ebm-x-cosmos-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.78%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.ebm-x-cosmos-yt.is-playing { background-image: none !important; }

/* Скримът тръгва плътен отляво, за да носи текста, и се разтваря надясно. */
.ebm-x-cosmos.has-video::before {
	background:
		linear-gradient(100deg, rgba(6, 10, 22, .94) 6%, rgba(6, 10, 22, .74) 42%, rgba(6, 10, 22, .18) 82%),
		linear-gradient(0deg, rgba(6, 10, 22, .72), rgba(6, 10, 22, 0) 55%);
}

.ebm-x-cosmos.has-video .ebm-x-cosmos-body { color: rgba(238, 241, 248, .82); }
.ebm-x-cosmos.has-video .ebm-x-cosmos-body h1 { color: #fff; }
.ebm-x-cosmos.has-video .ebm-x-cosmos-body > p { color: rgba(238, 241, 248, .74); }
.ebm-x-cosmos.has-video .ebm-x-eyebrow { color: var(--x-gold); }
.ebm-x-cosmos.has-video .ebm-x-top-stats { color: rgba(238, 241, 248, .6); }
.ebm-x-cosmos.has-video .ebm-x-top-stats b { color: var(--x-gold); }

.ebm-x-cosmos.has-video .ebm-x-btn {
	color: #eef1f8;
	border-color: rgba(214, 175, 94, .5);
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(6px);
}

.ebm-x-cosmos.has-video .ebm-x-btn:hover {
	color: #16120a;
	background: var(--x-gold);
	border-color: var(--x-gold);
}

@media (prefers-reduced-motion: reduce) {
	.ebm-x-cosmos-video { display: none; }
}

@media (max-width: 860px) {
	.ebm-x-cosmos.has-video { min-height: 400px; }
	.ebm-x-cosmos.has-video::before {
		background: linear-gradient(180deg, rgba(6, 10, 22, .62) 0%, rgba(6, 10, 22, .92) 62%);
	}
	.ebm-x-cosmos-frame { min-width: 260%; }
}

/* --- анимации на сцената --- */
.ebm-c-star { animation: ebmCTwinkle 4.6s ease-in-out infinite; }

@keyframes ebmCTwinkle {
	0%, 100% { opacity: .12; transform: scale(.7); }
	50% { opacity: .7; transform: scale(1.2); }
}
.ebm-c-star { transform-box: fill-box; transform-origin: center; }

.ebm-c-orbit { transform-box: fill-box; transform-origin: center; }
.ebm-c-orbit--a { animation: ebmCSpin 64s linear infinite; }
.ebm-c-orbit--b { animation: ebmCSpin 92s linear infinite reverse; }
.ebm-c-orbit--c { animation: ebmCSpin 128s linear infinite; }

@keyframes ebmCSpin { to { transform: rotate(360deg); } }

/* импулсът минава последователно през Нивата — отдолу нагоре */
.ebm-c-tier {
	stroke-opacity: .5;
	animation: ebmCTier 5.6s ease-in-out infinite;
}

@keyframes ebmCTier {
	0%, 62%, 100% { stroke-opacity: .5; stroke-width: 1.3; }
	14% { stroke-opacity: 1; stroke-width: 2.1; }
	34% { stroke-opacity: .5; stroke-width: 1.5; }
}

.ebm-c-apex {
	transform-box: fill-box;
	transform-origin: center;
	animation: ebmCApex 5.6s ease-in-out infinite;
}

@keyframes ebmCApex {
	0%, 100% { opacity: .35; transform: scale(.86); }
	48% { opacity: .8; transform: scale(1.06); }
}

.ebm-c-spark {
	opacity: 0;
	animation: ebmCRise 8s cubic-bezier(.4, 0, .5, 1) infinite;
}

@keyframes ebmCRise {
	0% { opacity: 0; transform: translateY(0) scale(.5); }
	12% { opacity: .95; }
	78% { opacity: .55; }
	100% { opacity: 0; transform: translateY(-246px) scale(1.1); }
}

.ebm-c-rays path { animation: ebmCRay 5.6s ease-in-out infinite; }
@keyframes ebmCRay {
	0%, 100% { opacity: .12; }
	50% { opacity: .6; }
}

/* --- бутони --- */
.ebm-x-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	border: 1px solid var(--x-line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--x-ink);
	font: 700 11.5px/1 var(--x-sans);
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .22s, border-color .22s, color .22s, transform .22s;
}

.ebm-x-btn:hover {
	background: var(--x-gold-soft);
	border-color: var(--x-gold);
	color: var(--x-gold-deep);
	transform: translateY(-1px);
}

.ebm-x-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.ebm-x-btn b {
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--x-gold);
	color: var(--x-paper);
	font-size: 10.5px;
	line-height: 19px;
	text-align: center;
}

.ebm-x-btn--solid {
	border-color: var(--x-gold);
	background: linear-gradient(180deg, var(--x-gold-soft), transparent);
	color: var(--x-gold-deep);
}

.ebm-x-arw { transition: transform .22s; }
.ebm-x-btn:hover .ebm-x-arw { transform: translateX(4px); }

/* =========================================================
 *  ЛЕЙАУТ
 * ========================================================= */
.ebm-x-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 30px;
	align-items: start;
}

.ebm-x-main { min-width: 0; }

/* =========================================================
 *  ХИРО КАРУСЕЛ — снимка отгоре, текст отдолу
 * ========================================================= */
.ebm-x-hero {
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-lg);
	overflow: hidden;
	background: var(--x-paper);
	box-shadow: var(--x-shadow);
}

/* --- снимката --- */
.ebm-x-hero-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--x-surface-2);
}

/* Илюстрациите са портретни. За да се виждат цели в широк кадър, самата
   снимка се вписва изцяло, а празното отстрани се запълва със силно
   размазано копие от нея — вместо голи сиви ленти. */
.ebm-x-slide-blur {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(34px) saturate(1.15);
	transform: scale(1.2);
	opacity: .55;
}

.ebm-x-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(10, 14, 26, .28));
	pointer-events: none;
}

.ebm-x-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility .7s;
}

.ebm-x-slide.is-on { opacity: 1; visibility: visible; }

.ebm-x-slide > img,
.ebm-x-slide > svg {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ebm-x-dots {
	position: absolute;
	right: 16px;
	bottom: 14px;
	z-index: 4;
	display: flex;
	gap: 7px;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(12, 16, 24, .5);
	backdrop-filter: blur(8px);
}

.ebm-x-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: width .3s, background .3s;
}

.ebm-x-dots button.is-on { width: 26px; background: var(--x-gold); }

/* --- текстът под снимката --- */
.ebm-x-hero-content { padding: 30px 34px 32px; min-height: 232px; }

.ebm-x-hero-body h2 {
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.06;
	margin: 13px 0 12px;
	color: var(--x-ink);
	text-wrap: balance;
}

.ebm-x-hero-body h2 a { text-decoration: none; color: inherit; }
.ebm-x-hero-body h2 a:hover { color: var(--x-gold-deep); }

.ebm-x-hero-body > p {
	margin: 0 0 20px;
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.68;
	color: var(--x-body);
}

.ebm-x-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--x-muted);
}

.ebm-x-meta i {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .55;
	font-style: normal;
}

.ebm-x-author {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	color: var(--x-ink);
}

.ebm-x-author span {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--x-gold);
	background: var(--x-gold-soft);
	font-family: var(--x-display);
	font-size: 15px;
	color: var(--x-gold-deep);
}

.ebm-x-hero-cta { margin-top: 22px; }

.ebm-x-hero-body .ebm-x-meta b {
	font-family: var(--x-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--x-gold-deep);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
 *  ЗНАЧКА „НАЙ-ЧЕТЕНА" — пулсира, за да се забелязва
 * ========================================================= */
.ebm-x-star {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 4;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--x-gold);
	background: linear-gradient(140deg, #fffaef, #f0dfba);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	animation: ebmStarGlow 2.6s ease-in-out infinite;
}

/* по-висока тежест от правилото за илюстрацията */
.ebm-x-star > svg {
	width: 19px;
	height: 19px;
	fill: var(--x-gold-deep);
	animation: ebmStarSpark 2.6s ease-in-out infinite;
}

/* текстът остава само за екранни четци */
.ebm-x-star b {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@keyframes ebmStarGlow {
	0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .22), 0 0 0 0 rgba(214, 175, 94, .6); }
	50% { box-shadow: 0 4px 14px rgba(0, 0, 0, .22), 0 0 0 11px rgba(214, 175, 94, 0); }
}

@keyframes ebmStarSpark {
	0%, 100% { transform: scale(1) rotate(0); opacity: .85; }
	50% { transform: scale(1.22) rotate(18deg); opacity: 1; }
}

/* =========================================================
 *  ФИЛТРИ (категории)
 * ========================================================= */
.ebm-x-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 26px 0 0;
}

.ebm-x-chips a {
	padding: 9px 17px;
	border: 1px solid var(--x-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--x-body);
	text-decoration: none;
	transition: .2s;
}

.ebm-x-chips a:hover {
	border-color: var(--x-gold);
	color: var(--x-gold-deep);
}

.ebm-x-chips a.is-on {
	border-color: var(--x-gold);
	background: var(--x-gold-soft);
	color: var(--x-gold-deep);
	font-weight: 600;
}

/* =========================================================
 *  ПАНЕЛ / СЕКЦИЯ
 * ========================================================= */
.ebm-x-panel {
	margin-top: 26px;
	padding: 26px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-lg);
	background: var(--x-surface);
	background: color-mix(in srgb, var(--x-surface) 55%, transparent);
}

.ebm-x-panel-head {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.ebm-x-panel-head h2 {
	font-size: 30px;
	line-height: 1.06;
	margin: 4px 0 0;
}

.ebm-x-panel-head > div { min-width: 0; }
.ebm-x-panel-head > a,
.ebm-x-panel-head > .ebm-x-view { margin-left: auto; }

/* превключвател карти/списък */
.ebm-x-view {
	display: flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--x-line);
	border-radius: 999px;
}

.ebm-x-view button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--x-muted);
	font: 600 12px/1 var(--x-sans);
	cursor: pointer;
	transition: .2s;
}

.ebm-x-view button.is-active {
	background: var(--x-gold-soft);
	color: var(--x-gold-deep);
}

.ebm-x-view svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* =========================================================
 *  МРЕЖА С КАРТИ
 * ========================================================= */
.ebm-x-grid {
	display: grid;
	grid-template-columns: repeat(var(--x-cols), minmax(0, 1fr));
	gap: 18px;
}

.ebm-x-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-md);
	overflow: hidden;
	background: var(--x-paper);
	transition: transform .3s, border-color .3s, box-shadow .3s;
}

.ebm-x-card:hover {
	transform: translateY(-5px);
	border-color: var(--x-line-strong);
	box-shadow: var(--x-shadow);
}

.ebm-x-card-art {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--x-surface-2);
}

/* Илюстрациите тук са портретни и носят текст в горния край. „cover" го
   отрязваше, затова снимката се вписва цяла в кутия със същите пропорции —
   при съотношение 4:5 тя запълва кадъра без ленти отстрани. */
.ebm-x-card-art > img,
.ebm-x-card-art > svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.ebm-x-card:hover .ebm-x-card-art > img { transform: scale(1.03); }

.ebm-x-badge {
	position: absolute;
	left: 11px;
	bottom: 11px;
	z-index: 2;
	padding: 5px 11px;
	border: 1px solid var(--x-line-strong);
	border-radius: 6px;
	background: var(--x-paper);
	background: color-mix(in srgb, var(--x-paper) 82%, transparent);
	backdrop-filter: blur(6px);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--x-gold-deep);
}

.ebm-x-badge--new {
	left: auto;
	right: 11px;
	border-color: var(--x-gold);
	background: var(--x-gold);
	color: #fff;
}

.ebm-x-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 14px;
}

.ebm-x-card-body h3 {
	font-size: 23px;
	line-height: 1.16;
	text-wrap: balance;
}

.ebm-x-card-body h3 a { text-decoration: none; transition: color .22s; }
.ebm-x-card:hover .ebm-x-card-body h3 a { color: var(--x-gold-deep); }

.ebm-x-card-body > p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--x-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ebm-x-card-foot {
	margin-top: auto;
	padding-top: 2px;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	color: var(--x-muted);
}

/* бутон „запази" — инжектира се от archive.js */
.ebm-x-save {
	position: absolute;
	top: 11px;
	right: 11px;
	z-index: 3;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--x-line-strong);
	border-radius: 50%;
	background: var(--x-paper);
	background: color-mix(in srgb, var(--x-paper) 85%, transparent);
	backdrop-filter: blur(6px);
	color: var(--x-muted);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-4px);
	transition: .22s;
}

.ebm-x-card:hover .ebm-x-save,
.ebm-x-save:focus-visible,
.ebm-x-save.is-saved { opacity: 1; transform: none; }

.ebm-x-save svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ebm-x-save:hover { color: var(--x-gold-deep); border-color: var(--x-gold); }
.ebm-x-save.is-saved { color: var(--x-gold-deep); border-color: var(--x-gold); }
.ebm-x-save.is-saved svg { fill: currentColor; }

/* --- изглед „списък" --- */
/* При най-четената лентата винаги е пълна и не носи информация - махаме я. */
.ebm-x-reads.is-top .ebm-x-reads-track { display: none; }

/* На touch устройства няма hover: бутонът за запазване се вижда веднага. */
@media (hover: none) {
	.ebm-x-save { opacity: 1; transform: none; }
}

.ebm-x-grid.is-list-view { grid-template-columns: 1fr; gap: 0; }

.ebm-x-grid.is-list-view .ebm-x-card {
	flex-direction: row;
	align-items: stretch;
	gap: 20px;
	border: 0;
	border-top: 1px solid var(--x-line);
	border-radius: 0;
	background: transparent;
	padding: 18px 0;
}

.ebm-x-grid.is-list-view .ebm-x-card:first-child { border-top: 0; }
.ebm-x-grid.is-list-view .ebm-x-card:hover { transform: none; box-shadow: none; }

.ebm-x-grid.is-list-view .ebm-x-card-art {
	flex: 0 0 160px;
	aspect-ratio: 4 / 5;
	border-radius: var(--x-r-sm);
	border: 1px solid var(--x-line);
}

.ebm-x-grid.is-list-view .ebm-x-card-body { padding: 2px 0; }
.ebm-x-grid.is-list-view .ebm-x-card-body h3 { font-size: 27px; }
.ebm-x-grid.is-list-view .ebm-x-save { top: 4px; right: 0; }

.ebm-x-card.is-load-revealed { animation: ebmXEnter .55s cubic-bezier(.2, .7, .2, 1) both; }

/* плавно появяване при скрол — класът се добавя от archive.js */
.ebm-x-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.ebm-x-reveal.is-in { opacity: 1; transform: none; }
@keyframes ebmXEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================================================
 *  ПРОЧИТАНИЯ
 * ========================================================= */
.ebm-x-reads {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 12px;
	color: var(--x-muted);
}

.ebm-x-reads-eye { line-height: 0; color: var(--x-gold); opacity: .8; }
.ebm-x-reads-eye svg { width: 15px; height: 15px; }

.ebm-x-reads-num {
	font-family: var(--x-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	color: var(--x-gold-deep);
	font-variant-numeric: tabular-nums;
}

.ebm-x-reads-label { white-space: nowrap; }

.ebm-x-reads-track {
	flex: 1;
	min-width: 26px;
	height: 3px;
	margin-left: 3px;
	border-radius: 999px;
	background: var(--x-line);
	overflow: hidden;
}

.ebm-x-reads-track i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--x-accent), var(--x-gold));
	transition: width 1.1s cubic-bezier(.2, .7, .2, 1) .15s;
}

/* лентата се пълни, щом картата се появи */
.is-in .ebm-x-reads-track i,
.is-load-revealed .ebm-x-reads-track i { width: var(--p, 0%); }

/* най-четената статия — златен акцент вместо голо число */
.ebm-x-reads-star {
	width: 12px;
	height: 12px;
	margin-right: 5px;
	vertical-align: -2px;
	fill: currentColor;
	animation: ebmStarSpark 2.6s ease-in-out infinite;
}

.ebm-x-reads.is-top .ebm-x-reads-label {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border: 1px solid var(--x-gold);
	border-radius: 999px;
	background: var(--x-gold-soft);
	color: var(--x-gold-deep);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ebm-x-reads.is-top .ebm-x-reads-eye { opacity: 1; }
.ebm-x-reads.is-top .ebm-x-reads-track i { background: linear-gradient(90deg, var(--x-gold-deep), var(--x-gold)); }

/* в списъчния изглед лентата има повече място */
.ebm-x-grid.is-list-view .ebm-x-reads { max-width: 380px; }

.ebm-x-hero-body .ebm-x-meta b {
	font-family: var(--x-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--x-gold);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
 *  НАПРЕДЪК В ЧЕТЕНЕТО
 * ========================================================= */
.ebm-x-progress-num {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.ebm-x-progress-num strong {
	font-family: var(--x-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--x-gold-deep);
	font-variant-numeric: tabular-nums;
}

.ebm-x-progress-num span { font-size: 12.5px; color: var(--x-muted); }

.ebm-x-progress-track {
	height: 6px;
	border-radius: 999px;
	background: var(--x-line);
	overflow: hidden;
}

.ebm-x-progress-track i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--x-accent), var(--x-gold));
	transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
}

.ebm-x-progress p {
	margin: 10px 0 14px;
	font-size: 12.5px;
	color: var(--x-muted);
}

.ebm-x-progress .ebm-x-btn { width: 100%; justify-content: center; }

/* вече прочетена статия — дискретна отметка, без да я скрива */
.ebm-x-card.is-read .ebm-x-card-art > img,
.ebm-x-card.is-read .ebm-x-card-art > svg { opacity: .62; }

.ebm-x-card.is-read .ebm-x-card-art::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 3;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--x-line-strong);
	background: var(--x-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7784' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* при най-четената значката има предимство пред отметката */
.ebm-x-card.is-read .ebm-x-star ~ .ebm-x-card-art::before { display: none; }

/* колко души са я чели днес — социално доказателство */
.ebm-x-reads-today {
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(30, 142, 90, .12);
	color: #1a7a4d;
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
}

/* =========================================================
 *  НАЙ-ЧЕТЕНИ (номериран списък)
 * ========================================================= */
.ebm-x-rank { display: flex; flex-direction: column; }

.ebm-x-rank-item {
	display: grid;
	grid-template-columns: 54px 118px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid var(--x-line);
	text-decoration: none;
	transition: background .25s;
}

.ebm-x-rank-item:first-child { border-top: 0; }
.ebm-x-rank-item:hover { background: linear-gradient(90deg, var(--x-gold-soft), transparent 72%); }

.ebm-x-rank-num {
	font-family: var(--x-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--x-line-strong);
	transition: color .25s;
}

.ebm-x-rank-item:hover .ebm-x-rank-num { color: var(--x-gold); }
.ebm-x-rank-item:nth-child(-n+3) .ebm-x-rank-num { color: var(--x-gold); }

.ebm-x-rank-art {
	aspect-ratio: 4 / 5;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-sm);
	overflow: hidden;
	background: var(--x-surface-2);
}

.ebm-x-rank-art > img,
.ebm-x-rank-art > svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.ebm-x-rank-copy h3 { font-size: 22px; line-height: 1.18; margin-bottom: 6px; }
.ebm-x-rank-item:hover h3 { color: var(--x-gold-deep); }

/* =========================================================
 *  ЗАРЕДИ ОЩЕ / ПАГИНАЦИЯ
 * ========================================================= */
.ebm-x-more-wrap { display: flex; justify-content: center; margin-top: 26px; }

.ebm-x-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border: 1px solid var(--x-gold);
	border-radius: 999px;
	background: var(--x-gold-soft);
	color: var(--x-gold-deep);
	font: 700 11.5px/1 var(--x-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: .22s;
}

.ebm-x-more:hover { background: var(--x-gold); color: #fff; }

.ebm-x-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 18px;
	font-size: 12.5px;
	color: var(--x-muted);
}

.ebm-x-pager a { color: var(--x-gold-deep); text-decoration: none; font-weight: 600; }

.ebm-x-empty {
	padding: 46px 20px;
	border: 1px dashed var(--x-line-strong);
	border-radius: var(--x-r-md);
	text-align: center;
	color: var(--x-muted);
}

/* =========================================================
 *  САЙДБАР
 * ========================================================= */
.ebm-x-side {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ebm-x-box {
	padding: 20px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-lg);
	background: var(--x-surface);
	background: color-mix(in srgb, var(--x-surface) 55%, transparent);
}

.ebm-x-box > h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 15px;
	font-family: var(--x-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--x-muted);
}

.ebm-x-box > h3::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--x-gold);
}

/* поле за търсене (отваря overlay-а) */
.ebm-x-searchbar {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 13px 17px;
	border: 1px solid var(--x-line);
	border-radius: 999px;
	background: var(--x-paper);
	color: var(--x-muted);
	font: 500 13.5px/1 var(--x-sans);
	text-align: left;
	cursor: pointer;
	transition: .2s;
}

.ebm-x-searchbar:hover { border-color: var(--x-gold); color: var(--x-gold-deep); }
.ebm-x-searchbar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }
.ebm-x-searchbar span { flex: 1; }

.ebm-x-searchbar kbd {
	padding: 3px 6px;
	border: 1px solid var(--x-line);
	border-radius: 5px;
	font: 600 10px/1 var(--x-sans);
	color: var(--x-muted);
}

/* мини списък със статии */
.ebm-x-mini {
	display: flex;
	gap: 13px;
	padding: 12px 0;
	border-top: 1px solid var(--x-line);
	text-decoration: none;
}

.ebm-x-mini:first-of-type { border-top: 0; padding-top: 0; }

.ebm-x-mini-art {
	flex-shrink: 0;
	width: 68px;
	height: 54px;
	border: 1px solid var(--x-line);
	border-radius: 9px;
	overflow: hidden;
	background: var(--x-surface-2);
}

.ebm-x-mini-art > img,
.ebm-x-mini-art > svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.ebm-x-mini h4 {
	font-size: 18px;
	line-height: 1.2;
	margin-bottom: 5px;
	transition: color .2s;
}

.ebm-x-mini:hover h4 { color: var(--x-gold-deep); }
.ebm-x-mini .ebm-x-meta { font-size: 11.5px; gap: 8px; }

/* категории */
.ebm-x-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ebm-x-cats a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 12px;
	border: 1px solid var(--x-line);
	border-radius: 11px;
	background: var(--x-paper);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	transition: .2s;
}

.ebm-x-cats a:hover {
	border-color: var(--x-gold);
	background: var(--x-gold-soft);
	color: var(--x-gold-deep);
}

.ebm-x-cats svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--x-gold); }
.ebm-x-cats span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ebm-x-cats b {
	font-family: var(--x-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--x-gold);
}

/* =========================================================
 *  ТЪРСЕНЕ (overlay)
 * ========================================================= */
.ebm-x-search {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: none;
	padding: 8vh 20px 20px;
	background: rgba(7, 12, 24, .72);
	backdrop-filter: blur(8px);
}

.ebm-x-search.is-open { display: block; animation: ebmXFade .2s ease both; }
@keyframes ebmXFade { from { opacity: 0; } to { opacity: 1; } }

.ebm-x-search-dialog {
	position: relative;
	max-width: 660px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid var(--x-line-strong);
	border-radius: var(--x-r-lg);
	background: var(--x-paper);
	box-shadow: 0 40px 90px rgba(0, 0, 0, .38);
}

.ebm-x-search-dialog h2 { font-size: 33px; margin: 4px 0 18px; }

.ebm-x-search-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	border: 1px solid var(--x-line);
	border-radius: 50%;
	background: transparent;
	color: var(--x-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.ebm-x-search-close:hover { border-color: var(--x-gold); color: var(--x-gold-deep); }

.ebm-x-search-field {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 4px 16px;
	border: 1px solid var(--x-line);
	border-radius: 999px;
	background: var(--x-surface);
}

.ebm-x-search-field svg { width: 17px; height: 17px; fill: none; stroke: var(--x-muted); stroke-width: 2; }

.ebm-x-search-field input {
	flex: 1;
	min-width: 0;
	padding: 13px 0;
	border: 0;
	background: transparent;
	color: var(--x-ink);
	font: 500 15px/1.4 var(--x-sans);
	outline: none;
}

.ebm-x-search-results { margin-top: 18px; max-height: 52vh; overflow-y: auto; }
.ebm-x-search-results > p { margin: 12px 2px; font-size: 13px; color: var(--x-muted); }

.ebm-x-result {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 0;
	border-top: 1px solid var(--x-line);
	text-decoration: none;
}

.ebm-x-result:hover { color: var(--x-gold-deep); }

.ebm-x-result-thumb {
	flex-shrink: 0;
	width: 52px;
	height: 44px;
	border: 1px solid var(--x-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--x-surface-2);
}

.ebm-x-result-thumb > img,
.ebm-x-result-thumb > svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.ebm-x-result small {
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--x-gold-deep);
	margin-bottom: 3px;
}

.ebm-x-result strong { font: 600 17.5px/1.2 var(--x-display); color: var(--x-ink); }

/* =========================================================
 *  ЧЕКМЕДЖЕ „ЗАПАЗЕНИ"
 * ========================================================= */
.ebm-x-drawer { position: fixed; inset: 0; z-index: 99997; display: none; }
.ebm-x-drawer.is-open { display: block; }

.ebm-x-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 12, 24, .62);
	backdrop-filter: blur(4px);
}

.ebm-x-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 92vw);
	padding: 26px;
	overflow-y: auto;
	background: var(--x-paper);
	border-left: 1px solid var(--x-line-strong);
	animation: ebmXSlide .3s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes ebmXSlide { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }

.ebm-x-drawer-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--x-line);
}

.ebm-x-drawer-head h2 { font-size: 30px; margin-top: 4px; }
.ebm-x-drawer-head button {
	margin-left: auto;
	width: 34px;
	height: 34px;
	border: 1px solid var(--x-line);
	border-radius: 50%;
	background: transparent;
	color: var(--x-muted);
	font-size: 18px;
	cursor: pointer;
}

.ebm-x-saved-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--x-line);
}

.ebm-x-saved-item small {
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--x-gold-deep);
	margin-bottom: 3px;
}

.ebm-x-saved-item a { font: 600 18px/1.2 var(--x-display); color: var(--x-ink); text-decoration: none; }
.ebm-x-saved-item a:hover { color: var(--x-gold-deep); }
.ebm-x-saved-item > span:first-child {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--x-line-strong);
	border-radius: 50%;
	color: var(--x-gold);
}

.ebm-x-saved-item > span:first-child svg { width: 15px; height: 15px; fill: currentColor; }

.ebm-x-saved-remove {
	margin-left: auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--x-muted);
	font-size: 17px;
	cursor: pointer;
}

.ebm-x-saved-remove:hover { color: #c0392b; }
.ebm-x-saved-empty { padding: 26px 0; color: var(--x-muted); font-size: 13.5px; }

/* =========================================================
 *  „ПРОДЪЛЖИ ДА ЧЕТЕШ"
 * ========================================================= */
.ebm-x-continue {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding: 16px 20px;
	border: 1px solid var(--x-line-strong);
	border-radius: var(--x-r-md);
	background: var(--x-gold-soft);
}

.ebm-x-continue > div { min-width: 0; }
.ebm-x-continue span {
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--x-gold-deep);
}

.ebm-x-continue strong {
	display: block;
	font: 600 21px/1.2 var(--x-display);
	color: var(--x-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ebm-x-continue > a { margin-left: auto; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--x-gold-deep); text-decoration: none; }
.ebm-x-continue > button { border: 0; background: transparent; color: var(--x-muted); font-size: 19px; cursor: pointer; }

/* =========================================================
 *  БУТОН НАГОРЕ + МОБИЛЕН ДОК
 * ========================================================= */
.ebm-x-top-btn {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99990;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid var(--x-line-strong);
	border-radius: 50%;
	background: var(--x-paper);
	color: var(--x-gold-deep);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	box-shadow: var(--x-shadow-sm);
	transition: .28s;
}

.ebm-x-top-btn.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.ebm-x-top-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.ebm-x-dock { display: none; }

/* =========================================================
 *  РЕСПОНСИВ
 * ========================================================= */
@media (max-width: 1180px) {
	.ebm-x-layout { grid-template-columns: 1fr; }
	.ebm-x-side { position: static; }
	.ebm-x-cats { grid-template-columns: repeat(3, 1fr); }
	.ebm-x .ebm-x-grid:not(.is-list-view) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.ebm-x { font-size: 14.5px; }
	.ebm-x .ebm-x-grid:not(.is-list-view) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ebm-x-hero-media { aspect-ratio: 16 / 10; }
	.ebm-x-hero-content { padding: 22px 18px 24px; min-height: 0; }
	.ebm-x-dots { right: 12px; bottom: 12px; padding: 7px 10px; }
	.ebm-x-star { left: 9px; top: 9px; width: 32px; height: 32px; }
	.ebm-x-star > svg { width: 16px; height: 16px; }
	.ebm-x-panel { padding: 20px 15px; }
	.ebm-x-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
	.ebm-x-chips::-webkit-scrollbar { display: none; }
	.ebm-x-chips a { white-space: nowrap; }
	.ebm-x-rank-item { grid-template-columns: 40px 92px minmax(0, 1fr); gap: 12px; }
	.ebm-x-rank-num { font-size: 26px; }
	.ebm-x-cats { grid-template-columns: 1fr 1fr; }
	.ebm-x-cosmos-body { padding: 40px 22px 36px; max-width: none; }
	.ebm-x-cosmos { min-height: 340px; }
	.ebm-x-cosmos::before { background: linear-gradient(180deg, rgba(255, 253, 248, .88) 34%, rgba(255, 253, 248, .55) 100%); }

	.ebm-x-top-btn { display: none; }
	.ebm-x-dock {
		position: fixed;
		left: 50%;
		bottom: 14px;
		z-index: 99990;
		display: flex;
		gap: 4px;
		padding: 6px;
		transform: translateX(-50%);
		border: 1px solid var(--x-line-strong);
		border-radius: 999px;
		background: var(--x-paper);
		background: color-mix(in srgb, var(--x-paper) 92%, transparent);
		backdrop-filter: blur(12px);
		box-shadow: var(--x-shadow);
	}
	.ebm-x-dock button {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 8px 16px;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--x-muted);
		font: 600 9.5px/1 var(--x-sans);
		cursor: pointer;
	}
	.ebm-x-dock svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; }
	.ebm-x-dock b {
		position: absolute;
		top: 2px;
		right: 10px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--x-gold);
		color: #fff;
		font-size: 9.5px;
		line-height: 16px;
	}
}

@media (max-width: 620px) {
	.ebm-x .ebm-x-grid:not(.is-list-view) { grid-template-columns: 1fr; }
	.ebm-x-hero-media { aspect-ratio: 4 / 3; }
	.ebm-x-grid.is-list-view .ebm-x-card { flex-direction: column; gap: 12px; }
	.ebm-x-grid.is-list-view .ebm-x-card-art { flex: none; width: 100%; }
	.ebm-x-rank-item { grid-template-columns: 34px minmax(0, 1fr); }
	.ebm-x-rank-art { display: none; }
	.ebm-x-search { padding-top: 4vh; }
	.ebm-x-search-dialog { padding: 22px 18px; }
}

/* =========================================================
 *  ПРОИЗВОДИТЕЛНОСТ + ДОСТЪПНОСТ
 * ========================================================= */
.ebm-x-panel + .ebm-x-panel { content-visibility: auto; contain-intrinsic-size: auto 640px; }

@media (prefers-reduced-motion: reduce) {
	.ebm-c-star, .ebm-c-orbit, .ebm-c-tier, .ebm-c-apex, .ebm-c-spark, .ebm-c-rays path,
	.ebm-x-star, .ebm-x-star > svg, .ebm-x-reads-star { animation: none !important; }
	.ebm-c-tier { stroke-opacity: .5 !important; }
	.ebm-c-spark { opacity: .7 !important; }
	.ebm-x-cosmos-scene { transform: none !important; }
	.ebm-x-reveal { opacity: 1 !important; transform: none !important; }
	.ebm-x-reads-track i { width: var(--p, 0%) !important; transition: none !important; }
	.ebm-x *,
	.ebm-x *::before,
	.ebm-x *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* =========================================================
 *  ЗАПИСВАНЕ ЗА НОВИ СТАТИИ (сайдбар)
 * ========================================================= */
.ebm-x .ebm-sub.is-compact h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 6px;
	font-family: var(--x-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--x-muted);
}

.ebm-x .ebm-sub.is-compact h3::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--x-gold);
}

.ebm-x .ebm-sub-note { margin: 0 0 12px; font-size: 12.5px; color: var(--x-muted); }
.ebm-x .ebm-sub-form { display: flex; gap: 7px; flex-wrap: wrap; }

.ebm-x .ebm-sub-form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--x-line);
	border-radius: 999px;
	background: var(--x-paper);
	font: 500 13px/1.2 var(--x-sans);
	color: var(--x-ink);
}

.ebm-x .ebm-sub-form input[name="ebm_website"] {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.ebm-x .ebm-sub-form button {
	padding: 11px 18px;
	border: 1px solid var(--x-gold);
	border-radius: 999px;
	background: var(--x-gold-soft);
	color: var(--x-gold-deep);
	font: 700 11.5px/1 var(--x-sans);
	letter-spacing: .08em;
	cursor: pointer;
	transition: .2s;
}

.ebm-x .ebm-sub-form button:hover { background: var(--x-gold); color: #fff; }
.ebm-x .ebm-sub-msg { margin: 9px 0 0; font-size: 12px; }
.ebm-x .ebm-sub-msg.is-ok { color: #1a7a4d; }
.ebm-x .ebm-sub-msg.is-error { color: #b23a3a; }
.ebm-x .ebm-sub.is-done .ebm-sub-form { display: none; }

/* --- v3.33.0 — разговорът върху картата ---
 *
 * Броячът е връзка право към дискусията. Празната статия не мълчи, а кани;
 * тази с разговор над средното си личи, защото хората се включват там,
 * където вече се говори.
 */
.ebm-x-comments {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	border-radius: 999px;
	transition: color .2s ease;
}

.ebm-x-comments svg {
	width: 13px;
	height: 13px;
	flex: none;
	opacity: .75;
}

.ebm-x-comments:hover { color: var(--ebm-brass-deep, #a9863c); }
.ebm-x-comments:hover svg { opacity: 1; }

.ebm-x-comments.is-empty { opacity: .72; }
.ebm-x-comments.is-empty:hover { opacity: 1; }

.ebm-x-comments.is-hot {
	padding: 3px 10px 3px 8px;
	background: rgba(194, 163, 107, .16);
	color: var(--ebm-brass-deep, #a9863c);
	font-weight: 700;
}

.ebm-x-comments.is-hot svg { opacity: 1; }
.ebm-x-comments.is-hot::after { content: 'обсъждана'; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }

@media (max-width: 480px) {
	.ebm-x-comments svg { width: 12px; height: 12px; }
	.ebm-x-comments.is-hot::after { display: none; }
}