/* Unit detail page — layout only.
 *
 * Everything visual that already exists lives in custom.css and is reused here:
 * the colour tokens (--primary-color, --bg-sand, --border-warm, …), the buttons
 * (.unit-btn, .unit-btn-apply, .unit-btn-airbnb, .unit-btn-video with
 * .unit-btn-main / .unit-btn-sub), the amenity chips (.amenity-badge), the card
 * chrome (.property-card), and the availability and rent treatments
 * (.unit-avail, .unit-rent). Bootstrap handles the grid, spacing and flex
 * utilities, exactly as on listing.php.
 *
 * What remains below is only what the site did not already have: the photo
 * grid, the fee table, the sticky booking column, the nearby strip, and the
 * lightbox. No colour is redeclared — every value references a custom.css token
 * so a brand change still happens in one place.
 *
 * Prefixed `unitpage-` to sit alongside the existing `.unit-*` component classes
 * without colliding with them.
 */

/* ── Title row ────────────────────────────────────────────────────────────*/
.unitpage-title h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -.5px;
    margin: 0;
}

.unitpage-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1;
}

.unitpage-price small {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #67706E;
}

/* ── Photo grid ───────────────────────────────────────────────────────────
 * The design draws one tall photo, two stacked, then a row of four. Units carry
 * between one and seven photos, so the grid collapses rather than leaving empty
 * boxes. */
.unitpage-gallery {
    position: relative;             /* anchors the "view all" button */
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 190px 190px;
    gap: 12px;
}

.unitpage-gallery--solo { grid-template-columns: 1fr; grid-template-rows: 392px; }
.unitpage-gallery--pair { grid-template-rows: 392px; }

/* Both collapsed variants are a single row, so the hero must not span two: the
   second row would be created implicitly and the gallery would come out at
   double the height it declares. */
.unitpage-gallery--solo .unitpage-shot--hero,
.unitpage-gallery--pair .unitpage-shot--hero { grid-row: auto; }

.unitpage-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.unitpage-shot {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #E9E4D6;
    cursor: zoom-in;
}

.unitpage-shot--hero { grid-row: span 2; }
.unitpage-thumbs .unitpage-shot { height: 120px; border-radius: 16px; }

/* "View all N photos", pinned to the hero tile. */
.unitpage-viewall {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(15, 32, 30, .78);
    color: var(--bg-sand);
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.unitpage-viewall:hover { background: rgba(15, 32, 30, .92); }

.unitpage-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.unitpage-shot:hover img { transform: scale(1.04); }

.unitpage-shot:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ── Fee table ────────────────────────────────────────────────────────────*/
.unitpage-fees {
    background: #fff;
    border: 1px solid var(--border-warm);
    border-radius: 18px;
    overflow: hidden;
}

.unitpage-fee {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #F2EDE0;
}

.unitpage-fee__label { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); }
.unitpage-fee__note  { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

.unitpage-fee__amount {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}

.unitpage-fee__amount--good { color: var(--primary-color); }

/* Not published yet. Deliberately worded and muted — never rendered as $0. */
.unitpage-fee__amount--unknown {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
}

.unitpage-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background: #EAF6EF;
}

