/**
 * Infinite Concierge — Frontend Styles
 *
 * Brand tokens (from infinite.lawebdev.co):
 *   --infc-bg:      #FAFAFA
 *   --infc-text:    #1A1A1A
 *   --infc-muted:   #555555
 *   --infc-accent:  #B8925A
 *   Headings: "Libre Caslon Display" (uppercase)
 *   Body:     "Inter" 300
 *   Corners:  no rounded corners
 */

:root {
    --infc-bg:     #FAFAFA;
    --infc-card:   #FFFFFF;
    --infc-text:   #1A1A1A;
    --infc-muted:  #555555;
    --infc-accent: #B8925A;
    --infc-border: #E5E5E5;
    --infc-dark:   #111111;
    --infc-font-head: "Libre Caslon Display", "Playfair Display", Georgia, serif;
    --infc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* -------- Resets & Base -------- */
.infc-grid-wrap,
.infc-slider-wrap,
.infc-single {
    font-family: var(--infc-font-body);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: var(--infc-muted);
    background: var(--infc-bg);
    box-sizing: border-box;
}

.infc-grid-wrap *,
.infc-slider-wrap *,
.infc-single * {
    box-sizing: border-box;
}

.infc-grid-wrap h1, .infc-grid-wrap h2, .infc-grid-wrap h3,
.infc-slider-wrap h1, .infc-slider-wrap h2, .infc-slider-wrap h3,
.infc-single h1, .infc-single h2, .infc-single h3 {
    font-family: var(--infc-font-head);
    color: var(--infc-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    font-weight: 400;
}

/* =========================================================
   GRID WIDGET
   ========================================================= */
.infc-grid-wrap {
    padding: 30px 0;
    /* Defensive: never let the grid wrap clip its own contents. */
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* If a sibling Elementor section uses a transform / negative margin to
       overlap the grid, raising the grid's stacking context lifts it above
       the overlapping section so its content can't be visually covered. */
    position: relative !important;
    z-index: 2 !important;
}
.infc-grid {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Walk up the typical Elementor wrapper classes and force them to never
   clip the grid widget's content. Uses :has() to scope only to wrappers
   that contain our grid; modern browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+) all support this. iOS Safari supports it from 15.4. */
.elementor-widget-container:has(.infc-grid-wrap),
.elementor-widget:has(.infc-grid-wrap),
.elementor-element:has(.infc-grid-wrap),
.elementor-column:has(.infc-grid-wrap),
.elementor-section:has(.infc-grid-wrap),
.elementor-container:has(.infc-grid-wrap),
.e-con:has(.infc-grid-wrap),
.e-con-inner:has(.infc-grid-wrap) {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    contain: none !important;
    transform: none !important;
    clip-path: none !important;
    mask: none !important;
}

/* Mobile-only nuclear option: walk EVERY ancestor element in the DOM that
   contains the grid wrap and strip any height/overflow constraint. This
   only runs on mobile (where the bug happens) and only for elements
   containing the grid (so it doesn't affect anything else on the site).
   Catches cases where the clip is on a body/html/main/theme wrapper
   we don't know the class name of. */
@media (max-width: 767px) {
    *:has(.infc-grid-wrap),
    *:has(> .infc-grid-wrap),
    *:has(> * > .infc-grid-wrap),
    *:has(> * > * > .infc-grid-wrap),
    *:has(> * > * > * > .infc-grid-wrap) {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        contain: none !important;
        /* v1.4.1: also strip mask, scroll-snap, aspect-ratio, and
           transform on all ancestors — these are the remaining CSS
           properties that can cause bottom-edge clipping behavior. */
        mask: none !important;
        mask-image: none !important;
        -webkit-mask: none !important;
        -webkit-mask-image: none !important;
        scroll-snap-type: none !important;
        scroll-snap-align: none !important;
        aspect-ratio: auto !important;
        transform: none !important;
        clip-path: none !important;
    }

    /* Belt-and-suspenders: force the grid itself and every card to never
       be clipped or hidden by any inherited rule. */
    .infc-grid,
    .infc-grid > .infc-card,
    .infc-grid > .infc-card * {
        overflow: visible !important;
        max-height: none !important;
        clip: auto !important;
        clip-path: none !important;
    }

    /* v1.4.2: switch the grid from CSS Grid to flex-column on mobile.
       Eliminates any chance of grid-row sizing weirdness clipping the
       last card. Each card stacks naturally with auto height; the
       last-child gets generous breathing room to absolutely guarantee
       no neighbor rule cuts it short. */
    .infc-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        grid-template-columns: none !important;
    }
    .infc-grid > .infc-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }
    .infc-grid > .infc-card > .infc-card-link {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }
    .infc-grid > .infc-card .infc-card-body {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
    /* Final card gets 80px of clear space below to defeat any "last
       descendant" rule (`:last-child`, `:last-of-type`, `nth-last-child`)
       that a theme or builder may use to style or clip the bottom. */
    .infc-grid > .infc-card:last-child {
        margin-bottom: 80px !important;
    }
}

/* Filters — full-width bar: Area | Beds | Baths | Sort | Apply */
.infc-filters {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr auto;
    gap: 24px;
    align-items: end;
    padding: 24px 28px;
    background: #FFFFFF;
    border: 1px solid var(--infc-border);
    margin-bottom: 40px;
    width: 100%;
}

.infc-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.infc-filter-label {
    font-family: var(--infc-font-head);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--infc-text);
}

