/* ============================================================================
   Block: pranav-why-pranav  —  "Why Pranav Global?" Section

   CSS port of kovaion-landing-page/index.html (.why + .why__*).
   Figma node 464:12 — Section: x=80, y=2634, w=1280, h=400.

   Class mapping (HTML ref → ACF block):
     .why               → .pranav-why-pranav
     .why__title        → .pranav-why-pranav__title
     .why__banner       → .pranav-why-pranav__banner
     .why__one          → .pranav-why-pranav__watermark
     .why__heading      → .pranav-why-pranav__heading
     .why__body         → .pranav-why-pranav__body
     .why__cta-link     → .pranav-why-pranav__cta-link
     .why__arrow        → .pranav-why-pranav__arrow

   Key layout measurements (Figma / source CSS):
     Section bg      : #fff5f0 (warm peach — matches page body bg; Figma outer group has
                       display:contents so it inherits the artboard colour, which is #fff5f0)
     Padding         : 80px top/bottom, 80px sides
     Title           : 36px / 1.2, Clash Display 400, #1e252f, centred, mb=40px
     Banner          : 1280×316px, border-radius 25px, overflow hidden
     Banner gradient : linear-gradient(104.37deg, #FF5A3C 65.597%, #FF85A3 118.95%)
     Watermark       : 278.7px Clash Display 500 (Medium), clip-text gradient
                       transparent 0%, white 36.993%, transparent 98.142%
                       top=-108px (places banner top at 36.5% into gradient — fading zone,
                       producing the subtle coral-bleed ghost effect in the Figma screenshot)
     Heading         : 48px Clash Display 400, white, left=51px, top=129px, w=866px
     Body            : 18px/24px Clash Grotesk 400, white, left=51px, top=211px, w=1136px
     CTA link        : 24px Clash Display 400, white, underline, right=86px, top=30px
     Arrow circle    : 56×56px, white bg, dark arrow SVG, right=30px, top=17px
   ============================================================================ */


/* ── 0. Full-width breakout ─────────────────────────────────────────────────
   Breaks out of .entry-content max-width so the bg fills the full viewport.
   ────────────────────────────────────────────────────────────────────────── */
.entry-content .pranav-why-pranav,
.entry-content .pranav-why-pranav.alignfull {
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
}


/* ── 1. Section shell ────────────────────────────────────────────────────────
   Figma node 602:35 outer group has display:contents — it carries no fill.
   The warm peach (#fff5f0) visible around the banner comes from the Figma
   artboard / page-level fill. Matching that with an explicit background-color
   ensures the section always renders correctly regardless of what the
   WordPress theme sets as the body background.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav {
    background-color: #fff5f0;
    padding: 0px 80px;
    box-sizing: border-box;
    margin-bottom: 100px;
}


/* ── 2. Section title ────────────────────────────────────────────────────────
   Optional h2 above the banner. 36px, Clash Display Regular, centred, dark.
   margin-bottom: 40px separates it from the banner top.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav__title {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.2;
    color: #1e252f;
    text-align: center;
    margin: 0 0 40px;
}


/* ── 3. Banner ───────────────────────────────────────────────────────────────
   Coral-to-pink gradient, 316px tall, 25px radius, overflow:hidden to clip
   the "One" watermark which overflows 108px above the banner top edge.
   position:relative is the positioning context for all absolute children.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav__banner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 316px;
    margin: 0 auto;
    background: linear-gradient(105.65deg, #ff5a3c 41.33%, #ff85a3 85.82%);
    border-radius: 25px;
    overflow: hidden;
    box-sizing: border-box;
}


/* ── 4. "One" watermark ──────────────────────────────────────────────────────
   Giant decorative background text.
   Figma (node 437:121): 278.7px Clash Display Medium (fw=500).
   Element dimensions: w=553.558px, h=296px.  left=calc(50%−610px)=30px at 1280px.

   ── Position ───────────────────────────────────────────────────────────────
   top: -108px — the Figma-specified value.
   With the element 296px tall and positioned 108px above the banner top,
   the banner's top edge falls at element position 108/296 = 36.5% — which
   lands right at the gradient's white-to-transparent transition (36.993%).
   Therefore the ENTIRE visible portion of the watermark (inside the banner)
   sits in the fading zone, producing the subtle, ghost-like, coral-warm
   appearance seen in the Figma screenshot. The 108px above the banner is
   clipped by banner's overflow:hidden.

   ── Gradient ───────────────────────────────────────────────────────────────
   Figma Tailwind: from-white from-[36.993%]  to-[rgba(255,255,255,0)] to-[98.142%]
   CSS equivalent: transparent 0%, #ffffff 36.993%, rgba(255,255,255,0) 98.142%

   The Figma's from-[36.993%] positions the FIRST colour stop at 36.993%.
   In CSS a gradient with no explicit 0% stop is TRANSPARENT before that
   first stop — it does NOT anchor the first stop colour at 0%.
   Adding rgba(255,255,255,0) at 0% makes this explicit so every browser
   treats the top of the element as fully transparent, letting the coral
   banner background bleed through — matching the Figma's warm pink effect.

   ── z-index ────────────────────────────────────────────────────────────────
   z-index: 0 keeps the watermark behind all other absolutely-positioned
   content (heading, body, CTA) which are raised to z-index: 1.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav__watermark {
    position: absolute;
    left: 30px;
    top: -108px;
    width: 553px;           /* Figma: w=553.558px */
    height: 296px;          /* Figma: h=296px (slightly taller than raw font em) */
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 278.7px;
    line-height: 1;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0)    0%,        /* transparent — coral bleeds through */
        #ffffff                36.993%,      /* solid white at the Figma from-stop  */
        rgba(255, 255, 255, 0) 98.142%       /* transparent — fade complete         */
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    display: block;
    z-index: 0;
}


