/* ============================================
   SECTION: Parent Coaching — Hero
   Copy on the left; the hero photo (swirls baked in)
   is the section background, anchored bottom-right.
   No bottom padding so the photo sits flush to the
   bottom edge. Accent script is pink here.
   Mirrors the ABA Therapy / NDBI heroes.
   Long heading needs a narrower copy column + earlier
   stack so text doesn't sit on the photo at mid widths.
   ============================================ */

.pc-hero {
    position: relative;
    overflow: hidden;
    max-width: 2000px;
    margin: auto;
    min-height: 600px;
    padding: 36px var(--section-side-padding) 0;   /* no bottom padding */
    display: flex;
    align-items: stretch;
    background-color: var(--color-white);
    background-image: url("../../../images/parent-coaching/cutout_denim_jacket_boy_20260820_183203_square_left_cutout.b84b00ac7e12.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 100%;
}

.pc-hero__inner {
    max-width: var(--container-max);
    width: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--color-surface-line-soft);
}

/* ----- Copy (left) ----- */
.pc-hero__content {
    position: relative;
    z-index: 1;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 36px 0;
}

.pc-hero__heading {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-normal);
    line-height: 58px;
    letter-spacing: -2px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-hero__heading .accent-script {
    font-size: var(--text-5xl);
    line-height: 58px;
    letter-spacing: -0.03em;
    color: var(--color-primary);     /* pink accent for this page */
}

.pc-hero__lede {
    max-width: 480px;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-hero__actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

/* ----- Responsive: photo drops below the copy -----
   Stack earlier than ABA/NDBI heroes — this heading is much
   longer, so side-by-side still overlaps the pink frame under
   ~1400 (measured ~47px overlap at 1281; clear by ~1360). */
@media (max-width: 1400px) {
    .pc-hero {
        display: block;
        min-height: 0;
        padding: 24px var(--section-side-padding) 0;
        background-position: center bottom;
        background-size: 92% auto;
        padding-bottom: 86vw;
    }
    .pc-hero__inner {
        display: block;
        border-bottom: none;
    }
    .pc-hero__content {
        max-width: none;
        padding: 0 0 24px;
    }
}

@media (max-width: 768px) {
    .pc-hero__heading,
    .pc-hero__heading .accent-script {
        font-size: var(--text-3xl);
        line-height: 1.15;
    }
}

/* ----- Phones -----
   Centred copy over a tighter crop of the hero photo, matching the NDBI
   hero. The desktop asset is a wider composition (full body, plus a second
   pink shape at the right), so it is scaled up and anchored left to push
   that shape off-screen, then pulled below the section edge so the visible
   band shows the frame and the child's upper body.
   In the asset the frame+child occupy 8.7%–75.9% of the width and the stray
   shape starts at 80.3%; at 128% the viewport edge falls in the gap between
   them. That makes the image 119.8vw tall, so dropping it 27.8vw below the
   section edge leaves a 92vw band. */
@media (max-width: 600px) {
    .pc-hero {
        padding-bottom: 92vw;
        background-size: 128% auto;
        background-position: left bottom -27.8vw;
    }

    .pc-hero__content {
        align-items: center;
        text-align: center;
    }
}