/* ============================================
   SECTION: Diagnostic Evaluation Process — 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.
   ============================================ */

.de-photo {
    position: relative;
    overflow: clip;
    width: 100%;
    aspect-ratio: 2880 / 1400;       /* full image, proportional at any width */
    background: var(--color-white) url("../../../images/hero/clinic_table_session_20260820_183203_swirl.836b7064028b.png") no-repeat center center / cover;
}

/* Decorative white swirl in the bottom-right corner */
.de-photo__swirl {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    bottom: 0;
    right: 0;
    width: 500px;
    max-width: 40%;
    aspect-ratio: 759 / 700;         /* preserve the swirl asset's intrinsic aspect */
    background: url("../../../images/decorative/vector-280.2ad18638b274.png") no-repeat bottom right / contain;
}

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