/* =========================================================
   LSF IMAGE RATIO SYSTEM
   Square visual treatment for service/project/page media.
   Gallery and editorial images remain independently controlled
   unless explicitly targeted below.
   ========================================================= */

/* Shared card media */
.home-service-image,
.home-project-card > a:first-child,
.lsf-item-card-image,
.related-service-card-media,
.about-item-card .lsf-item-card-image,
.project-card > a:first-child,
.service-card > a:first-child {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--light-color);
}

.home-service-image img,
.home-project-card > a:first-child img,
.lsf-item-card-image img,
.related-service-card-media img,
.about-item-card .lsf-item-card-image img,
.project-card > a:first-child img,
.service-card > a:first-child img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Standard image + text sections */
.lsf-standard-section .section-image {
    aspect-ratio: 1 / 1;
}

.lsf-standard-section .section-image a,
.lsf-standard-section .section-image img {
    width: 100%;
    height: 100%;
}

.about-standard-media {
    aspect-ratio: 1 / 1;
}

.about-standard-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Single project */
.project-featured-image {
    aspect-ratio: 1 / 1;
}

.project-featured-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.project-gallery img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Service gallery: consistent square thumbnails */
.service-gallery .gallery-item,
.service-gallery .gallery-link,
.service-gallery .gallery-image {
    aspect-ratio: 1 / 1;
}

.service-gallery .gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.service-gallery .gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Home/Archive card fallback where an image element is present without
   a dedicated media wrapper. */
.projects-archive .project-card > a:first-child img,
.services-archive .service-card > a:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Preserve usability on very narrow screens while keeping the ratio. */
@media (max-width: 480px) {
    .home-service-image,
    .home-project-card > a:first-child,
    .lsf-item-card-image,
    .related-service-card-media,
    .about-item-card .lsf-item-card-image,
    .project-card > a:first-child,
    .service-card > a:first-child,
    .lsf-standard-section .section-image,
    .about-standard-media,
    .project-featured-image {
        width: 100%;
    }
}