/* ==========================================================================
   Edy London: About Us page (page-about-us.php)
   The hero reuses the shared hero (.el-hv-hero, home-visit.css) and the
   breadcrumb rules of services-archive.css; press, booking, videos, FAQ
   and testimonials reuse existing parts. This file adds
   "The Edy London Difference" section.
   Breakpoints: 900px (stack).
   ========================================================================== */

/* ---------- The Edy London Difference: text + photo */
.el-about-diff__grid {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.el-about-diff__text .el-h2 {
    margin-bottom: 28px;
}

.el-about-diff__text .el-copy p {
    max-width: 36em;
}

.el-about-diff__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--el-blush);
}

.el-about-diff__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Stack below 900px: text first, photo below */
@media (max-width: 900px) {
    .el-about-diff__grid {
        grid-template-columns: 1fr;
    }

    .el-about-diff__img {
        aspect-ratio: 3 / 2;
    }
}