/* ------------------------------------------------------------------
   Custom styles for the converted site.

   Loaded on every page from includes/header.php, after the theme's own
   stylesheets, so rules here win. Put your own overrides in this file
   rather than editing the theme CSS under assets/themes/.
   ------------------------------------------------------------------ */

/* Property video.
   The original markup used WordPress's MediaElement player, which sizes
   itself with inline styles written by WordPress's JavaScript. Without
   WordPress those styles never arrive and the player overflowed its tab,
   spilling over the footer. A plain HTML5 player scales on its own. */
.xs-video-wrap {
    width: 100%;
    max-width: 360px;      /* portrait clip - keep it phone-shaped */
    margin: 0 0 1rem;
}

.xs-video-wrap video {
    display: block;
    width: 100%;
    height: auto;          /* preserve the clip's own aspect ratio */
    max-height: 70vh;      /* never taller than the screen */
    background: #000;
    border-radius: 4px;
}

/* Landscape clips can use the full column width. */
.xs-video-wrap.is-landscape {
    max-width: 100%;
}

/* The tab holding the video must grow with it rather than clip. */
.block-video-wrap {
    max-width: 100%;
    overflow: visible;
}

/* Safety net: nothing inside a property tab should escape it. */
#property-tab-content img,
#property-tab-content video,
#property-tab-content iframe {
    max-width: 100%;
}

/* Marketing poster shown at the top of a property description.
   Portrait creative, so cap the width or it dominates the column. */
.xs-poster {
    width: 100%;
    max-width: 360px;
    margin: 0 0 1.25rem;
}

.xs-poster img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ==================================================================
   Awards page
   Content comes from data/awards.php; this styles it.
   ================================================================== */

.xs-awards {
    padding: 60px 0 80px;
    color: #f2f2f2;
}

.xs-awards-intro {
    max-width: 720px;
    margin: 0 0 48px;
}

.xs-awards-intro h2 {
    margin: 0 0 10px;
    font-size: 2rem;
    color: #c9a227;                 /* the site's gold */
}

.xs-awards-intro p {
    margin: 0;
    opacity: .8;
}

.xs-award {
    padding: 40px 0 44px;
    border-top: 1px solid rgba(201, 162, 39, .35);
}

.xs-award:first-of-type { border-top: 0; padding-top: 0; }

/* Desktop: details on the left, photographs filling the rest of the width.
   Previously everything stacked at the left and the right half sat empty. */
@media (min-width: 992px) {
    .xs-award {
        display: grid;
        grid-template-columns: minmax(280px, 350px) 1fr;
        gap: 44px;
        align-items: start;
    }

    /* Keep the award details in view while its photos scroll past. */
    .xs-award-head {
        position: sticky;
        top: 110px;
        margin-bottom: 0;
    }
}

.xs-award-head { margin-bottom: 22px; }

.xs-award-title {
    margin: 0 0 8px;
    font-size: 1.55rem;
    line-height: 1.3;
    color: #fff;
}

.xs-award-issuer {
    margin: 0 0 6px;
    color: #c9a227;
    font-weight: 600;
}

.xs-award-year {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    border: 1px solid rgba(201, 162, 39, .5);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}

.xs-award-recipient { margin: 0 0 8px; font-weight: 600; }

.xs-award-note {
    margin: 0;
    opacity: .75;
    font-size: .95rem;
    line-height: 1.65;
}

/* auto-fit rather than auto-fill: empty columns collapse, so the photos
   stretch to use the full width instead of leaving a gap on the right. */
.xs-award-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    justify-items: start;
}

.xs-award-photo {
    display: block;
    position: relative;
    width: 100%;
    /* An award with a single photo would otherwise stretch it across the
       whole column; the cap keeps every tile a sensible size. */
    max-width: 330px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, .08);
    cursor: zoom-in;
}

.xs-award-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .35s ease;
}

.xs-award-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.35), transparent 45%);
    opacity: 0;
    transition: opacity .35s ease;
}

.xs-award-photo:hover img,
.xs-award-photo:focus-visible img { transform: scale(1.05); }
.xs-award-photo:hover::after { opacity: 1; }

/* Older browsers without aspect-ratio still need a height. */
@supports not (aspect-ratio: 3 / 4) {
    .xs-award-photo { height: 260px; }
}

