/* ============================================================================
   Block: pranav-talent-services  —  Talent Services Section

   CSS port of kovaion-landing-page/assets/css/talent.css
   (.talent-services + .ts-* selectors), adapted to ACF block BEM class names.

   Class mapping (HTML source → ACF block):
     .talent-services            → .pranav-talent-services
     .talent-services__card      → .pranav-ts__card
     .talent-services__left      → .pranav-ts__left
     .ts-panels                  → .pranav-ts__panels
     .ts-panel                   → .pranav-ts__panel
     .ts-panel--active           → .pranav-ts__panel--active
     .ts-panel__category         → .pranav-ts__category
     .ts-panel__heading          → .pranav-ts__heading
     .ts-panel__body             → .pranav-ts__body
     .ts-nav                     → .pranav-ts__nav
     .ts-nav__btn                → .pranav-ts__nav-btn
     .ts-nav__btn--prev          → .pranav-ts__nav-btn--prev
     .ts-nav__btn--next          → .pranav-ts__nav-btn--next
     .ts-divider                 → .pranav-ts__divider
     .ts-divider__track          → .pranav-ts__divider-track
     .ts-divider__thumb          → .pranav-ts__divider-thumb
     .ts-images                  → .pranav-ts__images
     .ts-images__track           → .pranav-ts__images-track
     .ts-image-slide             → .pranav-ts__image-slide
     .ts-image-slide--active     → .pranav-ts__image-slide--active

   New elements (block-only, not in source HTML):
     .pranav-ts__image-placeholder   — warm-fill placeholder when no image is set

   Key layout measurements (source HTML / talent.css reference):
     Section   : bg #fff5f0, padding-top 100px, padding-bottom 100px
     Card      : width 1062px, height 645px, centered, bg #fff, border-radius 25px, overflow hidden
     Left panel: position absolute, left 0, width 560px, flex column, padding 48px 56px 48px 48px
     Category  : 36px Clash Display, color #ff5a3c
     Heading   : 24px Clash Grotesk 400, color #1e252f
     Body      : 16px Clash Grotesk 400, color #858585, line-height 1.65
     Divider   : position absolute left 1030px, top 50% −220px, width 2px, height 440px
     Thumb     : width 2px, height 77px, color #ff5a3c, transition top
     Images    : position absolute, left 570px, top 0, bottom 0, width 460px, overflow hidden
     Track     : flex column, gap 24px, initial translateY(-308px), transition transform
     Slide     : flex-shrink 0, height 420px, border-radius 15px, object-fit cover
     Nav btns  : 36×50px, flex centred, no bg, hover opacity + scale
   ============================================================================ */


/* ── 0. Full-width breakout ─────────────────────────────────────────────────
   Escapes the .entry-content max-width constraint so the block spans the
   full viewport — same technique used by pranav-about-hero and pranav-hero-gcc.
   ────────────────────────────────────────────────────────────────────────── */
.entry-content .pranav-talent-services,
.entry-content .pranav-talent-services.alignfull {
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
}


