/**
 * Media page — page-header hero + live stream + radio cards.
 * Mirrors static FBC pattern: small dark page-header with image bg + gold
 * left-border, then white card sections via `.section-content`.
 */

/* === PAGE HEADER (Media hero) === */
.page-header {
	text-align: center;
	margin-bottom: 2.5rem;
	padding: 1.5rem 1rem;
	border-radius: var(--fbc-radius);
	box-shadow: var(--fbc-shadow-md);
	color: var(--fbc-white);
	position: relative;
	background-color: var(--fbc-primary);
	background-image: linear-gradient(rgba(3, 25, 49, 0.65), rgba(3, 25, 49, 0.65)),
		image-set(
			url('https://faithbaptist-va.com/wp-content/uploads/2025/05/media-hero.webp') type('image/webp'),
			url('https://faithbaptist-va.com/wp-content/uploads/2025/05/media-hero.jpg') type('image/jpeg')
		);
	background-size: cover;
	background-position: center;
	border-left: 5px solid var(--fbc-gold);
}

.page-header h1 {
	color: var(--fbc-white);
	margin-bottom: 0.75rem;
	font-size: clamp(2rem, 4vw, 2.5rem);
}

.page-header p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.1rem;
	max-width: 800px;
	margin: 0 auto;
}

@media (min-width: 481px) {
	.page-header { padding: 2rem 1.5rem; }
}

@media (min-width: 769px) {
	.page-header { padding: 2.5rem 2rem; }
}

/* === SECTION CARDS === */
.section-content {
	background: var(--fbc-card-bg);
	padding: 2.5rem;
	border-radius: var(--fbc-radius);
	box-shadow: var(--fbc-shadow-sm);
}

.section-content h2 {
	text-align: center;
	color: var(--fbc-primary);
	margin-bottom: 1.25rem;
	position: relative;
	padding-bottom: 0.85rem;
}

.section-content h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 3px;
	background-color: var(--fbc-gold);
}

.section-content > p {
	text-align: center;
	color: var(--fbc-text-light);
	max-width: 720px;
	margin: 0 auto 1.5rem;
	font-size: 1.05rem;
}

/* === YOUTUBE LINK (navy pill — site theme color) === */
.youtube-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem auto 0;
	padding: 0.75rem 1.5rem;
	background-color: var(--fbc-primary);
	color: var(--fbc-white);
	border-radius: var(--fbc-radius-pill);
	font-family: var(--fbc-font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color var(--fbc-transition), transform var(--fbc-transition), box-shadow var(--fbc-transition);
}

.youtube-link:hover,
.youtube-link:focus-visible {
	background-color: var(--fbc-primary-dark);
	color: var(--fbc-white);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(3, 25, 49, 0.3);
}

.youtube-link i { font-size: 1.1em; }

#streamStatus {
	text-align: center;
	color: var(--fbc-text-light);
	margin: 1rem auto 0;
	font-size: 1rem;
}

.media-live { margin: 3rem 0; text-align: center; }
.media-live .video-container { max-width: 1000px; margin: 1.5rem auto 0; }

/* Mobile: shrink card padding so the player goes near full-width on phones */
.media-live .section-content { padding: 1rem 0.5rem; }
@media (min-width: 481px) {
	.media-live .section-content { padding: 1.5rem 1rem; }
}
@media (min-width: 769px) {
	.media-live .section-content { padding: 2.5rem; }
}

.media-live-sub {
	text-align: center;
	color: var(--fbc-text-light);
	max-width: 720px;
	margin: 1rem auto 1.5rem;
	font-size: 1.05rem;
}

.media-live-sub {
	text-align: center;
	color: var(--fbc-text-light);
	max-width: 720px;
	margin: 1rem auto 1.5rem;
	font-size: 1.05rem;
}

.media-live-indicator {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(220, 38, 38, 0.12);
	color: var(--fbc-danger);
	padding: 0.5rem 1rem;
	border-radius: var(--fbc-radius-pill);
	font-family: var(--fbc-font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 1rem auto;
}

.live-dot {
	width: 10px;
	height: 10px;
	background: var(--fbc-danger);
	border-radius: 50%;
	animation: fbc-live-pulse 1.5s ease-in-out infinite;
}

@keyframes fbc-live-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
	.live-dot { animation: none; }
}

.media-yt-link { text-align: center; margin-top: 1.5rem; }

.media-yt-link .btn i { margin-right: 0.4rem; }

.media-recent { margin: 4rem 0; }

.archive-cta-row {
	text-align: center;
	margin-top: 1rem;
}

/* === RADIO === */
.media-radio { margin: 4rem 0; }

.media-radio-intro {
	text-align: center;
	color: var(--fbc-text-light);
	max-width: 720px;
	margin: 1rem auto 2rem;
	font-size: 1.05rem;
}

.radio-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

.radio-item {
	background: var(--fbc-card-bg);
	padding: 1.75rem;
	border-radius: var(--fbc-radius);
	box-shadow: var(--fbc-shadow-sm);
	transition: box-shadow var(--fbc-transition), transform var(--fbc-transition), border-left-color var(--fbc-transition);
	border-left: 4px solid transparent;
	display: flex;
	flex-direction: column;
}

.radio-item:hover,
.radio-item:focus-within {
	box-shadow: var(--fbc-shadow-md);
	transform: translateY(-3px);
	border-left-color: var(--fbc-gold);
}

.radio-item-icon {
	font-size: 2.25rem;
	color: var(--fbc-gold);
	margin-bottom: 0.75rem;
}

.radio-item h3 {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
	color: var(--fbc-primary);
}

.radio-item p {
	font-size: 0.95rem;
	color: var(--fbc-text-light);
	margin-bottom: 1rem;
	line-height: 1.55;
	flex-grow: 1;
}

.radio-item a {
	display: inline-flex;
	align-items: center;
	font-family: var(--fbc-font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--fbc-accent);
	margin-top: auto;
}

.radio-item a:hover,
.radio-item a:focus { color: var(--fbc-gold); }

.radio-item a i {
	margin-left: 0.5rem;
	font-size: 0.85em;
	transition: transform var(--fbc-transition);
}

.radio-item a:hover i,
.radio-item a:focus i { transform: translateX(3px); }

@media (min-width: 769px) {
	.radio-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}