/* ============================================
   SECTION: Autism Testing — Photo (full-width)
   Edge-to-edge photo as a CSS background (home hero-image
   smiling photo), with the decorative white swirl bleeding
   across the top. Mirrors ndbi/photo_play.
   ============================================ */

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

/* Decorative white swirl bleeding across the top */
.at-photo__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) {
    .at-photo {
        aspect-ratio: 4 / 3;         /* taller crop on phones */
    }
}