/* Filter selects (Area / Beds / Baths / Sort) */
.infc-area-select,
.infc-beds-select,
.infc-baths-select,
.infc-sort-select {
    border: 1px solid var(--infc-border);
    background: #FFFFFF;
    color: var(--infc-text);
    padding: 10px 14px;
    font-family: var(--infc-font-body);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.03em;
    height: auto;
    min-height: 42px;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231A1A1A' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    width: 100%;
}

.infc-grid-wrap .infc-apply-btn {
    background: var(--infc-text) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 13px 32px;
    font-family: var(--infc-font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.infc-grid-wrap .infc-apply-btn:hover,
.infc-grid-wrap .infc-apply-btn:focus,
.infc-grid-wrap .infc-apply-btn:active,
.infc-grid-wrap .infc-apply-btn:focus-visible {
    background: var(--infc-accent) !important;
    color: #FFFFFF !important;
    outline: none;
    box-shadow: none !important;
}

/* Grid */
.infc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

/* Card — every row reserves its slot so card heights + field baselines stay
   consistent across the grid regardless of which fields are filled in. */
.infc-card {
    background: #FFFFFF;
    display: flex;
}
.infc-card-link,
.infc-card-link:hover,
.infc-card-link:focus,
.infc-card-link:active,
.infc-card-link:visited {
    text-decoration: none !important;
}
.infc-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.infc-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
/* Some themes add underlines via border-bottom or box-shadow on descendants. */
.infc-card-link *,
.infc-card-link *:hover,
.infc-card-link *:focus {
    text-decoration: none !important;
}
.infc-card-media {
    position: relative;
    width: 100%;
    padding-top: 66%;
    background-color: #EDEDED;
    background-size: cover;
    background-position: center;
}
.infc-card-body {
    padding: 20px 22px 24px;
    border: 1px solid var(--infc-border);
    border-top: none;
    background: #FFFFFF;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* Reserved slot for the Featured tag — height matches a rendered tag + its
   margin so non-featured cards don't collapse the space. */
.infc-card-tag-slot {
    min-height: 26px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}
.infc-card-tag {
    display: inline-block;
    font-family: var(--infc-font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--infc-accent);
}
.infc-card-title {
    font-size: 14px;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
    line-height: 1.4;
    min-height: calc(14px * 1.4);
}
.infc-card-location {
    font-size: 13px;
    color: var(--infc-muted);
    margin-bottom: 14px;
    min-height: calc(13px * 1.4);
}
/* Stats row is pushed to the bottom of the card so the border-top line
   always sits at the same visual height across every card. */
.infc-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-top: 14px;
    border-top: 1px solid var(--infc-border);
    font-size: 12px;
    color: var(--infc-muted);
    letter-spacing: 0.04em;
    margin-top: auto;
    min-height: calc(14px + 14px + 1px);
}
.infc-card-stats span { position: relative; padding: 0 12px; }
.infc-card-stats span:first-child { padding-left: 0; }
.infc-card-stats span + span::before {
    content: "·";
    position: absolute;
    left: -2px;
    color: var(--infc-muted);
}

.infc-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--infc-muted);
    font-size: 14px;
}

