/* ============================================
   SECTION: Autism Screening — Tools (M-CHAT-R)
   Full-width pink band. Header, then a white card with the
   image on the left (a decorative swirl bleeding to its
   right, behind the content) and the tool copy + CTA right.
   ============================================ */

.as-tools {
    padding: 100px var(--section-side-padding);
    background: var(--color-primary-light);   /* #ffebf0 */
}

/* ----- Header ----- */
.as-tools__header {
    max-width: var(--container-max);
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.as-tools__heading {
    max-width: 484px;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

.as-tools__heading .accent-script {
    color: var(--color-primary);   /* pink */
}

/* ----- Card ----- */
.as-tools__card {
    position: relative;
    overflow: hidden;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 20px;
    background: var(--color-white) url("../../../images/autism-screening/cutout_toddler_bunny_20260825_213003_hero_diagonal_cutout.19b012e13d3f.png") no-repeat left center / auto 100%;
    border: 2px solid var(--color-surface-line-soft);   /* #f6f6f6 */
    border-radius: 12px;
    display: flex;
    align-items: stretch;
    gap: 40px;
}

/* ----- Media (left) — transparent spacer over the card background photo ----- */
.as-tools__media {
    flex: 0 0 570px;
    max-width: 570px;
    align-self: stretch;
    min-height: 496px;
}

/* ----- Body (right) ----- */
.as-tools__body {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    padding: 24px 0;
}

.as-tools__title {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
    margin: 0;
}

.as-tools__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-tools__text p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

.as-tools__cta {
    align-self: flex-start;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .as-tools__card {
        flex-direction: column;
        gap: 24px;
    }
    .as-tools__media {
        flex: initial;
        max-width: none;
    }
    .as-tools__swirl {
        right: -80px;
    }
    .as-tools__body {
        max-width: none;
        align-self: stretch;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .as-tools {
        padding: 60px var(--section-side-padding);
    }
    .as-tools__heading {
        font-size: 32px;
        line-height: 38px;
    }
}

/* ----- Phones -----
   The photo is the card's own background at `auto 100%`, which scales it to
   the full height of the card. Once the card stacks that is over 1100px tall,
   so the image blows up and only a sliver of the swirl shows — behind the
   text — while the media box sits blank above it. On phones the photo moves
   onto the media box at its own size instead, cropped from the left so the
   child stays in frame. */
@media (max-width: 600px) {
    .as-tools__card {
        background-image: none;
        gap: 20px;
    }

    .as-tools__media {
        min-height: 0;
        height: 220px;
        background: url("../../../images/autism-screening/cutout_toddler_bunny_20260825_213003_hero_diagonal_cutout.19b012e13d3f.png") no-repeat left center / cover;
        border-radius: 12px;
    }

    .as-tools__cta {
        align-self: stretch;
        text-align: center;
    }
}