/*
Theme Name:   GeneratePress Child
Theme URI:    https://jetbetblog.co.ke
Description:  JetBet Blog Child Theme
Author:       Sedi Digital
Author URI:   https://sedidigital.co.ke
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* ── TOKENS ── */
:root {
	--c-bg: #0b0d14;
	--c-surface: #111420;
	--c-card: #161b28;
	--c-card-hover: #1c2234;
	--c-border: #1e253a;
	--c-border2: #252e46;
	--c-lime: #7ed321;
	--c-lime-lt: #a0e44a;
	--c-lime-glow: rgba(126, 211, 33, .1);
	--c-lime-ring: rgba(126, 211, 33, .22);
	--c-white: #eef2fc;
	--c-muted: #7d8fab;
	--c-faint: #424e68;
	--c-red: #e53935;
	--c-gold: #f5a623;
	--c-blue: #4a8fe2;
	--f-head: "Barlow Condensed", sans-serif;
	--f-body: "Barlow", sans-serif;
	--f-mono: "JetBrains Mono", monospace;
	--max-w: 1240px;
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-xl: 16px;
	--r-2xl: 24px;
}

/* ── GLOBAL RESET ── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: #0b0d14 !important;
	color: #eef2fc !important;
	font-family: "Barlow", sans-serif !important;
	line-height: 1.7 !important;
	-webkit-font-smoothing: antialiased !important;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── FORCE DARK BACKGROUND EVERYWHERE ── */
#page, #content, #primary, #main, .site, .site-content, .content-area, .site-main, .inside-article, .hentry, article, .entry-content, main {
	background: #0b0d14 !important;
	color: #eef2fc !important;
}

/* ── HIDE DEFAULT GP ELEMENTS ── */
.site-header.wp-header, #masthead.site-header, .main-navigation, .nav-primary, #colophon.site-footer, .site-footer.wp-footer, .site-info, .copyright-bar, .footer-bar, .generated-by-gp {
	display: none !important;
}

/* ── REMOVE GP CONTENT PADDING ── */
.site-content, #content, #primary, .content-area, .site-main, #main {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	float: none !important;
}

.entry-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
}

.entry-header, .page-header {
	display: none !important;
}

/* ── FOOTER FIX ── */
.site-footer {
	width: 100% !important;
	max-width: 100% !important;
	background: #111420 !important;
	border-top: 1px solid #1e253a !important;
	margin-top: 0 !important;
	box-sizing: border-box !important;
}

