/* ============================================================================
   Block: pranav-hero-gcc  —  Hero Section (India GCC)

   CSS port of kovaion-landing-page/index.html (.hero) mapped to ACF block
   class names. Every pixel value traces back to the HTML reference file or
   the original Figma artboard (1440 × auto canvas).

   Class mapping (HTML ref → ACF block):
     .hero               → .pranav-hero-gcc
     .hero__img-wrap     → .pranav-hero-gcc__bg-wrap
     .hero__overlay      → .pranav-hero-gcc__overlay
     .hero__arch         → .pranav-hero-gcc__arch
     .hero__text         → .pranav-hero-gcc__text
     .hero__title        → .pranav-hero-gcc__title
     .accent (span)      → .pranav-hero-gcc__title-coral
     (second span)       → .pranav-hero-gcc__title-white
     .hero__subtitle     → .pranav-hero-gcc__subtitle
     .hero__cta          → .pranav-hero-gcc__cta
     .hero__cards        → .pranav-hero-gcc__cards
     .svc-card           → .pranav-hero-gcc__card
     .svc-card--gradient → .pranav-hero-gcc__card:nth-child(2)
     .svc-card__info     → .pranav-hero-gcc__card-info
     .svc-card__title    → .pranav-hero-gcc__card-title
     .svc-card__desc     → .pranav-hero-gcc__card-desc
     .svc-card__photo    → .pranav-hero-gcc__card-photo

   Key layout coordinates (section top = y:0):
     bg-wrap   : top=52  left=80  right=80  h=750  (canvas x=80 y=52 w=1280 h=750)
     arch      : bottom of bg-wrap, left=10.156%, w=79.688%, h=130, r=50px 50px 0 0
     text      : top=253  centred  w=961                         (canvas x=240 y=253)
     cards     : top=687  centred  w=989  h=213                  (canvas x=225 y=687)
     section   : min-height=950  bg=#fff5f0
   ============================================================================ */


/* ── 0. Full-width breakout ─────────────────────────────────────────────────
   When the block is inside .entry-content (max-width:750px), force it to
   span the full viewport width. Mirrors the rule in main.css but lives here
   as a self-contained safety net for pages that don't use .entry-content.
   ────────────────────────────────────────────────────────────────────────── */
.entry-content .pranav-hero-gcc,
.entry-content .pranav-hero-gcc.alignfull {
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
}


