/* ============================================
   SECTION: Insurance
   Cream rounded panel with two decorative wave
   accents, centered heading + lede, tinted logo
   strip, and a white verify-coverage CTA bar.
   ============================================ */

.insurance {
    padding: 20px var(--section-side-padding);
    background: var(--color-white);
}

/* Variant used on the ABA Therapy page — no bottom padding
   (kept off the base rule so the home Insurance section is unaffected). */
.insurance--flush {
    padding-bottom: 0;
}

.insurance__panel {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 80px 32px 32px;
    background-color: #fbf6ea;       /* Figma cream */
    border-radius: 12px;
    overflow: hidden;
}

/* ----- Decorative cream waves (top-left + bottom-right corners) -----
   Each span renders cream-wave.png; clipped by the panel's overflow:hidden.
   Until the asset is exported the spans render as no-ops. */
.insurance__wave {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
}
.insurance__wave--top {
    top: 0;
    left: 0;
    width: 71%;                          /* 884 / 1240 — asset width vs panel */
    aspect-ratio: 884 / 197;
    background-image: url("../../../images/decorative/insurance-top-swirl.8f1345b8cdd1.png");
}
.insurance__wave--bottom {
    bottom: 0;
    right: 0;
    width: 92%;                          /* 1143 / 1240 */
    aspect-ratio: 1143 / 195;
    background-image: url("../../../images/decorative/insurance-btm-swirl.1a2883f33abe.png");
}

/* ----- Header (centered) ----- */
.insurance__header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.eyebrow--gold {
    color: var(--color-accent-yellow-label);
}

.insurance__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: #484336;
    margin: 0;
}
.insurance__heading .accent-script {
    color: var(--color-primary);
}

.insurance__lede {
    max-width: 560px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Logo strip -----
   Full-colour logos visually unified with a CSS filter that approximates
   Figma's muted-tan tint (#B3AB94). Swap for pre-tinted PNGs if you want
   it pixel-exact. */
.insurance__logos {
    position: relative;
    z-index: 1;
    /* span the panel's full width — negate the panel's 32px side padding */
    margin: 24px -32px 40px;
}
.insurance__logos-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ----- Verify CTA bar ----- */
.insurance__verify {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);
    border-radius: 12px;
    box-shadow: 0 11px 14px rgba(234, 98, 126, 0.10);
}

.insurance__verify-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insurance__verify-text {
    flex: 1;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}
.insurance__verify-text strong {
    color: var(--color-text-heading);
    font-weight: var(--font-weight-semibold);
}

.insurance__verify-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
}
.insurance__verify-chevron {
    transition: transform var(--transition-fast);
}
.insurance__verify-cta:hover .insurance__verify-chevron {
    transform: translateX(2px);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .insurance__panel {
        padding: 56px 20px 20px;
    }
    .insurance__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .insurance__verify {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 12px;
    }
    .insurance__logos {
        /* match the mobile panel padding (20px) so the image still goes full-width */
        margin: 16px -20px 24px;
    }
}

/* ----- Phones -----
   The logo strip scrolls instead of shrinking to fit, and the verify card
   puts its icon and CTA on one row with the copy underneath. */
@media (max-width: 600px) {
    .insurance__logos {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .insurance__logos::-webkit-scrollbar {
        display: none;
    }

    .insurance__logos-img {
        width: 780px;          /* keeps the marks legible; the strip scrolls */
        max-width: none;
    }

    .insurance__verify {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "icon cta"
            "text text";
        align-items: center;
        gap: 12px;
    }

    .insurance__verify-icon { grid-area: icon; }

    .insurance__verify-cta {
        grid-area: cta;
        justify-self: end;
    }

    .insurance__verify-text { grid-area: text; }

    /* Lead line sits on its own row, as in the design */
    .insurance__verify-text strong {
        display: block;
    }
}