.site-footer .footer-inner {
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 32px 24px 20px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.site-footer .footer-grid {
	display: grid !important;
	grid-template-columns: 1.6fr 1fr 1fr !important;
	gap: 36px !important;
	margin-bottom: 28px !important;
	width: 100% !important;
}

.site-footer .footer-col-title {
	font-family: "Barlow Condensed", sans-serif !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	color: #eef2fc !important;
	margin-bottom: 14px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.site-footer .footer-col-title::before {
	content: "" !important;
	width: 3px !important;
	height: 16px !important;
	background: #7ed321 !important;
	border-radius: 2px !important;
	display: inline-block !important;
}

.site-footer .footer-link {
	display: block !important;
	font-size: 12.5px !important;
	color: #7d8fab !important;
	padding: 4px 0 !important;
	text-decoration: none !important;
	transition: color .15s !important;
}

.site-footer .footer-link:hover {
	color: #7ed321 !important;
}

.site-footer .footer-brand-desc {
	font-size: 12.5px !important;
	color: #7d8fab !important;
	line-height: 1.7 !important;
	margin-bottom: 14px !important;
	max-width: 240px !important;
}

.site-footer .footer-socials {
	display: flex !important;
	gap: 8px !important;
	margin-bottom: 12px !important;
	flex-wrap: wrap !important;
}

.site-footer .social-btn {
	width: 34px !important;
	height: 34px !important;
	border-radius: 8px !important;
	border: 1px solid #252e46 !important;
	background: #161b28 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 13px !important;
	cursor: pointer !important;
	color: #7d8fab !important;
	text-decoration: none !important;
	transition: all .15s !important;
}

.site-footer .social-btn:hover {
	border-color: rgba(126, 211, 33, .22) !important;
	color: #7ed321 !important;
	background: rgba(126, 211, 33, .1) !important;
}

.site-footer .responsible-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #161b28 !important;
	border: 1px solid #1e253a !important;
	border-radius: 4px !important;
	padding: 5px 10px !important;
	font-size: 9.5px !important;
	color: #424e68 !important;
}

.site-footer .footer-bottom {
	border-top: 1px solid #1e253a !important;
	padding-top: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	width: 100% !important;
}

.site-footer .footer-copy {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 11px !important;
	color: #424e68 !important;
}

.site-footer .footer-copy a {
	color: #7ed321 !important;
}

.site-footer .footer-legal {
	display: flex !important;
	gap: 16px !important;
}

.site-footer .footer-legal a {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 11px !important;
	color: #424e68 !important;
	text-decoration: none !important;
	transition: color .15s !important;
}

.site-footer .footer-legal a:hover {
	color: #7d8fab !important;
}

/* ── BACK TO TOP ── */
.btt {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	width: 40px !important;
	height: 40px !important;
	background: #7ed321 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 16px !important;
	color: #0b0d14 !important;
	cursor: pointer !important;
	z-index: 200 !important;
	opacity: 0 !important;
	transform: translateY(10px) !important;
	transition: opacity .25s, transform .25s !important;
	box-shadow: 0 4px 20px rgba(126, 211, 33, .35) !important;
}

.btt.show {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* ── RESPONSIVE FOOTER ── */
@media (max-width:1024px) {
	.site-footer .footer-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px !important;
	}
}

@media (max-width:600px) {
	.site-footer .footer-grid {
		grid-template-columns: 1fr !important;
	}
	
	.site-footer .footer-bottom {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

/* ── NAV ITEM STYLES ── */
.nav-item {
	padding: 0 13px;
	font-family: "Barlow", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: #7d8fab;
	height: 58px;
	display: inline-flex;
	align-items: center;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
	white-space: nowrap;
	text-decoration: none;
}

.nav-item:hover {
	color: #eef2fc;
}

.nav-item.active {
	color: #7ed321;
	border-bottom-color: #7ed321;
}

/* ── BUTTONS ── */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 8px;
	cursor: pointer;
	transition: all .15s;
	text-decoration: none;
	white-space: nowrap;
	border: none;
}

.btn-lime {
	background: #7ed321;
	color: #0b0d14;
}

.btn-lime:hover {
	background: #a0e44a;
}

.btn-outline {
	background: transparent;
	color: #7ed321;
	border: 1.5px solid rgba(126, 211, 33, .3);
}

.btn-outline:hover {
	background: rgba(126, 211, 33, .1);
}

.btn-dark {
	background: #161b28;
	color: #eef2fc;
	border: 1px solid #252e46;
}

.btn-dark:hover {
	border-color: rgba(126, 211, 33, .3);
}

.btn-sm {
	font-size: 11px;
	padding: 7px 13px;
}

/* ── COMMENTS ── */
.comments-area, .comment-respond {
	background: #161b28 !important;
	border: 1px solid #1e253a !important;
	border-radius: 12px !important;
	padding: 24px !important;
	margin-top: 28px !important;
}

#reply-title, .comment-reply-title, .comments-title {
	font-family: "Barlow Condensed", sans-serif !important;
	font-size: 22px !important;
	font-weight: 900 !important;
	color: #eef2fc !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	margin-bottom: 20px !important;
}

.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	background: #111420 !important;
	border: 1px solid #1e253a !important;
	border-radius: 8px !important;
	color: #eef2fc !important;
	font-family: "Barlow", sans-serif !important;
	font-size: 14px !important;
	padding: 10px 14px !important;
	width: 100% !important;
	outline: none !important;
	box-sizing: border-box !important;
	margin-bottom: 14px !important;
	transition: border-color .15s !important;
}

