/**
* Theme Name: Spaciaz Child
* Description: This is a child theme of Spaciaz, generated by Merlin WP.
* Author: <a href="https://wpopal.com/">Opalthemes</a>
* Template: spaciaz
* Version: 1.0.0
*/

/* ==========================================================================
   KP Smart Homes — client customizations
   Parent theme auto-enqueues this file after spaciaz/style.css
   (see spaciaz/inc/class-main.php → child_scripts()), so plain rules win.
   ========================================================================== */

/* --- Homepage hero: remove the floating "Get Your Free Quote" blob ------- */
/* The widget is Spaciaz's custom button-mousemove (see                      */
/* spaciaz/inc/elementor/widgets/button-mousemove.php → get_name()).         */
/* Scoped to .home so other moving buttons elsewhere on the site survive.   */
body.home .elementor-widget-spaciaz-button-mousemove {
    display: none;
}

/* --- Homepage hero: fill the viewport on initial load --------------------- */
/* Make the first top-level Elementor container (the hero) at least as tall  */
/* as the visible viewport, so the next section ("Shaping the world…") is    */
/* below the fold and only appears when the user scrolls.                    */
/* svh = small viewport height: stable on mobile (doesn't jump when the URL  */
/* bar shows/hides). vh kept as a fallback for older browsers.               */
/* IMPORTANT: scope to #content. The site header is also rendered as its    */
/* own .elementor wrapper inside <header id="masthead"> with class          */
/* .header-absolute, and its first .e-con.e-parent would otherwise match    */
/* this rule too — turning the absolute-positioned header into a 100vh     */
/* overlay that covers the page.                                             */
body.home #content .elementor > .e-con.e-parent:first-child,
body.home #content .elementor > .elementor-section.elementor-top-section:first-child {
    min-height: 100vh;
    min-height: 100svh;
}

/* Cluster heading + description vertically centered in the now-tall hero,  */
/* otherwise the inner flex layout (originally space-between when the       */
/* section was content-sized) pushes them to opposite edges.                */
body.home #content .elementor > .e-con.e-parent:first-child,
body.home #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    justify-content: center;
}


/* --- Homepage "About Us" section: tame the curved-top on mobile ---------- */
/* The desktop radius is part of the design but on a ~390px viewport it eats */
/* horizontal space at the top edge and clips the breadcrumb pill           */
/* ("ABOUT US · ABOUT" was rendering as "OUT US · AB"). Keep a softer round */
/* on mobile.                                                                */
@media (max-width: 767px) {
    body.home .elementor-element-acf798e {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }

    /* Hide the absolutely-positioned decorative blue spacer that sits      */
    /* between the hero and the About section. Reads as an intentional      */
    /* accent on desktop but overlaps the breadcrumb pill on mobile.        */
    body.home .elementor-element-48aa26d {
        display: none;
    }

    /* Breathing room above the "ABOUT US · ABOUT" pill. Without the blue  */
    /* spacer, the pill sits right against the curved top edge of the      */
    /* section. Add inner top padding on the section container itself.     */
    body.home .elementor-element-acf798e {
        padding-top: 48px;
    }
}

