/* ============================================================
   PODCAST PAGE 1 — Rebranded with Kathy Dixon (main landing)
   Scoped under .podcast-page root class.
   Section building blocks (top → bottom):
     .pod-hero            — red hero w/ wordmark, intro, platform badges, Kathy photo
     .pod-latest          — Latest Episodes (3 cards)
     .pod-feature         — phone-mockup + episode write-up
     .pod-never-miss      — purple wavy "Never Miss an Episode" email capture
     .pod-host            — peach "Meet Your Host — Kathy Dixon"
     .pod-other           — "Catch me on other podcasts"
     .pod-rebranded-moment— lavender "Ready For Your Rebranded Moment?"
   ============================================================ */

/* ============== HERO (red) ============== */
.pod-hero {
    position: relative;
    background: #d63d39; /* hero red — matches Kathy red-dress photo bg so the cutout blends */
    color: #fff;
    padding: 110px 0 0; /* tightened top — text sits closer to the nav */
    overflow: hidden;
}

.pod-hero-container {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 16px;
    align-items: end; /* photo align-self: end pokes to bottom edge */
    position: relative;
    z-index: 2;
}

.pod-hero-content {
    max-width: 750px;
    padding-bottom: 140px; /* large bottom pad pushes content up because grid is align-items: end */
    padding-left: 60px;    /* nudge content right so wordmark sits closer to Kathy */
}

/* "Rebranded" handwritten wordmark — ships as periwinkle blue, displays as-is on red */
.pod-hero-wordmark {
    display: block;
    width: clamp(280px, 36vw, 533px);
    height: auto;
    margin: 0 0 4px -36px;
}
/* "with Kathy Dixon" tag — white on red, positioned to sit at the lower-right
   of the wordmark like the artwork mockup */
.pod-hero-wordmark-tag {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: -0.005em;
    margin: -32px 0 24px 220px;
}
@media (max-width: 768px) {
    .pod-hero-wordmark-tag { margin: -22px 0 18px 50%; font-size: 1rem; }
}

.pod-hero-lede {
    font-family: var(--font-display);
    font-size: clamp(1.95rem, 3vw, 3rem);
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: #fff;
    font-weight: 300;
    margin: 0 0 36px;
    max-width: 640px;
}

