/* ============================================================================
   Block: pranav-testimonial  —  "Testimonial" Section

   CSS port of kovaion-landing-page/index.html (.testimonial + .testi-*).
   Wraps the original single-card design inside a Swiper.js fade slider.

   Class mapping (HTML ref → ACF block):
     .testimonial         → .pranav-testimonial
     .testi-card          → .pranav-testimonial__card
     .testi-photo         → .pranav-testimonial__photo
     .testi-photo img     → .pranav-testimonial__photo img
     .testi-body          → .pranav-testimonial__body
     .testi-quote         → .pranav-testimonial__quote
     .testi-author-name   → .pranav-testimonial__author-name
     .testi-author-role   → .pranav-testimonial__author-role
     .testi-quote-mark    → .pranav-testimonial__quote-mark (inline SVG)

   New elements (not in source HTML):
     .pranav-testimonial__header       — optional section title/subtitle
     .pranav-testimonial__title        — section heading (36px, Clash Display)
     .pranav-testimonial__subtitle     — supporting text (18px, Clash Grotesk)
     .pranav-testimonial__slider-outer — max-width wrapper + pagination host
     .pranav-testimonial__swiper       — Swiper container
     .pranav-testimonial__blockquote   — resets default blockquote margin/padding
     .pranav-testimonial__stars        — star-rating row (SVG icons)
     .pranav-testimonial__star         — individual SVG star
     .pranav-testimonial__author       — footer: name + role + logo
     .pranav-testimonial__company-logo — optional company logo
     .pranav-testimonial__pagination   — Swiper pagination bullets (external)

   Key layout measurements (Figma / HTML reference):
     Section bg     : #fff5f0 (warm peach)
     Padding        : 96px top (60 standard + 36 photo-overhang), 80px sides, 60px bottom
     Card           : max-width 1280px, min-height 266px, white bg, radius 25px, shadow
     Photo          : absolute, left=81px, top=-36px, 246×261px, #e6ddd6 bg, radius 20px
     Photo img      : width 150%, height 145%, object-fit cover, object-position top center
     Body           : margin-left=398px, padding 40px 60px 40px 0, width=811px
     Quote text     : 18px / 24px, Clash Grotesk 400, #1e252f
     Author name    : Clash Grotesk 500, 20px, #ff5a3c
     Author role    : Clash Grotesk 400, 14px, #1e252f
     Quote mark     : absolute, top=0, right=38px, 65×65px, coral SVG
   ============================================================================ */


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


/* ── 1. Section shell ────────────────────────────────────────────────────────
   padding-top: 96px = 60px standard + 36px to absorb the photo overhang.
   The photo (top=-36px relative to the card) then sits at 60px from the
   section top, fully within the section background area.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial {
    background-color: #fff5f0;
    padding: 96px 80px 60px;
    box-sizing: border-box;
}


/* ── 2. Section header ───────────────────────────────────────────────────────
   Optional heading + subtitle rendered above the slider.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__header {
    text-align: center;
    margin-bottom: 48px;
}

.pranav-testimonial__title {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.2;
    color: #1e252f;
    margin: 0 0 16px;
}

.pranav-testimonial__subtitle {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #858585;
    margin: 0;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}


/* ── 3. Slider outer wrapper ─────────────────────────────────────────────────
   Centres the 1280px card and acts as the host for the external pagination.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__slider-outer {
    max-width: 1280px;
    margin: 0 auto;
}


/* ── 4. Swiper container overrides ──────────────────────────────────────────
   overflow:visible is required so the photo (top=-36px relative to the card)
   can render above the swiper boundary. The fade effect means only one slide
   is ever visible — adjacent slides are opacity:0, so overflow is harmless.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__swiper.swiper {
    overflow: visible;
}

.pranav-testimonial__swiper .swiper-wrapper {
    overflow: visible;
}

.pranav-testimonial__swiper .swiper-slide {
    overflow: visible;
}


/* ── 5. Card ─────────────────────────────────────────────────────────────────
   Matches source: 1280×266px white card, 25px radius, soft box-shadow.
   overflow:visible is critical — the photo must render above the card top.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__card {
    position: relative;
    width: 100%;
    min-height: 266px;
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow: -3.2px 3.2px 9.6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    overflow: visible;
}


/* ── 6. Customer photo ───────────────────────────────────────────────────────
   Matches source: position absolute, left=81px, top=-36px, 246×261px.
   Background #e6ddd6 is visible as a warm placeholder when no image is
   uploaded, matching the Figma design intent.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__photo {
    position: absolute;
    left: 81px;
    top: -36px;
    width: 246px;
    height: 261px;
    background-color: #e6ddd6;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.pranav-testimonial__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}


/* ── 7. Decorative quote mark ────────────────────────────────────────────────
   Exact SVG from the original Figma asset (af246a39-…).
   Dimensions: 65×65px — matching the source CSS (.testi-quote-mark: 65×65).
   Horizontal: right=38px — matching the source CSS exactly.

   Vertical: top=-20px so the mark floats partially ABOVE the card edge.
   With the card at overflow:visible and section padding-top:96px, the
   20px overhang lands well within the padding area (no clipping).
   The card background + shadow are behind (z-index 0); the mark is
   raised to z-index:2 so it always appears on top.

   Source CSS reference (.testi-quote-mark): top=0px, right=38px, 65×65px.
   The -20px offset moves it upward from the card's top edge so ~20px of
   the icon is above the card boundary and ~45px remains visually anchored
   to the card — matching the "floats above" visual intent.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__quote-mark {
    position: absolute;
    top: -20px;
    right: 38px;
    width: 65px;
    height: 65px;
    pointer-events: none;
    z-index: 2;
}

.pranav-testimonial__quote-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible; /* match preserveAspectRatio="none" intent from the source SVG */
}