/* Load More — locked to brand palette against theme/Elementor button bleed. */
.infc-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.infc-grid-wrap .infc-load-more {
    background: transparent !important;
    color: var(--infc-text) !important;
    border: 1px solid var(--infc-text) !important;
    padding: 14px 42px;
    font-family: var(--infc-font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.infc-grid-wrap .infc-load-more:hover,
.infc-grid-wrap .infc-load-more:focus,
.infc-grid-wrap .infc-load-more:active,
.infc-grid-wrap .infc-load-more:focus-visible {
    background: var(--infc-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--infc-accent) !important;
    outline: none;
    box-shadow: none !important;
}
.infc-grid-wrap .infc-load-more.is-loading { opacity: 0.6; pointer-events: none; }

/* -------- Mobile pagination (replaces Load More on small screens) -------- */

/* Hidden on desktop; JS shows it on mobile when totalPages > 1. */
.infc-mobile-pagination {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 50px;
}

@media (max-width: 768px) {
    .infc-grid-wrap .infc-load-more-wrap { display: none !important; }
    .infc-mobile-pagination { display: flex; }
}

.infc-mobile-pagination.is-loading { opacity: 0.6; pointer-events: none; }

.infc-mobile-page-numbers {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.infc-grid-wrap .infc-mobile-page-arrow,
.infc-grid-wrap .infc-mobile-page-num {
    background: transparent !important;
    color: var(--infc-text) !important;
    border: 1px solid var(--infc-text) !important;
    padding: 10px 14px;
    min-width: 40px;
    font-family: var(--infc-font-body);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.infc-grid-wrap .infc-mobile-page-num.is-active,
.infc-grid-wrap .infc-mobile-page-arrow:hover,
.infc-grid-wrap .infc-mobile-page-num:hover,
.infc-grid-wrap .infc-mobile-page-arrow:focus,
.infc-grid-wrap .infc-mobile-page-num:focus,
.infc-grid-wrap .infc-mobile-page-arrow:focus-visible,
.infc-grid-wrap .infc-mobile-page-num:focus-visible {
    background: var(--infc-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--infc-accent) !important;
    outline: none;
}
.infc-grid-wrap .infc-mobile-page-arrow[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive Grid */
@media (max-width: 1300px) {
    .infc-filters { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; }
    .infc-apply-btn { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 1100px) {
    .infc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .infc-filters { grid-template-columns: 1fr 1fr; gap: 20px; }
    .infc-apply-btn { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
    .infc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .infc-filters { grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; }
    .infc-apply-btn { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .infc-filters { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .infc-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   FEATURED SLIDER WIDGET
   ========================================================= */
.infc-slider-wrap {
    padding: 40px 0;
    position: relative;
}

.infc-slider { position: relative; padding-bottom: 50px; }

.infc-slide {
    display: block;
    text-decoration: none !important;
    color: inherit;
    background: #FFFFFF;
    border: 1px solid var(--infc-border);
    height: 100%;
}
/* Pin no-underline on every descendant — some themes force underlines on
   links and any text inside them; this kills it across title, location,
   stats, amenities. */
.infc-slide,
.infc-slide *,
.infc-slide:hover,
.infc-slide:hover * {
    text-decoration: none !important;
}
.infc-slide-media {
    width: 100%;
    padding-top: 66%;
    background-color: #EDEDED;
    background-size: cover;
    background-position: center;
}
.infc-slide-body {
    padding: 22px 26px 26px;
}
.infc-slide-title {
    font-size: 14px;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    line-height: 1.4;
}
.infc-slide-location {
    font-size: 13px;
    color: var(--infc-muted);
    margin-bottom: 14px;
}
.infc-slide-stats {
    display: flex;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--infc-border);
    font-size: 12px;
    color: var(--infc-muted);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.infc-slide-stats span { position: relative; padding: 0 12px; }
.infc-slide-stats span:first-child { padding-left: 0; }
.infc-slide-stats span + span::before {
    content: "·";
    position: absolute;
    left: -2px;
}
.infc-slide-amenities {
    font-size: 12px;
    color: var(--infc-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Swiper nav & pagination override */
.infc-slider .swiper-button-prev,
.infc-slider .swiper-button-next {
    color: var(--infc-text);
    background: #FFFFFF;
    width: 44px;
    height: 44px;
    border: 1px solid var(--infc-border);
    margin-top: -32px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.infc-slider .swiper-button-prev::after,
.infc-slider .swiper-button-next::after {
    font-size: 14px;
    font-weight: 500;
}
.infc-slider .swiper-button-prev:hover,
.infc-slider .swiper-button-next:hover {
    background: var(--infc-accent);
    color: #FFFFFF;
    border-color: var(--infc-accent);
}
.infc-slider .swiper-pagination-bullet {
    background: var(--infc-muted);
    opacity: 0.4;
    width: 8px;
    height: 8px;
    border-radius: 0;
    transition: opacity 0.2s, background 0.2s;
}
.infc-slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--infc-accent);
}

/* =========================================================
   AREA ARCHIVE
   ========================================================= */
.infc-archive {
    background: var(--infc-bg);
    color: var(--infc-muted);
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 24px 80px;
}
.infc-archive-header {
    text-align: center;
    margin-bottom: 50px;
}
.infc-archive-eyebrow {
    font-family: var(--infc-font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--infc-accent);
    margin: 0 0 14px;
}
.infc-archive-title {
    font-family: var(--infc-font-head);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(28px, 4vw, 44px);
    color: var(--infc-text);
    margin: 0 0 14px;
}
.infc-archive-desc {
    max-width: 720px;
    margin: 0 auto;
    font-size: 14px;
    color: var(--infc-muted);
    line-height: 1.7;
}

/* =========================================================
   SINGLE PROPERTY TEMPLATE
   ========================================================= */
.infc-single {
    background: var(--infc-bg);
    color: var(--infc-muted);
}

.infc-single-hero {
    height: 75vh;
    background-color: #222;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 56px 56px;
    color: #FFFFFF;
}
.infc-single-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* 50% dark overlay */
}
.infc-single-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: left;
}
/* Specificity raised to beat the generic ".infc-single h1" heading color. */
.infc-single .infc-single-hero .infc-single-title {
    color: #FFFFFF;
    font-family: var(--infc-font-head);
    font-size: clamp(32px, 5.5vw, 64px);
    letter-spacing: 0.05em;
    margin: 0 0 10px;
    text-transform: uppercase;
    line-height: 1.05;
    text-align: left;
}
.infc-single .infc-single-hero .infc-single-location {
    color: #FFFFFF;
    font-family: var(--infc-font-body);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.9;
    margin: 0;
    text-align: left;
}

/* Single-property content container — full-width with 120/56 padding.
   The stats bar is intentionally a SIBLING of this container (not a child),
   so it can extend edge-to-edge flush against the hero. */
.infc-single-body {
    max-width: none;
    width: 100%;
    margin: 0;
    /* Desktop: 120px top/bottom, 56px left/right (original spec).
       Pinned with !important — some themes strip plugin padding inside
       their content wrapper. The mobile breakpoint below tightens this
       to 60/20 on small screens. */
    padding: 120px 56px !important;
    box-sizing: border-box !important;
}
/* Mobile: tighter spacing per spec — 60px top/bottom, 20px left/right. */
@media (max-width: 768px) {
    .infc-single-body { padding: 60px 20px !important; }
}

/* Back button — sits above the stats bar. */
.infc-single-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--infc-font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--infc-text);
    text-decoration: none;
    padding: 12px 22px;
    border: 1px solid var(--infc-border);
    background: #FFFFFF;
    margin-bottom: 40px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.infc-single-back:hover,
.infc-single-back:focus {
    background: var(--infc-accent);
    border-color: var(--infc-accent);
    color: #FFFFFF;
    text-decoration: none;
}
.infc-single-back-arrow {
    font-size: 14px;
    line-height: 1;
}

.infc-single-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    background: var(--infc-dark);
    color: #FFFFFF;
    width: 100%;
    margin: 0;
    padding: 0 56px;
}
.infc-single-stat {
    padding: 30px 24px;
    border-right: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    flex: 1 1 0;
    min-width: 160px;
}
.infc-single-stat:first-child { padding-left: 0; }
.infc-single-stat:last-child  { padding-right: 0; border-right: none; }
.infc-stat-num {
    display: block;
    font-family: var(--infc-font-head);
    font-size: 28px;
    color: var(--infc-accent);
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}
.infc-stat-unit {
    font-family: var(--infc-font-body);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.75;
    margin-left: 2px;
}
.infc-stat-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.8;
}

/* =========================================================
   SCROLLING GALLERY STRIP (sits directly below the stats bar)
   ========================================================= */
.infc-gallery-strip {
    position: relative;
    width: 100%;
    padding: 0;
    background: var(--infc-bg);
    overflow: hidden;
}

.infc-strip-track {
    --strip-visible: 5;
    --strip-gap: 6px;
    display: flex;
    gap: var(--strip-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.infc-strip-track::-webkit-scrollbar { display: none; }

.infc-strip-item {
    flex: 0 0 calc((100vw - (var(--strip-visible) - 1) * var(--strip-gap)) / var(--strip-visible));
    height: 280px;
    overflow: hidden;
    cursor: zoom-in;
    display: block;
}
.infc-strip-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.infc-strip-item:hover img { transform: scale(1.05); }

.infc-strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(17, 17, 17, 0.75) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    width: 48px;
    height: 72px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    box-shadow: none !important;
}
.infc-strip-arrow:hover,
.infc-strip-arrow:focus {
    background: var(--infc-accent) !important;
    color: #FFFFFF !important;
    outline: none;
}
.infc-strip-prev { left: 0; }
.infc-strip-next { right: 0; }

/* =========================================================
   INTRO (two-column map + description)
   Right column (description) drives the row height; left
   column (map) stretches to match via CSS Grid default.
   ========================================================= */
.infc-single-intro {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 40px;
    margin-bottom: 80px;
}

.infc-single-map {
    position: relative;
    width: 100%;
    min-height: 420px;
    background: #E5E5E5;
    overflow: hidden;
}
.infc-single-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.infc-single-intro-text {
    display: block;
}

.infc-single-info-title {
    font-family: var(--infc-font-head);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--infc-text);
    margin: 0 0 20px !important;
}

.infc-single-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--infc-muted);
}
.infc-single-desc p { margin: 0 0 16px; }
.infc-single-desc p:last-child { margin-bottom: 0; }

.infc-single-section {
    margin-bottom: 60px;
}
.infc-section-title {
    font-size: 22px;
    letter-spacing: 0.08em;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--infc-border);
}

.infc-amenity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 24px;
}
.infc-amenity-list li {
    font-size: 14px;
    color: var(--infc-text);
    padding-left: 18px;
    position: relative;
}
.infc-amenity-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 1px;
    background: var(--infc-accent);
}

/* Base gallery-link reset (shared by strip items and the lightbox) */
.infc-gallery-link { display: block; overflow: hidden; }

.infc-videos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.infc-video { background: #000; position: relative; width: 100%; padding-top: 56.25%; }
.infc-video video,
.infc-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 1200px) {
    .infc-strip-track { --strip-visible: 4; }
}
@media (max-width: 1100px) {
    .infc-single-intro { gap: 32px; margin-bottom: 60px; }
    .infc-single-map { min-height: 380px; }
    .infc-strip-item { height: 240px; }
}
@media (max-width: 1000px) {
    .infc-single-stat { padding: 26px 18px; }
}
@media (max-width: 900px) {
    /* Keep the stats bar as a single 4-column row on tablet/mobile —
       previously these wrapped to a 2x2 grid, but per spec we want all
       four stats on one row at every size below 900px. min-width: 0 lets
       items shrink below their content width; flex: 1 1 0 distributes the
       row evenly. Borders stay vertical between cells. */
    .infc-single-stats {
        padding: 0 16px;
        flex-wrap: nowrap;
    }
    .infc-single-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 22px 6px;
        border-right: 1px solid rgba(255,255,255,0.1);
        border-bottom: none;
    }
    .infc-single-stat:first-child { padding-left: 6px; }
    .infc-single-stat:last-child  { padding-right: 6px; border-right: none; }
    .infc-stat-num   { font-size: 22px; margin-bottom: 4px; }
    .infc-stat-label { font-size: 9px; letter-spacing: 0.1em; line-height: 1.2; }
    .infc-amenity-list { grid-template-columns: repeat(2, 1fr); }
    .infc-videos { grid-template-columns: 1fr; }
    .infc-strip-track { --strip-visible: 3; }
    .infc-strip-item { height: 220px; }
    .infc-single-intro { grid-template-columns: 1fr; gap: 24px; }
    .infc-single-map { min-height: 320px; height: 320px; }
}
@media (max-width: 520px) {
    .infc-single-stats { padding: 0 10px; }
    .infc-single-stat { padding: 18px 4px; }
    .infc-single-stat:first-child { padding-left: 4px; }
    .infc-single-stat:last-child  { padding-right: 4px; }
    .infc-stat-num   { font-size: 18px; }
    .infc-stat-label { font-size: 9px; letter-spacing: 0.08em; }
    .infc-amenity-list { grid-template-columns: 1fr; }
    .infc-single-hero { padding: 0 24px 28px; }
    .infc-single-info-title { font-size: 32px; }
    .infc-strip-track { --strip-visible: 2; --strip-gap: 4px; }
    .infc-strip-item { height: 180px; }
    .infc-strip-arrow { width: 44px; height: 60px; }
    .infc-single-map { min-height: 260px; height: 260px; }
}

