/* ============================================================
   Platform Why Choose — Scroll-driven stacked card reveal

   Structure:
   .pwc-section            (section, full-width, bg image)
     __bg                  (absolute background cover image)
     .pwc-inner            (1130px centred flex row)
       .pwc-left           (440px, position:sticky, white text)
         __heading         (41px SemiBold)
         __desc            (16px Regular)
       .pwc-right          (500px, card animation column)
         .pwc-cards-stack  (relative, height set by JS)
           .pwc-card × n   (absolute, animated by JS)
             __content     (flex row: icon + text)
             __icon        (72×60 image)
             __text        (301px text column)
               __title     (21px SemiBold)
               __desc      (16px Regular)

   Animation:
     JS (platform-why-choose.js) drives translateY + scale +
     clip-path on each card from scroll progress. No sticky on
     the section itself. No scroll pinning.

   Namespace: pwc- (no overlap with .why-choose-extras)
   ============================================================ */

/* ============================================================
   CSS custom properties — set by JS, fallback safe
   ============================================================ */
.pwc-section {
    --pwc-sticky-top: 80px;
    --pwc-stack-height: auto;
}

/* ============================================================
   Section — full viewport width.
   Background: CSS bg-image via --pwc-bg custom property set by
   Razor. background-size:100% auto shows the full image at its
   natural aspect ratio (no over-scaling when container is tall).
   background-color fills any area below the image.
   overflow:clip (not hidden) — clips bg without creating a
   scroll container so position:sticky on .pwc-left still works.
   ============================================================ */
.pwc-section {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: clip;
    box-sizing: border-box;
    min-height: 1275px;  /* never shorter than the bg image; section grows with card content */
    /*
     * Two-layer background:
     *  Layer 1 (scroll): left-to-right gradient — stretches with section.     *  Layer 2 (scroll): photo scrolls with the section so it always covers
     *    the full section area and appears visually stable at every scroll
     *    position. background-size:cover centres and fills, preserving ratio.
     * --pwc-bg is set as an inline CSS custom property by Razor.
     */
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.52) 30%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0) 100%),
        var(--pwc-bg, none);
    background-attachment: scroll, scroll;
    background-size: 100% 100%, cover;
    background-position: top center, center center;
    background-repeat: no-repeat, no-repeat;
    background-color: #1a1a2e;   /* fallback when no image */
}

/* ============================================================
   When inside a SectionsBlock (.section wrapper):
   - Remove the 90px vertical padding and white background.
   - overflow-x:clip on the .section (which is full-viewport-
     wide as a block element) prevents a horizontal scrollbar
     from the 100vw breakout without creating a scroll container.
   Note: this file is served standalone (NOT in bundle), so
   :has() is supported by all modern browsers.
   ============================================================ */
.section:has(.pwc-section) {
    overflow-x: clip !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

/* ============================================================
   Inner container — max 1130px centred, two-column flex
   Figma: width 1130, gap 136, padding-top ~120px
   min-height: Figma bg image is 1920×1278 (66.5vw at 1920px).
   clamp gives a sensible floor/ceiling so the background
   image is always visible even before JS sets --pwc-stack-height.
   ============================================================ */
.pwc-inner {
    position: relative;
    z-index: 1;
    max-width: 1130px;
    margin: 0 auto;
    padding: clamp(80px, 9vw, 120px) 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 136px;
    box-sizing: border-box;
}

/* ============================================================
   Left column — sticky, white text
   Figma: width 440, gap 16 between heading and desc
   Column-level sticky only — section itself is NOT sticky
   ============================================================ */
.pwc-left {
    flex: 0 0 440px;
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: -webkit-sticky;
    position: sticky;
    top: var(--pwc-sticky-top);
    /* stays visible while right column animates */
    align-self: flex-start;
}

.pwc-left__heading {
    margin: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-size: 41px;
    font-weight: 600;
    line-height: 106%;
    letter-spacing: -0.1px;
    color: #ffffff;
    width: 100%;
}

.pwc-left__desc {
    font-family: "aktiv-grotesk", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0;
    color: #ffffff;
}

.pwc-left__desc p {
    margin: 0 0 12px;
    color: #ffffff;
}

.pwc-left__desc p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Right column — card animation area
   Figma: width 500
   ============================================================ */
.pwc-right {
    flex: 0 0 500px;
    width: 500px;
}

/* ============================================================
   Cards stack — relative container; height set by JS via
   --pwc-stack-height to accommodate animation scroll distance
   ============================================================ */
.pwc-cards-stack {
    position: relative;
    width: 500px;
    height: var(--pwc-stack-height, auto);
}

/* ============================================================
   Individual card — absolute positioned, animated by JS
    Figma: 500px wide, p 32/47/32/48, border-radius 16,
          bg #FFFFFFE5, backdrop-filter blur(8px)
   ============================================================ */
.pwc-card {
    position: absolute;
    left: 0;
    width: 500px;
    box-sizing: border-box;
    padding: 32px 47px 32px 48px;
    border-radius: 16px;
    background: #ffffffe5;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* GPU-accelerated: only transform and clip-path changed by JS */
    will-change: transform, clip-path;
    /* Clip-path hardware: promote to own layer */
    transform: translateZ(0);
}

/* ============================================================
   Card content — flex row: icon (72px) + text (301px)
   Figma: gap 32
   ============================================================ */
.pwc-card__content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
}

