/* ============================================
   SECTION: Naturalistic ABA Care — Photo (play, full-width)
   Edge-to-edge photo as a CSS background. Height is driven
   by the image's aspect ratio so the whole photo shows at
   any width. Mirrors the ABA Therapy photo band.
   ============================================ */

.ndbi-photo-play {
    position: relative;
    overflow: clip;
    width: 100%;
    aspect-ratio: 1798 / 875;        /* full image, proportional at any width */
    background: var(--color-white) url("../../../images/hero/boy-playing-smile.4ef6c0fa6d1b.png") no-repeat center center / cover;
}

/* Decorative white swirl bleeding across the top */
.ndbi-photo-play__swirl {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    top: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1391 / 557;        /* preserve the swirl asset's intrinsic aspect */
    background: url("../../../images/decorative/vector-279.9ad43fe94699.png") no-repeat center / contain;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .ndbi-photo-play {
        aspect-ratio: 4 / 3;         /* taller crop on phones */
    }
}