/* Ultra-narrow phones (iPhone SE, older Androids ~360–400px wide) — slim
   a few paddings that still feel cramped at this width. (Body padding is
   already 60/20 across all sizes, so it doesn't need an override here.) */
@media (max-width: 400px) {
    .infc-single-hero { padding: 0 20px 24px; }
    .infc-single-stats { padding: 0 6px; }
    .infc-single-stat { padding: 14px 3px; }
    .infc-single-stat:first-child { padding-left: 3px; }
    .infc-single-stat:last-child  { padding-right: 3px; }
    .infc-stat-num   { font-size: 16px; }
    .infc-stat-label { font-size: 8px; letter-spacing: 0.06em; }
    .infc-single-quickstats { gap: 10px 18px; padding: 14px 0; margin: 0 0 18px; }
    .infc-quickstat { gap: 8px; }
    .infc-strip-arrow { width: 44px; height: 56px; }
    .infc-strip-item { height: 160px; }
    .infc-booking-panel { padding: 40px 18px 28px; }
    .infc-booking-title { font-size: 22px; }
    .infc-booking-property { font-size: 11px; letter-spacing: 0.18em; }
}

/* =========================================================
   GALLERY LIGHTBOX
   ========================================================= */
.infc-gallery-link { cursor: zoom-in; }

