/* ============================================================================
   Block: pranav-campus-sections — Education / Campus Content Rows

   CSS port of Figma node 665:210 (Frame1597883483) + node 659:24 (Mask group).

   Image shape: SVG clipPath (objectBoundingBox, auto-scales) defined inline in
   template.php. Replaces the earlier border-radius approximation.
   Shape = rounded rectangle with a concave notch at the inner corner:
     — bottom-right notch for image-left rows (.pranav-cs__row--image-left)
     — bottom-left  notch for image-right rows (.pranav-cs__row--image-right)
   The notch exactly matches the 140×140px deco-square (at 320/460 = 69.6% of
   the container), so the white square shows cleanly through the cut-out.

   Icon positioning (Figma node 659:26):
     Figma grid coords: ml-[362px] mt-[362px] in 460×460 space.
     → right = 460 − (362 + 55) = 43 px = 43/460 = 9.35%
     → bottom = same = 9.35%
     The icon is centred on the 140×140 deco-square.

   Deco-square sizing: 140/460 = 30.43% of container → auto-scales at all
   breakpoints without manual overrides.

   Class map:
     .pranav-campus-sections         — section shell
     .pranav-cs__inner               — max-width container (centred, 1280px)
     .pranav-cs__header              — optional section title + subtitle
     .pranav-cs__title               — 36px Clash Display, dark
     .pranav-cs__subtitle            — 18px Clash Grotesk, gray
     .pranav-cs__rows                — flex-col stack, gap 100px
     .pranav-cs__row                 — single image+text row (flex, gap 114px)
     .pranav-cs__row--image-left     — even rows: photo left, text right
     .pranav-cs__row--image-right    — odd rows: text left, photo right
     .pranav-cs__image-col           — 460×460px bounding box
     .pranav-cs__deco-square         — 30.43% white rounded square (z-index 0)
     .pranav-cs__blob                — full-size clip-path container (z-index 1)
     .pranav-cs__image-placeholder   — warm peach fill when no image is set
     .pranav-cs__deco-icon           — icon centred on deco-square (z-index 2)
     .pranav-cs__text-col            — text column (max 545px)
     .pranav-cs__text-header         — category + heading wrapper (gap 10px)
     .pranav-cs__category            — 36px Clash Display, #ff5a3c
     .pranav-cs__heading             — 24px Clash Grotesk, #1e252f
     .pranav-cs__body                — 16px Clash Grotesk, #858585

   Key measurements (Figma 665:210 + 659:24):
     Section bg    : #ffffff
     Padding       : 80px
     Row gap       : 100px (Figma gap-[100px])
     Column gap    : 114px (Figma gap-[114px])
     Image col     : 460×460px square
     Deco square   : 140×140px, white, radius 25px at (320,320) in 460×460 grid
     Icon          : 55×55px at (362,362) in 460×460 grid (centred on deco-square)
     Text col      : width 545px, gap 30px
     Text header   : gap 10px
   ============================================================================ */


/* ── 0. Full-width breakout ─────────────────────────────────────────────────
   Breaks out of .entry-content max-width so the section spans the full viewport.
   Same technique as pranav-testimonial and pranav-talent-services.
   ────────────────────────────────────────────────────────────────────────── */
.entry-content .pranav-campus-sections,
.entry-content .pranav-campus-sections.alignfull {
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
}


/* ── 1. Section shell ────────────────────────────────────────────────────────
   White background. 80px on all sides frames the 1280px inner container.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-campus-sections {
    background-color: #fff5f0;
    padding: 80px;
    box-sizing: border-box;
}


/* ── 2. Inner container ──────────────────────────────────────────────────────
   1280px max-width centred.
   Content total: image(460) + gap(114) + text(545) = 1119px — fits within 1280.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__inner {
    max-width: 1280px;
    margin: 0 auto;
}


/* ── 3. Optional section header ──────────────────────────────────────────────
   Rendered above the row stack when section_title or section_subtitle is set.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__header {
    text-align: center;
    margin-bottom: 60px;
}

.pranav-cs__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-cs__subtitle {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #858585;
    margin: 0 auto;
    max-width: 680px;
}


/* ── 4. Row stack ────────────────────────────────────────────────────────────
   100px gap between rows — Figma: gap-[100px].
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__rows {
    display: flex;
    flex-direction: column;
    gap: 100px;
}


/* ── 5. Single row ───────────────────────────────────────────────────────────
   Flex, 114px gap, vertically centred — Figma: gap-[114px], items-center.
   --image-right uses row-reverse so the DOM stays image→text for a11y while
   the image visually appears on the right.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__row {
    display: flex;
    align-items: center;
    gap: 114px;
}

.pranav-cs__row--image-right {
    flex-direction: row-reverse;
    /*
     * In row-reverse the default justify-content:flex-start packs items toward
     * the RIGHT, leaving dead space on the LEFT before the text column.
     * flex-end reverses the packing so the text column sits flush to the LEFT
     * edge of the inner container — matching the Figma layout.
     */
    justify-content: flex-end;
}