/* ── 1. Section ─────────────────────────────────────────────────────────────
   Warm page background (#fff5f0) shows in two places:
     • The 52 px gap above the bg-wrap (matches Figma canvas y=0→52)
     • Through the arch cutout at the bottom of the bg-wrap
   min-height: 950px = cards bottom (687+213=900) + 50 px buffer.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc {
    position: relative;
    background-color: #fff5f0;
    overflow: visible;
    min-height: 950px;
}


/* ── 2. Background wrap ──────────────────────────────────────────────────────
   Figma / HTML ref: position absolute, top=52px, left=80px, right=80px, h=750px.
   border-radius 0 0 25px 25px rounds the dark image's bottom corners (the arch
   cutout in the centre overrides the visual for the bottom-centre strip).
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__bg-wrap {
    position: absolute;
    top: 52px;
    left: 80px;
    right: 80px;
    height: 750px;
    overflow: hidden;
    z-index: 0;
    border-radius: 25px 25px 25px 25px;
    /* iOS Safari compositing fix: overflow:hidden + border-radius clips child elements
       via a stacking context. Without a GPU layer on this parent, Safari composites
       the hardware-decoded video in a separate pass and the clip is silently dropped,
       leaving the video element blank even when it is actively playing.
       translateZ(0) promotes this element to its own GPU layer so the clip is applied
       in the same compositing pass as the video. Applies on iOS 15 through iOS 26. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    isolation: isolate;
}

/* Image, video, and poster all fill the bg-wrap with the same cover fit */
.pranav-hero-gcc__bg-img,
.pranav-hero-gcc__bg-video,
.pranav-hero-gcc__bg-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.pranav-hero-gcc__bg-video {
    pointer-events: none;
    /* Invisible until the first frame is composited on screen ('playing' event).
       An opacity-0 video element never shows a browser play-button overlay, so
       there is zero risk of a play UI appearing regardless of iOS autoplay policy.
       The poster image is always visible underneath as the fallback background. */
    opacity: 0;
    transition: opacity 0.4s ease;
    /* Force a GPU compositing layer — fixes a WebKit/Safari bug on iOS where a
       video inside a parent with overflow:hidden + border-radius renders blank.
       Applies on iOS 15+ through iOS 18 (iPhone 17). */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Suppress the native iOS 'tap to play' overlay that appears when autoplay is
   blocked. iOS 17 and iOS 18 (iPhone 17) changed how these pseudo-elements are
   rendered, so display:none alone is no longer reliable — opacity:0 + visibility:
   hidden provides two independent suppression layers that survive WebKit updates.
   The poster <img> already provides a static fallback; the overlay is misleading
   for a silent ambient background video. */
.pranav-hero-gcc__bg-video::-webkit-media-controls-start-playback-button,
.pranav-hero-gcc__bg-video::-webkit-media-controls-play-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    -webkit-appearance: none;
    appearance: none;
}
.pranav-hero-gcc__bg-video::-webkit-media-controls-panel,
.pranav-hero-gcc__bg-video::-webkit-media-controls {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Poster always visible — immediate background on page load, and the permanent
   fallback if video is blocked, unsupported, or the user prefers no motion. */
.pranav-hero-gcc__bg-poster {
    display: block;
}

/* Reduced motion: remove the video entirely and disable the fade-in transition.
   The poster is already display:block and provides the static background. */
@media (prefers-reduced-motion: reduce) {
    .pranav-hero-gcc__bg-video {
        display: none !important;
        opacity: 0 !important;
        transition: none !important;
    }
}

/* Editor/preview placeholder when no media is uploaded */
.pranav-hero-gcc__bg-placeholder {
    position: absolute;
    inset: 0;
    background-color: #1e252f;
}


/* ── 3. Dark gradient overlay ────────────────────────────────────────────────
   Exact gradient from HTML reference:
     rgba(30,37,47, 0.55)  →  0%
     rgba(30,37,47, 0.48)  → 55%
     rgba(30,37,47, 0.22)  → 100%
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(30, 37, 47, 0.55)  0%,
        rgba(30, 37, 47, 0.48) 55%,
        rgba(30, 37, 47, 0.22) 100%
    );
    pointer-events: none;
    z-index: 1;
}


/* ── 4. Arch cutout ──────────────────────────────────────────────────────────
   Mirrors HTML reference .hero__arch exactly.
   Sits at the bottom of the bg-wrap and "punches through" the dark image by
   matching the page background colour (#fff5f0).
   Figma / HTML: left=130/1280=10.156%, w=1020/1280=79.688%, h=130px, r=50px.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__arch {
    position: absolute;
    bottom: 0;
    left:  10.156%;
    width: 79.688%;
    height: 130px;
    background-color: #fff5f0;
    border-radius: 50px 50px 0 0;
    z-index: 2;
    pointer-events: none;
}


/* ── 5. Text block ───────────────────────────────────────────────────────────
   Mirrors HTML reference .hero__text exactly.
   position:absolute; top:253px; left:50%; transform:translateX(-50%); w:961px
   Figma: x=240, y=253, w=961 (centred in 1440px canvas: 240+961/2=720.5≈720=50%)
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__text {
    position: absolute;
    top: 253px;
    left: 50%;
    transform: translateX(-50%);
    width: 961px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}


/* ── 6. Headline — two-tone ──────────────────────────────────────────────────
   Figma: 64px / 74px, Clash Display Regular, coral (#ff5a3c) + white.
   Matches HTML: .hero__title { font-size:64px; line-height:74px; }
                 .hero__title .accent { color:#ff5a3c; }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__title {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 64px;
    line-height: 74px;
    color: #ffffff;
    margin: 0;
    word-break: break-word;
}

.pranav-hero-gcc__title-coral { color: #ff5a3c; display: inline; }
.pranav-hero-gcc__title-white { color: #ffffff; display: inline; }


/* ── 7. Subtitle ─────────────────────────────────────────────────────────────
   Figma: 18px, Clash Grotesk Regular, white, w=635px.
   HTML: line-height:1.6; width:635px (fixed, centred within 961px text block).
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__subtitle {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: #ffffff;
    width: 635px;
    margin: 0;
}


/* ── 8. CTA button ───────────────────────────────────────────────────────────
   Figma: bg=#ff5a3c, border-radius=42px, w=231px, h=58px, 18px Clash Display Medium.
   HTML: .hero__cta { width:231px; height:58px; border-radius:42px; }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 231px;
    height: 58px;
    padding: 0 32px;
    background-color: #ff5a3c;
    color: #ffffff;
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    border-radius: 42px;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pranav-hero-gcc__cta:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: #ffffff;
    text-decoration: none;
}

.pranav-hero-gcc__cta:active {
    transform: translateY(0);
}

.pranav-hero-gcc__cta--preview {
    opacity: 0.9;
    cursor: default;
}


/* ── 9. Service cards row ────────────────────────────────────────────────────
   Mirrors HTML reference .hero__cards exactly.
   position:absolute; top:687px; left:50%; transform:translateX(-50%); w:989px; h:213px
   4 × 236px cards + 3 × 15px gaps = 989px total.
   Figma: x=225, y=687 (centred: 225+989/2=719.5≈720=50% of 1440px canvas)
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__cards {
    position: absolute;
    top: 687px;
    left: 49%;
    transform: translateX(-50%);
    width: 989px;
    height: 213px;
    display: flex;
    gap: 15px;
    z-index: 4;
}


/* ── 10. Individual service card ─────────────────────────────────────────────
   All cards share identical default styles — white bg, no shadow, no border.
   The gradient hover effect is applied uniformly via a ::before pseudo-element
   (opacity transition) because CSS cannot tween linear-gradient directly.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__card {
    flex: 0 0 243px;
    height: 243px;
    background-color: #ffffff;
    border-radius: 25px;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    transition:
        transform    0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow   0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.3s ease;
}

/*
 * Gradient layer — invisible at rest, fades in on hover.
 * Sits behind all card content because pseudo-elements render before child
 * elements in source order; children naturally stack above it without needing
 * explicit z-index values.
 */
.pranav-hero-gcc__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(136.31deg, #ffffff 40.863%, #ff85a3 193.68%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}

.pranav-hero-gcc__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(255, 90, 60, 0.22);
    border-color: rgba(255, 133, 163, 0.5);
}

.pranav-hero-gcc__card:hover::before {
    opacity: 1;
}

/* When the card itself is an <a> tag, reset browser anchor defaults */
a.pranav-hero-gcc__card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


/* ── 11. Card info (title + description) ─────────────────────────────────────
   Matches HTML .svc-card__info { position:absolute; top:22px; left:23px; right:23px; }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__card-info {
    position: absolute;
    top: 22px;
    left: 23px;
    right: 23px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.pranav-hero-gcc__card-title {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    color: #ff5a3c;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.pranav-hero-gcc__card-desc {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #858585;
    margin: 0;
    overflow-wrap: break-word;
}


/* ── 12. Card photo ──────────────────────────────────────────────────────────
   Matches HTML .svc-card__photo { position:absolute; left:28px; bottom:0;
     width:179px; height:90px; border-radius:10px 10px 0 0; }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-hero-gcc__card-photo {
    position: absolute;
    left: 28px;
    bottom: 0;
    width: 179px;
    height: 90px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.pranav-hero-gcc__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.pranav-hero-gcc__card:hover .pranav-hero-gcc__card-photo img {
    filter: grayscale(0%);
}


/* ── 13. Global header override — hero page only ─────────────────────────────
   HTML reference: navbar { position:fixed; top:82px } — the pill sits 30px
   inside the dark bg image (image starts at y=52, navbar at y=82 = 52+30).
   CSS :has() lets us scope this purely to pages that contain this block.
   Mobile: navbar { top:20px } matching HTML reference mobile breakpoint.
   ────────────────────────────────────────────────────────────────────────── */
body:has(.pranav-hero-gcc) .site-header {
    top: 82px;
}

body:has(.pranav-hero-gcc) .nav-overlay {
    top: 82px;
}

/* Ensure no padding-top on .site-main when hero block is present */
body:has(.pranav-hero-gcc) .site-main {
    padding-top: 0;
}


/* ── 14. Responsive — Tablet ≤ 1100 px ──────────────────────────────────────
   Mirrors HTML reference @media (max-width: 1100px):
     --content-x drops to 40px  →  bg-wrap left/right: 40px
     text width: 90%, top: 190px
     title: 48px / 58px
     cards: top 600px, flex-wrap
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {

    .pranav-hero-gcc__bg-wrap {
        left: 40px;
        right: 40px;
    }

    .pranav-hero-gcc__text {
        width: 90%;
        top: 190px;
    }

    .pranav-hero-gcc__title {
        font-size: 48px;
        line-height: 58px;
    }

    .pranav-hero-gcc__subtitle {
        width: 90%;
        max-width: 560px;
        font-size: 16px;
    }

    .pranav-hero-gcc__cards {
        max-width: calc(100% - 80px);
        top: 600px;
        flex-wrap: wrap;
        height: auto;
    }

    .pranav-hero-gcc__card {
        flex: 0 0 220px;
        min-height: 213px;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pranav-hero-gcc__card-info {
        position: relative;
        z-index: 1;
        padding: 22px 20px 16px;
        flex: none;
        text-align: left;
    }

    .pranav-hero-gcc__card-photo {
        position: relative;
        z-index: 1;
        left: auto;
        bottom: auto;
        width: 100%;
        height: 90px;
        border-radius: 10px 10px 0 0;
    }
}


/* ── 15. Responsive — Tablet 768px – 1024px ─────────────────────────────────
   Dedicated tablet layout. Cards switch to normal document flow so the
   section grows with wrapped rows instead of overflowing a fixed min-height.

   Layout math (section top = y:0):
     bg-wrap  : top=52   h=620  → bottom=672
     arch     : h=110    → arch starts at 562 from section top
     padding-top = 562  (cards begin flush with arch top)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .pranav-hero-gcc {
        min-height: auto;
        padding-top: 562px;
        padding-bottom: 60px;
    }

    .pranav-hero-gcc__bg-wrap {
        left: 20px;
        right: 20px;
        height: 620px;
    }

    .pranav-hero-gcc__arch {
        height: 110px;
    }

    .pranav-hero-gcc__text {
        /*
         * Header: position:fixed; top:82px; height:51px → bottom at 133px.
         * Text must start below 133px to avoid sliding under the header pill.
         * 145px = 133px header-bottom + 12px breathing room.
         */
        top: 145px;
        width: 86%;
        gap: 22px;
    }

    .pranav-hero-gcc__title {
        font-size: 42px;
        line-height: 52px;
    }

    .pranav-hero-gcc__subtitle {
        width: 78%;
        max-width: 480px;
        font-size: 16px;
    }

    /* Switch to normal-flow layout so section expands with wrapped card rows */
    .pranav-hero-gcc__cards {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: calc(100% - 40px);
        max-width: 680px;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        margin: 0 auto;
        padding: 0;
    }

    .pranav-hero-gcc__card {
        flex: 0 0 calc(50% - 7px);
        min-height: 210px;
        height: auto;
        /*
         * Column-flex with space-between keeps card-photo anchored to the
         * bottom (it gets pushed down by any leftover space from min-height)
         * while card-info is free to grow as tall as its content needs.
         */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Remove absolute positioning so card-info grows with its content */
    .pranav-hero-gcc__card-info {
        /*
         * relative (not static) so z-index takes effect. Without this,
         * the positioned ::before pseudo-element (z-index: auto) paints
         * above the non-positioned card-info when the hover gradient fires
         * on tap, making the title + description invisible on touch devices.
         * position: relative with no offsets is layout-identical to static
         * inside a flex column.
         *
         * flex: none (0 0 auto) — size to content, no flex growth/shrink.
         * flex: 1 (basis 0) would need positive free space to grow, which
         * doesn't exist when the container height is auto, causing the desc
         * to be clipped on long text.
         */
        position: relative;
        z-index: 1;
        padding: 20px 20px 16px;
        flex: none;
        text-align: left;
    }

    /*
     * card-photo anchors to the card bottom as a fixed-height flex item.
     * width:100% replaces the old fixed left:28px + width:179px so the
     * image fills the card width at every responsive size.
     */
    .pranav-hero-gcc__card-photo {
        /* Same stacking fix as card-info — keeps photo above ::before gradient */
        position: relative;
        z-index: 1;
        left: auto;
        bottom: auto;
        width: 100%;
        height: 80px;
        border-radius: 10px 10px 0 0;
    }
}