/* ── 1. Section shell ────────────────────────────────────────────────────────
   Warm peach background, top/bottom padding creates spacing between adjacent
   blocks. Contains the centred white card.
   min-height:100vh + flex centering keeps the active panel vertically centred
   in the viewport at all times on desktop/tablet.
   HTML ref: .talent-services { background:var(--c-bg); padding-top:100px;
             padding-bottom:100px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-talent-services {
    background-color: #fff5f0;
    padding-top: 100px;
    padding-bottom: 100px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


/* ── 2. White card ───────────────────────────────────────────────────────────
   Centred white card, fixed width + height. overflow:hidden clips the
   absolutely positioned image panel and divider at the card boundary.
   HTML ref: .talent-services__card { position:relative; width:1062px;
             height:645px; margin:0 auto; background:#fff; border-radius:25px;
             overflow:hidden }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__card {
    position: relative;
    width: 1062px;
    height: 645px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 25px;
    overflow: hidden;
}


/* ── 3. Left panel ───────────────────────────────────────────────────────────
   Vertically centred flex column. Width 560px leaves room for the divider
   (at x=1030) and the image panel (left=570).
   HTML ref: .talent-services__left { position:absolute; top:0; left:0;
             bottom:0; width:560px; display:flex; flex-direction:column;
             justify-content:center; padding:48px 56px 48px 48px; gap:20px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px 48px 48px;
    gap: 20px;
    box-sizing: border-box;
}


/* ── 4. Panel container ──────────────────────────────────────────────────────
   Grows to fill left column, clips panels during transitions.
   HTML ref: .ts-panels { position:relative; flex:1; min-height:0; overflow:hidden }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__panels {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}


/* ── 5. Individual panel ─────────────────────────────────────────────────────
   Absolute stacking: all panels occupy the same space; inactive ones are
   hidden (opacity 0, translated down) and pointer-events disabled.
   HTML ref: .ts-panel { position:absolute; inset:0; opacity:0;
             transform:translateY(18px); pointer-events:none; transition }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    overflow: hidden;
}

.pranav-ts__panel--active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* ── 6. Category label ───────────────────────────────────────────────────────
   Coral, large, Clash Display — the most visually prominent element of
   the panel, acting as a tab indicator for the currently active service.
   HTML ref: .ts-panel__category { font-size:36px; color:#ff5a3c;
             font-family:Clash Display }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__category {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-size: 36px;
    line-height: normal;
    font-weight: 400;
    color: #ff5a3c;
    flex-shrink: 0;
    margin: 0;
}


/* ── 7. Service heading ──────────────────────────────────────────────────────
   Dark, normal weight, Clash Grotesk — sub-headline below the category.
   HTML ref: .ts-panel__heading { font-size:24px; color:#1e252f;
             font-family:Clash Grotesk; font-weight:400 }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__heading {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-size: 24px;
    line-height: normal;
    font-weight: 400;
    color: #1e252f;
    flex-shrink: 0;
    margin: 0;
}


/* ── 8. Body copy ────────────────────────────────────────────────────────────
   Gray, comfortable line-height. Two <p> tags typical — generated by
   wpautop() from the ACF textarea value.
   HTML ref: .ts-panel__body { font-size:16px; color:#858585; line-height:1.65;
             display:flex; flex-direction:column; gap:12px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__body {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #858585;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    margin: 0;
}

.pranav-ts__body p {
    margin: 0;
}

.pranav-ts__body p + p {
    margin-top: 12px;
}


/* ── 9. Navigation arrows ────────────────────────────────────────────────────
   Row of two 36×50px buttons below the panels. The up arrow (prev) is
   disabled when tab 0 is active; the down arrow (next) when at the last tab.
   HTML ref: .ts-nav { display:flex; gap:8px; align-items:center; flex-shrink:0 }
   HTML ref: .ts-nav__btn { width:36px; height:50px; background:none; border:none }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.pranav-ts__nav-btn {
    width: 20px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    background: none;
    /* Default (disabled) colour — SVG stroke inherits via currentColor */
    color: #AFAFAF;
    /* Reserve border space so layout never shifts on state change */
    border: 1.5px solid transparent;
    border-radius: 8px;
    box-sizing: content-box;
    transition: color .2s, border-color .2s, transform .15s;
}

/* Active (enabled) — coral icon stroke + coral border */
.pranav-ts__nav-btn:not(:disabled) {
    color: #FF5A3C;
    border-color: #FF5A3C;
}

/* Disabled — grey icon, no visible border */
.pranav-ts__nav-btn:disabled {
    color: #AFAFAF;
    border-color: transparent;
    cursor: not-allowed;
}