.comment-form input:focus, .comment-form textarea:focus {
	border-color: rgba(126, 211, 33, .4) !important;
}

.comment-form label {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color: #7d8fab !important;
	display: block !important;
	margin-bottom: 6px !important;
}

#submit, .comment-form input[type="submit"] {
	background: #7ed321 !important;
	color: #0b0d14 !important;
	font-family: "Barlow Condensed", sans-serif !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	padding: 12px 28px !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
}

#submit:hover {
	background: #a0e44a !important;
}

.comment-body {
	background: #161b28 !important;
	border: 1px solid #1e253a !important;
	border-radius: 10px !important;
	padding: 16px !important;
	margin-bottom: 14px !important;
}

.comment-author .fn {
	color: #eef2fc !important;
	font-weight: 600;
}

.comment-content p {
	color: #7d8fab !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
}

.comment-reply-link {
	color: #7ed321 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

/* ══════════════════════════════════════
   HOMEPAGE — front-page.php styles
   ══════════════════════════════════════ */

/* Force full width on homepage */
body.home #page, body.home #content, body.home #primary, body.home .content-area, body.home .site-main, body.home #main, body.home .inside-article, body.home article {
	background: #0b0d14 !important;
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	border: none !important;
	box-shadow: none !important;
}

body.home .widget-area, body.home #sidebar-primary, body.home .entry-header, body.home .entry-title, body.home .entry-footer, body.home .page-header {
	display: none !important;
}

/* Utility */
.jb-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: var(--r-sm);
	white-space: nowrap;
	text-decoration: none;
}

.jb-tag-lime {
	background: var(--c-lime-glow);
	color: var(--c-lime);
	border: 1px solid var(--c-lime-ring);
}

.jb-tag-gold {
	background: rgba(245, 166, 35, .1);
	color: var(--c-gold);
	border: 1px solid rgba(245, 166, 35, .22);
}

.jb-tag-blue {
	background: rgba(74, 143, 226, .1);
	color: var(--c-blue);
	border: 1px solid rgba(74, 143, 226, .22);
}

.jb-tag-grey {
	background: rgba(255, 255, 255, .06);
	color: var(--c-muted);
	border: 1px solid var(--c-border2);
}

.pulse-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--c-lime);
	border-radius: 50%;
	flex-shrink: 0;
	animation: jbPulse 1.5s ease-in-out infinite;
}

@keyframes jbPulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	
	50% {
		opacity: .3;
		transform: scale(.65);
	}
}

.view-all {
	font-family: var(--f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-lime);
	display: flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}

.view-all:hover {
	text-decoration: underline;
}

.section-title {
	font-family: var(--f-head);
	font-size: 20px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--c-white);
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-bar {
	width: 4px;
	height: 22px;
	background: var(--c-lime);
	border-radius: 2px;
	flex-shrink: 0;
}

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

/* Hero Slider */
.jb-hero {
	position: relative;
	overflow: hidden;
	background: var(--c-surface);
}

.jb-slides {
	display: flex;
	transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.jb-slide {
	min-width: 100%;
	position: relative;
	height: 440px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

.jb-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 20%;
	transition: transform 8s ease;
}

.jb-slide.active .jb-slide-bg {
	transform: scale(1.04);
}

.jb-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(11, 13, 20, .96) 0%, rgba(11, 13, 20, .72) 45%, rgba(11, 13, 20, .1) 100%);
}

.jb-slide-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px 44px;
}

