/* ======================================================
   BOTTOMZ UP MEDIA — HOMEPAGE ONLY
   Loaded in addition to style.css, front page only.
====================================================== */

/* ==========================================
   HERO + PODCAST ROW
========================================== */

.home-hero-row{
	display:grid;
	grid-template-columns:2.1fr 1fr;
	gap:26px;
	padding:26px 0;
}

@media(max-width:1100px){

	.home-hero-row{
		grid-template-columns:1fr;
	}

}

/* --- hero slider --- */

.hero-slider{
	position:relative;
	min-height:460px;
	border-radius:8px;
	overflow:hidden;
	border:1px solid var(--border);
	background:var(--near-black);
}

.hero-slide{
	position:absolute;
	inset:0;
	display:none;
	align-items:flex-end;
	padding:50px;
	background-size:cover;
	background-position:center;
}

.hero-slide.is-active{
	display:flex;
}

.hero-slide::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.92) 100%),
		radial-gradient(circle at 75% 40%, rgba(184,134,59,.12), transparent 55%);
	z-index:0;
}

.hero-slide .hero-emblem{
	position:absolute;
	top:50%;
	right:6%;
	transform:translateY(-50%);
	width:340px;
	max-width:42%;
	opacity:.16;
	z-index:0;
	filter:grayscale(1) brightness(1.6);
}

.hero-slide-content{
	position:relative;
	z-index:1;
	max-width:640px;
}

.hero-slide .story-tag-lg{
	display:inline-block;
	background:var(--red);
	color:#fff;
	font-family:var(--font-heading);
	font-size:11.5px;
	font-weight:700;
	letter-spacing:1.5px;
	text-transform:uppercase;
	padding:6px 14px;
	border-radius:3px;
	margin-bottom:16px;
}

.hero-slide h2{
	font-family:var(--font-heading);
	font-size:42px;
	font-weight:700;
	line-height:1.08;
	text-transform:uppercase;
	color:#fff;
	margin-bottom:14px;
}

.hero-slide h2 a:hover{
	color:var(--bronze-light);
}

.hero-slide .hero-subhead{
	color:var(--red-bright);
	font-family:var(--font-heading);
	font-weight:600;
	font-size:15px;
	letter-spacing:.5px;
	text-transform:uppercase;
	margin-bottom:16px;
}

.hero-slide p{
	color:#d8d8d8;
	font-size:15.5px;
	line-height:1.7;
	margin-bottom:24px;
	max-width:520px;
}

.hero-nav-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:2;
	width:42px;
	height:42px;
	border-radius:50%;
	background:rgba(0,0,0,.55);
	border:1px solid var(--border);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
}

.hero-nav-arrow:hover{
	background:var(--red);
	border-color:var(--red);
}

.hero-nav-prev{ left:18px; }
.hero-nav-next{ right:18px; }

.hero-dots{
	position:absolute;
	bottom:18px;
	left:50%;
	transform:translateX(-50%);
	z-index:2;
	display:flex;
	gap:9px;
}

.hero-dots button{
	width:9px;
	height:9px;
	border-radius:50%;
	border:none;
	background:rgba(255,255,255,.35);
	padding:0;
}

.hero-dots button.is-active{
	background:var(--red);
	width:22px;
	border-radius:5px;
}

/* --- podcast card --- */

.podcast-card{
	background:var(--dark-2);
	border:1px solid var(--border);
	border-radius:8px;
	padding:22px;
	display:flex;
	flex-direction:column;
}

.podcast-card .podcast-eyebrow{
	color:var(--red-bright);
	font-family:var(--font-heading);
	font-weight:700;
	font-size:15px;
	text-transform:uppercase;
	margin-bottom:10px;
}

.podcast-card h3{
	font-family:var(--font-heading);
	font-size:21px;
	font-weight:600;
	line-height:1.3;
	margin-bottom:12px;
}

.podcast-card h3 a:hover{
	color:var(--bronze-light);
}

.podcast-card .podcast-desc{
	color:var(--muted);
	font-size:13.5px;
	line-height:1.6;
	margin-bottom:18px;
}

.podcast-thumb{
	position:relative;
	border-radius:6px;
	overflow:hidden;
	margin-bottom:18px;
	aspect-ratio:16/9;
	background:var(--near-black);
}

.podcast-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.podcast-thumb .play-btn{
	position:absolute;
	bottom:12px;
	left:12px;
	width:42px;
	height:42px;
	border-radius:50%;
	background:rgba(0,0,0,.7);
	border:1px solid var(--bronze);
	display:flex;
	align-items:center;
	justify-content:center;
}

.podcast-thumb .play-btn svg{
	width:14px;
	height:14px;
	fill:#fff;
	margin-left:2px;
}

.podcast-buttons{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-bottom:18px;
}

.podcast-buttons .btn{
	justify-content:center;
	width:100%;
}

.podcast-platforms{
	display:flex;
	align-items:center;
	gap:12px;
	padding-top:16px;
	border-top:1px solid var(--border);
	margin-bottom:14px;
	flex-wrap:wrap;
}

.podcast-platforms svg{
	width:18px;
	height:18px;
	fill:var(--muted);
}

.podcast-platforms a:hover svg{
	fill:var(--bronze-light);
}

.podcast-card .see-all{
	text-align:center;
	font-size:13px;
	font-weight:600;
	color:var(--bronze-light);
	text-transform:uppercase;
	letter-spacing:.5px;
}

.podcast-card .see-all:hover{
	color:var(--bronze);
}

/* ==========================================
   4-COLUMN NEWS GRID
========================================== */

.home-news-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:26px;
	padding:10px 0 40px;
}

.home-news-grid .grid-col .story-card + .story-card{
	margin-top:20px;
}

.home-news-grid .grid-col .story-card .story-thumb{
	aspect-ratio:16/9;
}

@media(max-width:1100px){

	.home-news-grid{
		grid-template-columns:repeat(2, 1fr);
		row-gap:36px;
	}

}

@media(max-width:640px){

	.home-news-grid{
		grid-template-columns:1fr;
	}

}

/* ==========================================
   PROMO CTA ROW
========================================== */

.home-promo-row{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:2px;
	background:var(--border);
	margin-bottom:0;
}

.promo-block{
	background:var(--near-black);
	padding:36px 30px;
	position:relative;
	overflow:hidden;
	min-height:190px;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
}

.promo-block .promo-icon{
	width:38px;
	height:38px;
	fill:var(--bronze);
	margin-bottom:16px;
}

.promo-block h4{
	font-family:var(--font-heading);
	font-size:19px;
	font-weight:700;
	letter-spacing:.5px;
	text-transform:uppercase;
	margin-bottom:6px;
}

.promo-block p{
	color:var(--muted);
	font-size:13.5px;
	margin-bottom:18px;
}

.promo-block .btn{
	align-self:flex-start;
}

.promo-block.promo-support .promo-icon{
	fill:var(--bronze-light);
}

.promo-block.promo-live .btn::before{
	content:"";
	width:8px;
	height:8px;
	border-radius:50%;
	background:#fff;
	display:inline-block;
	animation:pulse-dot 1.4s infinite;
}

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

@media(max-width:1100px){

	.home-promo-row{
		grid-template-columns:repeat(2, 1fr);
	}

}

@media(max-width:640px){

	.home-promo-row{
		grid-template-columns:1fr;
	}

}