/* ============================================================
   Trends2News Frontend CSS
   Mobile-first, kein jQuery, CSS-Variablen, Dark Mode
   ============================================================ */

:root {
	--t2n-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--t2n-primary:     #c0392b;
	--t2n-dark:        #1a1a2e;
	--t2n-text:        #212529;
	--t2n-text-muted:  #6c757d;
	--t2n-bg:          #f8f9fa;
	--t2n-card-bg:     #ffffff;
	--t2n-border:      #dee2e6;
	--t2n-radius:      8px;
	--t2n-shadow:      0 2px 12px rgba(0,0,0,.08);
	--t2n-shadow-hover:0 6px 24px rgba(0,0,0,.15);
	--t2n-transition:  .2s ease;
	--t2n-gap:         20px;

	/* Kategorie-Farben */
	--t2n-sport:        #e74c3c;
	--t2n-politics:     #2980b9;
	--t2n-economy:      #27ae60;
	--t2n-technology:   #8e44ad;
	--t2n-health:       #16a085;
	--t2n-science:      #2471a3;
	--t2n-lifestyle:    #d35400;
	--t2n-travel:       #138d75;
	--t2n-gaming:       #6c3483;
	--t2n-music:        #b7950b;
	--t2n-entertainment:#c0392b;
	--t2n-weather:      #5d6d7e;
	--t2n-celebrities:  #a04000;
	--t2n-misc:         #616a6b;
}

@media (prefers-color-scheme: dark) {
	:root {
		--t2n-dark:       #0d0d1a;
		--t2n-text:       #e9ecef;
		--t2n-text-muted: #adb5bd;
		--t2n-bg:         #1a1a2e;
		--t2n-card-bg:    #16213e;
		--t2n-border:     #2d3748;
	}
}

/* ─── Base ──────────────────────────────────────────────────── */

.t2n-news-homepage,
.t2n-hero-grid,
.t2n-category-row,
.t2n-trending-widget,
.t2n-breaking-ticker {
	font-family: var(--t2n-font);
	color: var(--t2n-text);
	box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

.t2n-homepage-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 16px;
}

.t2n-section { margin: 32px 0; }

.t2n-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.t2n-section-title {
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 700;
	margin: 0;
	padding-left: 10px;
	border-left: 4px solid var(--t2n-primary);
}

/* ─── Breaking Ticker ───────────────────────────────────────── */

.t2n-breaking-ticker {
	background: var(--t2n-primary);
	color: #fff;
	display: flex;
	align-items: center;
	overflow: hidden;
	height: 36px;
}

.t2n-ticker-label {
	background: rgba(0,0,0,.25);
	padding: 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	white-space: nowrap;
	height: 36px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.t2n-ticker-track {
	overflow: hidden;
	flex: 1;
}

.t2n-ticker-content {
	display: inline-flex;
	animation: t2n-ticker-scroll 30s linear infinite;
	white-space: nowrap;
}

@keyframes t2n-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.t2n-ticker-item {
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	padding: 0 24px;
}

.t2n-ticker-item:hover { text-decoration: underline; }
.t2n-ticker-sep { opacity: .5; }

/* ─── Hero Grid ─────────────────────────────────────────────── */

.t2n-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--t2n-gap);
}

@media (min-width: 768px) {
	.t2n-hero-grid { grid-template-columns: 2fr 1fr; }
}

.t2n-hero-link,
.t2n-side-link,
.t2n-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.t2n-hero-main {
	position: relative;
	border-radius: var(--t2n-radius);
	overflow: hidden;
	background: var(--t2n-card-bg);
	box-shadow: var(--t2n-shadow);
	transition: box-shadow var(--t2n-transition);
}

.t2n-hero-main:hover { box-shadow: var(--t2n-shadow-hover); }

.t2n-hero-image img {
	width: 100%;
	height: clamp(200px, 40vw, 420px);
	object-fit: cover;
	display: block;
}

.t2n-hero-content {
	padding: 20px;
}

.t2n-hero-title {
	font-size: clamp(1.2rem, 2.5vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 8px 0;
}

.t2n-hero-excerpt {
	color: var(--t2n-text-muted);
	font-size: .95rem;
	margin: 0 0 8px;
}

/* ─── Side Cards ────────────────────────────────────────────── */

.t2n-hero-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--t2n-gap);
}

.t2n-side-card {
	background: var(--t2n-card-bg);
	border-radius: var(--t2n-radius);
	overflow: hidden;
	box-shadow: var(--t2n-shadow);
	transition: box-shadow var(--t2n-transition);
	display: flex;
}

.t2n-side-card:hover { box-shadow: var(--t2n-shadow-hover); }

.t2n-side-image img {
	width: 90px;
	height: 80px;
	object-fit: cover;
	flex-shrink: 0;
}

.t2n-side-content {
	padding: 10px 12px;
	flex: 1;
}

.t2n-side-title {
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 4px 0;
}

/* ─── Category Row / Slider ─────────────────────────────────── */

.t2n-category-row { margin: 28px 0; }

.t2n-category-slider {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--t2n-gap);
}

@media (max-width: 480px) {
	.t2n-category-slider {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}
	.t2n-category-card { min-width: 240px; scroll-snap-align: start; }
}

.t2n-category-card {
	background: var(--t2n-card-bg);
	border-radius: var(--t2n-radius);
	overflow: hidden;
	box-shadow: var(--t2n-shadow);
	transition: transform var(--t2n-transition), box-shadow var(--t2n-transition);
}

.t2n-category-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--t2n-shadow-hover);
}

.t2n-card-image img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

.t2n-card-body { padding: 14px; }