html.infc-lb-locked, html.infc-lb-locked body { overflow: hidden; }

.infc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 40px 80px;
    box-sizing: border-box;
}
.infc-lightbox.is-open { display: flex; }

.infc-lb-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}
.infc-lb-img {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/*
 * Nav + close buttons. Many themes force a brand color on `button` elements
 * (Astra/Hello/Elementor often apply pink/red). Lock color to white with high
 * specificity + !important so the icons always render white on the dark
 * overlay. `appearance: none` strips iOS/Safari default button styling.
 */
.infc-lightbox .infc-lb-close,
.infc-lightbox .infc-lb-prev,
.infc-lightbox .infc-lb-next {
    position: absolute;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #FFFFFF !important;
    cursor: pointer;
    font-family: var(--infc-font-body);
    line-height: 1;
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.infc-lightbox .infc-lb-close:hover,
.infc-lightbox .infc-lb-prev:hover,
.infc-lightbox .infc-lb-next:hover,
.infc-lightbox .infc-lb-close:focus,
.infc-lightbox .infc-lb-prev:focus,
.infc-lightbox .infc-lb-next:focus {
    background: var(--infc-accent) !important;
    border-color: var(--infc-accent) !important;
    color: #FFFFFF !important;
    outline: none;
}
.infc-lb-close {
    top: 24px;
    right: 32px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    padding: 0;
}
.infc-lb-prev,
.infc-lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    font-size: 22px;
    padding: 0;
}
.infc-lb-prev { left: 24px; }
.infc-lb-next { right: 24px; }

.infc-lb-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF;
    font-family: var(--infc-font-body);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.8;
}

