/* ==========================================================
   NEWS BLOCK — вариант 5: hero + горизонтальная лента
   Светлая тема, 72% ширины, верх страницы
   ========================================================== */

.news-block {
	width: 72%;
	max-width: 700px;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 auto 20px;
	padding-top: 20px;
	box-sizing: border-box;
}

/* Reserve space only while loading — avoids jump when news appear */
.news-block.news-block--pending {
	min-height: 260px;
}

.news-block.news-block--empty {
	display: none;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.news-skeleton {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
	min-height: 110px;
}
.news-skeleton__line {
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
	background-size: 200% 100%;
	animation: newsSkeletonPulse 1.2s ease-in-out infinite;
}
.news-skeleton__line--title { height: 16px; width: 88%; }
.news-skeleton__line--short { width: 55%; }
@keyframes newsSkeletonPulse {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.news-block:not(.news-block--pending) .news-skeleton {
	display: none;
}

/* Slot for animated letters background */
.serpmonn-letters-slot {
	width: 100%;
	height: 120px;
	overflow: hidden;
	pointer-events: none;
}
.serpmonn-letters-slot canvas {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 768px) {
	.news-block { width: 60%; }
}
@media (max-width: 600px) {
	.news-block {
		width: 92%;
		margin: 0 auto 6px;
		padding-top: 8px;
		gap: 6px;
	}
	.news-block.news-block--pending {
		min-height: 220px;
	}
	.serpmonn-letters-slot { height: 64px; }
}
@media (max-width: 480px) {
	.news-block { width: 92%; }
}

/* Шапка: мигающая точка + надпись */
.news-block-header {
	display: flex;
	align-items: center;
	gap: 7px;
}
.news-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ff4d4d;
	animation: newsDotBlink 2s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes newsDotBlink {
	0%, 100% { opacity: 1; }
	50%       { opacity: .25; }
}
.news-block-title {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9ca3af;
	font-weight: 600;
}

/* Плашки категорий (только для hero) */
.news-tag {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	flex-shrink: 0;
}
.news-tag.ai       { background: rgba(255,77,77,.08);   color: #e53e3e; border: 1px solid rgba(255,77,77,.18); }
.news-tag.tech     { background: rgba(59,130,246,.08);  color: #2563eb; border: 1px solid rgba(59,130,246,.2); }
.news-tag.world    { background: rgba(245,158,11,.08);  color: #d97706; border: 1px solid rgba(245,158,11,.2); }
.news-tag.sci      { background: rgba(16,185,129,.08);  color: #059669; border: 1px solid rgba(16,185,129,.2); }
.news-tag.sport    { background: rgba(139,92,246,.08);  color: #7c3aed; border: 1px solid rgba(139,92,246,.2); }
.news-tag.space    { background: rgba(99,102,241,.08);  color: #4f46e5; border: 1px solid rgba(99,102,241,.2); }
.news-tag.business { background: rgba(234,179,8,.08);   color: #ca8a04; border: 1px solid rgba(234,179,8,.2); }
.news-tag.health   { background: rgba(34,197,94,.08);   color: #16a34a; border: 1px solid rgba(34,197,94,.2); }
.news-tag.games    { background: rgba(244,112,89,.08);  color: #f47059; border: 1px solid rgba(244,112,89,.2); }
.news-tag.politics { background: rgba(239,68,68,.08);   color: #dc2626; border: 1px solid rgba(239,68,68,.2); }
.news-tag.economy  { background: rgba(20,184,166,.08);  color: #0d9488; border: 1px solid rgba(20,184,166,.2); }
.news-tag.culture  { background: rgba(168,85,247,.08);  color: #9333ea; border: 1px solid rgba(168,85,247,.2); }

/* ==========================================================
   Цветная точка категории (для карточек ленты)
   ========================================================== */
.card-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 3px;
}
.card-dot--ai       { background: #e53e3e; }
.card-dot--tech     { background: #2563eb; }
.card-dot--world    { background: #d97706; }
.card-dot--sci      { background: #059669; }
.card-dot--sport    { background: #7c3aed; }
.card-dot--space    { background: #4f46e5; }
.card-dot--business { background: #ca8a04; }
.card-dot--health   { background: #16a34a; }
.card-dot--games    { background: #f47059; }
.card-dot--politics { background: #dc2626; }
.card-dot--economy  { background: #0d9488; }
.card-dot--culture  { background: #9333ea; }

/* Фавикон источника */
.card-favicon {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	object-fit: contain;
	flex-shrink: 0;
	vertical-align: middle;
	margin-right: 3px;
}
.card-source {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10px;
	color: #9ca3af;
}

/* ==========================================================
   HERO-карточка (главная новость)
   ========================================================== */
.combo-hero {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
	transition: border-color .25s, transform .25s, box-shadow .25s;
	position: relative;
	overflow: hidden;
}
.combo-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 20% 0%, rgba(255,77,77,.03), transparent 55%);
	pointer-events: none;
}
/* Hover: border под цвет категории */
.combo-hero:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.combo-hero[data-tag="ai"]:hover       { border-color: rgba(229,62,62,.35); }
.combo-hero[data-tag="tech"]:hover     { border-color: rgba(37,99,235,.35); }
.combo-hero[data-tag="world"]:hover    { border-color: rgba(217,119,6,.35); }
.combo-hero[data-tag="sci"]:hover      { border-color: rgba(5,150,105,.35); }
.combo-hero[data-tag="sport"]:hover    { border-color: rgba(124,58,237,.35); }
.combo-hero[data-tag="space"]:hover    { border-color: rgba(79,70,229,.35); }
.combo-hero[data-tag="business"]:hover { border-color: rgba(202,138,4,.35); }
.combo-hero[data-tag="health"]:hover   { border-color: rgba(22,163,74,.35); }
.combo-hero[data-tag="games"]:hover    { border-color: rgba(244,112,89,.35); }
.combo-hero[data-tag="politics"]:hover { border-color: rgba(220,38,38,.35); }
.combo-hero[data-tag="economy"]:hover  { border-color: rgba(13,148,136,.35); }
.combo-hero[data-tag="culture"]:hover  { border-color: rgba(147,51,234,.35); }

.combo-hero-headline {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #111827;
}
.combo-hero-desc {
	font-size: 12px;
	line-height: 1.55;
	color: #6b7280;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.combo-hero-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 4px;
}

/* ==========================================================
   ГОРИЗОНТАЛЬНАЯ ЛЕНТА + СТРЕЛКИ
   ========================================================== */
.feed-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}
.feed-wrapper::after {
	content: '';
	position: absolute;
	right: 32px; top: 0; bottom: 6px;
	width: 40px;
	background: linear-gradient(to left, rgba(249,250,251,0.85), transparent);
	pointer-events: none;
	z-index: 1;
}

.feed-arrow {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.1);
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #374151;
	transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s;
	padding: 0;
	z-index: 2;
}
.feed-arrow:hover {
	background: #f9fafb;
	border-color: rgba(244,112,89,.35);
	box-shadow: 0 2px 8px rgba(244,112,89,.15);
	color: #f47059;
}
.feed-arrow:active { transform: scale(.93); }
@media (max-width: 768px) {
	.feed-arrow { display: none; }
	.feed-wrapper::after { right: 0; }
}

.news-feed {
	flex: 1;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
	scrollbar-width: none;
	cursor: grab;
}
.news-feed:active { cursor: grabbing; }
.news-feed::-webkit-scrollbar { display: none; }

/* ==========================================================
   КАРТОЧКА ЛЕНТЫ
   ========================================================== */
.card {
	flex: 0 0 200px;
	scroll-snap-align: start;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,.07);
	border-radius: 14px;
	padding: 12px 14px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 1px 6px rgba(0,0,0,.04);
	transition: border-color .25s, transform .25s, box-shadow .25s;
}
/* Hover: плавный подъём + border под цвет категории */
.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,.09);
}
.card[data-tag="ai"]:hover       { border-color: rgba(229,62,62,.35); }
.card[data-tag="tech"]:hover     { border-color: rgba(37,99,235,.35); }
.card[data-tag="world"]:hover    { border-color: rgba(217,119,6,.35); }
.card[data-tag="sci"]:hover      { border-color: rgba(5,150,105,.35); }
.card[data-tag="sport"]:hover    { border-color: rgba(124,58,237,.35); }
.card[data-tag="space"]:hover    { border-color: rgba(79,70,229,.35); }
.card[data-tag="business"]:hover { border-color: rgba(202,138,4,.35); }
.card[data-tag="health"]:hover   { border-color: rgba(22,163,74,.35); }
.card[data-tag="games"]:hover    { border-color: rgba(244,112,89,.35); }
.card[data-tag="politics"]:hover { border-color: rgba(220,38,38,.35); }
.card[data-tag="economy"]:hover  { border-color: rgba(13,148,136,.35); }
.card[data-tag="culture"]:hover  { border-color: rgba(147,51,234,.35); }

/* Верхняя часть карточки: точка + заголовок */
.card-top {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	flex: 1;
}
.card-headline {
	font-size: 13px;
	line-height: 1.45;
	color: #1f2937;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}
.card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-time, .np-source, .np-time {
	font-size: 10px;
	color: #9ca3af;
}

/* ==========================================================
   Старые стили (страница /news/)
   ========================================================== */
.news-container {
	margin-top: 1%;
	width: auto;
	min-height: 33%;
	max-height: 50%;
	height: auto;
	text-align: justify;
	position: relative;
	background-color: rgba(255,255,255,0.8);
	border-radius: 10px;
	padding: 3%;
	margin-left: auto;
	margin-right: auto;
	transition: all 0.5s ease-in-out;
	-ms-overflow-style: none;
	overflow-y: auto;
	scrollbar-width: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
.news-container.expanded { height: auto; min-height: 75%; max-height: none; overflow-y: auto; }
.news-container::-webkit-scrollbar        { display: none; }
.news-container:hover::-webkit-scrollbar  { display: block; }
.news-container:hover                      { scrollbar-width: auto; }
.news-item {
	display: flex; flex-direction: column;
	width: 100%; border-bottom: 1px solid #e5e7eb;
	padding: 10px 0; align-items: flex-start;
}
.news-item:last-child { border-bottom: none; }
.news-title   { font-size: 18px; font-weight: bold; color: #111827; }
.news-date    { font-size: 12px; color: #9ca3af; }
.news-content { margin-top: 5px; color: #374151; }
.news-link    { text-decoration: none; color: inherit; }
.news-link:hover .news-title { text-decoration: underline; color: #f47059; }
.news-image   { max-width: 100%; height: auto; margin: 0 auto 15px; border-radius: 8px; }