/* ── 6. Image column bounding box ────────────────────────────────────────────
   460×460px square. Three z-layers inside:
     z=0  .pranav-cs__deco-square  white rounded square, behind blob
     z=1  .pranav-cs__blob         SVG-clipped photo
     z=2  .pranav-cs__deco-icon    icon badge, in front of blob
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__image-col {
    position: relative;
    width: 460px;
    height: 460px;
    flex-shrink: 0;
}


/* ── 7. White decorative square ──────────────────────────────────────────────
   Dimensions: 140/460 = 30.43% of the image column — scales proportionally
   at every breakpoint without manual overrides.
   Positioned at the inner corner (toward the text column):
     image-left  rows → bottom-right
     image-right rows → bottom-left
   z-index:0 puts it behind the blob; the clip-path notch exposes it.
   No box-shadow — Figma node 659:25 has none.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__deco-square {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28.43%;   /* 140 / 460 */
    height: 28.43%;
    background-color: #ffffff;
    border-radius: 25px;
    z-index: 0;
}

.pranav-cs__row--image-right .pranav-cs__deco-square {
    right: auto;
    left: 0;
}


/* ── 8. SVG clip-path blob container ─────────────────────────────────────────
   Fills the full image column (inset: 0). The clip-path is supplied via the
   CSS custom property --cs-clip-left / --cs-clip-right set as an inline style
   on the <section> element in template.php. Both reference an inline SVG
   <clipPath> with clipPathUnits="objectBoundingBox" — coordinates are in 0–1
   space so the shape scales automatically with any container size.

   Shape: rounded rectangle with a concave notch at the inner corner:
     objectBoundingBox path key points (derived from Figma node 659:24):
       outer corner radius : 15 / 460 = 0.033
       notch start (x = y) : 320 / 460 = 0.696  ← deco-square top-left
       notch convex corner : 305 / 460 = 0.663  ← notch start − 15 px
       notch concave point : 345 / 460 = 0.750  ← notch start + 25 px inner r
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__row--image-left .pranav-cs__blob {
    clip-path: var(--cs-clip-left);
}

.pranav-cs__row--image-right .pranav-cs__blob {
    clip-path: var(--cs-clip-right);
}

.pranav-cs__blob {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.pranav-cs__blob img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


/* ── 9. Image placeholder ────────────────────────────────────────────────────
   Warm peach fill when no image is uploaded — preserves the blob shape in
   the editor before real images are added.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #feb7a0;
}


/* ── 10. Decorative icon badge ───────────────────────────────────────────────
   Figma node 659:26: positioned at (362, 362) in the 460×460 grid, size 55×55.
     right  = 460 − (362 + 55) = 43 px = 43 / 460 = 9.35%
     bottom = same = 9.35%
   This centres the icon on the 140×140 deco-square:
     deco-square centre at (390, 390); icon centre at (362+27.5, 362+27.5) = (389.5, 389.5) ✓
   Percentage values mean the icon stays centred on the deco-square at all
   container sizes (both % dimensions reference the same square container).
   z-index:2 places it in front of the clipped blob image.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__deco-icon {
    position: absolute;
    bottom: 9.35%;   /* 43 / 460 */
    right:  9.35%;
    width:  11.96%;  /* 55 / 460 */
    height: 11.96%;
    object-fit: contain;
    z-index: 2;
}

.pranav-cs__row--image-right .pranav-cs__deco-icon {
    right: auto;
    left: 9.35%;
}