@media (max-width: 700px) {
    .infc-lightbox { padding: 16px 8px 56px; }
    .infc-lb-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 22px; }
    .infc-lb-prev,
    .infc-lb-next { width: 44px; height: 44px; font-size: 18px; }
    .infc-lb-prev { left: 8px; }
    .infc-lb-next { right: 8px; }
    .infc-lb-img { max-height: calc(100vh - 120px); }
}

/* -------- Booking Inquiry (single property) -------- */

/* Button sits at the bottom of the right-column description, with 20px of
   breathing room above it (per spec). Self-starts so it hugs the left edge
   of the text column instead of stretching full width. */
.infc-single .infc-booking-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 32px;
    background: var(--infc-text) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-family: var(--infc-font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    align-self: flex-start;
}
.infc-single .infc-booking-btn:hover,
.infc-single .infc-booking-btn:focus,
.infc-single .infc-booking-btn:focus-visible {
    background: var(--infc-accent) !important;
    color: #FFFFFF !important;
    outline: none;
}

/* Modal overlay */
.infc-booking-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 100000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    overflow-y: auto;
}
.infc-booking-modal.is-open { display: flex; }
html.infc-booking-locked,
html.infc-booking-locked body { overflow: hidden; }

/* Modal panel */
.infc-booking-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--infc-bg);
    padding: 56px 56px 48px;
    font-family: var(--infc-font-body);
    color: var(--infc-text);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    /* Belt-and-suspenders: nothing inside the modal panel ever overflows
       its right edge — protects against form inputs (especially iOS date
       inputs) blowing past the panel on narrow viewports. */
    overflow-x: hidden;
    box-sizing: border-box;
}