.pranav-ts__nav-btn img {
    width: 20px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* SVG fallback — stroke="currentColor" in markup picks up the CSS color above */
.pranav-ts__nav-btn svg {
    display: block;
    width: 20px;
    height: 28px;
}

.pranav-ts__nav-btn:hover:not(:disabled) {
    transform: scale(1.1);
}

.pranav-ts__nav-btn:focus-visible {
    outline: 2px solid #FF5A3C;
    outline-offset: 2px;
}


/* ── 10. Vertical divider ────────────────────────────────────────────────────
   2px-wide gray track at x=1030 (32px from card right edge). The coral thumb
   moves along it via JS-set top offset to visualise progress through tabs.
   HTML ref: .ts-divider { position:absolute; left:1030px; top:50%;
             transform:translateY(-50%); width:2px; height:440px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__divider {
    position: absolute;
    left: 1030px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 440px;
    border-radius: 2px;
    overflow: visible;
    pointer-events: none;
}

/* Gray background track — full-height */
.pranav-ts__divider-track {
    position: absolute;
    inset: 0;
    background-color: #e5e5e5;
    border-radius: 2px;
}

/* Moving coral progress thumb — JS sets top; CSS transitions position */
.pranav-ts__divider-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 77px;
    background-color: #ff5a3c;
    border-radius: 2px;
    transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ── 11. Image panel ─────────────────────────────────────────────────────────
   Absolutely positioned to the right of the divider, full card height.
   overflow:hidden clips the scrolling image track.
   HTML ref: .ts-images { position:absolute; left:570px; top:0; bottom:0;
             width:460px; overflow:hidden }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__images {
    position: absolute;
    left: 570px;
    top: 0;
    bottom: 0;
    width: 460px;
    overflow: hidden;
}


/* ── 12. Image track ─────────────────────────────────────────────────────────
   Vertically stacked images with gaps. Starts at translateY(-308px) so the
   first service shows image slot 1 prominently — matching the Figma design.
   JS updates transform on tab change.
   HTML ref: .ts-images__track { display:flex; flex-direction:column; gap:24px;
             transform:translateY(-308px); transition }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__images-track {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Initial offset = IMAGE_OFFSETS[0] = -(0×444)+136 = +136px.
       Slide 0 is positioned 136px below the container top, matching the
       "prominent" display position used for all subsequent tabs.
       JS overwrites this via inline style on each tab change. */
    transform: translateY(136px);
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}


/* ── 13. Individual image slide ──────────────────────────────────────────────
   Fixed 420px height; border-radius 15px clips the image corners.
   The .active class triggers a subtle Ken Burns-style zoom.
   HTML ref: .ts-image-slide { flex-shrink:0; width:100%; height:420px;
             border-radius:15px; overflow:hidden }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__image-slide {
    flex-shrink: 0;
    width: 100%;
    height: 420px;
    border-radius: 15px;
    overflow: hidden;
}

.pranav-ts__image-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.65s ease;
}

/* Subtle zoom on the active slide */
.pranav-ts__image-slide--active img {
    transform: scale(1.02);
}


/* ── 14. Image placeholder ───────────────────────────────────────────────────
   Shown when no image is uploaded to a service repeater row.
   Warm peach fill keeps the panel visually consistent and shows layout intent
   in the block editor before images are added.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-ts__image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #feb7a0;
    border-radius: inherit;
}


/* ── 15. Block editor preview ────────────────────────────────────────────────
   Sets a minimum height so the block doesn't appear collapsed in Gutenberg
   before the editor renders. Transitions are suppressed in the preview.
   ────────────────────────────────────────────────────────────────────────── */
.wp-block.acf-pranav-talent-services .pranav-talent-services {
    min-height: 200px;
}

.wp-block.acf-pranav-talent-services .pranav-ts__card {
    min-height: 200px;
}


/* ============================================================================
   RESPONSIVE OVERRIDES
   All breakpoints from talent.css (.talent-services and .ts-*) ported to
   .pranav-talent-services/.pranav-ts__* naming without modifying any desktop
   styles above. Only the card dimensions, positioning, font sizes, and layout
   switch behaviour are adjusted — no new design decisions are introduced.

   Breakpoints:
     ≤ 1200px : Wide tablet  — card shrinks, left panel and images recalculate
     ≤ 1024px : Tablet       — narrower layout, reduced font sizes
     ≤ 768px  : Mobile       — vertical stacked layout, images below text
     ≤ 480px  : Small mobile — smaller category/heading text
   ============================================================================ */