.t2n-card-title {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 6px 0;
}

.t2n-card-meta {
	display: flex;
	gap: 12px;
	font-size: .78rem;
	color: var(--t2n-text-muted);
}

/* ─── Trending Widget ───────────────────────────────────────── */

.t2n-trending-widget {
	background: var(--t2n-card-bg);
	border-radius: var(--t2n-radius);
	padding: 20px;
	box-shadow: var(--t2n-shadow);
}

.t2n-trending-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.t2n-trending-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--t2n-border);
}

.t2n-trending-item:last-child { border-bottom: none; }

.t2n-trending-rank {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--t2n-border);
	min-width: 32px;
	line-height: 1;
}

.t2n-trending-title {
	font-size: .9rem;
	font-weight: 600;
	color: var(--t2n-text);
	text-decoration: none;
}

.t2n-trending-title:hover { color: var(--t2n-primary); }

/* ─── Category Grid ─────────────────────────────────────────── */

.t2n-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}

.t2n-cat-grid-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 12px;
	border-radius: var(--t2n-radius);
	background: var(--t2n-card-bg);
	border: 1px solid var(--t2n-border);
	text-decoration: none;
	color: var(--t2n-text);
	text-align: center;
	transition: transform var(--t2n-transition), box-shadow var(--t2n-transition);
	gap: 4px;
}

.t2n-cat-grid-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--t2n-shadow);
	color: #fff;
}

.t2n-cat-name { font-weight: 700; font-size: .9rem; }
.t2n-cat-count { font-size: .75rem; opacity: .7; }

/* ─── Kategorie-Badges ──────────────────────────────────────── */

.t2n-category-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	text-decoration: none;
	color: #fff !important;
	background: var(--t2n-primary);
	margin-bottom: 6px;
}

.t2n-badge-cat-sport        { background: var(--t2n-sport) !important; }
.t2n-badge-cat-politics     { background: var(--t2n-politics) !important; }
.t2n-badge-cat-economy      { background: var(--t2n-economy) !important; }
.t2n-badge-cat-technology   { background: var(--t2n-technology) !important; }
.t2n-badge-cat-health       { background: var(--t2n-health) !important; }
.t2n-badge-cat-science      { background: var(--t2n-science) !important; }
.t2n-badge-cat-lifestyle    { background: var(--t2n-lifestyle) !important; }
.t2n-badge-cat-travel       { background: var(--t2n-travel) !important; }
.t2n-badge-cat-gaming       { background: var(--t2n-gaming) !important; }
.t2n-badge-cat-music        { background: var(--t2n-music) !important; }
.t2n-badge-cat-entertainment{ background: var(--t2n-entertainment) !important; }
.t2n-badge-cat-weather      { background: var(--t2n-weather) !important; }

/* Kategorie-Grid hover farben */
.t2n-cat-sport:hover        { background: var(--t2n-sport) !important; }
.t2n-cat-politics:hover     { background: var(--t2n-politics) !important; }
.t2n-cat-economy:hover      { background: var(--t2n-economy) !important; }
.t2n-cat-technology:hover   { background: var(--t2n-technology) !important; }
.t2n-cat-health:hover       { background: var(--t2n-health) !important; }
.t2n-cat-science:hover      { background: var(--t2n-science) !important; }

/* ─── Live & Fire Badges ────────────────────────────────────── */

.t2n-live-badge {
	display: inline-block;
	background: var(--t2n-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 3px;
	letter-spacing: 1px;
	margin-bottom: 4px;
	animation: t2n-pulse 2s infinite;
}

@keyframes t2n-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .6; }
}

.t2n-fire-icon { margin-right: 4px; }

/* ─── Meta / Time ───────────────────────────────────────────── */

.t2n-meta,
.t2n-reading-time,
.t2n-date {
	font-size: .78rem;
	color: var(--t2n-text-muted);
}

/* ─── Article Meta (Einzelartikel) ─────────────────────────── */

.t2n-article-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--t2n-border);
	margin-bottom: 20px;
}

.t2n-reading-time-badge {
	background: var(--t2n-bg);
	border: 1px solid var(--t2n-border);
	border-radius: 12px;
	padding: 3px 10px;
	font-size: .8rem;
	color: var(--t2n-text-muted);
}

/* ─── Share Buttons ─────────────────────────────────────────── */

.t2n-share-btns {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.t2n-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: opacity var(--t2n-transition);
}

.t2n-share-btn:hover { opacity: .8; }

.t2n-share-facebook { background: #1877f2; color: #fff; }
.t2n-share-twitter  { background: #000; color: #fff; }
.t2n-share-whatsapp { background: #25d366; color: #fff; }
.t2n-share-copy     { background: var(--t2n-border); color: var(--t2n-text); font-size: 14px; }

/* ─── Two-Column Layout ─────────────────────────────────────── */

.t2n-homepage-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--t2n-gap);
}

@media (min-width: 1024px) {
	.t2n-homepage-two-col {
		grid-template-columns: 2fr 1fr;
	}
}

/* ─── HOW-TO List ───────────────────────────────────────────── */

.trends2news-howto-list {
	counter-reset: howto-counter;
}

.trends2news-howto-list li {
	counter-increment: howto-counter;
	position: relative;
	padding-left: 12px;
	margin-bottom: 12px;
}

/* ─── Responsive ────────────────────────────────────────────── */

@media (max-width: 480px) {
	.t2n-hero-grid { grid-template-columns: 1fr; }
	.t2n-category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
	.t2n-category-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1440px) {
	.t2n-category-grid { grid-template-columns: repeat(5, 1fr); }
}