/* ============================================================
   Card icon
   Figma: group 72px x 60px
   ============================================================ */
.pwc-card__icon {
    flex: 0 0 72px;
    width: 72px;
    height: 60px;
    display: flex;
    align-items: flex-start;
    padding-top: 7px;
}

.pwc-card__icon img {
    width: 72px;
    max-height: 60px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ============================================================
   Card text column
   Figma: width 301, gap 8
   ============================================================ */
.pwc-card__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================
   Card title
   Figma: 21px SemiBold, 130% line-height, -0.1% letter-spacing,
          color #333336
   ============================================================ */
.pwc-card__title {
    margin: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.021px;
    color: #333336;
}

/* ============================================================
   Card description
   Figma: 16px Regular, 150% line-height, color #333336
   ============================================================ */
.pwc-card__desc {
    font-family: "aktiv-grotesk", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0;
    color: #333336;
}

.pwc-card__desc p {
    margin: 0 0 8px;
}

.pwc-card__desc p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Reduced motion — show all cards immediately, no transforms
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pwc-cards-stack {
        position: static !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .pwc-card {
        position: static !important;
        transform: none !important;
        clip-path: none !important;
        opacity: 1 !important;
        will-change: auto;
    }
}

/* ============================================================
   Tablet — 768px to 1199px
   Reduce gap, scale down columns proportionally
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
    .pwc-inner {
        gap: 48px;
        padding-left: 24px;
        padding-right: 24px;
        max-width: 100%;
    }

    .pwc-left {
        flex: 0 0 340px;
        width: 340px;
    }

    .pwc-left__heading {
        font-size: 32px;
    }

    .pwc-right {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .pwc-cards-stack {
        width: 100%;
    }

    .pwc-card {
        width: 100%;
        padding: 32px 28px;
    }
}

/* ============================================================
   Mobile — below 768px
   Stack columns vertically, show all cards as static list.
   No JS animation on mobile (guard in platform-why-choose.js).
   ============================================================ */
@media (max-width: 767px) {
    .pwc-section {
        overflow: visible;
        /* iOS Safari ignores background-attachment:fixed on non-body elements.
           Fall back to scroll so the image still fills without disappearing. */
        background-attachment: scroll, scroll;
    }

    .pwc-inner {
        flex-direction: column;
        gap: 40px;
        padding: 48px 20px;
        max-width: 100%;
    }

    .pwc-left {
        position: static;
        flex: none;
        width: 100%;
        gap: 12px;
    }

    .pwc-left__heading {
        font-size: 28px;
    }

    .pwc-right {
        flex: none;
        width: 100%;
    }

    /* Static card list — all 7 cards visible, normal flow */
    .pwc-cards-stack {
        position: static !important;
        height: auto !important;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .pwc-card {
        position: static !important;
        width: 100% !important;
        min-height: unset;
        transform: none !important;
        clip-path: none !important;
        opacity: 1 !important;
        will-change: auto;
        padding: 28px 24px;
    }
}