/* REBRANDED PODCAST — lavender section, person photo as full-bleed bg, text on right
   Reusable: set --podcast-bg on the section element to change the photo */

.podcast {
    --podcast-bg: url('../assets/images/OYC_Rebrand_Photography397b-resize.jpeg');
    position: relative;
    padding: var(--section-py-lg) 0;
    background-color: var(--clr-lavender);
    background-image: var(--podcast-bg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    /* Keep the composition centered on wide screens: anchor the photo to the
       left edge of a centered 1680px reference box so Kathy's figure stays
       centered in the layout's left column instead of drifting toward the
       viewport edge. At ≤1680px this clamps to the viewport edge (max(0px,…)),
       preserving the original laptop look; the correction only engages beyond
       that. 1680 = derived from the photo's figure offset + the left column. */
    background-position: max(0px, calc((100vw - 1680px) / 2)) center;
    color: #fff;
    overflow: hidden;
    min-height: 720px;
    display: flex;
    align-items: center;
}

.podcast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

.podcast-image-col {
    /* spacer column — Kathy lives in the section background */
}

.podcast-content {
    max-width: 560px;
    color: #fff;
}

.podcast-headline {
    margin: 0 0 5px;
    line-height: 1;
}

.podcast-script-img {
    display: block;
    width: clamp(280px, 36vw, 492px);
    height: auto;
    margin: 0 0 8px -122px;
    transform: rotate(-2deg);
    transform-origin: left center;
}

.podcast-subline {
    display: block;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    line-height: 1.18;
    color: #fff;
    margin-top: 6px;
    letter-spacing: -0.005em;
}

/* "Clarity First." — bold + coral hand-drawn underline */
.podcast-subline .fx-clarity {
    position: relative;
    display: inline-block;
    font-weight: 500;
    color: #fff;
}
.podcast-subline .fx-clarity::before {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -0.18em;
    height: 0.32em;
    background-image: url('../assets/images/clarity-first.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

.podcast-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 14px;
    max-width: 520px;
    letter-spacing: 1.2px;
    font-weight: 200;
}

.podcast-content p:last-of-type {
    margin-bottom: 26px;
}

/* Listen Now uses the global .btn-blue-soft variant.
   Section-scoped tweaks only — keep the periwinkle treatment defined globally. */
.podcast .btn-blue-soft { font-size: 0.92rem; }

@media (max-width: 1024px) {
    .podcast {
        /* Kathy becomes the section background; gradient fades to solid lavender
           over the text block so the copy stays legible. Color matches the photo's
           bg lavender (#a499d6) so the fade is seamless. */
        background-color: #a499d6;
        background-image:
          linear-gradient(180deg,
            rgba(164, 153, 214, 0) 0%,
            rgba(164, 153, 214, 0) 28%,
            rgba(164, 153, 214, 0.55) 48%,
            rgba(164, 153, 214, 0.92) 68%,
            #a499d6 82%),
          var(--podcast-bg);
        background-size: cover, cover;
        background-position: center, 22% top;
        background-repeat: no-repeat;
        padding: 62vw 24px 56px;
        min-height: 0;
    }
    .podcast-grid { grid-template-columns: 1fr; gap: 22px; padding: 0; }
    .podcast-image-col { display: none; }
    .podcast-content { max-width: 100%; }
    .podcast-heading { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    /* Hide the "Rebranded" script overlay on mobile — its desktop position
       leaks off the left edge once the section narrows */
    .podcast-script-img { display: none; }
}

@media (max-width: 480px) {
    .podcast {
        padding: 78vw 20px 44px;
        background-position: center, 25% top;
    }
    .podcast-heading { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    .podcast-body { font-size: 0.95rem; }
}