/* ── 16. Responsive — Mobile ≤ 767px ─────────────────────────────────────────
   Background image starts at the very top (bg-wrap.top=0, no warm gap above).
   Cards are in document flow; section padding-top anchors them at the arch.

   Layout math (section top = y:0):
     bg-wrap  : top=0   h=500  → bottom=500
     arch     : h=70    → arch starts at 430 from section top
     padding-top = 430  (cards begin flush with arch top)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .pranav-hero-gcc {
        min-height: auto;
        padding-top: 430px;
        padding-bottom: 40px;
    }

    /* Full-width bg on mobile — thin side margins, starts at section top */
    .pranav-hero-gcc__bg-wrap {
        top: 0;
        left: 16px;
        right: 16px;
        height: 500px;
        border-radius: 0 0 20px 20px;
    }

    /* Arch spans full width on mobile */
    .pranav-hero-gcc__arch {
        left: 0;
        width: 100%;
        height: 70px;
        border-radius: 30px 30px 0 0;
    }

    .pranav-hero-gcc__text {
        /*
         * Header on hero-page mobile: position:fixed; top:20px; height:51px → bottom at 71px.
         * 88px = 71px header-bottom + 17px breathing room.
         */
        top: 88px;
        width: calc(100% - 32px);
        gap: 18px;
    }

    .pranav-hero-gcc__title {
        font-size: 30px;
        line-height: 40px;
    }

    .pranav-hero-gcc__subtitle {
        width: 100%;
        max-width: 420px;
        font-size: 15px;
    }

    .pranav-hero-gcc__cta {
        min-width: 190px;
        height: 52px;
        font-size: 16px;
        padding: 0 26px;
    }

    /* Cards in document flow, anchored at the arch cutout */
    .pranav-hero-gcc__cards {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        padding: 0 20px;
        margin: 0;
        box-sizing: border-box;
    }

    .pranav-hero-gcc__card {
        flex: 0 0 calc(50% - 6px);
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pranav-hero-gcc__card-info {
        position: relative;
        z-index: 1;
        padding: 18px 16px 14px;
        flex: none;
        text-align: left;
        gap: 8px;
    }

    .pranav-hero-gcc__card-title {
        font-size: 20px;
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }

    .pranav-hero-gcc__card-desc {
        font-size: 14px;
        padding-right: 8px;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }

    .pranav-hero-gcc__card-photo {
        position: relative;
        z-index: 1;
        left: auto;
        bottom: auto;
        width: 100%;
        height: 75px;
        border-radius: 10px 10px 0 0;
    }

    /* Restore header to mobile position */
    body:has(.pranav-hero-gcc) .site-header {
        top: 20px;
    }

    body:has(.pranav-hero-gcc) .nav-overlay {
        top: 12px;
    }
}


