/* =========================================================================
   UB HERITAGE — Project page: NEW sections
   ------------------------------------------------------------------------
   This file loads AFTER `project.css` (see inc/enqueue.php).
   The old project.css was left untouched — all your tweaks remain safe,
   and this file contains only new / overriding CSS.

   What's inside:
     1) HERO media       — upload / YouTube / mobile swap, no cropping
     2) .pp-cmp          — Completed project image + map hero
     3) .pp-show         — new "overlap" showcase slider (below floor plans)
     4) .pp-ms           — shared tabbed media slider (Gallery + Construction)
    ========================================================================= */


/* =========================================================================
   1) HERO MEDIA — video (upload/YouTube) + image, mobile swap
   -------------------------------------------------------------------------
   project.css had a fixed aspect-ratio on `.pp-hero__media` and object-fit on
   the video. Now the media takes its natural height, so nothing is cropped at
   any width. Scroll-zoom (project.js) still works as before — it only applies
   transforms.
    ========================================================================= */
.pp-hero__media {
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
}

.pp-hero__mediaEl {
    position: relative;
    width: 100%;
    font-size: 0;
    line-height: 0;
}

/* Mobile media comes first in the DOM; hidden by default */
.pp-hero__mediaEl--mobile {
    display: none;
}

/* Slightly higher specificity to beat the global
   `.project-page img { height:100%; object-fit:cover }` rule */
.pp-hero__media .pp-hero__img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: initial;
    display: block;
}

/* ---- .ubh-video wrapper from helpers.php, inside the hero ---- */
.pp-hero__media .ubh-video {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    display: block;
}

.pp-hero__media .ubh-video__native {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: initial;
    display: block;
    background: #000;
}

.pp-hero__media .ubh-video__yt {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pp-hero__media .ubh-video__yt iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform: none;
    min-width: 0;
    min-height: 0;
}


/* =========================================================================
   2) COMPLETED PROJECT HERO — image + map
   -------------------------------------------------------------------------
   Figma (286:7052): do 550x550 square, 40px gap, 1140px block centered.
     both     -> 50 / 50
     one only -> full width (slightly landscape ratio)
   ========================================================================= */
.pp-cmp {
    padding-block: clamp(24px, 3vw, 48px);
}

.pp-cmp__grid {
    display: grid;
    gap: 40px;
    max-width: 1140px;
    margin-inline: auto;
}

.pp-cmp__grid.is-split {
    grid-template-columns: 1fr 1fr;
}

.pp-cmp__grid.is-single {
    grid-template-columns: 1fr;
}

.pp-cmp__cell {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f2f2f2;
}

/* a single cell looks better slightly landscape than square */
.pp-cmp__grid.is-single .pp-cmp__cell {
    aspect-ratio: 16 / 9;
}

.pp-cmp .pp-cmp__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-cmp__cell--map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* only a map LINK provided (no embed) — clickable placeholder */
.pp-cmp__maplink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--pp-cream, #f5f0e7);
    font-family: var(--pp-font-body);
    font-size: 16px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--pp-text, #1a1a1a);
    transition: background .25s ease;
}

.pp-cmp__maplink:hover {
    background: #ece5d8;
}

.pp-cmp__cta {
    text-align: center;
    margin-top: 44px;
}

