/* ==================================================================
   PODCAST ARCHIVE
   Adapted from USC-Podcast-Handoff/podcast-index.html — scoped to
   .PODCAST, sized in rem so it rides the theme's rem ladder, and using
   the theme's own colour variables and two Rubik weights.

   The episode card itself lives in episode.css; both pages share it.
   ================================================================== */

.PODCAST {
	--pc-surface: #F7F8FB;
	--pc-border: #E4E7EE;
	--pc-muted: #5A6472;

	background: var(--white);
	color: var(--black);
}



/* ---------- resets against the theme's global rules ---------- */

.PODCAST a {
	display: block;
	width: auto;
	gap: 0;
	align-items: stretch;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.PODCAST a::after { display: none; }
.PODCAST [hidden] { display: none !important; }
.PODCAST :is(h1, h2, h3, h4, p) { margin: 0; }
.PODCAST button { font-family: inherit; }

.PODCAST :is(a, button):focus-visible {
	outline: 2px solid var(--bright-pink);
	outline-offset: 3px;
}

.PODCAST .podcast-frame {
	max-width: var(--frame-width);
	margin: 0 auto;
	padding: 0 40rem;
	box-sizing: border-box;
}

.PODCAST .dot {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	flex: 0 0 auto;
}



/* ---------- HERO ---------- */

/* Top padding is exactly the header height — the reference lets the eyebrow
   sit right under the nav, with no gap of its own. */
.PODCAST .podcast-hero {
	padding: var(--page-head-height) 0 28rem;
}

.PODCAST .podcast-hero-inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 48rem;
	align-items: center;
}

.PODCAST .podcast-hero-left { min-width: 0; }

.PODCAST .podcast-hero-eyebrow {
	font-size: 12rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 20rem;
}

.PODCAST .podcast-hero h1 {
	font-size: 56rem;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--white);
	max-width: 16ch;
}

.PODCAST .podcast-hero-sub {
	margin-top: 18rem;
	font-size: 16rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	max-width: 48ch;
}

.PODCAST .podcast-listen {
	margin-top: 28rem;
	display: flex;
	flex-wrap: wrap;
	gap: 12rem;
}

.PODCAST .podcast-listen a {
	display: inline-flex;
	align-items: center;
	gap: 10rem;
	padding: 12rem 18rem;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--white);
	font-size: 14rem;
	font-weight: 700;
	transition: background 0.2s ease, transform 0.15s ease;
}

.PODCAST .podcast-listen a:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-1rem);
	color: var(--white);
}

.PODCAST .podcast-listen svg { width: 18rem; height: 18rem; flex: 0 0 auto; }

/* One flex item, so the prefix stays glued to the platform name instead of
   picking up the row's gap between them. */
.PODCAST .podcast-listen-label { white-space: nowrap; }
.PODCAST .podcast-listen-prefix { display: inline; }



/* ---------- FEATURED CARD ---------- */

.PODCAST .podcast-feature {
	width: 320rem;
	max-width: 100%;
	justify-self: end;
	background: var(--white);
	color: var(--black);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24rem 60rem -20rem rgba(7, 26, 52, 0.55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.PODCAST .podcast-feature:hover {
	transform: translateY(-3rem);
	box-shadow: 0 32rem 70rem -22rem rgba(7, 26, 52, 0.65);
}

.PODCAST .podcast-feature-media {
	position: relative;
	aspect-ratio: 16/9;
	background: var(--midnight-blue);
	overflow: hidden;
}

.PODCAST .podcast-feature-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Sits at the bottom-left of the artwork, as in the reference build. */
.PODCAST .podcast-feature-eyebrow {
	position: absolute;
	left: 16rem;
	bottom: 16rem;
	z-index: 2;
	background: var(--bright-pink);
	font-size: 10rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--white);
	padding: 5rem 10rem;
}

.PODCAST .podcast-feature-body {
	padding: 16rem 20rem 18rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8rem;
	color: var(--black);
}

.PODCAST .podcast-feature-title { font-size: 20rem; font-weight: 700; line-height: 1.25; }

.PODCAST .podcast-feature-body p {
	color: var(--pc-muted);
	font-size: 14rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.PODCAST .podcast-feature-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10rem;
	width: 100%;
	color: var(--pc-muted);
	font-size: 12rem;
	padding-top: 12rem;
	border-top: 1px solid var(--pc-border);
}

.PODCAST .podcast-feature-cta {
	align-self: flex-start;
	color: var(--bright-pink);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12rem;
}

.PODCAST .podcast-feature:hover .podcast-feature-cta { color: var(--purple); }



/* ---------- SEARCH ---------- */

.PODCAST .podcast-search-band {
	background: var(--pc-surface);
	border-top: 1px solid var(--pc-border);
	border-bottom: 1px solid var(--pc-border);
	padding: 28rem 0;
}

.PODCAST .podcast-search-inner {
	display: flex;
	align-items: center;
	gap: 20rem;
	flex-wrap: wrap;
}

.PODCAST .podcast-search-input-wrap {
	flex: 1;
	min-width: 280rem;
	position: relative;
}

.PODCAST .podcast-search-input-wrap svg {
	position: absolute;
	top: 50%;
	left: 18rem;
	transform: translateY(-50%);
	color: var(--pc-muted);
	pointer-events: none;
}

.PODCAST #podcastSearchInput {
	width: 100%;
	box-sizing: border-box;
	padding: 16rem 18rem 16rem 50rem;
	background: var(--white);
	border: 1px solid var(--pc-border);
	border-radius: 0;
	color: var(--black);
	font-family: inherit;
	font-size: 16rem;
	appearance: none;
	-webkit-appearance: none;
}