/* --- Homepage "Embracing a perfect life" section ------------------------- */
/* Section .elementor-element-41a13cc contains, in DOM order:                */
/*   .elementor-element-2e1175e  — "ABOUT LIVINGSTON PARK · …" scrolling pill */
/*   .elementor-element-273c572  — "Embracing a perfect life" heading         */
/*   .elementor-element-0ebeecc  — Learn More button                          */
/*   .elementor-element-14f2c0d  — Spaciaz iconboxs-tab widget (image+4 cols) */
/*                                                                            */
/* The parent Spaciaz widget renders the image at top-right (50% width via   */
/* .iconbox-content { justify-content: end; }) leaving the top-LEFT half     */
/* empty, then the 4 text columns full-width below. The intended design (per */
/* a clean screenshot from the client) puts the heading widgets on the empty */
/* top-left, image on top-right, columns at the bottom — achieved by pulling */
/* the iconbox widget UP under the heading widgets with a negative margin    */
/* so its empty top-left half sits behind them.                              */
/*                                                                            */
/* Implementation: stack widgets in normal flow, constrain heading widgets   */
/* to the left half of the section, then pull the iconbox up so the image    */
/* lines up with the heading row.                                            */
@media (min-width: 1025px) {
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner {
        position: relative;
    }

    /* Pin the heading-block widgets to the left half, leaving room for the
       image on the right. Each widget keeps its own vertical rhythm. */
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner > .elementor-element-2e1175e,
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner > .elementor-element-273c572,
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner > .elementor-element-0ebeecc {
        max-width: 46%;
        position: relative;
        z-index: 2;
    }

    /* Hoist the iconbox widget so its right-half image overlaps the heading
       row. The negative margin equals roughly the combined height of the
       three heading widgets above; flex margin-top of the iconbox details
       below remains untouched, so the 4 columns still appear at the bottom. */
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner > .elementor-element-14f2c0d {
        margin-top: -360px;
        position: relative;
        z-index: 1;
    }

    /* Keep the empty left-half of the iconbox-tab-content from blocking
       clicks on the heading + button widgets that now sit visually on top. */
    body.home .elementor-element-41a13cc .iconbox-tab-content {
        pointer-events: none;
    }
    body.home .elementor-element-41a13cc .iconbox-tab-content .iconbox-tab-item.active {
        pointer-events: auto;
    }
    /* Details (4 columns) still need to be clickable for the tab switch. */
    body.home .elementor-element-41a13cc .iconbox-details-wrap {
        pointer-events: auto;
    }
}

/* Clamp the heading so it never spills past the 46% width constraint. */
body.home .elementor-element.elementor-element-41a13cc .elementor-element-273c572 .elementor-heading-title {
    font-size: clamp(2rem, 3.2vw, 3rem) !important;
    line-height: 1.1 !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    max-width: 100%;
}

/* On tablet and below let everything stack vertically with no overlap. */
@media (max-width: 1024px) {
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner > .elementor-element-2e1175e,
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner > .elementor-element-273c572,
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner > .elementor-element-0ebeecc {
        max-width: 100%;
    }
    body.home .elementor-element.elementor-element-41a13cc > .e-con-inner > .elementor-element-14f2c0d {
        margin-top: 0;
    }
    body.home .elementor-element.elementor-element-41a13cc .elementor-element-273c572 .elementor-heading-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    }
}


/* ==========================================================================
   Site-wide animations: fade-in only
   The Spaciaz parent theme animates scroll-in elements with translate/scale
   via .opal-move-{up,down,left,right} and .opal-scale-up classes (defined in
   spaciaz/assets/css/base/elementor.css). Per client direction, replace all
   directional movement with a pure opacity fade. The Intersection Observer
   trigger that adds the animating class is untouched, so the fade still
   fires on scroll into view.
   We only need to redefine the keyframes by name — last definition wins
   and the .opal-* selectors keep referencing them.
   ========================================================================== */

@-webkit-keyframes opalMoveUp {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}
@keyframes opalMoveUp {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}

@-webkit-keyframes opalMoveDown {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}
@keyframes opalMoveDown {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}

@-webkit-keyframes opalMoveLeft {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}
@keyframes opalMoveLeft {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}

@-webkit-keyframes opalMoveRight {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}
@keyframes opalMoveRight {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}