.unitpage-total__label  { font-size: 0.95rem; font-weight: 700; color: var(--primary-dark); }
.unitpage-total__figure {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* A quote that cannot be completed must not look like a confirmed number. */
.unitpage-total--unquotable { background: #FBF3E6; }
.unitpage-total--unquotable .unitpage-total__label { color: #8A6D3B; }
.unitpage-total--unquotable .unitpage-total__figure {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #8A6D3B;
}

/* ── Booking column ───────────────────────────────────────────────────────*/
.unitpage-aside {
    position: sticky;
    top: 88px;
    box-shadow: 0 24px 60px rgba(11, 130, 102, .12);
}

.unitpage-specs {
    border: 1px solid #EDE8DB;
    border-radius: 13px;
    overflow: hidden;
}

.unitpage-spec {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.875rem;
    border-top: 1px solid #F2EDE0;
}

.unitpage-spec:first-child { border-top: 0; }
.unitpage-spec:nth-child(odd) { background: var(--bg-warm); }
.unitpage-spec__key { color: #67706E; }
.unitpage-spec__val { font-weight: 700; color: var(--text-dark); text-align: right; }

/* ── Map + nearby strip ───────────────────────────────────────────────────*/
.unitpage-mapcard {
    border: 1px solid var(--border-warm);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

/* The shared map component supplies its own chrome; drop it inside the card. */
.unitpage-mapcard .micasa-map { border-radius: 0; box-shadow: none; height: 330px; }

.unitpage-nearby {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-top: 1px solid #EFEADC;
}

.unitpage-nearby__cell { padding: 0.9rem 1.125rem; border-right: 1px solid #F2EDE0; }
.unitpage-nearby__dist {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1;
}
.unitpage-nearby__place { font-size: 0.85rem; color: #5B6462; margin-top: 5px; }
.unitpage-nearby__qualifier { font-size: 0.72rem; color: var(--text-light); margin-top: 2px; }

/* ── Video tour ───────────────────────────────────────────────────────────
 * A full-width poster that opens the site's shared video modal. Deliberately
 * prominent: a walkthrough answers more questions than any photo grid can. */
.unitpage-video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 21 / 8;
    min-height: 210px;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background-color: var(--primary-dark);
    background-size: cover;
    background-position: center;
    text-align: left;
}

.unitpage-video__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(9, 46, 38, .88) 0%, rgba(9, 46, 38, .55) 55%, rgba(9, 46, 38, .25) 100%);
}

.unitpage-video__play {
    position: absolute;
    left: clamp(1.25rem, 4vw, 2.5rem);
    top: 50%;
    transform: translateY(-50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--bg-sand);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
    transition: transform .18s ease;
}

/* Play triangle, drawn with borders so there is no icon asset to load. */
.unitpage-video__play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-left: 19px solid var(--primary-color);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.unitpage-video:hover .unitpage-video__play { transform: translateY(-50%) scale(1.07); }

.unitpage-video__text {
    position: absolute;
    left: calc(clamp(1.25rem, 4vw, 2.5rem) + 82px);
    right: clamp(1.25rem, 4vw, 2.5rem);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.unitpage-video__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    font-weight: 600;
    color: var(--bg-sand-light);
    line-height: 1.05;
}

.unitpage-video__sub { font-size: 0.9rem; color: rgba(235, 242, 238, .82); }

/* ── Photo viewer ─────────────────────────────────────────────────────────*/
.unitpage-viewer {
    position: fixed;
    inset: 0;
    z-index: 1080;              /* above Bootstrap's sticky-top navbar */
    background: rgba(10, 24, 22, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    opacity: 0;
    transition: opacity .18s ease;
}

.unitpage-viewer[hidden] { display: none; }
.unitpage-viewer.is-open { opacity: 1; }

.unitpage-viewer__stage {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 74vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unitpage-viewer__stage img {
    max-width: 100%;
    max-height: 74vh;
    border-radius: 14px;
    display: block;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.unitpage-viewer__close,
.unitpage-viewer__nav {
    position: absolute;
    background: rgba(244, 241, 232, .12);
    border: 0;
    color: var(--bg-sand);
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
    transition: background .16s ease;
}

.unitpage-viewer__close:hover,
.unitpage-viewer__nav:hover { background: rgba(244, 241, 232, .26); }

.unitpage-viewer__close {
    top: 1rem;
    right: 1.25rem;
    width: 46px;
    height: 46px;
    font-size: 1.9rem;
}

.unitpage-viewer__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 2.4rem;
    padding-bottom: 6px;
}

.unitpage-viewer__nav--prev { left: clamp(0.5rem, 2vw, 1.75rem); }
.unitpage-viewer__nav--next { right: clamp(0.5rem, 2vw, 1.75rem); }

.unitpage-viewer__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem clamp(1rem, 4vw, 3rem) 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.unitpage-viewer__counter {
    margin: 0;
    color: rgba(244, 241, 232, .82);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.unitpage-viewer__strip {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.unitpage-viewer__thumb {
    flex: 0 0 auto;
    width: 66px;
    height: 46px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .55;
    transition: opacity .16s ease, border-color .16s ease;
}

.unitpage-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unitpage-viewer__thumb:hover { opacity: .85; }
.unitpage-viewer__thumb.is-current { opacity: 1; border-color: var(--bg-sand); }

/* ── Responsive ───────────────────────────────────────────────────────────*/
@media (max-width: 991.98px) {
    /* The booking card leads on mobile — it carries the price and the actions. */
    .unitpage-aside { position: static; }

    /* Photos 2 and 3 REFLOW into two columns under the hero. They used to be
     * display:none here, which made them unreachable on a phone — the gallery
     * silently lost photos on exactly the devices most people browse on. */
    .unitpage-gallery,
    .unitpage-gallery--pair,
    .unitpage-gallery--solo {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 240px auto;
    }
    .unitpage-shot--hero { grid-column: 1 / -1; grid-row: auto; }
    .unitpage-gallery > .unitpage-shot:not(.unitpage-shot--hero) { height: 120px; border-radius: 16px; }
    .unitpage-thumbs { grid-template-columns: repeat(3, 1fr); }

    .unitpage-video { aspect-ratio: 16 / 9; }
    .unitpage-video__play { width: 54px; height: 54px; }
    .unitpage-video__text { left: calc(clamp(1.25rem, 4vw, 2.5rem) + 70px); }
}

@media (max-width: 575.98px) {
    .unitpage-thumbs { grid-template-columns: repeat(2, 1fr); }
    .unitpage-nearby__cell { border-right: 0; border-bottom: 1px solid #F2EDE0; }

    /* Stack the video card so the copy is not squeezed beside the play button. */
    .unitpage-video { aspect-ratio: 4 / 3; min-height: 240px; }
    .unitpage-video__scrim { background: linear-gradient(180deg, rgba(9, 46, 38, .35) 0%, rgba(9, 46, 38, .9) 78%); }
    .unitpage-video__play { top: 38%; left: 50%; transform: translate(-50%, -50%); }
    .unitpage-video:hover .unitpage-video__play { transform: translate(-50%, -50%) scale(1.07); }
    .unitpage-video__text { left: 1.25rem; right: 1.25rem; top: auto; bottom: 1.25rem; transform: none; text-align: center; }

    .unitpage-viewer__nav { width: 42px; height: 42px; font-size: 2rem; }
    .unitpage-viewer__stage img { max-height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
    .unitpage-shot img,
    .unitpage-viewer,
    .unitpage-video__play { transition: none; }
    .unitpage-shot:hover img { transform: none; }
}