/* ── 17. Responsive — Small mobile ≤ 480px ───────────────────────────────────
   Slightly reduced bg-wrap height and tighter typography.

   Layout math:
     bg-wrap  : top=0   h=470  → bottom=470
     arch     : h=65    → arch starts at 405
     padding-top = 405
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    .pranav-hero-gcc {
        padding-top: 405px;
    }

    .pranav-hero-gcc__bg-wrap {
        height: 470px;
        left: 12px;
        right: 12px;
    }

    .pranav-hero-gcc__arch {
        height: 65px;
    }

    .pranav-hero-gcc__text {
        /* Same 88px rule — header bottom still at 71px on mobile. */
        top: 88px;
        width: calc(100% - 24px);
        gap: 16px;
    }

    .pranav-hero-gcc__title {
        font-size: 26px;
        line-height: 35px;
    }

    .pranav-hero-gcc__subtitle {
        font-size: 14px;
    }

    .pranav-hero-gcc__cta {
        min-width: 170px;
        height: 48px;
        font-size: 15px;
    }

    .pranav-hero-gcc__card {
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Tighter inset at this width — cards are ~218px wide, 20px padding wastes ~18% */
    .pranav-hero-gcc__card-info {
        position: relative;
        z-index: 1;
        padding: 0px 0px 33px;
        flex: none;
        text-align: left;
        gap: 6px;
    }

    .pranav-hero-gcc__card-title {
        font-size: 18px;
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        padding-right: 27px;
    }

    .pranav-hero-gcc__card-desc {
        font-size: 13px;
        padding-right: 18px;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }

    /* Photo height trimmed slightly for the reduced card size at this breakpoint */
    .pranav-hero-gcc__card-photo {
        height: 75px;
    }
}


