/* Shared image presentation and loading states for the public website. */

img.image-optimized {
    background-color: #f3f6f8;
    transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

img.image-is-loading {
    background-image: linear-gradient(100deg, #eef2f5 20%, #f8fafb 40%, #eef2f5 60%);
    background-size: 220% 100%;
    animation: image-loading-shimmer 1.4s ease-in-out infinite;
}

img.image-is-loaded {
    background-color: transparent;
    background-image: none;
    animation: none;
}

/* Preserve each content image's intrinsic ratio across responsive layouts. */
body[data-site-language] section img.image-optimized {
    max-width: 100%;
    height: auto;
}

body[data-site-language] .about-us-pic img.image-optimized {
    width: auto;
    height: 80px;
    margin-right: auto;
    margin-left: auto;
    object-fit: contain;
}

body[data-site-language] .section-title-bg img.image-optimized {
    width: auto;
    height: 6px;
    margin-right: auto;
    margin-left: auto;
}

.development-map-image,
.development-map-embed {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

.process-review {
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.process-review-image {
    display: block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    object-fit: contain;
}

.process-review-labels {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    color: #7b8792;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.development-map-image {
    object-fit: contain;
}

.development-map-embed {
    aspect-ratio: 3894.15 / 2692.92;
    border: 0;
}

/* Transparent brand marks should never inherit the image loading placeholder. */
.header-logo img.image-optimized,
.header-logo img.image-is-loading {
    background-color: transparent;
    background-image: none;
    animation: none;
}

img.image-is-error {
    min-width: 96px;
    min-height: 72px;
    padding: 12px;
    background: #f5f7f9;
    border: 1px solid #e4e9ed;
    border-radius: 6px;
    object-fit: contain !important;
}

.main-slider .bg-img {
    background-color: #e9eef3;
    transition: opacity .35s ease;
}

.main-slider .bg-img.image-background-loading {
    opacity: .72;
    background-image: linear-gradient(110deg, #dfe7ec 10%, #eff3f6 35%, #dfe7ec 60%);
    background-size: 220% 100%;
    animation: image-loading-shimmer 1.4s ease-in-out infinite;
}

.main-slider .bg-img.image-background-loaded {
    opacity: 1;
    animation: none;
}

.main-slider .bg-img.image-background-error {
    opacity: 1;
    background-color: #dfe8ee;
    background-image: url('/assets/images/image-placeholder.svg');
    background-position: center;
    background-size: 180px auto;
}

@keyframes image-loading-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    img.image-optimized,
    .main-slider .bg-img {
        transition: none;
        animation: none;
    }
}

@media (max-width: 768px) {
    body[data-site-language] section img.image-optimized {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    .aboutus-2 img.image-optimized,
    .area-left-right img.image-optimized,
    .intro img.image-optimized,
    .intro2 img.image-optimized,
    .round img.image-optimized {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .development-map-image,
    .development-map-embed {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .process-review-labels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        margin-top: 10px;
    }
}