/* ============================================
   SECTION: Parent Coaching — Hero
   Copy on the left, hero photo on the right (swirls
   baked in). Grid layout so the photo scales inside its
   column on mid widths instead of shrinking over the
   copy (background-image heroes overlap 901–1400px).
   Accent script is pink here. Long heading uses a
   narrower copy column; stacks by 1400px.
   ============================================ */

.pc-hero {
    padding: 36px var(--section-side-padding) 0;
    background: var(--color-white);
    overflow: hidden;
    max-width: 2000px;
    margin: auto;
}

.pc-hero__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
    border-bottom: 2px solid var(--color-surface-line-soft);
}

/* ----- Copy (left) ----- */
.pc-hero__content {
    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;
}

/* ----- Photo (right) — centered in the media column ----- */
.pc-hero__media {
    justify-self: center;
}

.pc-hero__photo {
    width: 100%;
    max-width: 689px;
    height: auto;
    display: block;
}

/* ----- Responsive: photo drops below the copy -----
   Stack by 1400px — this heading is much longer, so
   side-by-side leaves too little room for the photo. */
@media (max-width: 1400px) {
    .pc-hero {
        padding: 24px var(--section-side-padding) 56px;
    }

    .pc-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        border-bottom: none;
    }

    .pc-hero__content {
        padding: 0;
    }

    .pc-hero__media {
        justify-self: center;
    }

    .pc-hero__photo {
        max-width: 100%;
    }
}

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

/* ----- Phones -----
   Centred copy with the full hero photo below — no crop/scale so the
   pink frame isn't clipped on the right. */
@media (max-width: 600px) {
    .pc-hero {
        padding-bottom: 56px;
    }

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

    .pc-hero__media {
        width: 100%;
        justify-self: stretch;
    }

    .pc-hero__photo {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }
}