.infc-booking-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: transparent !important;
    color: var(--infc-text) !important;
    border: none !important;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.infc-booking-close:hover,
.infc-booking-close:focus,
.infc-booking-close:focus-visible {
    color: var(--infc-accent) !important;
    background: transparent !important;
    outline: none;
}

.infc-booking-title {
    font-family: var(--infc-font-head);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--infc-text);
    margin: 0 0 15px;
}

.infc-booking-property {
    margin: 0 0 28px;
    font-family: var(--infc-font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--infc-accent);
}

.infc-booking-form { display: block; }

.infc-booking-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.infc-booking-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.infc-booking-row .infc-booking-field { margin-bottom: 0; }
.infc-booking-field-full { margin-bottom: 16px; }

.infc-booking-field > span {
    font-family: var(--infc-font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--infc-muted);
}

.infc-booking-field input,
.infc-booking-field textarea {
    font-family: var(--infc-font-body);
    font-size: 14px;
    font-weight: 300;
    color: var(--infc-text);
    background: #FFFFFF;
    border: 1px solid var(--infc-border);
    padding: 12px 14px;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}

/* High-specificity bulletproofing — iOS Safari computes a content-based
   min-width on `input[type="date"]` (MM/DD/YYYY placeholder + native
   calendar icon) that can blow past the parent. We pin width, max-width,
   min-width, and box-sizing on every input type AND on the row/label
   wrappers so nothing in the form chain can ever overflow the panel.
   Selector chained .infc-booking-modal → .infc-booking-form → field → input
   to outrank any theme rule of the same property. */