/* ── Wide tablet (≤ 1200px) ─────────────────────────────────────────────── */
@media (max-width: 1200px) {

    .pranav-ts__card {
        width: calc(100% - 160px); /* 80px each side, matching --content-x */
        height: 580px;
    }

    .pranav-ts__left {
        width: 52%;
    }

    /* Recalculate divider x based on left panel percentage */
    .pranav-ts__divider {
        left: calc(52% + 4px);
    }

    .pranav-ts__images {
        left: calc(52% + 10px);
        width: calc(47% - 40px);
    }
}


/* ── Tablet (≤ 1024px) ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .pranav-talent-services {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .pranav-ts__card {
        width: calc(100% - 80px); /* 40px each side */
        height: 560px;
    }

    .pranav-ts__left {
        width: 54%;
        padding: 36px 40px 36px 40px;
    }

    .pranav-ts__divider {
        left: calc(54% + 4px);
    }

    .pranav-ts__images {
        left: calc(54% + 12px);
        width: calc(45% - 12px);
    }

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

    .pranav-ts__heading {
        font-size: 20px;
    }

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

    /* Allow active panel text to scroll when it exceeds the fixed card height */
    .pranav-ts__panel--active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ── Mobile (≤ 768px) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .pranav-talent-services {
        /* Reset viewport-height flex centering — stacked layout uses normal block flow */
        min-height: unset;
        display: block;
        padding-top: 40px;
        padding-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*
       Switch from fixed-size horizontal layout to a vertically stacked layout.
       Card: full width, auto height, overflow visible so the two stacked
       children (left text panel + image panel) display without clipping.
       HTML ref (talent.css): height:auto; border-radius:20px; overflow:visible
    */
    .pranav-ts__card {
        width: 100%;
        height: auto;
        border-radius: 20px;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    /* Left text panel: relative positioning, full width, auto height */
    .pranav-ts__left {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        padding: 32px 24px 24px;
        min-height: 0;
        box-sizing: border-box;
    }

    /* Auto-height container — active panel's content defines the height */
    .pranav-ts__panels {
        height: auto;
        overflow: visible;
    }

    /*
       Override absolute panel stacking for mobile.
       Inactive panels use display:none (no space, no transitions needed).
       Active panel is in normal flow so its full content is always visible.
    */
    .pranav-ts__panel {
        position: relative;
        inset: auto;
        display: none;
        opacity: 1;
        transform: none;
        transition: none;
        overflow: visible;
        pointer-events: none;
    }

    .pranav-ts__panel--active {
        display: flex;
        overflow: visible;
        pointer-events: auto;
    }

    .pranav-ts__body {
        font-size: 14px;
        line-height: 1.6;
        overflow: visible;
    }

    /* Hide vertical divider on mobile — stacked layout makes it meaningless */
    .pranav-ts__divider {
        display: none;
    }

    /*
       Image panel: relative positioning below the text panel.
       Rounded bottom corners match the card's border-radius.
       overflow:hidden re-applied here because card switched to overflow:visible.
       HTML ref (talent.css): position:relative; width:100%; height:280px;
       border-radius:0 0 20px 20px
    */
    .pranav-ts__images {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: 280px;
        border-radius: 0 0 20px 20px;
        overflow: hidden;
    }

    /*
       Reset initial track offset on mobile — show the first image cleanly
       at the top of the image panel instead of offset by -308px.
       The !important overrides the JS-set inline transform so touch-swipe
       still triggers goToTab() but the visual shows slide 0 at position 0.
       HTML ref (talent.css): transform:translateY(0) !important
    */
    .pranav-ts__images-track {
        transform: translateY(0) !important;
        transition: none !important;
    }

    /*
       JS transform is locked at 0 on mobile, so images don't scroll.
       Use display toggling to show only the active slide instead.
    */
    .pranav-ts__image-slide {
        height: 280px;
        border-radius: 0;
        display: none;
    }

    .pranav-ts__image-slide--active {
        display: block;
    }
}


/* ── Small mobile (≤ 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {

    .pranav-ts__category {
        font-size: 22px;
    }

    .pranav-ts__heading {
        font-size: 17px;
    }

    .pranav-ts__body {
        font-size: 13px;
    }

    .pranav-ts__panels {
        height: auto;
    }
}