/* ── 5. CTA link ─────────────────────────────────────────────────────────────
   Underlined "Get a free consultation" text, top-right of the banner.
   Figma / source: right=86px, top=30px, 24px Clash Display, white underline.
   z-index: 1 keeps this above the z-index:0 watermark.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav__cta-link {
    position: absolute;
    right: 100px;
    top: 30px;
    z-index: 1;
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.7);
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.pranav-why-pranav__cta-link:hover {
    opacity: 0.8;
}


/* ── 6. Arrow circle ─────────────────────────────────────────────────────────
   56×56px white circle with a dark ↗ arrow SVG centred inside.
   Figma / source: right=30px, top=17px. Hover: scale(1.08).
   z-index: 1 keeps this above the z-index:0 watermark.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav__arrow {
    position: absolute;
    right: 30px;
    top: 17px;
    z-index: 1;
    width: 56px;
    height: 56px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e252f;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pranav-why-pranav__arrow:hover {
    transform: scale(1.08);
}

.pranav-why-pranav__arrow svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}


/* ── 7. Banner heading ───────────────────────────────────────────────────────
   "partner, contract, team." — prominent text lower-left of the banner.
   Figma / source: 48px Clash Display Regular, white, left=51px, top=129px,
   width=866px, line-height=1.23.
   z-index: 1 keeps this above the z-index:0 watermark.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav__heading {
    position: absolute;
    left: 51px;
    top: 129px;
    z-index: 1;
    width: 866px;
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 1.23;
    color: #ffffff;
    margin: 0;
}


/* ── 8. Banner body ──────────────────────────────────────────────────────────
   Supporting paragraph below the heading.
   Figma / source: 18px/24px Clash Grotesk Regular, white,
   left=51px, top=211px, width=1136px.
   z-index: 1 keeps this above the z-index:0 watermark.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav__body {
    position: absolute;
    left: 51px;
    top: 211px;
    z-index: 1;
    width: 1136px;
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    margin: 0;
}


/* ── 9. No-watermark variant ─────────────────────────────────────────────────
   Applied to the banner when the banner_watermark ACF field is empty.
   Switches the banner to a flex column so the heading and body are vertically
   centred. The CTA and arrow are position:absolute, so they remain unaffected.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav__banner--no-watermark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 200px 0 51px;
    gap: 16px;
}

.pranav-why-pranav__banner--no-watermark .pranav-why-pranav__heading,
.pranav-why-pranav__banner--no-watermark .pranav-why-pranav__body {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    margin: 0;
}


/* ── 10. Scroll-reveal animation ─────────────────────────────────────────────
   .is-reveal elements start invisible (opacity:0, translateY 28px).
   script.js adds .is-visible when the element enters the viewport.
   --delay staggers the title vs the banner.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-why-pranav .is-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--delay, 0ms);
}

.pranav-why-pranav .is-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ── 11. Responsive — Tablet ≤ 1100px ───────────────────────────────────────
   At narrower widths the absolutely-positioned heading and body would
   encroach on the CTA area, so constrain them from the right instead of
   using a fixed pixel width. Mirrors the source CSS tablet override.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {

    .pranav-why-pranav {
        padding-left:  40px;
        padding-right: 40px;
        /* Reduce the large desktop margin so tablets don't have excessive
           dead space below the peach section background. */
        margin-bottom: 80px;
    }

    /* Watermark: smaller and less dominant on tablet.
       Opacity reduces the gradient brightness further without removing
       the decorative ghost effect entirely. */
    .pranav-why-pranav__watermark {
        font-size: 160px;
        height: auto;
        width: auto;
        top: -60px;  /* proportional: 160/278.7 × −108 ≈ −62px */
        opacity: 0.5;
    }

    /* Heading: shrink font, add right constraint so it clears the CTA area */
    .pranav-why-pranav__heading {
        font-size: 36px;
        width: auto;
        right: 160px;
    }

    /* Body: free-width with right margin to avoid the CTA/arrow */
    .pranav-why-pranav__body {
        width: auto;
        right: 60px;
    }

    /* No-watermark: reduce right padding to match narrower viewport */
    .pranav-why-pranav__banner--no-watermark {
        padding-right: 160px;
    }
}