.pp-cmp__cta .pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0;
    border: 1px solid var(--pp-black, #000);
    border-radius: 50px;
    padding: 14px 28px;
    background: transparent;
    color: var(--pp-black, #000);
    transition: background-color .32s ease, color .32s ease, border-color .32s ease;
}

.pp-cmp__cta .pp-btn:hover {
    background: var(--pp-black, #000);
    color: var(--pp-white, #fff);
}


/* =========================================================================
   3) SHOWCASE SLIDER (.pp-show) — below floor plans
   -------------------------------------------------------------------------
   Left  : heading + paragraph + button, with navigation at the bottom
   Right : slider — each slide has a LARGE main image with a SMALL image
           overlapping at its left-center. Both change together.

   Slides are stacked in a grid (1/1) with crossfade + slight slide.
   This avoids the need for `overflow: hidden`, so the overlapping image
   can extend outside its column and stay fully visible (not clipped).
    ========================================================================= */
.pp-show {
    padding-block: clamp(48px, 6vw, 100px);
    overflow: hidden;
    /* stop horizontal bleed at the section level */
}

/* Section heading — centered like the other section titles.
   Rendered only when filled in ACF (PHP gate). */
.pp-show__sectionTitle {
    margin-bottom: 0;
    /* spacing is now handled by the .pp-show__header wrapper */
}

/* =========================================================================
   3a) SHOWCASE SECTION HEADER — Title + optional Subtitle (above/below)
        + optional paragraph. The whole block is centered at the very top
        of the section. Subtitle position ("above"/"below") comes from ACF.
   ========================================================================= */
.pp-show__header {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 56px);
}

/* About two-thirds of the 48px section title — keeps proper visual weight,
   so it doesn't look like a tiny caption. Stays in the body font
   (deliberately different from the serif-italic title) so the two texts
   complement rather than compete with each other. */
.pp-show__sectionSubtitle {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 2px;
    /* text-transform: uppercase; */
    color: var(--pp-black);
    margin: 0 0 16px;
}

/* when the subtitle sits below the title, spacing flips */
.pp-show__sectionSubtitle--below {
    margin: 18px 0 0;
}

.pp-show__sectionText {
    max-width: 50%;
    margin: 18px auto 0;
}

.pp-show__sectionText p {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    margin: 0 0 8px;
    color: var(--pp-text, #1a1a1a);
}

.pp-show__sectionText p:last-child {
    margin-bottom: 0;
}

.pp-show__grid {
    display: grid;
    grid-template-columns: 1fr 1.55fr;
    gap: 200px;
    align-items: center;
}

.pp-show__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(40px, 8vh, 120px);
    align-self: stretch;
}

/* Copies stack in the SAME grid cell as the slides, so the column height
   always equals the longest copy and the text doesn't jump up/down
   when slides change. */
.pp-show__copies {
    display: grid;
}

.pp-show__copy {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Crossfade applies only in multi-copy mode. A single static copy
   (when a slide has no text of its own) always stays visible. */
.pp-show__copy[data-show-copy] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .7s ease, visibility .7s ease, transform .7s cubic-bezier(.65, 0, .2, 1);
    pointer-events: none;
}

.pp-show__copy[data-show-copy].is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Slide-level eyebrow (e.g. "THE PAUSE") — a recognizable step smaller than
   the main title (48px), following the 1.333 modular-scale ratio
   (48 / 1.333 ≈ 36) for a clear hierarchy: title > slide-subtitle > body. */
.pp-show__subtitle {
    font-family: var(--pp-font-head);
    /* font-style: italic; */
    font-weight: 400;
    font-size: 32px;
    line-height: 60px;
    letter-spacing: 0;
    margin: 0;
    color: var(--pp-black, #000);
}

.pp-show__title {
    font-family: var(--pp-font-head);
    font-style: italic;
    font-weight: 400;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 0;
    margin-bottom: 32px;
    color: var(--pp-black, #000);
}

.pp-show__text p {
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    margin: 0 0 12px;
    color: var(--pp-text, #1a1a1a);
}

.pp-show__text p:last-child {
    margin-bottom: 0;
}

.pp-show__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .5px;
    text-transform: uppercase;
    border: 1px solid var(--pp-black, #000);
    border-radius: 50px;
    padding: 14px 32px;
    background: transparent;
    color: var(--pp-black, #000);
    transition: background-color .32s ease, color .32s ease;
}

.pp-show__btn:hover {
    background: var(--pp-black, #000);
    color: var(--pp-white, #fff);
}

/* ---- navigation (left bottom) ---- */
.pp-show__nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pp-show__arrow {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    width: 110px;
    height: 16px;
    position: relative;
    cursor: pointer;
    color: var(--pp-black, #000);
    transition: opacity .25s ease;
}

.pp-show__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
}

.pp-show__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}

.pp-show__arrow--next::after {
    right: 0;
    transform: translateY(-50%) rotate(-45deg);
}

.pp-show__arrow--prev::after {
    left: 0;
    transform: translateY(-50%) rotate(135deg);
}

.pp-show__arrow:hover {
    opacity: .55;
}

.pp-show__arrow:focus-visible {
    outline: 2px solid var(--pp-gold, #d2ab67);
    outline-offset: 4px;
}

.pp-show__count {
    font-family: var(--pp-font-body);
    font-size: 16px;
    line-height: 1;
    color: var(--pp-text, #1a1a1a);
    min-width: 44px;
    text-align: center;
}

/* ---- slider ---- */
.pp-show__slider {
    position: relative;
    display: grid;
}

.pp-show__slide {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transform: translateX(28px);
    transition: opacity .7s ease, visibility .7s ease, transform .7s cubic-bezier(.65, 0, .2, 1);
    pointer-events: none;
}

.pp-show__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.pp-show__main {
    width: 100%;
}

.pp-show .pp-show__mainImg {
    width: 100%;
    height: auto;
    aspect-ratio: 922 / 700;
    object-fit: cover;
    display: block;
}

/* chhoti image — main image ke left-center par overlap */
.pp-show__over {
    position: absolute;
    left: -14%;
    top: 50%;
    transform: translateY(-50%);
    width: 34%;
    z-index: 2;
}

.pp-show .pp-show__overImg {
    width: 100%;
    height: auto;
    aspect-ratio: 304 / 360;
    object-fit: cover;
    display: block;
}


/* =========================================================================
   4) MEDIA SLIDER (.pp-ms) — used for both Gallery and Construction Update
   -------------------------------------------------------------------------
   One component used in two places. Each item can be an image, uploaded
   video or YouTube; order comes from the backend repeater.
   Tabs are optional: with a single tab the tab bar isn't rendered (in PHP).
   The strip is full-bleed — items take their natural width, fixed height.
   ========================================================================= */
.pp-ms {
    padding-block: clamp(32px, 4vw, 80px);
}

.pp-ms__title {
    margin-bottom: 28px;
}

/* ---- tabs (Interior / Exterior, Jan 2026 / Feb 2026 ...) ---- */
.pp-ms__tabs {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 36px;
    margin-bottom: 36px;
}

.pp-ms__tab {
    background: none;
    border: 0;
    padding: 0 0 4px;
    cursor: pointer;
    font-family: var(--pp-font-head);
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
    color: var(--pp-muted, #7e7e7e);
    border-bottom: 1px solid transparent;
    transition: color .25s ease, border-color .25s ease;
}

.pp-ms__tab:hover {
    color: var(--pp-black, #000);
}

.pp-ms__tab.is-active {
    color: var(--pp-black, #000);
    border-bottom-color: var(--pp-black, #000);
}

.pp-ms__panel[hidden] {
    display: none;
}

/* ---- strip ---- */
.pp-ms__viewport {
    overflow: hidden;
}

.pp-ms__track {
    display: flex;
    gap: 8px;
    width: max-content;
    transition: transform .7s cubic-bezier(.65, 0, .2, 1);
    will-change: transform;
}

.pp-ms__item {
    flex: 0 0 auto;
    margin: 0;
    height: 480px;
    background: #f2f2f2;
    overflow: hidden;
}

/* all three media types take the same height; width follows their ratio */
.pp-ms__item .pp-ms__img,
.pp-ms__item .pp-ms__video,
.pp-ms__item .pp-ms__yt {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    border: 0;
}

.pp-ms__item .pp-ms__img {
    object-fit: cover;
}

.pp-ms__item .pp-ms__video {
    background: #000;
    object-fit: contain;
}

.pp-ms__item .pp-ms__yt {
    aspect-ratio: 16 / 9;
}

/* ---- navigation ---- */
.pp-ms__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 32px;
}

.pp-ms__arrow {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    width: 110px;
    height: 16px;
    position: relative;
    cursor: pointer;
    color: var(--pp-black, #000);
    transition: opacity .25s ease;
}

.pp-ms__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
}

.pp-ms__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}

.pp-ms__arrow--next::after {
    right: 0;
    transform: translateY(-50%) rotate(-45deg);
}

.pp-ms__arrow--prev::after {
    left: 0;
    transform: translateY(-50%) rotate(135deg);
}

.pp-ms__arrow:hover {
    opacity: .55;
}

.pp-ms__arrow:disabled {
    opacity: .28;
    cursor: default;
}

.pp-ms__arrow:focus-visible {
    outline: 2px solid var(--pp-gold, #d2ab67);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    .pp-ms__track,
    .pp-show__slide,
    .pp-show__copy[data-show-copy] {
        transition-duration: .01ms !important;
    }
}


/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1440px) {

    .pp-show__header {
        margin-bottom: clamp(24px, 3.5vw, 44px);
    }

    /* Section Title global CSS is still 48px at this breakpoint —
       so sectionSubtitle also stays at its base size (32px). */

    .pp-show__sectionText {
        max-width: 70%;
    }

    .pp-show__sectionText p {
        font-size: 17px;
        line-height: 26px;
    }

    /* pp-show__title goes 48 -> 40 here, so the subtitle also
       scales 36 -> 30 on the same 1.333 ratio. */
    .pp-show__subtitle {
        font-size: 26px;
        line-height: 48px;
    }

    .pp-show__title {
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 24px;
    }

    .pp-ms__item {
        height: 420px;
    }
}

@media (max-width: 1024px) {

    /* Hero: mobile media does not swap yet (swaps at 768) */
    .pp-cmp__grid {
        gap: 24px;
    }

    .pp-cmp__cta {
        margin-top: 32px;
    }

    /* Showcase: single column — text top, slider below, nav at bottom */
    .pp-show {
        padding-block: 48px;
    }

    .pp-show__header {
        margin-bottom: 48px;
        padding-inline: 24px;
    }

    /* Section Title goes 48 -> 40 here; sectionSubtitle uses the same 0.667
       ratio, scaling 32 -> 26. */
    .pp-show__sectionSubtitle {
        font-size: 20px;
        line-height: 20px;
        letter-spacing: 1.6px;
        margin-bottom: 12px;
    }

    .pp-show__sectionSubtitle--below {
        margin-top: 14px;
    }

    .pp-show__sectionText {
        max-width: 90%;
    }

    .pp-show__sectionText p {
        font-size: 16px;
        line-height: 24px;
    }

    .pp-show__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pp-show__left {
        gap: 24px;
    }

    /* pp-show__title goes 40 -> 32 here; the subtitle follows the 1.333
       ratio, scaling 30 -> 24. */
    .pp-show__subtitle {
        font-size: 20px;
        line-height: 32px;
    }

    .pp-show__title {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .pp-show__text p {
        font-size: 16px;
        line-height: 24px;
    }

    /* pull the overlap image inward so it does not leave the gutter */
    .pp-show__over {
        left: -6%;
        width: 30%;
    }

    .pp-show__arrow {
        width: 80px;
    }

    /* Media slider */
    .pp-ms__tabs {
        gap: 20px;
        margin-bottom: 24px;
    }

    .pp-ms__tab {
        font-size: 20px;
    }

    .pp-ms__item {
        height: 360px;
    }

    .pp-ms__arrow {
        width: 80px;
    }

    .pp-show__slider {
        padding: 0 48px;
    }
}

@media (max-width: 768px) {

    /* ---- Hero mobile media swap ---- */
    .pp-hero__media.has-mobile .pp-hero__mediaEl--mobile {
        display: block;
    }

    .pp-hero__media.has-mobile .pp-hero__mediaEl--desktop {
        display: none;
    }

    /* Completed hero: image and map stacked */
    .pp-cmp__grid.is-split {
        grid-template-columns: 1fr;
    }

    .pp-cmp__grid.is-single .pp-cmp__cell {
        aspect-ratio: 4 / 3;
    }

    .pp-cmp__cta .pp-btn {
        width: 100%;
        font-size: 16px;
    }

    .pp-show__header {
        margin-bottom: 32px;
    }

    /* Section Title goes 40 -> 32 here, sectionSubtitle 32 -> 21. */
    .pp-show__sectionSubtitle {
        font-size: 16px;
        line-height: 16px;
        letter-spacing: 1.3px;
    }

    .pp-show__sectionText p {
        font-size: 15px;
        line-height: 22px;
    }

    .pp-show__over {
        left: -4%;
        width: 32%;
    }

    .pp-ms__title {
        margin-bottom: 20px;
    }

    .pp-ms__item {
        height: 280px;
    }

    .pp-ms__nav {
        gap: 20px;
        margin-top: 24px;
    }

    .pp-show__slider {
        padding: 0 32px;
    }
}

@media (max-width: 600px) {
    .pp-show {
        padding-block: 32px;
    }

    .pp-show__header {
        margin-bottom: 24px;
        padding-inline: 12px;
    }

    /* .pp-show__sectionSubtitle {
        font-size: 18px;
        line-height: 18px;
        letter-spacing: 1.1px;
    } */

    .pp-show__sectionText {
        max-width: 100%;
    }

    .pp-show__sectionText p {
        font-size: 14px;
        line-height: 21px;
    }

    /* pp-show__title is 26px here, subtitle ~20 via the 1.333 ratio */
    .pp-show__subtitle {
        font-size: 18px;
        line-height: 28px;
    }

    .pp-show__title {
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 10px;
    }

    .pp-show__sectionTitle {
        margin-bottom: 0;
    }

    .pp-show__btn {
        width: 100%;
    }

    .pp-show__arrow,
    .pp-ms__arrow {
        width: 60px;
    }

    .pp-ms__item {
        height: 240px;
    }

    .pp-ms__tab {
        font-size: 18px;
    }

    .pp-show__slider {
        padding: 0 24px;
    }
}

@media (max-width: 425px) {

    /* Section Title is 24px here, sectionSubtitle 16px (~0.667 ratio) */
    /* .pp-show__sectionSubtitle {
        font-size: 18px;
        line-height: 18px;
        letter-spacing: .8px;
        margin-bottom: 8px;
    } */

    .pp-show__sectionText p {
        font-size: 13px;
        line-height: 20px;
    }

    /* pp-show__title is 24px here, subtitle 18 via the 1.333 ratio */
    .pp-show__subtitle {
        font-size: 16px;
        line-height: 26px;
    }

    .pp-show__title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 8px;
    }

    .pp-show__over {
        left: -2%;
        width: 34%;
    }

    .pp-ms__item {
        height: 200px;
    }

    .pp-show__arrow,
    .pp-ms__arrow {
        width: 48px;
    }

    .pp-show__slider {
        padding: 0 8px;
    }
}