@-webkit-keyframes opalScaleUp {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}
@keyframes opalScaleUp {
    0%   { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}

/* ==========================================================================
   Spaciaz "slide-scrolling" pills: keep them, but render statically
   (Reinstated so the section labels — "NEW RELEASED", "ABOUT LIVINGSTON
   PARK" etc. — show up after the homepage content swap.)
   The widget renders its items 3x for marquee looping; we kill the
   animation, reset the wrapper transform, and hide the duplicate copies +
   the trailing separator dot so each pill shows just its first item.
   ========================================================================== */
.elementor-widget-spaciaz-slide-scrolling .elementor-scrolling-inner {
    animation: none !important;
}
.elementor-widget-spaciaz-slide-scrolling .elementor-scrolling-wrapper {
    transform: none !important;
}
.elementor-widget-spaciaz-slide-scrolling .elementor-scrolling-inner:not(:first-child) {
    display: none !important;
}
.elementor-widget-spaciaz-slide-scrolling .elementor-scrolling-inner .elementor-scrolling-item:not(:first-child) {
    display: none !important;
}

/* ==========================================================================
   Custom label pills (.kpsh-pill / .kpsh-pill-solid)
   Replacement for the deleted Spaciaz scrolling pills. Apply to any
   Elementor Heading widget via Advanced → CSS Classes.
   - .kpsh-pill        outlined, border auto-matches the text color
                       (uses currentColor) so Elementor's text-color
                       control re-tints the whole pill.
   - .kpsh-pill-solid  filled background. Override the background-color
                       per-widget by adding a CSS variable in the widget's
                       Advanced → Custom CSS:
                           selector { --kpsh-pill-bg: #d9f25c; }
                       (or just override .elementor-heading-title background
                       directly in Custom CSS).
   Both variants size to their content (no full-width stretch) and respect
   Elementor's text-align controls.
   ========================================================================== */
.elementor-widget-heading.kpsh-pill .elementor-heading-title,
.elementor-widget-heading.kpsh-pill-solid .elementor-heading-title {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 100%;
}

.elementor-widget-heading.kpsh-pill .elementor-heading-title {
    border: 1px solid currentColor;
    background: transparent;
}

.elementor-widget-heading.kpsh-pill-solid .elementor-heading-title {
    border: 1px solid transparent;
    background: var(--kpsh-pill-bg, #1a1a1a);
    color: var(--kpsh-pill-color, #ffffff);
}

/* On narrow screens, allow long pill labels to wrap rather than overflow. */
@media (max-width: 480px) {
    .elementor-widget-heading.kpsh-pill .elementor-heading-title,
    .elementor-widget-heading.kpsh-pill-solid .elementor-heading-title {
        white-space: normal;
        font-size: 12px;
        padding: 7px 16px;
    }
}

/* ==========================================================================
   Leadership / Chairman's message — typography for the custom-built section
   (added via tools/add-about-leadership.php; container has marker class
   .elementor-element-1319b47). Defaults from Elementor were too small for
   this featured section — bump them up.
   ========================================================================== */

/* Shape: flat top + flat bottom on the main section, then a "tab" that    */
/* hangs DOWN from the bottom-left, overlapping into the next section. The */
/* tab is an absolutely-positioned ::after pseudo-element with the same    */
/* dark background — visually identical to the section "stepping down" on  */
/* the left without any layout gap on the right.                           */
.elementor-element-1319b47 {
    position: relative;
    /* overflow must be visible so the ::after tab can extend below the    */
    /* section's bounding box and overlap the next section.                */
    overflow: visible;
    border-radius: 0;
}

.elementor-element-1319b47::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;                       /* starts at the section's bottom edge */
    width: 280px;
    height: 80px;
    background: #1a1a1a;             /* match the section bg color */
    border-radius: 0 0 32px 0;       /* round only the bottom-right; bottom-left stays flat */
    z-index: 2;                      /* sit on top of the next section */
    pointer-events: none;
}

@media (max-width: 767px) {
    /* The hanging tab looks awkward at narrow widths — drop it and give    */
    /* the main section a simple rounded bottom-left corner instead.       */
    .elementor-element-1319b47::after {
        display: none;
    }
    .elementor-element-1319b47 {
        border-bottom-left-radius: 24px;
        overflow: hidden;
    }
}

/* ==========================================================================
   Livingston Park (id 6344) + unit pages (Carissa 6345 / Antonia 6346 /
   Athena 6347 / Calypso 6348) — typography + spacing scaffold polish.

   The pages were built via tools/create-livingston-page.php and
   tools/create-unit-pages.php as plain heading + text-editor widgets
   inside containers. Without explicit per-widget typography, headings
   render as the theme default which feels like flat "strips of text."
   These rules give the scaffold real hierarchy until proper Elementor
   styling is layered on later.
   ========================================================================== */

body.page-id-6344,
body.page-id-6345,
body.page-id-6346,
body.page-id-6347,
body.page-id-6348 {
    /* Page-level baseline */
}

/* Livingston Park hero — full-bleed image bg, centered serif headline,    */
/* matches the original site's hero feel. The overlay color/opacity comes  */
/* from JSON, but typography + alignment is driven from here.              */
.kpsh-livingston-hero {
    text-align: center;
    /* Force flex centering — Elementor's flex_justify_content/align_items */
    /* settings in JSON were applied to .e-con-inner, leaving content       */
    /* flowing top-aligned in the outer container. Pin both layers.        */
    justify-content: center !important;
    align-items: center !important;
}
.kpsh-livingston-hero .e-con-inner {
    justify-content: center !important;
    align-items: center !important;
}
.kpsh-livingston-hero .elementor-widget-heading,
.kpsh-livingston-hero .elementor-widget-heading .elementor-widget-container {
    text-align: center;
    width: 100%;
}

/* Hide the theme's page-title bar (the small "Livingston Park" title +    */
/* "Home · Livingston Park" breadcrumb + spacer that the Spaciaz theme     */
/* injects above page content via Elementor element 67488f4). The hero    */
/* IS our title — no need for chrome above it on these pages.             */
body.page-id-6344 .elementor-element-67488f4,
body.page-id-6345 .elementor-element-67488f4,
body.page-id-6346 .elementor-element-67488f4,
body.page-id-6347 .elementor-element-67488f4,
body.page-id-6348 .elementor-element-67488f4 {
    display: none !important;
}

/* Kill the white strip behind the absolute header. The actual cause was  */
/* top padding on the page/content wrappers — pushing the hero down and   */
/* exposing the body bg above it. Zero out the padding + keep wrappers   */
/* transparent so the hero sits flush at top:0 of the viewport with the  */
/* absolute header floating over its top edge.                            */
/* (Earlier I also forced body bg dark, which made dark heading text on  */
/* the sections-without-bg invisible — DO NOT do that.)                  */
body.page-id-6344 #page,
body.page-id-6344 #content,
body.page-id-6344 #main,
body.page-id-6344 .site-content,
body.page-id-6345 #page,
body.page-id-6345 #content,
body.page-id-6345 #main,
body.page-id-6345 .site-content,
body.page-id-6346 #page,
body.page-id-6346 #content,
body.page-id-6346 #main,
body.page-id-6346 .site-content,
body.page-id-6347 #page,
body.page-id-6347 #content,
body.page-id-6347 #main,
body.page-id-6347 .site-content,
body.page-id-6348 #page,
body.page-id-6348 #content,
body.page-id-6348 #main,
body.page-id-6348 .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.page-id-6344 #masthead,
body.page-id-6345 #masthead,
body.page-id-6346 #masthead,
body.page-id-6347 #masthead,
body.page-id-6348 #masthead {
    background: transparent !important;
}

/* "LIVINGSTON PARK" — serif, very large, white. */
body.page-id-6344 .kpsh-livingston-hero h1.elementor-heading-title {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(48px, 9vw, 140px);
    line-height: 1.0;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

/* Hero "Coming Soon" pill — keep a kpsh-pill outlined look. */
body.page-id-6344 .kpsh-livingston-hero .kpsh-pill .elementor-heading-title {
    color: #ffffff;
    border-color: #ffffff;
}

/* Unit page hero h1 — same dramatic display sizing (no serif override). */
body.page-id-6345 .kpsh-unit-hero h1.elementor-heading-title,
body.page-id-6346 .kpsh-unit-hero h1.elementor-heading-title,
body.page-id-6347 .kpsh-unit-hero h1.elementor-heading-title,
body.page-id-6348 .kpsh-unit-hero h1.elementor-heading-title {
    font-size: clamp(56px, 10vw, 144px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}


/* Section h2 headings — large display style. */
body.page-id-6344 h2.elementor-heading-title,
body.page-id-6345 h2.elementor-heading-title,
body.page-id-6346 h2.elementor-heading-title,
body.page-id-6347 h2.elementor-heading-title,
body.page-id-6348 h2.elementor-heading-title {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 18ch;
}

/* h3 / h4 sub-headings — readable but not display-scale. */
body.page-id-6344 h3.elementor-heading-title,
body.page-id-6345 h3.elementor-heading-title,
body.page-id-6346 h3.elementor-heading-title,
body.page-id-6347 h3.elementor-heading-title,
body.page-id-6348 h3.elementor-heading-title {
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.3;
}
body.page-id-6344 h4.elementor-heading-title,
body.page-id-6345 h4.elementor-heading-title,
body.page-id-6346 h4.elementor-heading-title,
body.page-id-6347 h4.elementor-heading-title,
body.page-id-6348 h4.elementor-heading-title {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.4;
}

/* Body copy — bigger and more breathable. */
body.page-id-6344 .elementor-widget-text-editor p,
body.page-id-6345 .elementor-widget-text-editor p,
body.page-id-6346 .elementor-widget-text-editor p,
body.page-id-6347 .elementor-widget-text-editor p,
body.page-id-6348 .elementor-widget-text-editor p {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 16px;
    max-width: 70ch;
}

/* Accent stripe under each h2 — gives sections visual edge so they      */
/* don't read as undecorated text strips.                                */
body.page-id-6344 h2.elementor-heading-title::after,
body.page-id-6345 h2.elementor-heading-title::after,
body.page-id-6346 h2.elementor-heading-title::after,
body.page-id-6347 h2.elementor-heading-title::after,
body.page-id-6348 h2.elementor-heading-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 16px;
    background: #c79b6b;
}

/* Mobile shrink */
@media (max-width: 767px) {
    body.page-id-6344 .kpsh-livingston-hero h1.elementor-heading-title,
    body.page-id-6345 .kpsh-unit-hero h1.elementor-heading-title,
    body.page-id-6346 .kpsh-unit-hero h1.elementor-heading-title,
    body.page-id-6347 .kpsh-unit-hero h1.elementor-heading-title,
    body.page-id-6348 .kpsh-unit-hero h1.elementor-heading-title {
        font-size: clamp(40px, 13vw, 72px);
    }
    body.page-id-6344 h2.elementor-heading-title,
    body.page-id-6345 h2.elementor-heading-title,
    body.page-id-6346 h2.elementor-heading-title,
    body.page-id-6347 h2.elementor-heading-title,
    body.page-id-6348 h2.elementor-heading-title {
        font-size: clamp(28px, 7vw, 40px);
    }
}

/* --- Placeholder image rein-in (Livingston Park + unit pages) ----------  */
/* Image widgets that still point at Elementor's default placeholder.png   */
/* are rendered as a SMALL text-style "image slot" indicator instead of    */
/* a giant gray block. We hide the actual placeholder <img> entirely and  */
/* swap a tiny dashed text-block in via the widget container's ::before.  */
/* As soon as a real image is uploaded, src no longer contains            */
/* "placeholder" → both rules stop matching → real image renders normally.*/
body.page-id-6344 .elementor-widget-image img[src*="placeholder"],
body.page-id-6345 .elementor-widget-image img[src*="placeholder"],
body.page-id-6346 .elementor-widget-image img[src*="placeholder"],
body.page-id-6347 .elementor-widget-image img[src*="placeholder"],
body.page-id-6348 .elementor-widget-image img[src*="placeholder"] {
    display: none;
}
body.page-id-6344 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container,
body.page-id-6345 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container,
body.page-id-6346 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container,
body.page-id-6347 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container,
body.page-id-6348 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container {
    min-height: 0;
}
body.page-id-6344 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container::before,
body.page-id-6345 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container::before,
body.page-id-6346 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container::before,
body.page-id-6347 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container::before,
body.page-id-6348 .elementor-widget-image:has(img[src*="placeholder"]) .elementor-widget-container::before {
    content: "Image placeholder — upload in Elementor";
    display: block;
    padding: 16px 20px;
    background: #faf8f3;
    border: 1px dashed #c79b6b;
    border-radius: 8px;
    color: #b08961;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Center the unit-page hero content (matches the Livingston Park hero    */
/* centering — same flex-on-inner pattern.) */
.kpsh-unit-hero,
.kpsh-unit-hero .e-con-inner {
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
}
.kpsh-unit-hero .elementor-widget-heading .elementor-heading-title,
.kpsh-unit-hero .elementor-widget-heading .elementor-widget-container {
    text-align: center;
}

/* Gallery placeholders — applies to ALL image-gallery widgets on the unit */
/* pages (key-views banner strip, floor plans, main gallery). Each tile   */
/* renders as a small dashed "Image" placeholder of consistent ratio      */
/* rather than rendering placeholder.png at full size. As soon as a tile  */
/* gets a real Media Library image, the rule stops matching for that tile.*/
body.page-id-6345 .elementor-widget-image-gallery .gallery-icon,
body.page-id-6346 .elementor-widget-image-gallery .gallery-icon,
body.page-id-6347 .elementor-widget-image-gallery .gallery-icon,
body.page-id-6348 .elementor-widget-image-gallery .gallery-icon {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
}
body.page-id-6345 .elementor-widget-image-gallery img[src*="placeholder"],
body.page-id-6346 .elementor-widget-image-gallery img[src*="placeholder"],
body.page-id-6347 .elementor-widget-image-gallery img[src*="placeholder"],
body.page-id-6348 .elementor-widget-image-gallery img[src*="placeholder"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    visibility: hidden;
}
body.page-id-6345 .elementor-widget-image-gallery .gallery-icon:has(img[src*="placeholder"]),
body.page-id-6346 .elementor-widget-image-gallery .gallery-icon:has(img[src*="placeholder"]),
body.page-id-6347 .elementor-widget-image-gallery .gallery-icon:has(img[src*="placeholder"]),
body.page-id-6348 .elementor-widget-image-gallery .gallery-icon:has(img[src*="placeholder"]) {
    background: #faf8f3;
    border: 1px dashed #c79b6b;
    border-radius: 8px;
}
body.page-id-6345 .elementor-widget-image-gallery .gallery-icon:has(img[src*="placeholder"])::after,
body.page-id-6346 .elementor-widget-image-gallery .gallery-icon:has(img[src*="placeholder"])::after,
body.page-id-6347 .elementor-widget-image-gallery .gallery-icon:has(img[src*="placeholder"])::after,
body.page-id-6348 .elementor-widget-image-gallery .gallery-icon:has(img[src*="placeholder"])::after {
    content: "Image";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b08961;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* Key-views banner strip: full-bleed 3-up row, no rounded corners on the  */
/* tiles (it's a banner, not a grid card).                                */
.kpsh-unit-keyviews .elementor-widget-image-gallery .gallery-icon {
    aspect-ratio: 16 / 10;
    border-radius: 0 !important;
}

/* Floor-plan tiles: taller portrait-ish ratio for plan drawings.         */
.kpsh-unit-floorplan .elementor-widget-image-gallery .gallery-icon {
    aspect-ratio: 3 / 4;
}

/* "Chairman's message" — big serif heading (h2 inside the section). */
.elementor-element-1319b47 h2.elementor-heading-title {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.15;
}

/* "Mr. Kaushal Patel" — name (h6, NOT the pill which is also h6). */
.elementor-element-1319b47 .elementor-widget-heading:not(.kpsh-pill) h6.elementor-heading-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

/* Bio paragraph — bigger, more breathable. */
.elementor-element-1319b47 .elementor-widget-text-editor,
.elementor-element-1319b47 .elementor-widget-text-editor p {
    font-size: 18px;
    line-height: 1.7;
}

/* On mobile, scale a touch tighter so it reads well. */
@media (max-width: 767px) {
    .elementor-element-1319b47 h2.elementor-heading-title {
        font-size: clamp(28px, 7vw, 40px);
    }
    .elementor-element-1319b47 .elementor-widget-text-editor,
    .elementor-element-1319b47 .elementor-widget-text-editor p {
        font-size: 16px;
    }
}

/* ==========================================================================
   "Homes for Every Lifestyle" — unit options grid (.kpsh-units)
   Standalone HTML-widget component. Drop the matching markup into an
   Elementor HTML widget on any page (typically the Livingston Park page).
   The whole component is namespaced under .kpsh-units / .kpsh-unit-card
   so it won't collide with parent-theme rules.
   Override the accent color per-instance with:  selector { --kpsh-accent: #...; }
   ========================================================================== */
.kpsh-units {
    --kpsh-accent: #c8e040;            /* lime accent: dot, badge bg */
    --kpsh-text: #131313;
    --kpsh-muted: #6b6b6b;
    --kpsh-border: #ececec;
    --kpsh-card-radius: 14px;

    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 24px;
    color: var(--kpsh-text);
    font-family: inherit;
}
.kpsh-units *,
.kpsh-units *::before,
.kpsh-units *::after { box-sizing: border-box; }

.kpsh-units__head {
    margin-bottom: 40px;
    max-width: 640px;
}

.kpsh-units__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kpsh-accent);
    margin-bottom: 18px;
}

.kpsh-units__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kpsh-accent);
    flex: 0 0 auto;
}

