/* ============================================
   SECTION: ABA Therapy — 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–1024px).
   Accent script is blue here.
   ============================================ */

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

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

/* ----- Copy (left) ----- */
.aba-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 36px 0;
}

.aba-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;
}

.aba-hero__heading .accent-script {
    font-size: var(--text-5xl);
    line-height: 58px;
    letter-spacing: -0.03em;
    color: #53bcee;                  /* blue accent for this page */
}

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

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

/* ----- Photo (right) ----- */
.aba-hero__media {
    justify-self: end;
}

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

/* ----- Responsive: photo drops below the copy -----
   Stack by 1100px — with 100px section padding above 1024, a
   side-by-side grid leaves only ~270px for the photo at 1040. */
@media (max-width: 1100px) {
    .aba-hero {
        padding: 24px var(--section-side-padding) 56px;
    }

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

    .aba-hero__content {
        padding: 0;
    }

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

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

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

/* ----- Phones -----
   Centred copy only — photo and decorative mark hidden. */
@media (max-width: 600px) {
    .aba-hero {
        padding-bottom: 56px;
    }

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

    .aba-hero__media {
        display: none;
    }
}