/* ============================================================
   Communication Page — communication.css
   Page-specific CSS for /communication landing page.
   Not processed by Autoprefixer — vendor prefixes added manually.
   ============================================================ */


body.page-communication:has(iframe[name="intercom-banner-frame"]) .mobile-menu .main-navigation {
    margin-bottom: var(--intercomBanner);
}

body.page-communication .primary-menu.has-current-page > li > a {
    opacity: 1;
}

/* ── S1: Hero ─────────────────────────────────────────────── */

/* Radial gradient overlay — matches Figma node 2752:12345 (1440px).
   Center at 70% x / 17% y = ~1015px, 143px on a 1440×850 canvas (top-right,
   where the phone mockup sits). Light at centre (0.1), dark at edges (0.7)
   so text on the left always has enough contrast.
   -webkit-backdrop-filter not needed here — this is a background, not a filter. */
.comm-hero-overlay {
    background: radial-gradient(132.08% 96.57% at 70.49% 16.87%, rgba(0, 0, 0, 0.10) 15%, rgba(0, 0, 0, 0.70) 100%);
}

/* Mobile / tablet: phone mockup absent — use a simpler bottom-up darkening
   so the form text remains legible without the large black vignette. */
@media (max-width: 1023px) {
    .comm-hero-overlay {
        background: radial-gradient(124.64% 88.64% at 70.49% 16.87%, rgba(0, 0, 0, 0.10) 15%, rgba(0, 0, 0, 0.70) 100%);
    }
}

@media (max-width: 767px) {
    .comm-hero-overlay {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), radial-gradient(120.65% 79.32% at 50.13% 5.81%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.70) 100%);
    }
}

/* ── S5: Scale accordion — active item styles ───────────────── */
.comm-feature-scale .according-item.active {
    background: #fff;
    border-color: transparent;
}
.comm-feature-scale .according-item.active .comm-scale-item-inner {
    opacity: 1;
}

/* main.js toggles .active on .according-image — hide all, show active */
.comm-feature-scale .according-image {
    display: none;
}
.comm-feature-scale .according-image.active {
    display: block;
}

/* 768–1023 (Figma 2772:4667): the image is sized to match the LIST height
   (md:self-stretch), so the list must stay its NATURAL content height. main.js
   sets two inline styles meant for the 1024+ full-height-image layout that fight
   this — override both so the list/cards hug their content and match Figma:
   • handleAccordingHeight → min-height on .according-item.active (stretches the list)
   • init → max-height on .according-select (locks the list to a fixed height) */
@media (min-width: 768px) and (max-width: 1023px) {
    .comm-feature-scale .according-item.active {
        min-height: auto !important;
    }
    .comm-feature-scale .according-select {
        max-height: none !important;
    }
}

/* ── S4: Every Client Swiper — equal two-column from lg (1024) ── */
@media (min-width: 1024px) {
    .comm-every-client-swiper .swiper-wrapper {
        gap: 20px;
    }
    .comm-every-client-swiper .swiper-slide {
        width: auto !important;
        flex: 1 0 0 !important;
        margin-right: 0 !important;
    }
}

/* ── S6: Engage Swiper — fixed-width overflow bleed at 2xl ──── */
@media (min-width: 1440px) {
    .comm-engage-swiper.swiper {
        overflow: visible;
    }
    .comm-engage-swiper .swiper-wrapper {
        gap: 20px;
    }
    .comm-engage-swiper .swiper-slide {
        margin-right: 0 !important;
    }
}

/* ── S4: Every Client Swiper pagination ───────────────────── */
.comm-every-client-pagination.swiper-pagination {
    position: static;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 2px;
}

.comm-every-client-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: #000;
    opacity: 0.2;
    transition: opacity 0.3s, width 0.3s;
    margin: 0 !important;
}

.comm-every-client-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

.comm-every-client-pagination.swiper-pagination-lock {
    display: none;
}

/* ── S6: Engagement Swiper pagination ─────────────────────── */
.comm-engage-pagination.swiper-pagination {
    position: static;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 2px;
}

.comm-engage-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: #000;
    opacity: 0.2;
    transition: opacity 0.3s, width 0.3s;
    margin: 0 !important;
}

.comm-engage-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

.comm-engage-pagination.swiper-pagination-lock {
    display: none;
}

@media (min-width: 1440px) {
    .comm-engage-pagination.swiper-pagination {
        display: none;
    }
}