/* ── 11. Text column ─────────────────────────────────────────────────────────
   flex:1 with no max-width so the column fills all remaining space after the
   image column (460px) and gap (114px), keeping both left and right edges of
   each row flush with the inner container on every viewport width.
   gap:30px between text-header and body — Figma: gap-[30px].
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__text-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* ── 12. Text header — category + heading ────────────────────────────────────
   10px gap — Figma: gap-[10px].
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__text-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ── 13. Category label ──────────────────────────────────────────────────────
   Coral, 36px Clash Display.
   Figma: font-['Clash_Display_Variable:Regular'] text-[#ff5a3c] text-[36px]
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__category {
    font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.2;
    color: #ff5a3c;
    margin: 0;
}


/* ── 14. Heading ─────────────────────────────────────────────────────────────
   Dark, 24px Clash Grotesk.
   Figma: font-['Clash_Grotesk_Variable:Regular'] text-[#1e252f] text-[24px]
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__heading {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.35;
    color: #1e252f;
    margin: 0;
}


/* ── 15. Body copy ───────────────────────────────────────────────────────────
   Gray, 16px Clash Grotesk, 1.65 line-height.
   Figma: font-['Clash_Grotesk_Variable:Regular'] text-[#858585] text-[16px]
   ────────────────────────────────────────────────────────────────────────── */
.pranav-cs__body {
    font-family: 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: #858585;
}

.pranav-cs__body p {
    margin: 0;
}

.pranav-cs__body p + p {
    margin-top: 16px;
}


/* ── 16. Scroll-reveal animation ─────────────────────────────────────────────
   script.js IntersectionObserver adds .is-visible. --delay staggers rows.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-campus-sections .is-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--delay, 0ms);
}

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


/* ============================================================================
   RESPONSIVE OVERRIDES

   The SVG clip-path (objectBoundingBox) and %-based deco-square/icon scale
   automatically with the container. Manual breakpoint overrides are only
   needed for image-col size, font sizes, gaps, and padding.

   Breakpoints match pranav-talent-services for cross-block consistency.
   ============================================================================ */


/* ── Wide tablet (≤ 1200px) ─────────────────────────────────────────────────
   Reduce section padding and column gap. Shrink image column.
   Clip-path, deco-square (30.43%), and icon (11.96%) scale automatically.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {

    .pranav-campus-sections {
        padding: 80px 60px;
    }

    .pranav-cs__row {
        gap: 60px;
    }

    .pranav-cs__image-col {
        width: 400px;
        height: 400px;
    }
}


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

    .pranav-campus-sections {
        padding: 60px 40px;
    }

    .pranav-cs__rows {
        gap: 80px;
    }

    .pranav-cs__row {
        gap: 40px;
    }

    .pranav-cs__image-col {
        width: 320px;
        height: 320px;
    }

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

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

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

    .pranav-cs__title {
        font-size: 30px;
    }
}


/* ── Mobile (≤ 768px) ───────────────────────────────────────────────────────
   Collapse to a single column. Image sits above text in every row.
   Image column stays SQUARE via aspect-ratio:1 so %-based deco-square and
   icon remain correctly proportioned.
   Both row variants use the left-notch clip-path for a consistent look.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .pranav-campus-sections {
        padding: 60px 20px;
    }

    .pranav-cs__rows {
        gap: 60px;
    }

    /* Stack image above text for both row variants */
    .pranav-cs__row,
    .pranav-cs__row--image-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    /*
     * Square image column — width:100% fills the row, max-width caps at 360px,
     * aspect-ratio:1 keeps it square so %-based deco-square and icon are correct.
     */
    .pranav-cs__image-col {
        width: 100%;
        max-width: 360px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /*
     * On mobile both row types visually stack the same way, so reset the
     * image-right deco positions to bottom-right (consistent corner in
     * the stacked layout) and switch to the left-notch clip-path.
     */
    .pranav-cs__row--image-right .pranav-cs__deco-square {
        right: 0;
        left: auto;
    }

    .pranav-cs__row--image-right .pranav-cs__deco-icon {
        right: 9.35%;
        left: auto;
    }

    .pranav-cs__row--image-right .pranav-cs__blob {
        clip-path: var(--cs-clip-left);
    }

    /* Text column: reduce gap on mobile */
    .pranav-cs__text-col {
        gap: 20px;
    }

    .pranav-cs__category {
        font-size: 24px;
    }

    .pranav-cs__heading {
        font-size: 18px;
    }

    .pranav-cs__body {
        font-size: 14px;
        line-height: 1.6;
    }

    .pranav-cs__title {
        font-size: 26px;
    }

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


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

    .pranav-campus-sections {
        padding: 48px 16px;
    }

    .pranav-cs__rows {
        gap: 48px;
    }

    .pranav-cs__image-col {
        max-width: 300px;
    }

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

    .pranav-cs__heading {
        font-size: 16px;
    }

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


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

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