/* The podcast stop is a card holding the featured-episode slider (the slider itself lives
   in global.css, so the Podcast page can use the same one). The section keeps the exact
   height it had in the original design, so the dotted road — placed as a % of the page —
   still lines up: the card got shorter once the artwork stopped being taller than the
   copy beside it, and the section padding took up the slack. */
.stop-podcast {
    background: #01010B;
    position: relative;
    z-index: 1;
    padding: 15rem 0;
}

.stop-podcast__inner {
    max-width: 1240px;
    margin-inline: auto;
    padding: clamp(2rem, 3.5vh, 3rem) clamp(1rem, 2.5vw, 2rem);
    background: rgba(4, 2, 14, 0.8);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border-radius: 24px;
}

@media (max-width: 900px) {
    .stop-podcast { padding: 5rem 0; }
    .stop-podcast__inner { padding-inline: clamp(1rem, 5vw, 2rem); }
}

@media (min-width: 1441px) {
    /* 270.5px (was 240px) keeps the section exactly 965px tall with the shorter card */
    .stop-podcast { padding: 270.5px 0; }
    .stop-podcast__inner { max-width: 1240px; padding-inline: 2.5rem; }
}

/* --- small desktop: 901px – 1440px only --- */
@media (min-width: 901px) and (max-width: 1440px) {
    /* 158.5px (was 149px) keeps the section exactly 681px tall */
    .stop-podcast { padding: 158.5px 0; }
    .stop-podcast__inner { max-width: 1080px; }
    .stop-podcast .ld-eslider__viewport { height: 300px; }
    .stop-podcast .ld-eslide__title { margin-bottom: 0.75rem; }
    .stop-podcast .ld-eslide__text { margin-bottom: 1rem; }
}

/* --- phones --- */
@media (max-width: 600px) {
    .stop-podcast { padding: 4rem 0; }
    .stop-podcast__inner { border-radius: 18px; padding: 1.75rem 1.25rem; }
}