.PODCAST #podcastSearchInput:focus { outline: none; border-color: var(--purple); }
.PODCAST #podcastSearchInput::placeholder { color: var(--pc-muted); }

.PODCAST .podcast-search-meta {
	color: var(--pc-muted);
	font-size: 14rem;
	min-width: 220rem;
}

.PODCAST .podcast-search-meta strong { color: var(--black); font-weight: 700; }

.PODCAST .podcast-search-clear {
	background: none;
	border: none;
	color: var(--purple);
	font-size: 13rem;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 8rem 4rem;
}

.PODCAST .podcast-search-clear:hover { text-decoration: underline; }



/* ---------- GRID ---------- */

.PODCAST .podcast-grid-section { padding: 48rem 0 72rem; }

.PODCAST .podcast-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28rem 24rem;
}

.PODCAST .podcast-no-results {
	text-align: center;
	padding: 64rem 0;
	color: var(--pc-muted);
	font-size: 15rem;
}

.PODCAST .podcast-no-results strong { color: var(--black); }



/* ---------- FOOTER CTA ---------- */

.PODCAST .podcast-cta { padding: 88rem 0; }

.PODCAST .podcast-cta-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48rem;
	align-items: center;
}

.PODCAST .podcast-cta h2 {
	font-size: 40rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--white);
}

.PODCAST .podcast-cta p {
	color: rgba(255, 255, 255, 0.78);
	font-size: 17rem;
	line-height: 1.5;
	margin-top: 12rem;
	max-width: 42ch;
}


/* Subscribe form (Gravity Forms, inline) */

.PODCAST .podcast-subscribe .gform_wrapper form {
	display: flex;
	gap: 8rem;
	flex-wrap: wrap;
	align-items: stretch;
}

.PODCAST .podcast-subscribe .gform_wrapper form .gform_body { flex: 1 1 240rem; min-width: 0; }
.PODCAST .podcast-subscribe .gform_fields { margin: 0; }
.PODCAST .podcast-subscribe .gform_fields .gfield { padding: 0; margin: 0; }
.PODCAST .podcast-subscribe .gform_fields .gfield_label { display: none; }

.PODCAST .podcast-subscribe .gform_wrapper form input[type="email"],
.PODCAST .podcast-subscribe .gform_wrapper form input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	height: 52rem;
	padding: 0 18rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.14);
	color: var(--white);
	font-family: inherit;
	font-size: 15rem;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

.PODCAST .podcast-subscribe .gform_wrapper form input::placeholder { color: rgba(255, 255, 255, 0.55); }

.PODCAST .podcast-subscribe .gform_wrapper form .gform_footer {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	width: auto;
}

.PODCAST .podcast-subscribe .gform_wrapper form .gform_footer input[type="submit"],
.PODCAST .podcast-subscribe .gform_wrapper form .gform_footer button {
	height: 52rem;
	padding: 0 46rem 0 26rem;
	border: 0;
	border-radius: 0;
	background: var(--bright-pink);
	color: var(--white);
	font-family: inherit;
	font-weight: 700;
	font-size: 14rem;
	cursor: pointer;
}

.PODCAST .podcast-subscribe .gform_footer span.b-button::after { right: 26rem; }



/* ---------- RESPONSIVE ---------- */

@media screen and (max-width: 1120px) {
	.PODCAST .podcast-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 960px) {
	.PODCAST .podcast-frame { padding: 0 25rem; }
	.PODCAST .podcast-hero { padding: var(--page-head-height) 0 40rem; }
	.PODCAST .podcast-hero-inner { grid-template-columns: 1fr; gap: 40rem; }

	/* Three buttons on one line at 390px only fits without the "Listen on"
	   prefix — the icon plus the platform name still reads unambiguously. */
	.PODCAST .podcast-listen { gap: 8rem; flex-wrap: nowrap; }
	.PODCAST .podcast-listen-prefix { display: none; }
	.PODCAST .podcast-listen a {
		padding: 11rem 12rem;
		gap: 7rem;
		font-size: 13rem;
		white-space: nowrap;
		flex: 0 1 auto;
		min-width: 0;
	}
	.PODCAST .podcast-listen svg { width: 16rem; height: 16rem; flex: 0 0 auto; }
	.PODCAST .podcast-hero h1 { font-size: 38rem; max-width: none; }
	.PODCAST .podcast-feature { max-width: 480rem; width: 100%; margin: 0 auto; }

	.PODCAST .podcast-search-inner { flex-direction: column; align-items: stretch; gap: 12rem; }
	.PODCAST .podcast-search-input-wrap { min-width: 0; }
	.PODCAST .podcast-search-meta { min-width: 0; }
	.PODCAST .podcast-search-clear { align-self: flex-start; }

	.PODCAST .podcast-grid-section { padding: 40rem 0 56rem; }
	.PODCAST .podcast-grid { grid-template-columns: 1fr; gap: 20rem; }

	.PODCAST .podcast-cta { padding: 56rem 0; }
	.PODCAST .podcast-cta-inner { grid-template-columns: 1fr; gap: 24rem; }
	.PODCAST .podcast-cta h2 { font-size: 30rem; }

	.PODCAST .podcast-subscribe .gform_wrapper form { flex-direction: column; }
	.PODCAST .podcast-subscribe .gform_wrapper form .gform_body { flex: 0 0 auto; }
	.PODCAST .podcast-subscribe .gform_wrapper form .gform_footer,
	.PODCAST .podcast-subscribe .gform_footer span.b-button,
	.PODCAST .podcast-subscribe .gform_wrapper form .gform_footer input[type="submit"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.PODCAST * { transition: none !important; }
}