/* Podcasts — page-podcasts.php */

/* Hero mechanics (full-bleed image, overlay, sizing) come from the shared
   ../hero.css, same as every other page — it's now its own full-width
   section above the 2-column layout below, not nested in the narrower
   main column. Only the heading size is page-specific. */
.sfm-podcasts-hero .sfm-hero__heading { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }

/* Main content (search, filters, featured, latest episodes) runs alongside
   one continuous sidebar for its full height — a magazine-style layout, not
   the old hero-only 2-column pairing that left the aside towering over a
   much shorter hero column. align-items:start is what lets each column
   size to its own content instead of stretching to match the other. */
.sfm-podcasts-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
.sfm-podcasts-layout__main { display: flex; flex-direction: column; gap: 1.5rem; }
.sfm-podcasts-layout__aside { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 1024px) {
    .sfm-podcasts-layout { grid-template-columns: 1.5fr 1fr; }
}

.sfm-podcasts-layout__filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

.sfm-aside-title { font-size: 0.95rem; margin-bottom: 1rem; }
.sfm-ranked-list { display: flex; flex-direction: column; gap: 0.85rem; }
.sfm-ranked-list li { display: flex; align-items: center; gap: 0.7rem; }
.sfm-ranked-list__num {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--sfm-bg-blue-50); color: var(--sfm-blue-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700;
}
.sfm-ranked-list a { font-size: 0.86rem; font-weight: 600; color: var(--sfm-color-heading); }
.sfm-ranked-list small { display: block; font-size: 0.74rem; color: var(--sfm-gray-400); }

.sfm-share-story { background: var(--sfm-bg-blue-50); text-align: center; }
.sfm-share-story h3 { font-size: 1rem; }
.sfm-share-story p { font-size: 0.82rem; }
.sfm-share-story .sfm-stat__icon { margin-inline: auto; }

.sfm-featured-podcast { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
.sfm-featured-podcast__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--sfm-radius-md); overflow: hidden; }
.sfm-featured-podcast__body h3 { font-size: 1.3rem; margin-top: 0.5rem; }
@media (min-width: 800px) {
    .sfm-featured-podcast { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Nested in the layout's narrower main column (not the old full-width
   section it originally shipped in) — the side-by-side layout above would
   be too cramped there, so it stays single-column at any width. */
.sfm-podcasts-layout__main .sfm-featured-podcast { grid-template-columns: 1fr; }
.sfm-podcasts-layout__main .sfm-featured-podcast { margin: 0; }

.sfm-app-cta { text-align: center; }
.sfm-app-cta__mockup { display: block; width: 70%; max-width: 180px; height: auto; margin: 0 auto 0.75rem; }
.sfm-app-cta h3 { font-size: 1rem; }
.sfm-app-cta p { font-size: 0.82rem; }
.sfm-app-cta .sfm-flex { justify-content: center; }

.sfm-episode-list { background: var(--sfm-white); border: 1px solid var(--sfm-color-border); border-radius: var(--sfm-radius-lg); padding: 0 1.25rem; }

.sfm-newsletter-band { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; text-align: left; }
.sfm-newsletter-band .sfm-inline-form { width: 100%; }
@media (min-width: 800px) {
    .sfm-newsletter-band { flex-direction: row; align-items: center; }
    .sfm-newsletter-band > div { flex: 1; }
    .sfm-newsletter-band .sfm-inline-form { width: auto; min-width: 320px; }
}