/* ── 12. Responsive — Mobile ≤ 768px ─────────────────────────────────────────
   Switch from absolute → relative flow for heading and body so they stack
   naturally. The banner becomes height:auto to accommodate the taller content.
   Watermark shrinks to 120px and moves up less aggressively.
   Mirrors the source CSS mobile override exactly.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .pranav-why-pranav {
        padding: 60px 20px;
        /* Desktop margin-bottom: 100px combined with the 60px bottom padding
           creates 160px of dead space. Override to a tighter value so the
           peach section bg alone provides the visual separation. */
        margin-bottom: 40px;
    }

    .pranav-why-pranav__title {
        font-size: 28px;
    }

    /* Banner: auto height, add bottom padding for the flowed content */
    .pranav-why-pranav__banner {
        height: auto;
        min-height: 280px;
        padding-bottom: 40px;
    }

    /* Watermark: smaller on mobile. top=-40px keeps the same proportional
       clip-then-fade effect: 40/120px ≈ 33%, just below the 36.993% fade
       start, so the visible text still shows mostly in the fading zone.
       opacity: 0.4 dials down the brightness further so the watermark reads
       as a soft background texture rather than a prominent foreground element. */
    .pranav-why-pranav__watermark {
        font-size: 120px;
        height: 128px;      /* proportional to desktop 296/278.7 ratio */
        width: auto;
        top: -40px;
        opacity: 0.4;
    }

    /* Heading: pull out of absolute flow.
       margin-top (not padding-top) pushes the element BOX down to y≈80px so
       it does not cover the absolutely-positioned CTA (top:20px) and arrow
       (top:14px). With padding-top the element box still started at y=0 and
       its transparent padding area blocked touch events on the CTA links. */
    .pranav-why-pranav__heading {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        font-size: 28px;
        margin-top: 80px;
        padding: 0 24px;
    }

    /* Body: pull out of absolute flow, pad sides for readability */
    .pranav-why-pranav__body {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        padding: 16px 24px 0;
    }

    /* CTA link: stays absolute, moves to accommodate narrower banner.
       z-index: 2 ensures it stacks above the in-flow heading element whose
       box (padding-top: 80px) otherwise covers this area and blocks touch events. */
    .pranav-why-pranav__cta-link {
        top: 20px;
        right: 100px;
        font-size: 16px;
        z-index: 2;
    }

    /* Arrow: slightly smaller on mobile. z-index: 2 for the same reason. */
    .pranav-why-pranav__arrow {
        top: 14px;
        right: 20px;
        width: 44px;
        height: 44px;
        z-index: 2;
    }

    /* No-watermark on mobile: reset desktop flex padding; reduce heading top
       padding from 80px (watermark clearance) down to 40px for a balanced look */
    .pranav-why-pranav__banner--no-watermark {
        padding: 0;
        gap: 0;
    }

    .pranav-why-pranav__banner--no-watermark .pranav-why-pranav__heading {
        margin-top: 40px;
        padding: 0 24px;
    }
}


/* ── 13. Small mobile (≤ 480px) ─────────────────────────────────────────────
   At very narrow viewports (320px–480px) the CTA link text overflows the
   left edge of the banner because its absolute right-offset (100px) combined
   with the text width (~220px at 16px) exceeds the available banner width.
   Reduce the font-size and tighten the right offset to keep it contained.
   Also scale down heading/body text and push the watermark to full subtlety.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* CTA text: smaller font + less right offset prevents banner overflow.
       At 320px banner: (280px − 80px right) − (~14px × 22chars ≈ 154px) = 46px left-room. */
    .pranav-why-pranav__cta-link {
        font-size: 14px;
        right: 80px;
    }

    /* Arrow: nudge slightly inward to match the tighter CTA spacing */
    .pranav-why-pranav__arrow {
        right: 16px;
        top: 16px;
    }

    /* Heading: scale down so it wraps in fewer lines on very narrow screens */
    .pranav-why-pranav__heading {
        font-size: 24px;
    }

    /* Body: slightly smaller for comfortable reading at narrow widths */
    .pranav-why-pranav__body {
        font-size: 16px;
        padding-top: 12px;
    }

    /* Watermark: push to near-invisible so it does not compete with
       the smaller text at very narrow screen widths */
    .pranav-why-pranav__watermark {
        opacity: 0.3;
    }
}


/* ── 15. Block editor preview ────────────────────────────────────────────────
   Show all reveal elements immediately — no IntersectionObserver in editor.
   ────────────────────────────────────────────────────────────────────────── */
.wp-block.acf-pranav-why-pranav .is-reveal {
    opacity: 1 !important;
    transform: none !important;
}

.wp-block.acf-pranav-why-pranav .pranav-why-pranav {
    min-height: 200px;
}