.jb-slide-cats {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.jb-slide-title {
	font-family: var(--f-head);
	font-size: 40px;
	font-weight: 900;
	line-height: 1.05;
	color: var(--c-white);
	max-width: 560px;
	margin-bottom: 10px;
	text-decoration: none;
	display: block;
}

.jb-slide-title:hover {
	color: var(--c-lime);
}

.jb-slide-deck {
	font-size: 14px;
	color: var(--c-muted);
	line-height: 1.65;
	max-width: 480px;
	margin-bottom: 16px;
}

.jb-slide-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--f-mono);
	font-size: 11px;
	color: var(--c-faint);
	margin-bottom: 20px;
}

.jb-slide-meta-dot {
	width: 3px;
	height: 3px;
	background: var(--c-faint);
	border-radius: 50%;
}

.jb-slide-ctas {
	display: flex;
	gap: 8px;
}

.jb-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: all .15s;
	text-decoration: none;
}

.jb-btn-lime {
	background: var(--c-lime);
	color: #0b0d14;
}

.jb-btn-lime:hover {
	background: var(--c-lime-lt);
}

.jb-btn-outline {
	background: transparent;
	color: var(--c-lime);
	border: 1.5px solid var(--c-lime-ring);
}

.jb-btn-outline:hover {
	background: var(--c-lime-glow);
}

.jb-btn-sm {
	font-size: 11px;
	padding: 7px 14px;
}

.jb-slide-dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 10;
}

.jb-dot {
	height: 4px;
	width: 18px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .22);
	cursor: pointer;
	transition: all .25s;
}

.jb-dot.active {
	background: var(--c-lime);
	width: 30px;
}

.jb-arrows {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 14px;
	z-index: 10;
	pointer-events: none;
}

.jb-arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	border: 1px solid var(--c-border2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: var(--c-white);
	cursor: pointer;
	pointer-events: all;
	transition: all .15s;
}

.jb-arrow:hover {
	background: var(--c-lime-glow);
	border-color: var(--c-lime-ring);
}

/* Ticker */
.jb-ticker {
	background: var(--c-card);
	border-bottom: 1px solid var(--c-border);
	height: 38px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.jb-ticker-label {
	background: var(--c-lime);
	color: #0b0d14;
	font-family: var(--f-head);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 0 14px;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	white-space: nowrap;
}

.jb-ticker-scroll {
	overflow: hidden;
	flex: 1;
}

.jb-ticker-track {
	display: flex;
	white-space: nowrap;
	animation: jbTicker 32s linear infinite;
}

.jb-ticker-track:hover {
	animation-play-state: paused;
}

@keyframes jbTicker {
	0% {
		transform: translateX(0);
	}
	
	100% {
		transform: translateX(-50%);
	}
}

.jb-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 20px;
	font-size: 12.5px;
	color: var(--c-muted);
	border-right: 1px solid var(--c-border);
	height: 38px;
}

.jb-ticker-item strong {
	color: var(--c-white);
	font-weight: 600;
}

.jb-ticker-odds {
	font-family: var(--f-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--c-lime);
	background: var(--c-lime-glow);
	border: 1px solid var(--c-lime-ring);
	padding: 1px 7px;
	border-radius: var(--r-sm);
	margin-left: 2px;
}

/* Search Bar */
.jb-search-bar {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
	padding: 14px 0;
}

.jb-search-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.jb-search-form {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 680px;
	margin: 0 auto;
}

.jb-search-input {
	flex: 1;
	background: var(--c-card);
	border: 1.5px solid var(--c-border2);
	border-right: none;
	border-radius: 8px 0 0 8px;
	padding: 11px 18px;
	font-family: var(--f-body);
	font-size: 14px;
	color: var(--c-white);
	outline: none;
	transition: border-color .15s;
}

.jb-search-input:focus {
	border-color: rgba(126, 211, 33, .4);
}

.jb-search-input::placeholder {
	color: var(--c-faint);
}

.jb-search-btn {
	background: var(--c-lime);
	color: #0b0d14;
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .05em;
	padding: 11px 22px;
	border: none;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s;
}

.jb-search-btn:hover {
	background: var(--c-lime-lt);
}