/* Listen Now CTA — uses .btn-lavender, but with a leading play glyph */
.pod-hero-listen {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.pod-hero-listen::before {
    content: "";
    width: 14px;
    height: 14px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 1.5v11l9-5.5z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 1.5v11l9-5.5z'/></svg>") no-repeat center / contain;
}

/* Streaming-platform badges — each SVG already includes the "LISTEN ON"
   eyebrow + brand wordmark, so we render the whole graphic as one image. */
.pod-hero-badges {
    display: flex;
    gap: 44px;
    align-items: flex-end;
    margin-top: 100px; /* extra space above pulls badges lower in the hero */
    flex-wrap: wrap;
}
.pod-hero-badge {
    display: inline-flex;
    text-decoration: none;
    color: #fff;
    transition: transform 0.18s ease;
}
.pod-hero-badge:hover { transform: translateY(-1px); }
.pod-hero-badge img {
    height: 51px; /* 15% smaller than the 60px reference size */
    width: auto;
    display: block;
}

/* Kathy photo column — aligns to bottom of section so she intersects the edge */
.pod-hero-image {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-self: end;
}
.pod-hero-image img {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
}

/* Decor — yellow filled circle (left), blue half-circle (top-right peeks left),
   lavender inverted triangle (mid-right) */
.pod-hero-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.pod-hero-decor .pod-circle {
    position: absolute;
    top: 38%;
    left: 3%;
    width: 38px;
    height: 38px;
    background: var(--clr-yellow);
    border-radius: 50%;
}
.pod-hero-decor .pod-half {
    position: absolute;
    top: 22%;
    right: 36px; /* inset from the edge so it floats clear of the viewport edge */
    width: 44px;
    height: 88px;
    background: var(--clr-blue);
    border-top-left-radius: 88px;
    border-bottom-left-radius: 88px;
}
.pod-hero-decor .pod-tri {
    position: absolute;
    bottom: 14%; /* lower-right, near Kathy's elbow per mockup */
    right: 6%;
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 32px solid #8090ff; /* lavender-blue */
}

@media (max-width: 1024px) {
    .pod-hero { padding: 130px 0 0; }
    .pod-hero-container { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; }
    .pod-hero-image { order: -1; }
    .pod-hero-image img { max-width: 360px; }
    .pod-hero-content { padding-bottom: 64px; padding-left: 0; }
    .pod-hero-wordmark { margin-left: 0; }
    .pod-hero-lede { max-width: 100%; }
    .pod-hero-decor .pod-tri,
    .pod-hero-decor .pod-half { display: none; }
}

@media (max-width: 768px) {
    /* Phone-shrinking pass: hide the Kathy photo at the top (distracting at
       narrow widths), shrink the platform badges so all three fit on one
       line, and give the content column the full viewport width. */
    .pod-hero { padding: 110px 0 56px; }
    .pod-hero-image { display: none; }
    .pod-hero-container { padding: 0 24px; }
    .pod-hero-badges { gap: 18px; margin-top: 60px; }
    .pod-hero-badge img { height: 38px; }
}

@media (max-width: 480px) {
    .pod-hero { padding: 110px 0 44px; }
    .pod-hero-container { padding: 0 20px; }
    .pod-hero-badges { gap: 12px; }
    .pod-hero-badge img { height: 32px; }
}

/* ============== LATEST EPISODES (lavender-blue 12%) ============== */
.pod-latest {
    background: rgba(128, 144, 255, 0.12); /* #8090ff @ 12% */
    padding: var(--section-py) 0 var(--section-py);
    text-align: center;
    position: relative;
}
.pod-latest-eyebrow-top {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-navy);
    margin: 0 0 8px;
}
.pod-latest-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    color: var(--clr-navy);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.pod-latest-underline {
    width: clamp(180px, 24vw, 280px);
    height: auto;
    margin: 0 auto 56px;
    display: block;
}

.pod-latest-grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}
.pod-latest-card {
    position: relative;
    text-align: left;
    text-decoration: none;
    color: inherit;
    display: block;
    width: 240px;       /* fixed width — guarantees all 3 cards render identically */
    margin: 0 auto;
}
.pod-latest-cover {
    width: 100%;
    aspect-ratio: 9 / 10; /* slightly taller than wide */
    background: #fff;
    border: 1px solid var(--clr-navy);
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 22px;
    transition: transform 0.22s ease;
}
.pod-latest-card:hover .pod-latest-cover { transform: translateY(-2px); }
.pod-latest-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Numbered badge — solid circle horizontally centered, overlapping the top edge */
.pod-latest-num {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    z-index: 2;
}
.pod-latest-num--red      { background: var(--clr-red); }
.pod-latest-num--lavender { background: #a99adf; }
.pod-latest-num--blue     { background: var(--clr-blue); }

.pod-latest-eyebrow {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-navy);
    margin: 0 0 10px;
}
.pod-latest-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.18;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: -0.005em;
}

.pod-latest-cta {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}
.pod-latest-cta .btn-yellow {
    padding: 16px 50px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: #fff; /* mockup spec — white label, not navy */
}

@media (max-width: 1024px) {
    .pod-latest-grid { gap: 36px; }
    .pod-latest-num { width: 56px; height: 56px; font-size: 1.2rem; top: -24px; }
}
@media (max-width: 768px) {
    .pod-latest-grid { grid-template-columns: 1fr; gap: 56px; max-width: 380px; }
}