/* ── S10: Logo carousel animation ─────────────────────────── */
@keyframes comm-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.comm-logos-animate {
    animation: comm-logos-scroll 30s linear infinite;
    will-change: transform;
}

.comm-logos-animate:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .comm-logos-animate {
        animation: none;
    }
}

/* ── S9: Testimonials — daylight-style scroll animation ── */

/* Native sticky for the pinned heading requires the VIEWPORT to be the scroller.
   The theme sets html{overflow-x:hidden} globally (tailwind.scss), which makes
   the document a scroll container and BREAKS position:sticky (heading won't pin).
   We can't fix it with overflow:clip on <html> — root-element viewport
   propagation still breaks sticky there — and overflow:visible alone would expose
   a horizontal scrollbar. So: restore the ROOT to overflow-x:visible (viewport
   becomes the scroller → native sticky pins on the compositor, buttery smooth,
   no JS translateY) and move horizontal-overflow clipping down to the page
   wrapper .page-communication, where overflow-x:clip clips WITHOUT creating a
   scroll container (proven sticky-safe on non-root elements).
   :root (0,1,0) beats the global html (0,0,1) selector regardless of load order.
   @supports guards it: browsers without overflow:clip (Safari <16) keep the
   global html{overflow-x:hidden} and just don't pin the heading — it scrolls
   normally, no horizontal scrollbar (graceful degradation). */
@supports (overflow: clip) {
    :root { overflow-x: visible; }
    .page-communication { overflow-x: clip; }
}

/* Clip heading lines as they translateX off screen. */
.comm-testimonials-section {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Heading chars: plain inline wrappers (kept from the per-char markup; no longer
   animated individually — the whole block slides + fades). white-space:pre on
   spaces prevents inline-block from collapsing them to zero width. */
.comm-tc-space { display: inline-block; white-space: pre; }

/* Heading blocks slide outward (JS translateX); each char fades its opacity
   (JS, staggered). Both GPU-composited — no 3D, no blur. See communication.js. */
.comm-th-block-left,
.comm-th-block-right { will-change: transform; }

@media (min-width: 1024px) {
    /* perspective for card depth layering (cards keep a static translateZ) */
    .comm-cards-3d { perspective: 2000px; }

    /* promote chars for GPU-composited opacity fade */
    .comm-tc { will-change: opacity; }

    /* Heading inner pins via native position:sticky (PHP: lg:sticky lg:top-0).
       overflow-x:clip on the section keeps overflow-y visible → no scroll
       container → native sticky works on the compositor.

       Edge gradients (Figma Com2/Com3 "Rectangle 161123794/795"): the heading
       slides outward and DISSOLVES into these. Black → transparent over the black
       section bg, so text vanishes as it enters the edge. Anchored to the VIEWPORT
       edges (left:50% + margin-left:-50vw escapes the section's side padding so the
       gradient sits flush to the screen edge and fully hides the sliding text).
       They live on the sticky inner so they pin with the heading; z-index:2 paints
       above the heading text but below the cards (z-10). opacity is driven by the
       JS --comm-dissolve var so they're invisible at rest (0) and only appear as
       the heading dissolves — matching Figma (no gradient in Com1). */
    .comm-testimonials-inner::before,
    .comm-testimonials-inner::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 200px;
        z-index: 2;
        pointer-events: none;
        opacity: var(--comm-dissolve, 0);
    }
    .comm-testimonials-inner::before {
        left: 50%;
        margin-left: -50vw;
        background: linear-gradient(to right, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
    }
    .comm-testimonials-inner::after {
        right: 50%;
        margin-right: -50vw;
        background: linear-gradient(to left, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
    }
}

/* Reduced motion: keep the heading static and fully visible */
@media (prefers-reduced-motion: reduce) {
    .comm-th-block-left,
    .comm-th-block-right { will-change: auto; transform: none !important; }
    .comm-tc { will-change: auto; opacity: 1 !important; }
}

/* ── S12: Cross-Promo Swiper pagination ───────────────────── */
.comm-cross-promo-pagination.swiper-pagination {
    position: static;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 2px;
}

.comm-cross-promo-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: #000;
    opacity: 0.2;
    transition: opacity 0.3s, width 0.3s;
    margin: 0 !important;
}

.comm-cross-promo-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

.comm-cross-promo-pagination.swiper-pagination-lock {
    display: none;
}
 
@media (min-width: 768px) {
    .comm-every-client-pagination.swiper-pagination,
    .comm-engage-pagination.swiper-pagination {
        margin-top: 0;
    }
}