/* Tips Band */
.jb-tips-band {
	background: rgba(126, 211, 33, .05);
	border-top: 1px solid var(--c-lime-ring);
	border-bottom: 1px solid var(--c-border);
	padding: 20px 0;
}

.jb-tips-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.jb-tips-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.jb-tips-title {
	font-family: var(--f-head);
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-lime);
	display: flex;
	align-items: center;
	gap: 8px;
}

.jb-tips-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}

.jb-tip-card {
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 12px 14px;
	cursor: pointer;
	transition: border-color .15s;
	text-decoration: none;
	display: block;
}

.jb-tip-card:hover {
	border-color: var(--c-lime-ring);
}

.jb-tip-league {
	font-family: var(--f-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-faint);
	margin-bottom: 3px;
}

.jb-tip-match {
	font-size: 11.5px;
	color: var(--c-muted);
	margin-bottom: 4px;
}

.jb-tip-pick {
	font-family: var(--f-head);
	font-size: 14px;
	font-weight: 800;
	color: var(--c-white);
	margin-bottom: 8px;
	line-height: 1.2;
}

.jb-tip-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.jb-tip-odds {
	font-family: var(--f-head);
	font-size: 18px;
	font-weight: 900;
	color: var(--c-lime);
	background: var(--c-lime-glow);
	border: 1px solid var(--c-lime-ring);
	padding: 2px 9px;
	border-radius: var(--r-sm);
}

.jb-tip-conf {
	font-family: var(--f-mono);
	font-size: 9.5px;
	color: var(--c-faint);
}

.jb-conf-bar {
	height: 3px;
	background: var(--c-border);
	border-radius: 2px;
	margin-top: 8px;
	overflow: hidden;
}

.jb-conf-fill {
	height: 100%;
	background: var(--c-lime);
	border-radius: 2px;
	transition: width .8s ease;
}

/* Main Layout */
.jb-wrap {
	background: #0b0d14;
	width: 100%;
}

.jb-main {
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 32px 24px !important;
	display: grid !important;
	grid-template-columns: 1fr 300px !important;
	gap: 32px !important;
	box-sizing: border-box !important;
}

.jb-content {
	min-width: 0;
}

.jb-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.jb-section {
	margin-bottom: 36px;
}

/* Post Grids */
.jb-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.jb-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

/* Post Cards */
.jb-card {
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	transition: border-color .2s, transform .2s;
	text-decoration: none;
}

.jb-card:hover {
	border-color: var(--c-lime-ring);
	transform: translateY(-2px);
}

.jb-card-thumb {
	position: relative;
	height: 176px;
	overflow: hidden;
	background: var(--c-surface);
	flex-shrink: 0;
}

.jb-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
	display: block;
}

.jb-card:hover .jb-card-thumb img {
	transform: scale(1.05);
}

.jb-card-thumb-no-img {
	height: 176px;
	background: var(--c-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
}

.jb-card-tags {
	position: absolute;
	bottom: 8px;
	left: 8px;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.jb-card-body {
	padding: 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.jb-card-title {
	font-family: var(--f-body);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--c-white);
	line-height: 1.35;
	margin-bottom: 8px;
	flex: 1;
}

.jb-card:hover .jb-card-title {
	color: var(--c-lime);
}

.jb-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 10px;
	border-top: 1px solid var(--c-border);
	margin-top: auto;
}

.jb-card-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--f-mono);
	font-size: 10px;
	color: var(--c-faint);
}

.jb-meta-dot {
	width: 3px;
	height: 3px;
	background: var(--c-faint);
	border-radius: 50%;
}

.jb-card-read {
	font-family: var(--f-mono);
	font-size: 10px;
	font-weight: 600;
	color: var(--c-lime);
	letter-spacing: .05em;
}

/* Featured Card */
.jb-featured {
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-radius: var(--r-2xl);
	overflow: hidden;
	cursor: pointer;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	transition: border-color .2s, transform .2s;
	text-decoration: none;
	margin-bottom: 16px;
}

