/*
 * Client Mode full-bleed section artwork.
 *
 * Decorative CMS illustrations span the entire section viewport width.
 * Copy, controls and semantic content remain in the regular client shell.
 */

.client-about,
.client-service-areas,
.client-installation,
.client-network-story,
.client-advantages {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/*
 * The figure is nested inside the content shell in Razor. The shell and the
 * legacy split-layout wrappers must not become the absolute-positioning
 * containing block; otherwise the artwork is only as wide as the shell.
 */
.client-about > .client-about__layout,
.client-service-areas > .client-service-areas__layout,
.client-installation > .client-shell,
.client-network-story > .client-network-story__layout,
.client-advantages > .client-shell,
.client-installation__layout,
.client-advantages__layout {
    position: static;
}

.client-about__layout,
.client-service-areas__layout,
.client-installation__layout,
.client-network-story__layout,
.client-advantages__layout {
    grid-template-columns: minmax(0, 1fr);
}

.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 {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: 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 {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
}

.client-about .client-editorial-visual figcaption,
.client-service-areas .client-editorial-visual figcaption,
.client-installation .client-editorial-visual figcaption,
.client-network-story .client-editorial-visual figcaption,
.client-advantages .client-editorial-visual figcaption {
    display: none;
}

.client-about .client-editorial-visual::after,
.client-service-areas .client-editorial-visual::after,
.client-installation .client-editorial-visual::after,
.client-network-story .client-editorial-visual::after,
.client-advantages .client-editorial-visual::after {
    position: absolute;
    inset: 0;
    content: "";
}

/* Keep all real content above the decorative full-bleed layer. */
.client-about__story,
.client-about__details,
.client-service-areas__copy,
.client-installation .client-section-heading,
.client-installation .client-step-list,
.client-installation > .client-shell > .client-button,
.client-network-story__copy,
.client-advantages .client-section-heading,
.client-advantages .client-advantage-grid {
    position: relative;
    z-index: 2;
}

.client-about__story,
.client-service-areas__copy,
.client-network-story__copy {
    width: min(100%, 46rem);
}

.client-installation .client-section-heading,
.client-installation .client-step-list,
.client-advantages .client-section-heading,
.client-advantages .client-advantage-grid {
    width: min(100%, 52rem);
}

.client-installation .client-section-heading--split,
.client-advantages .client-section-heading--split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.client-about__story,
.client-service-areas__copy,
.client-installation__layout > :not(.client-editorial-visual),
.client-network-story__copy,
.client-advantages__layout > :not(.client-editorial-visual) {
    padding-right: 0;
}

/*
 * Light chapters use the artwork as a visible wide canvas, protected by a
 * directional light veil under the copy. The right half remains substantially
 * visible instead of looking like a separate framed image.
 */
.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: .96;
    filter: saturate(1.06) contrast(1.03);
}

.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) 97%, transparent) 0%,
            color-mix(in srgb, var(--client-light) 92%, transparent) 34%,
            color-mix(in srgb, var(--client-light) 68%, transparent) 58%,
            color-mix(in srgb, var(--client-light) 18%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--client-canvas) 18%, transparent),
            color-mix(in srgb, var(--client-alternate) 34%, transparent));
}

/* Dark/brand chapters retain strong telecom imagery across the full width. */
.client-service-areas .client-editorial-visual img,
.client-network-story .client-editorial-visual img {
    opacity: .94;
    filter: saturate(1.12) contrast(1.06);
}

.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) 90%, transparent) 36%,
            color-mix(in srgb, var(--client-dark) 56%, transparent) 62%,
            color-mix(in srgb, var(--client-dark) 14%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--client-secondary) 14%, transparent),
            color-mix(in srgb, var(--client-dark) 28%, transparent));
}

/* Section-specific crop decisions follow each SVG's visual centre. */
.client-about .client-editorial-visual img {
    object-position: 58% center;
}

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

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

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

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

/* Existing content surfaces remain usable above the artwork. */
.client-about__details,
.client-service-areas .client-contact-panel,
.client-service-areas .client-area-empty,
.client-advantages .client-advantage-grid > article {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 899px) {
    .client-about__story,
    .client-service-areas__copy,
    .client-network-story__copy,
    .client-installation .client-section-heading,
    .client-installation .client-step-list,
    .client-advantages .client-section-heading,
    .client-advantages .client-advantage-grid {
        width: min(100%, 42rem);
    }

    .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.04);
    }
}

@media (max-width: 599px) {
    .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: .72;
    }

    .client-service-areas .client-editorial-visual img,
    .client-network-story .client-editorial-visual img {
        opacity: .68;
    }

    .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) 94%, transparent) 0%,
            color-mix(in srgb, var(--client-light) 84%, transparent) 62%,
            color-mix(in srgb, var(--client-light) 70%, 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) 94%, transparent) 0%,
            color-mix(in srgb, var(--client-dark) 82%, transparent) 62%,
            color-mix(in srgb, var(--client-dark) 68%, 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: 68% center;
        transform: scale(1.08);
    }
}

@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: .14;
    }

    .client-about .client-editorial-visual::after,
    .client-service-areas .client-editorial-visual::after,
    .client-installation .client-editorial-visual::after,
    .client-network-story .client-editorial-visual::after,
    .client-advantages .client-editorial-visual::after {
        background: color-mix(in srgb, var(--client-light) 94%, transparent);
    }
}