/* ── 18. Responsive — Very small mobile ≤ 360px ──────────────────────────────
   Single-column cards to prevent text cramping on very narrow viewports.

   Layout math:
     bg-wrap  : top=0   h=440  → bottom=440
     arch     : h=60    → arch starts at 380
     padding-top = 380
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {

    .pranav-hero-gcc {
        padding-top: 380px;
    }

    .pranav-hero-gcc__bg-wrap {
        height: 440px;
        left: 10px;
        right: 10px;
    }

    .pranav-hero-gcc__arch {
        height: 60px;
    }

    .pranav-hero-gcc__text {
        /* Same 88px rule — header bottom still at 71px on this breakpoint. */
        top: 88px;
        width: calc(100% - 20px);
        gap: 14px;
    }

    .pranav-hero-gcc__title {
        font-size: 22px;
        line-height: 30px;
    }

    .pranav-hero-gcc__subtitle {
        font-size: 13px;
    }

    .pranav-hero-gcc__cta {
        min-width: 160px;
        font-size: 14px;
    }

    .pranav-hero-gcc__cards {
        padding: 0 16px;
    }

    .pranav-hero-gcc__card {
        flex: 0 0 100%;
        max-width: 280px;
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Single-column cards are ~260px wide — restore readable padding */
    .pranav-hero-gcc__card-info {
        position: relative;
        z-index: 1;
        padding: 3px 8px 38px;
        flex: none;
        text-align: left;
        gap: 8px;
    }

    .pranav-hero-gcc__card-title {
        font-size: 20px;
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }

    .pranav-hero-gcc__card-desc {
        font-size: 13px;
        padding-right: 21px;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
}


/* ── 19. Block editor preview ────────────────────────────────────────────────
   Limit height in the editor so the block doesn't push the editor UI down.
   ────────────────────────────────────────────────────────────────────────── */
.wp-block.acf-pranav-hero-gcc .pranav-hero-gcc {
    min-height: 200px;
}