.jb-featured:hover {
	border-color: var(--c-lime-ring);
	transform: translateY(-2px);
}

.jb-feat-thumb {
	position: relative;
	min-height: 230px;
	overflow: hidden;
}

.jb-feat-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
	display: block;
}

.jb-featured:hover .jb-feat-thumb img {
	transform: scale(1.04);
}

.jb-feat-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(11, 13, 20, 0) 60%, rgba(22, 27, 40, .95) 100%);
}

.jb-feat-tags {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.jb-feat-body {
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.jb-feat-title {
	font-family: var(--f-head);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.15;
	color: var(--c-white);
	margin-bottom: 10px;
}

.jb-featured:hover .jb-feat-title {
	color: var(--c-lime);
}

.jb-feat-excerpt {
	font-size: 13px;
	color: var(--c-muted);
	line-height: 1.6;
	margin-bottom: 14px;
}

.jb-feat-layout {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 20px;
}

.jb-feat-list-head {
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-faint);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-border);
	margin-bottom: 0;
}

/* List card */
.jb-list-card {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-border);
	text-decoration: none;
}

.jb-list-card:last-child {
	border-bottom: none;
}

.jb-list-thumb {
	width: 72px;
	height: 58px;
	flex-shrink: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-border);
}

.jb-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jb-list-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-white);
	line-height: 1.35;
	margin-bottom: 4px;
	transition: color .15s;
}

.jb-list-card:hover .jb-list-title {
	color: var(--c-lime);
}

.jb-list-meta {
	font-family: var(--f-mono);
	font-size: 10px;
	color: var(--c-faint);
}

/* Promo Banner */
.jb-promo {
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--c-border);
	display: block;
	margin-bottom: 32px;
	cursor: pointer;
	transition: border-color .15s;
	text-decoration: none;
}

.jb-promo:hover {
	border-color: var(--c-lime-ring);
}

.jb-promo img {
	width: 100%;
	display: block;
}

.jb-promo-btns {
	background: var(--c-card);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 10px;
}

.jb-promo-btn {
	font-family: var(--f-head);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .05em;
	padding: 9px;
	border-radius: var(--r-md);
	text-align: center;
	cursor: pointer;
	transition: all .15s;
	display: block;
	text-decoration: none;
}

.jb-promo-btn-lime {
	background: var(--c-lime);
	color: #0b0d14;
}

.jb-promo-btn-lime:hover {
	background: var(--c-lime-lt);
}

.jb-promo-btn-outline {
	border: 1.5px solid var(--c-lime-ring);
	color: var(--c-lime);
}

.jb-promo-btn-outline:hover {
	background: var(--c-lime-glow);
}

/* Sidebar */
.jb-odds-widget {
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	overflow: hidden;
	position: sticky;
	top: 80px;
}

.jb-odds-header {
	background: var(--c-lime);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.jb-odds-header-title {
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .05em;
	color: #0b0d14;
}

.jb-odds-header-sub {
	font-family: var(--f-mono);
	font-size: 9px;
	color: rgba(0, 0, 0, .55);
	display: flex;
	align-items: center;
	gap: 4px;
}

.jb-odds-body {
	padding: 14px 16px;
}

.jb-odds-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 0;
	border-bottom: 1px solid var(--c-border);
	cursor: pointer;
	transition: all .15s;
}

.jb-odds-row:last-child {
	border-bottom: none;
}

.jb-odds-row:hover .jb-odds-num {
	background: var(--c-lime);
	color: #0b0d14;
	border-color: var(--c-lime);
}

.jb-odds-match {
	font-family: var(--f-mono);
	font-size: 10px;
	color: var(--c-faint);
	margin-bottom: 2px;
}

.jb-odds-pick {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--c-white);
}

.jb-odds-num {
	font-family: var(--f-head);
	font-size: 18px;
	font-weight: 900;
	color: var(--c-lime);
	background: var(--c-lime-glow);
	border: 1px solid var(--c-lime-ring);
	padding: 3px 10px;
	border-radius: var(--r-sm);
	flex-shrink: 0;
	transition: all .15s;
}