/* ============== FEATURE (phone graphic + episode write-up) ============== */
.pod-feature {
    position: relative;
    background-color: #f0ebe0; /* cream-greige base, matches mockup */
    background-image: url('../assets/images/podcast/squiglyline-regranded-bg.svg');
    background-repeat: no-repeat;
    background-size: 100% auto; /* stretch across full width but stay at natural height */
    background-position: center;
    padding: var(--section-py) 0;
    overflow: hidden;
}
.pod-feature-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.pod-feature-decor img { position: absolute; }
.pod-feature-circle--1 { top: 8%;  right: 9%;  width: 56px; }
.pod-feature-circle--2 { bottom: 10%; left: 8%; width: 44px; }

.pod-feature-grid {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 60px;
    align-items: center;
}
.pod-feature-phone {
    display: flex;
    justify-content: center;
    position: relative;
}
.pod-feature-phone img {
    width: 100%;
    max-width: 420px;
    height: auto;
}
.pod-feature-content {
    max-width: 540px;
}
.pod-feature-eyebrow {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-navy);
    margin: 0 0 18px;
}
.pod-feature-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    line-height: 1.18;
    color: var(--clr-navy);
    margin: 0 0 22px;
    letter-spacing: -0.005em;
}
.pod-feature-content p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    letter-spacing: 1.2px;
    color: var(--clr-navy);
    margin: 0 0 16px;
    font-weight: 300;
}
.pod-feature-cta {
    display: inline-flex;
    margin-top: 14px;
}

@media (max-width: 1024px) {
    .pod-feature-grid { grid-template-columns: 1fr; gap: 36px; padding: 0 24px; }
    .pod-feature-phone img { max-width: 320px; }
    .pod-feature-decor img { display: none; }
}

/* ============== NEVER MISS AN EPISODE (lavender→pink wavy backdrop) ============== */
/* Negative margins let the wavy-backdrop SVG bleed into the cream section above
   and peach section below. The SVG ships as a clipPath of base64 PNGs, so the
   transparent areas outside the wave reveal the adjacent sections — that's the
   effect the mockup shows. z-index: 2 keeps this section painted above peach below. */
.pod-never-miss {
    position: relative;
    z-index: 2;
    margin: -60px 0;
    padding: calc(var(--section-py) + 80px) 24px;
    text-align: center;
    color: var(--clr-navy);
    isolation: isolate;
}
.pod-never-miss::before {
    content: "";
    position: absolute;
    inset: 0;
    /* PNG is rendered slightly wider than the pseudo so the wavy left/right
       edges crop off, but not so much that the top/bottom waves get flattened. */
    background-image: url('../assets/images/podcast/2x/wavy-backdrop@2x.png');
    background-repeat: no-repeat;
    background-size: 110% 100%;
    background-position: center;
    pointer-events: none;
    z-index: -1;
}
.pod-never-miss-inner {
    position: relative;
    max-width: 620px;
    margin: 0 auto;
}
.pod-never-miss-eyebrow {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-navy);
    margin: 0 0 12px;
}
.pod-never-miss-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    color: var(--clr-navy);
    margin: 0 0 22px;
    letter-spacing: -0.01em;
}
.pod-never-miss-body {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.65;
    letter-spacing: 1.2px;
    color: var(--clr-navy);
    font-weight: 300;
    margin: 0 auto 32px;
    max-width: 500px;
}
.pod-never-miss-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}
.pod-never-miss-form input {
    width: 100%;
    padding: 18px 28px;
    border: none;
    border-radius: 18px;
    background: #fff;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--clr-navy);
    outline: none;
    transition: box-shadow 0.18s ease;
}
.pod-never-miss-form input::placeholder { color: var(--clr-navy); opacity: 0.85; }
.pod-never-miss-form input:focus { box-shadow: 0 0 0 2px #8090ff; }

.pod-never-miss-form .btn-lavender {
    width: 100%;
    padding: 18px 28px;
    border-radius: 18px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
}

@media (max-width: 768px) {
    .pod-never-miss { padding: calc(var(--section-py-sm) + 60px) 24px; }
}

/* ============== MEET YOUR HOST (lavender-blue) ============== */
.pod-host {
    position: relative;
    padding: var(--section-py-lg) 0 var(--section-py);
    background: #a8b2dc; /* lavender-blue per mockup */
    color: var(--clr-navy);
    overflow: hidden;
}
.pod-host-grid {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}
.pod-host-content {
    max-width: 560px;
}
.pod-host-content .pod-host-eyebrow {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--clr-navy);
    margin: 0 0 6px;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.pod-host-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    color: var(--clr-navy);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
    line-height: 1;
}
.pod-host-underline {
    width: 100%;
    max-width: 345px;
    height: auto;
    display: block;
    margin: 0 0 30px;
}
.pod-host-content p {
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.7;
    letter-spacing: 1.2px;
    color: var(--clr-navy);
    font-weight: 300;
    margin: 0 0 18px;
}
.pod-host-cta {
    display: inline-flex;
    margin-top: 22px;
    padding: 20px 44px; /* chunkier button per spec */
    font-size: 0.82rem;
}
.pod-host-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.pod-host-photo {
    display: flex;
    justify-content: center;
}
.pod-host-photo img {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    height: auto;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
}
.pod-host-caption {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-navy);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 460px;
    text-align: center;
}