.infc-booking-modal .infc-booking-form,
.infc-booking-modal .infc-booking-row,
.infc-booking-modal .infc-booking-field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.infc-booking-modal .infc-booking-field input,
.infc-booking-modal .infc-booking-field input[type="text"],
.infc-booking-modal .infc-booking-field input[type="email"],
.infc-booking-modal .infc-booking-field input[type="tel"],
.infc-booking-modal .infc-booking-field input[type="date"],
.infc-booking-modal .infc-booking-field textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    /* Strip iOS native button/picker styling that can carry an implicit
       min-width baked into webkit's default UA stylesheet. */
    -webkit-appearance: none !important;
            appearance: none !important;
    /* Re-enable the calendar icon on date inputs (which webkit-appearance:
       none would otherwise suppress on iOS). */
}
.infc-booking-modal .infc-booking-field input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}
.infc-booking-field textarea { resize: vertical; min-height: 120px; }
.infc-booking-field input:focus,
.infc-booking-field textarea:focus {
    outline: none;
    border-color: var(--infc-accent);
}

.infc-booking-status {
    min-height: 20px;
    margin: 4px 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--infc-muted);
}
.infc-booking-status.is-error   { color: #B22222; }
.infc-booking-status.is-success { color: #2E7D32; }

.infc-booking-submit {
    display: inline-block;
    padding: 14px 30px !important;
    background: var(--infc-text) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-family: var(--infc-font-body) !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.infc-booking-submit:hover,
.infc-booking-submit:focus,
.infc-booking-submit:focus-visible {
    background: var(--infc-accent) !important;
    color: #FFFFFF !important;
    outline: none;
}
.infc-booking-submit.is-loading { opacity: 0.6; pointer-events: none; }

@media (max-width: 700px) {
    .infc-booking-panel { padding: 48px 24px 32px; }
    .infc-booking-title { font-size: 26px; }
    .infc-booking-row { grid-template-columns: 1fr; gap: 0; }
    .infc-booking-row .infc-booking-field { margin-bottom: 16px; }
}

/* -------- Single property: quick-stats row (icons) -------- */

/* Sits between the property title and description in the right-column body.
   Icon + value + label in a horizontal flex row, brand-accent icon, with a
   thin top + bottom rule to anchor it inside the body. */
.infc-single-quickstats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 36px;
    align-items: center;
    margin: 0 0 24px;
    padding: 18px 0;
    border-top: 1px solid var(--infc-border);
    border-bottom: 1px solid var(--infc-border);
}
.infc-quickstat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--infc-font-body);
    line-height: 1;
}
.infc-quickstat-icon {
    width: 26px;
    height: 26px;
    color: var(--infc-accent);
    flex-shrink: 0;
}
.infc-quickstat-value {
    font-size: 18px;
    font-weight: 400;
    color: var(--infc-text);
    letter-spacing: 0.02em;
}
.infc-quickstat-label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--infc-muted);
}

@media (max-width: 520px) {
    .infc-single-quickstats { gap: 12px 24px; }
    .infc-quickstat-icon { width: 22px; height: 22px; }
    .infc-quickstat-value { font-size: 16px; }
    .infc-quickstat-label { font-size: 10px; letter-spacing: 0.16em; }
}

/* -------- Single property: multi-column bullet lists in the body -------- */

/* The post body (the_content) often contains UL/OL lists of features. CSS
   columns flow them into 2 or 3 columns automatically based on the available
   width — narrow viewports collapse to one column on their own. */
.infc-single-desc ul,
.infc-single-desc ol {
    columns: 240px;
    column-gap: 32px;
    padding-left: 1.25em;
    /* 15px above each list, 10 additional pixels of breathing room below
       (≈ default ~16px + 10 → ~25px) so lists feel separated from the
       paragraphs that follow. */
    margin-top: 15px;
    margin-bottom: 25px;
}
.infc-single-desc li {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 6px;
}