.jb-odds-footer {
	padding: 0 16px 14px;
}

.jb-bet-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--c-lime);
	color: #0b0d14;
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .05em;
	padding: 11px;
	border-radius: var(--r-md);
	text-decoration: none;
	transition: background .15s;
	margin-bottom: 6px;
}

.jb-bet-btn:hover {
	background: var(--c-lime-lt);
}

.jb-odds-disclaimer {
	font-family: var(--f-mono);
	font-size: 8.5px;
	color: var(--c-faint);
	text-align: center;
}

.jb-sb-widget {
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	overflow: hidden;
}

.jb-sb-head {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
	padding: 11px 16px;
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--c-white);
	display: flex;
	align-items: center;
	gap: 8px;
}

.jb-sb-dot {
	width: 8px;
	height: 8px;
	background: var(--c-lime);
	border-radius: 50%;
	flex-shrink: 0;
}

.jb-sb-body {
	padding: 14px 16px;
}

.jb-sb-cta {
	background: var(--c-lime);
	border-radius: var(--r-xl);
	padding: 20px;
	position: sticky;
	top: 80px;
}

.jb-sb-cta-pre {
	font-family: var(--f-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .5);
	margin-bottom: 4px;
}

.jb-sb-cta-title {
	font-family: var(--f-head);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.1;
	color: #0b0d14;
	margin-bottom: 4px;
}

.jb-sb-cta-sub {
	font-size: 12px;
	color: rgba(0, 0, 0, .55);
	margin-bottom: 14px;
	line-height: 1.5;
}

.jb-sb-cta-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: #0b0d14;
	color: var(--c-lime);
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .05em;
	padding: 12px;
	border-radius: var(--r-md);
	margin-bottom: 8px;
	text-decoration: none;
	transition: opacity .15s;
}

.jb-sb-cta-btn:hover {
	opacity: .85;
}

.jb-sb-cta-tg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	background: #229ed9;
	color: #fff;
	font-family: var(--f-head);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .04em;
	padding: 10px;
	border-radius: var(--r-md);
	margin-bottom: 10px;
	text-decoration: none;
}

.jb-sb-cta-tg:hover {
	opacity: .88;
}

.jb-sb-cta-terms {
	font-family: var(--f-mono);
	font-size: 8.5px;
	color: rgba(0, 0, 0, .4);
	text-align: center;
}

.jb-sb-post-item {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--c-border);
}

.jb-sb-post-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.jb-sb-post-rank {
	font-family: var(--f-head);
	font-size: 22px;
	font-weight: 900;
	color: var(--c-border2);
	flex-shrink: 0;
	width: 22px;
	text-align: right;
	margin-top: 2px;
}

.jb-sb-thumb {
	width: 64px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-border);
}

.jb-sb-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jb-sb-post-title {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--c-white);
	line-height: 1.35;
	margin-bottom: 3px;
	display: block;
	text-decoration: none;
	transition: color .15s;
}

.jb-sb-post-item:hover .jb-sb-post-title {
	color: var(--c-lime);
}

.jb-sb-post-meta {
	font-family: var(--f-mono);
	font-size: 10px;
	color: var(--c-faint);
}

.jb-sb-cat-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 0;
	border-bottom: 1px solid var(--c-border);
	font-size: 13px;
	color: var(--c-muted);
	text-decoration: none;
	transition: color .15s;
}

.jb-sb-cat-item:last-child {
	border-bottom: none;
}

.jb-sb-cat-item:hover {
	color: var(--c-lime);
}

.jb-sb-cat-count {
	font-family: var(--f-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--c-faint);
}

