/* ==========================================================================
   Ferholix — FH Homes listing detail page (fhhomes/listing.php). Loaded on top
   of ferholix.css. Airbnb-style gallery, sticky booking card, lightbox.
   Mobile-first; 375 / 390px.
   ========================================================================== */

/* ------------------------------------------------------------ Head ------- */
.listing__head { padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 2.25rem)); }

.breadcrumb {
    display: flex; align-items: center; gap: .5rem;
    color: var(--cream-dim); font-size: .9rem; margin-bottom: .75rem;
}
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__current { color: var(--cream-dim); }

.listing__title { font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 .6rem; }
.listing__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
    color: var(--cream-dim); margin-bottom: 1.5rem;
}
.listing__loc { display: inline-flex; align-items: center; gap: .4rem; }
.listing__loc svg, .listing__specs svg { color: var(--gold); }
.listing__specs {
    display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0;
}
.listing__specs li { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------------------------------------------------------- Gallery ------ */
.gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    border-radius: var(--radius);
    overflow: hidden;
}
.gallery__tile {
    padding: 0; border: 0; cursor: pointer; background: var(--ink-2);
    aspect-ratio: 3 / 2; overflow: hidden; display: block;
}
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.gallery__tile:hover img { transform: scale(1.04); }
/* On mobile only the lead photo shows; the 4 small ones appear from tablet up. */
.gallery__tile:not(.gallery__tile--lead) { display: none; }

.gallery__all {
    position: absolute; right: .9rem; bottom: .9rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(11, 11, 10, .82); color: var(--cream);
    border: 1px solid rgba(244, 241, 234, .3); border-radius: 999px;
    padding: .55rem 1rem; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gallery__all:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

@media (min-width: 760px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        aspect-ratio: 2 / 1;
    }
    .gallery__tile { aspect-ratio: auto; height: 100%; }
    .gallery__tile:not(.gallery__tile--lead) { display: block; }
    .gallery__tile--lead { grid-column: 1 / 3; grid-row: 1 / 3; }
}

/* ------------------------------------------------------------ Body ------- */
.listing__body {
    display: grid; grid-template-columns: 1fr; gap: 2.5rem;
    padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
/* On mobile, surface the price + Book CTA right under the gallery, not last. */
.book-card-wrap { order: -1; }
.listing__block { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid rgba(244,241,234,.08); }
.listing__block:last-child { border-bottom: 0; margin-bottom: 0; }
.listing__h2 { font-size: clamp(1.3rem, 3.2vw, 1.7rem); margin: 0 0 1rem; }
.listing__intro p { color: var(--cream-dim); margin: 0 0 1rem; }
.listing__intro p:last-child { margin-bottom: 0; }
.listing__loc--muted { color: var(--cream-dim); margin: 0 0 1rem; }

/* Amenities (.amenity/.amenity__icon are shared, in ferholix.css) */
.amenity-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: .75rem;
}
@media (min-width: 520px) { .amenity-grid { grid-template-columns: repeat(2, 1fr); } }

/* House rules */
.rules { list-style: none; margin: 0 0 .85rem; padding: 0; display: grid; gap: .7rem; }
.rules__item { display: flex; align-items: center; gap: .6rem; color: var(--cream); }
.rules__item svg { color: var(--gold); flex: none; }
.rules__note { color: var(--cream-dim); font-size: .9rem; margin: 0; }

/* Map */
.listing__map {
    border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(244,241,234,.1);
    aspect-ratio: 16 / 9; background: var(--ink-2);
}
.listing__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2) contrast(.95); }

/* ------------------------------------------------------ Booking card ----- */
.book-card {
    background: var(--ink-2); border: 1px solid rgba(217,168,74,.22);
    border-radius: var(--radius); padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.book-card__price { font-family: var(--font-display); font-size: 1.9rem; margin: 0 0 1rem; }
.book-card__price span { font-family: var(--font-body); font-size: 1rem; color: var(--cream-dim); font-weight: 500; }
.book-card__specs {
    list-style: none; margin: 0 0 1.25rem; padding: 0 0 1.25rem;
    border-bottom: 1px solid rgba(244,241,234,.08);
    display: flex; flex-wrap: wrap; gap: 1rem; color: var(--cream-dim); font-size: .92rem;
}
.book-card__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.book-card__specs svg { color: var(--gold); }
.book-card__cta { width: 100%; margin-bottom: .6rem; }
.book-card__photos { width: 100%; margin-bottom: 1rem; }
.book-card__secure {
    display: flex; align-items: center; gap: .5rem; justify-content: center;
    color: var(--cream-dim); font-size: .85rem; margin: 0; text-align: center;
}
.book-card__secure svg { color: var(--gold); flex: none; }

@media (min-width: 920px) {
    .listing__body { grid-template-columns: 1fr 380px; align-items: start; gap: 3.5rem; }
    .book-card-wrap { order: 0; position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* .listing-missing (not-found block) is shared in ferholix.css. */

/* ---------------------------------------------------------- Lightbox ----- */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.92); }
.lightbox__stage {
    position: relative; z-index: 2; margin: 0;
    width: min(1100px, 94vw); max-height: 88vh;
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.lightbox__stage img {
    max-width: 100%; max-height: 80vh; object-fit: contain;
    border-radius: 6px; background: var(--ink-2);
}
.lightbox__counter { color: var(--cream-dim); font-size: .9rem; }
.lightbox__close {
    position: absolute; top: 1rem; right: 1.15rem; z-index: 3;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: rgba(244,241,234,.12); border: 1px solid rgba(244,241,234,.3); color: var(--cream);
    font-size: 1.8rem; line-height: 1; display: grid; place-items: center;
}
.lightbox__close:hover { background: var(--gold); color: var(--ink); }
.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    background: rgba(244,241,234,.12); border: 1px solid rgba(244,241,234,.3); color: var(--cream);
    display: grid; place-items: center;
}
.lightbox__nav:hover { background: var(--gold); color: var(--ink); }
.lightbox__nav--prev { left: clamp(.5rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(.5rem, 3vw, 2rem); }