/* ---- opened photo ----
   A grid with place-items:center keeps the photo dead centre whatever its
   shape, and the arrows are positioned against the edges so they take no
   part in the layout. Portrait shots no longer sit off to one side. */
.xs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: clamp(12px, 4vw, 40px);
    background: rgba(0, 0, 0, .95);
}

.xs-lightbox[hidden] { display: none; }

/* The opened photo. One photo at a time, centred, using as much of the
   screen as it can without cropping. */
.xs-lightbox-stage {
    display: grid;
    place-items: center;
    width: 100%;
    max-height: 100%;
}

.xs-lightbox-figure {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 14px;
    min-width: 0;
}

.xs-lightbox-figure img {
    max-width: min(90vw, 1200px);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.xs-lightbox-figure figcaption {
    color: #ddd;
    font-size: .95rem;
    text-align: center;
    max-width: 70ch;
}

/* Kept so the side-by-side view can be switched back on just by putting the
   .xs-peek images back into the markup. */
.xs-peek {
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
    opacity: .45;
    filter: brightness(.7);
    cursor: pointer;
    transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

.xs-peek:hover { opacity: .95; filter: brightness(1); transform: scale(1.03); }
.xs-peek[hidden] { display: none; }

@media (max-width: 900px) {
    .xs-lightbox-figure img { max-width: 94vw; max-height: 78vh; }
}

.xs-lightbox button {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.xs-lightbox button:hover { background: rgba(201, 162, 39, .9); }

.xs-lightbox-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.xs-lightbox-next  { right: 16px; top: 50%; transform: translateY(-50%); }
.xs-lightbox-close { top: 16px;   right: 16px; }

@media (max-width: 600px) {
    .xs-award-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .xs-award-title { font-size: 1.25rem; }
    .xs-lightbox { padding: 12px; }
    .xs-lightbox button { width: 40px; height: 40px; }
}

/* ==================================================================
   Mobile layout fixes
   ================================================================== */

/* Bootstrap's .card-deck carries -15px left/right margins, meant to cancel
   the 15px padding of a .container. The theme drops the property grid into
   full-width Elementor sections that have no such padding, so the row ends
   up 30px wider than its parent and pushes the page 15px sideways on a
   phone. Cancelling the negative margins below the desktop breakpoint fixes
   it; the desktop gutters are left alone. */
@media (max-width: 991.98px) {
    /* Two class selectors, to outrank the theme's own .card-deck .card rule. */
    .listing-view.card-deck,
    #module_properties.card-deck,
    .houzez-all-slider-wrap.card-deck {
        margin-left: 0;
        margin-right: 0;
    }

    .listing-view.card-deck > .item-listing-wrap,
    .houzez-all-slider-wrap.card-deck > .slick-list,
    .houzez-all-slider-wrap.card-deck > .item-listing-wrap {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Below the desktop breakpoint, keep the page itself from scrolling sideways.
   The remaining few pixels come from the Slick and Elementskit carousels,
   whose off-screen slides are already clipped by their own containers but
   still widen the document. No sticky elements exist under this breakpoint,
   so containing the page here is safe. */
@media (max-width: 991.98px) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* Nothing should be able to force the page sideways. */
img,
video,
iframe,
table {
    max-width: 100%;
}

/* ------------------------------------------------------------------
   Team photo on About Us
   ------------------------------------------------------------------ */

/* Farhan Ansari's portrait was set to object-fit: fill in Elementor, which
   stretches the picture to the box instead of cropping it - so it appeared
   squashed next to the other team photos. Matching the settings used for the
   rest of the team. */
/* Elementor writes this as
     .elementor-2393 .elementor-element.elementor-element-bab810a img
   - four classes. The selector below matches that weight and comes later in
   the cascade, so it wins. */
.elementor-2393 .elementor-element.elementor-element-bab810a img {
    /* His photo is already a tight head-and-shoulders shot, so cropping it to
       fill the box (as the other, full-length portraits are) zooms right into
       his face. Fitting the whole picture inside the box instead, on a
       backdrop matching the photo's own, keeps him in proportion. */
    object-fit: contain;
    object-position: center;
    background: #e6e9ec;
}