.jb-tg-header {
	background: #229ed9;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.jb-tg-icon {
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.jb-tg-name {
	font-family: var(--f-head);
	font-size: 15px;
	font-weight: 800;
	color: #fff;
}

.jb-tg-handle {
	font-family: var(--f-mono);
	font-size: 10px;
	color: rgba(255, 255, 255, .7);
}

.jb-tg-body {
	padding: 14px 16px;
}

.jb-tg-stat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--c-muted);
	margin-bottom: 8px;
}

.jb-tg-stat strong {
	color: var(--c-white);
}

.jb-tg-preview {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: 10px;
	font-size: 12px;
	color: var(--c-muted);
	line-height: 1.55;
	margin-bottom: 12px;
	font-style: italic;
}

.jb-tg-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	background: #229ed9;
	color: #fff;
	font-family: var(--f-head);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .04em;
	padding: 11px;
	border-radius: var(--r-md);
	text-decoration: none;
	transition: opacity .15s;
}

.jb-tg-btn:hover {
	opacity: .88;
}

.jb-av-widget {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	overflow: hidden;
}

.jb-av-bar {
	background: var(--c-lime);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.jb-av-title {
	font-family: var(--f-head);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .06em;
	color: #0b0d14;
}

.jb-av-live {
	font-family: var(--f-mono);
	font-size: 9px;
	font-weight: 600;
	color: rgba(0, 0, 0, .55);
	display: flex;
	align-items: center;
	gap: 4px;
}

.jb-av-body {
	padding: 16px;
	text-align: center;
}

.jb-av-mult {
	font-family: var(--f-head);
	font-size: 52px;
	font-weight: 900;
	line-height: 1;
	color: var(--c-lime);
	text-shadow: 0 0 32px rgba(126, 211, 33, .35);
	transition: color .3s;
}

.jb-av-mult.high {
	color: var(--c-gold);
}

.jb-av-mult.crash {
	color: var(--c-red);
}

.jb-av-sub {
	font-family: var(--f-mono);
	font-size: 10px;
	color: var(--c-muted);
	margin-top: 5px;
}

.jb-av-prog {
	height: 4px;
	background: var(--c-border);
	border-radius: 2px;
	margin: 12px 0;
	overflow: hidden;
}

.jb-av-prog-fill {
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, #5ca818, var(--c-lime));
	transition: width .2s linear;
}

.jb-av-log {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	margin-bottom: 12px;
}

.jb-av-chip {
	font-family: var(--f-mono);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: var(--r-sm);
}

.jb-av-hi {
	background: var(--c-lime-glow);
	color: var(--c-lime);
	border: 1px solid var(--c-lime-ring);
}

.jb-av-md {
	background: var(--c-surface);
	color: var(--c-muted);
	border: 1px solid var(--c-border);
}

.jb-av-lo {
	background: rgba(229, 57, 53, .1);
	color: var(--c-red);
	border: 1px solid rgba(229, 57, 53, .22);
}

.jb-av-btn {
	display: block;
	width: 100%;
	background: var(--c-lime);
	color: #0b0d14;
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .05em;
	padding: 10px;
	border-radius: var(--r-md);
	text-align: center;
	text-decoration: none;
	transition: background .15s;
}

.jb-av-btn:hover {
	background: var(--c-lime-lt);
}

/* Responsive */
@media (max-width:1024px) {
	.jb-main {
		grid-template-columns: 1fr !important;
	}
	
	.jb-feat-layout {
		grid-template-columns: 1fr;
	}
	
	.jb-tips-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width:768px) {
	.jb-grid-3, .jb-grid-2 {
		grid-template-columns: 1fr 1fr;
	}
	
	.jb-featured {
		grid-template-columns: 1fr;
	}
	
	.jb-slide {
		height: 340px;
	}
	
	.jb-slide-title {
		font-size: 28px !important;
	}
	
	.jb-tips-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width:480px) {
	.jb-grid-3, .jb-grid-2 {
		grid-template-columns: 1fr;
	}
	
	.jb-tips-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.jb-slide {
		height: 280px;
	}
	
	.jb-slide-title {
		font-size: 22px !important;
	}
}