@media (max-width: 1024px) {
    .pod-host-grid { grid-template-columns: 1fr; gap: 36px; padding: 0 24px; }
    .pod-host-content { max-width: 100%; }
    .pod-host-photo img { max-width: 360px; }
}

/* ============== CATCH ME ON OTHER PODCASTS (cream) ============== */
.pod-other {
    background: #f0ebe0;
    padding: var(--section-py) 0;
    text-align: center;
}
.pod-other-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    color: var(--clr-navy);
    margin: 0 0 64px;
    letter-spacing: -0.01em;
}
.pod-other-grid {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
}
.pod-other-card {
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.pod-other-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--clr-navy);
    border-radius: 22px;
    margin-bottom: 18px;
    overflow: hidden;
    transition: transform 0.22s ease;
}
.pod-other-card:hover .pod-other-cover { transform: translateY(-2px); }
.pod-other-cover img { width: 100%; height: 100%; object-fit: cover; }
.pod-other-name {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .pod-other-grid { grid-template-columns: 1fr; max-width: 360px; gap: 36px; }
}

/* ============== READY FOR YOUR REBRANDED MOMENT? ============== */
.pod-moment {
    background: rgba(1, 82, 245, 0.15); /* #0152f5 @ 15% */
    padding: var(--section-py) 0 var(--section-py-md);
    text-align: center;
    color: var(--clr-navy);
}
.pod-moment-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    color: var(--clr-navy);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.pod-moment-heading-line2 {
    display: inline-block;
    position: relative;
    z-index: 0; /* establish stacking context so ::after can sit behind the text */
}
.pod-moment-heading-line2::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 4px;
    height: 0.32em;
    background-image: url('../assets/images/podcast/SVG/gold-underline-graphic.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
    z-index: -1; /* behind the heading text */
}
.pod-moment-tagline {
    font-family: var(--font-body);
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    color: var(--clr-navy);
    margin: 12px 0 64px;
    font-weight: 400;
}
.pod-moment-grid {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    align-items: start;
}
.pod-moment-card {
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.pod-moment-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
/* Circle (Free Resource) */
.pod-moment-icon--circle {
    width: 64px;
    height: 64px;
    background: var(--clr-red);
    border-radius: 50%;
}
/* Triangle (Free Read) — yellow downward */
.pod-moment-icon--tri {
    width: 0;
    height: 0;
    border-left: 36px solid transparent;
    border-right: 36px solid transparent;
    border-top: 56px solid var(--clr-yellow);
}
/* Half-circle (Work With Me) — flat side faces right, curved side left */
.pod-moment-icon--half {
    width: 32px;
    height: 64px;
    background: var(--clr-blue);
    border-top-left-radius: 64px;
    border-bottom-left-radius: 64px;
}
.pod-moment-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-navy);
    margin: 0;
    line-height: 1.1;
}
.pod-moment-card-title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .pod-moment-grid { grid-template-columns: 1fr; max-width: 360px; gap: 40px; }
}