/*
 * Client Mode full-bleed artwork refinement.
 *
 * Loaded after client-section-backgrounds.css. This layer removes the final
 * intrinsic figure constraints left by the editorial card component and makes
 * decorative SVG artwork part of the whole section rather than a large card.
 */

.client-about .client-editorial-visual,
.client-service-areas .client-editorial-visual,
.client-installation .client-editorial-visual,
.client-network-story .client-editorial-visual,
.client-advantages .client-editorial-visual {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 100vw;
    min-width: 100vw;
    max-width: none !important;
    height: auto;
    min-height: 100%;
    max-height: none;
    aspect-ratio: auto !important;
    padding: 0;
    transform: translateX(-50%);
    clip-path: none;
}

.client-about .client-editorial-visual img,
.client-service-areas .client-editorial-visual img,
.client-installation .client-editorial-visual img,
.client-network-story .client-editorial-visual img,
.client-advantages .client-editorial-visual img {
    width: 100%;
    min-width: 100%;
    max-width: none !important;
    height: 100%;
    min-height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Prevent the original SVG canvas from reading as a centred rectangular card. */
.client-about,
.client-installation,
.client-advantages {
    background: var(--client-light);
}

.client-service-areas,
.client-network-story {
    background: var(--client-dark);
}

/* Light chapters: richer artwork on the open side, protected copy on the left. */
.client-about.client-section--light .client-editorial-visual img,
.client-installation.client-section--light .client-editorial-visual img,
.client-advantages.client-section--light .client-editorial-visual img {
    opacity: .84;
    filter: saturate(1.22) contrast(1.08);
}

.client-about.client-section--light .client-editorial-visual::after,
.client-installation.client-section--light .client-editorial-visual::after,
.client-advantages.client-section--light .client-editorial-visual::after {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--client-light) 98%, transparent) 0%,
            color-mix(in srgb, var(--client-light) 94%, transparent) 28%,
            color-mix(in srgb, var(--client-light) 76%, transparent) 48%,
            color-mix(in srgb, var(--client-light) 34%, transparent) 72%,
            color-mix(in srgb, var(--client-light) 10%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--client-canvas) 10%, transparent),
            color-mix(in srgb, var(--client-alternate) 22%, transparent));
}

/* Dark chapters: retain a strong visual field without reducing text contrast. */
.client-service-areas .client-editorial-visual img,
.client-network-story .client-editorial-visual img {
    opacity: .8;
    filter: saturate(1.24) contrast(1.12);
}

.client-service-areas .client-editorial-visual::after,
.client-network-story .client-editorial-visual::after {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--client-dark) 98%, transparent) 0%,
            color-mix(in srgb, var(--client-dark) 92%, transparent) 30%,
            color-mix(in srgb, var(--client-dark) 70%, transparent) 50%,
            color-mix(in srgb, var(--client-dark) 28%, transparent) 74%,
            transparent 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--client-secondary) 10%, transparent),
            color-mix(in srgb, var(--client-dark) 24%, transparent));
}

/* Section-specific crops keep the illustration subject out of the copy lane. */
.client-about .client-editorial-visual img {
    object-position: 72% center;
}

.client-service-areas .client-editorial-visual img {
    object-position: 70% center;
}

.client-installation .client-editorial-visual img {
    object-position: 72% center;
}

.client-network-story .client-editorial-visual img {
    object-position: 70% center;
}

.client-advantages .client-editorial-visual img {
    object-position: 74% center;
}

/* Service-area utility surfaces remain readable but no longer form a heavy box. */
.client-service-areas .client-area-empty,
.client-service-areas .client-contact-panel {
    border-color: color-mix(in srgb, var(--client-accent) 38%, transparent);
    background: color-mix(in srgb, var(--client-dark) 68%, transparent);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.client-service-areas .client-area-empty {
    padding: clamp(.9rem, 1.5vw, 1.15rem);
}

.client-service-areas .client-contact-panel {
    padding: clamp(1rem, 1.7vw, 1.3rem);
}

/* Advantages: four equal, calm information units instead of one dominant tile. */
.client-advantages .client-advantage-grid {
    display: grid;
    width: min(100%, 54rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.75rem, 1.4vw, 1rem);
    border: 0;
    background: transparent;
}

.client-advantages .client-advantage-grid > article,
.client-advantages .client-advantage-grid > article:first-child {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 10rem;
    padding: clamp(1.2rem, 2vw, 1.6rem);
    border: 1px solid color-mix(in srgb, var(--client-secondary) 18%, transparent);
    border-radius: var(--client-radius-md);
    background: color-mix(in srgb, var(--client-light) 88%, transparent);
    box-shadow: 0 .8rem 2rem rgba(7, 26, 46, .07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.client-advantages .client-advantage-grid > article:hover {
    border-color: color-mix(in srgb, var(--client-accent) 52%, transparent);
}

@media (max-width: 899px) {
    .client-about .client-editorial-visual,
    .client-service-areas .client-editorial-visual,
    .client-installation .client-editorial-visual,
    .client-network-story .client-editorial-visual,
    .client-advantages .client-editorial-visual {
        width: 100vw;
        min-width: 100vw;
    }

    .client-about .client-editorial-visual img,
    .client-service-areas .client-editorial-visual img,
    .client-installation .client-editorial-visual img,
    .client-network-story .client-editorial-visual img,
    .client-advantages .client-editorial-visual img {
        object-position: 70% center;
        transform: scale(1.03);
    }
}

@media (max-width: 599px) {
    .client-advantages .client-advantage-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .client-advantages .client-advantage-grid > article,
    .client-advantages .client-advantage-grid > article:first-child {
        min-height: 0;
    }

    .client-about.client-section--light .client-editorial-visual::after,
    .client-installation.client-section--light .client-editorial-visual::after,
    .client-advantages.client-section--light .client-editorial-visual::after {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--client-light) 96%, transparent) 0%,
            color-mix(in srgb, var(--client-light) 90%, transparent) 58%,
            color-mix(in srgb, var(--client-light) 76%, transparent) 100%);
    }

    .client-service-areas .client-editorial-visual::after,
    .client-network-story .client-editorial-visual::after {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--client-dark) 96%, transparent) 0%,
            color-mix(in srgb, var(--client-dark) 88%, transparent) 58%,
            color-mix(in srgb, var(--client-dark) 72%, transparent) 100%);
    }

    .client-about .client-editorial-visual img,
    .client-service-areas .client-editorial-visual img,
    .client-installation .client-editorial-visual img,
    .client-network-story .client-editorial-visual img,
    .client-advantages .client-editorial-visual img {
        object-position: 64% center;
        transform: scale(1.06);
    }
}

@media (prefers-contrast: more) {
    .client-about .client-editorial-visual img,
    .client-service-areas .client-editorial-visual img,
    .client-installation .client-editorial-visual img,
    .client-network-story .client-editorial-visual img,
    .client-advantages .client-editorial-visual img {
        opacity: .12;
    }

    .client-advantages .client-advantage-grid > article,
    .client-service-areas .client-area-empty,
    .client-service-areas .client-contact-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}