/* ── 8. Quote body ───────────────────────────────────────────────────────────
   Matches source: margin-left=398px, padding 40px 60px 40px 0, width=811px.
   gap=20px between the star row, quote text, and author footer.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__body {
    margin-left: 398px;
    padding: 40px 60px 40px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 811px;
    max-width: calc(100% - 398px - 40px);
    box-sizing: border-box;
}

/* Reset default blockquote styling */
.pranav-testimonial__blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ── 9. Star rating ──────────────────────────────────────────────────────────
   Five 18×18px SVG stars. Filled = coral (#ff5a3c), empty = light grey.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__stars {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pranav-testimonial__star {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pranav-testimonial__star path {
    fill: #d9d9d9;
}

.pranav-testimonial__star.is-filled path {
    fill: #ff5a3c;
}


/* ── 10. Quote text ──────────────────────────────────────────────────────────
   Matches source: 18px / 24px, Clash Grotesk Regular, #1e252f.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__quote {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #1e252f;
    margin: 0;
}


/* ── 11. Author footer ───────────────────────────────────────────────────────
   Stack: name (coral), role (dark), optional logo.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__author {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pranav-testimonial__author-name {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: #ff5a3c;
    margin: 0;
}

.pranav-testimonial__author-role {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #1e252f;
    margin: 5px 0 0;
}

.pranav-testimonial__company-logo {
    margin-top: 12px;
    line-height: 0;
}

.pranav-testimonial__company-logo img {
    max-height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}


/* ── 12. Pagination bullets (external div, below the card) ───────────────────
   Sits outside the Swiper container in normal document flow, so no position
   fighting with Swiper's internal absolute positioning.
   Bullet overrides use the block class as an ancestor for specificity, not
   !important — avoids fragility against Swiper CDN version changes.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    min-height: 14px; /* prevents layout shift before Swiper injects bullets */
}

/* Swiper injects .swiper-pagination-bullet elements inside our pagination div */
.pranav-testimonial__pagination .swiper-pagination-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #1e252f;
    opacity: 0.25;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.pranav-testimonial__pagination .swiper-pagination-bullet-active {
    background-color: #ff5a3c;
    opacity: 1;
    transform: scale(1.35);
}


/* ── 13. 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 header vs the slider.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-testimonial .is-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--delay, 0ms);
}

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


/* ── 14. Responsive — Tablet ≤ 1100px ───────────────────────────────────────
   Body flex: 1 so it fills the remaining width once the photo is narrowed.
   Reduce side padding to 40px.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {

    .pranav-testimonial {
        padding-left:  40px;
        padding-right: 40px;
    }

    .pranav-testimonial__body {
        width: auto;
        flex: 1;
        max-width: none;
    }
}


/* ── 15. Responsive — Mobile ≤ 768px ─────────────────────────────────────────
   Mirrors source CSS mobile overrides (.testi-card, .testi-photo etc.):
     • Card becomes a column layout; photo goes relative (no overhang).
     • Section padding-top returns to 60px (no overhang space needed).
     • Body fills the full card width.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .pranav-testimonial {
        padding: 60px 20px;
    }

    .pranav-testimonial__title {
        font-size: 28px;
    }

    /* Card: flex-direction column, flow layout, readable on narrow screens */
    .pranav-testimonial__card {
        flex-direction: column;
        padding: 24px;
        align-items: flex-start;
        overflow: visible;
    }

    /* Photo: pull back into normal flow at the top of the card */
    .pranav-testimonial__photo {
        position: relative;
        top: auto;
        left: auto;
        width: 120px;
        height: 150px;
        margin-bottom: 20px;
        flex-shrink: 0;
    }

    .pranav-testimonial__photo img {
        width: 100%;
        height: 100%;
    }

    /* Body: reset desktop offset, fill full width */
    .pranav-testimonial__body {
        margin-left: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .pranav-testimonial__quote {
        font-size: 15px;
    }

    /* Quote mark: proportionally smaller on mobile, floats above card top edge */
    .pranav-testimonial__quote-mark {
        top: -10px;  /* matches source CSS mobile override: top=-10px */
        right: 10px;
        width: 48px;
        height: 48px;
    }
}


/* ── 16. Block editor preview ────────────────────────────────────────────────
   • Show reveal elements immediately (no IntersectionObserver in editor).
   • Show only the first swiper-slide — Swiper will not initialise in the
     editor's REST rendering context, so stack them, show first, hide rest.
   ────────────────────────────────────────────────────────────────────────── */
.wp-block.acf-pranav-testimonial .is-reveal {
    opacity: 1 !important;
    transform: none !important;
}

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

/* In the editor, only the first slide should be visible */
.wp-block.acf-pranav-testimonial .swiper-slide:not(:first-child) {
    display: none;
}