.kpsh-units__title {
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
    color: var(--kpsh-text);
}

.kpsh-units__intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--kpsh-muted);
    margin: 0;
    max-width: 520px;
}

.kpsh-units__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

@media (max-width: 1024px) {
    .kpsh-units__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .kpsh-units__grid { grid-template-columns: 1fr; }
}

/* --- Card --- */
.kpsh-unit-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--kpsh-border);
    border-radius: var(--kpsh-card-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.kpsh-unit-card:focus-visible {
    outline: 2px solid var(--kpsh-accent);
    outline-offset: 2px;
}

.kpsh-unit-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f3f3f3;
    overflow: hidden;
}
.kpsh-unit-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Yellow circular badge that overlaps the image's bottom-left edge. */
.kpsh-unit-card__badge {
    position: absolute;
    left: 18px;
    bottom: -22px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--kpsh-accent);
    color: #131313;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    z-index: 2;
}
.kpsh-unit-card__badge svg { display: block; }

/* --- Card body --- */
.kpsh-unit-card__body {
    padding: 32px 22px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.kpsh-unit-card__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kpsh-unit-card__name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--kpsh-text);
}
.kpsh-unit-card__type {
    font-size: 12px;
    font-weight: 500;
    color: var(--kpsh-muted);
    padding: 4px 12px;
    border: 1px solid var(--kpsh-border);
    border-radius: 999px;
    white-space: nowrap;
}

.kpsh-unit-card__desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--kpsh-muted);
    margin: 0;
}

.kpsh-unit-card__meta {
    display: flex;
    gap: 28px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--kpsh-border);
}

.kpsh-unit-card__metric {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kpsh-muted);
}
.kpsh-unit-card__metric svg {
    color: var(--kpsh-text);
    flex: 0 0 auto;
}
