/* Windowed property reels: three reusable slots, one loaded video ------------ */
:root { --reel-bg: #06122c; }

html:has(.reels-page) {
    scroll-padding-top: var(--header-h);
    background: var(--reel-bg);
}

body:has(.reels-page) {
    background-color: var(--reel-bg);
    background-image:
        linear-gradient(135deg, rgba(2, 13, 39, .86), rgba(7, 42, 102, .82)),
        url("../images/reels-night-apartments.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.reels-page {
    position: relative;
    isolation: isolate;
    min-height: calc(100svh - var(--header-h));
    overflow: clip;
    background:
        radial-gradient(circle at 17% 22%, rgba(68, 125, 255, .2), transparent 28rem),
        radial-gradient(circle at 84% 78%, rgba(20, 174, 255, .11), transparent 30rem);
    color: #fff;
}

.reels-page::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(1, 10, 29, .2), rgba(8, 49, 111, .08), rgba(1, 10, 29, .22));
    content: "";
    pointer-events: none;
}

.reels-viewport {
    position: relative;
    height: calc(100svh - var(--header-h));
    min-height: 32rem;
}

.reels-feed {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.reels-feed::-webkit-scrollbar { width: 0; height: 0; }
.reels-feed.is-recycling { scroll-behavior: auto !important; scroll-snap-type: none; }

.reel-slide {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: clamp(.75rem, 2vh, 1.25rem) var(--gutter);
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.reel-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 35rem);
    min-width: 0;
    height: 100%;
    margin: auto;
}

.reel-card {
    position: relative;
    isolation: isolate;
    width: min(100%, calc((100svh - var(--header-h) - 2rem) * .5625));
    height: min(calc(100svh - var(--header-h) - 2rem), 52rem);
    min-height: 30rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 1.4rem;
    background: #08142e;
    box-shadow: 0 1.8rem 6rem rgba(0, 5, 24, .6), 0 0 0 1px rgba(83, 145, 255, .08);
}

.reel-media,
.reel-media video,
.reel-media iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #030916;
}

.reel-media { min-height: 0; overflow: hidden; }
.reel-media video { object-fit: cover; }

.reel-media-placeholder,
.reel-media-error {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .7rem;
    padding: 2rem;
    background:
        linear-gradient(rgba(3, 17, 51, .64), rgba(2, 10, 29, .9)),
        url("../images/reels-night-apartments.webp") center / cover;
    color: rgba(255, 255, 255, .82);
    text-align: center;
}

.reel-media-placeholder > span {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, .24);
    border-top-color: #fff;
    border-radius: 50%;
    animation: reel-spin .9s linear infinite;
}

.reel-media-placeholder small { font-size: .72rem; letter-spacing: .02em; }
.reel-media-error strong { color: #fff; font-size: .9rem; }
.reel-media-error button,
.reel-boundary-card button {
    min-height: 2.5rem;
    padding: .55rem .9rem;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
}

.reel-slide.is-media-idle .reel-media-placeholder > span { animation-play-state: paused; opacity: .45; }
.reel-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(0, 5, 20, .47) 0, transparent 23%),
        linear-gradient(0deg, rgba(0, 5, 20, .94) 0, rgba(0, 8, 25, .59) 31%, transparent 62%);
    pointer-events: none;
}

.reel-topline {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    pointer-events: none;
}

.reel-brand,
.reel-counter {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(3, 12, 33, .55);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
}

.reel-brand {
    gap: .5rem;
    padding: .35rem .75rem .35rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: auto;
}

.reel-brand .icon { width: 1.15rem; height: 1.15rem; color: #ff3547; }
.reel-counter { padding: .35rem .65rem; font-size: .68rem; font-weight: 700; }

.reel-top-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    pointer-events: auto;
}

.reel-share {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(3, 12, 33, .55);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .2s ease, background-color .2s ease;
}

.reel-share:hover { background: rgba(42, 91, 190, .86); transform: translateY(-1px); }
.reel-share.is-copied { background: #247c55; }
.reel-share .icon { width: 1rem; height: 1rem; }

.reel-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.15rem 1.15rem 1.35rem;
    pointer-events: none;
}

.reel-content a,
.reel-content button { pointer-events: auto; }

.reel-uploader {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    margin-bottom: .68rem;
}

.reel-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: .12rem;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .94);
    border-radius: 50%;
    background: linear-gradient(145deg, #4f87ff, #2549c9);
    box-shadow: 0 .45rem 1.1rem rgba(0, 0, 0, .35);
    color: #fff;
    font-size: .9rem;
    font-weight: 750;
}

.reel-avatar img,
.reel-avatar > span { width: 100%; height: 100%; border-radius: inherit; }
.reel-avatar img { object-fit: cover; }
.reel-avatar > span { display: grid; place-items: center; }
.reel-uploader > div { display: grid; min-width: 0; gap: .05rem; }
.reel-uploader strong,
.reel-uploader > div > a {
    overflow: hidden;
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.reel-uploader small { color: rgba(255, 255, 255, .7); font-size: .64rem; }

.reel-heading-line {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: .65rem;
    margin-bottom: .45rem;
}

.reel-content h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-family: "Instrument Sans", sans-serif;
    font-size: clamp(1.16rem, 3.1vh, 1.62rem);
    font-weight: 720;
    line-height: 1.15;
    letter-spacing: -.035em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reel-price {
    flex: 0 0 auto;
    margin: 0;
    padding: .28rem .52rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(5, 17, 43, .54);
    color: #fff;
    font-size: .76rem;
    font-weight: 760;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.reel-meta {
    display: flex;
    width: 100%;
    margin-bottom: .52rem;
    gap: .35rem;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.reel-meta span {
    flex: 0 0 auto;
    padding: .28rem .5rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(5, 17, 43, .46);
    color: rgba(255, 255, 255, .84);
    font-size: .63rem;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.reel-description {
    display: flex;
    align-items: baseline;
    width: 100%;
    min-width: 0;
    gap: .42rem;
    margin: 0 0 .78rem;
}

.reel-caption {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
    font-size: .73rem;
    line-height: 1.45;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reel-description button {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .7rem;
    font-weight: 750;
    cursor: pointer;
}

.reel-description.is-expanded {
    display: block;
    padding: .72rem .78rem;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: .85rem;
    background: rgba(2, 10, 28, .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.reel-description.is-expanded .reel-caption {
    max-height: min(28svh, 13rem);
    margin-bottom: .45rem;
    overflow: auto;
    white-space: normal;
    text-overflow: clip;
    scrollbar-width: thin;
}

.reel-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 2.7rem;
    padding: .65rem 1rem;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 .7rem 1.75rem rgba(0, 0, 0, .25);
    color: #0a1730;
    font-size: .76rem;
    font-weight: 760;
    transition: transform .2s ease, background-color .2s ease;
}

.reel-visit:hover { background: #e7efff; color: #0a1730; transform: translateY(-2px); }
.reel-visit .icon { width: .95rem; height: .95rem; }

.reel-play-toggle {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
    background: rgba(2, 10, 29, .57);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.reel-play-toggle[hidden] { display: none; }
.reel-play-toggle span {
    width: 0;
    height: 0;
    margin-left: .25rem;
    border-top: .65rem solid transparent;
    border-bottom: .65rem solid transparent;
    border-left: 1rem solid #fff;
}
.reel-card.is-paused .reel-play-toggle { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.reel-progress {
    position: absolute;
    right: .9rem;
    bottom: .45rem;
    left: .9rem;
    z-index: 6;
    height: .14rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .24);
    pointer-events: none;
}

.reel-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }

.reel-navigation {
    position: absolute;
    left: calc(50% + min(19vw, 12.2rem));
    bottom: 1.3rem;
    z-index: 8;
    display: grid;
    justify-items: center;
    gap: .5rem;
}

.reel-navigation button {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(4, 22, 59, .62);
    box-shadow: 0 .6rem 1.6rem rgba(0, 6, 26, .25);
    color: #fff;
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
}

.reel-navigation button:first-child .icon { transform: rotate(180deg); }
.reel-navigation button:hover:not(:disabled) { background: rgba(55, 105, 211, .72); transform: scale(1.04); }
.reel-navigation button:disabled { opacity: .25; cursor: default; }
.reel-navigation .icon { width: 1rem; height: 1rem; }
.reel-navigation > span { margin-top: .2rem; color: rgba(255, 255, 255, .55); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }

.reel-boundary-card {
    display: grid;
    place-content: center;
    justify-items: center;
    width: min(100%, 22rem);
    min-height: 17rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 1.4rem;
    background: rgba(3, 18, 49, .68);
    box-shadow: 0 1.5rem 5rem rgba(0, 5, 24, .35);
    backdrop-filter: blur(18px);
    color: #fff;
    text-align: center;
}

.reel-boundary-mark {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: .9rem;
    border-radius: 50%;
    background: rgba(75, 132, 255, .2);
    color: #a9c6ff;
    font-size: 1.15rem;
    font-weight: 800;
}
.reel-boundary-card strong { margin-bottom: .35rem; font-size: 1.05rem; }
.reel-boundary-card small { max-width: 17rem; color: rgba(255, 255, 255, .65); line-height: 1.5; }
.reel-boundary-card button { margin-top: 1rem; }
.reel-boundary-card.is-loading .reel-boundary-mark { animation: reel-pulse 1s ease-in-out infinite alternate; }

.reels-empty-state {
    display: grid;
    place-content: center;
    justify-items: center;
    min-height: calc(100svh - var(--header-h));
    padding: 3rem var(--gutter);
    color: #fff;
    text-align: center;
}
.reels-empty-state > span { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #a9c6ff; }
.reels-empty-state > span .icon { width: 1.6rem; height: 1.6rem; }
.reels-empty-state h2 { margin: 1rem 0 .4rem; color: #fff; }
.reels-empty-state p { margin: 0 0 1.25rem; color: rgba(255, 255, 255, .66); }

@keyframes reel-spin { to { transform: rotate(360deg); } }
@keyframes reel-pulse { to { transform: scale(1.08); background: rgba(75, 132, 255, .34); } }

@media (max-width: 700px) {
    body:has(.reels-page) { background-attachment: scroll; }
    .reels-viewport { min-height: 31rem; }
    .reel-slide { padding: 0; }
    .reel-stage { width: 100%; }
    .reel-card {
        width: 100%;
        height: 100%;
        min-height: 31rem;
        max-height: none;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .reel-topline { padding: .85rem var(--gutter); }
    .reel-content { padding: 1rem var(--gutter) 1.35rem; }
    .reel-content h2 { font-size: clamp(1.18rem, 5.7vw, 1.58rem); }
    .reel-caption { font-size: .75rem; }
    .reel-navigation { display: none; }
    .reel-progress { right: .55rem; bottom: .35rem; left: .55rem; }
    .reel-boundary-card { width: calc(100% - 2rem); min-height: 15rem; }
}

@media (max-height: 650px) and (min-width: 701px) {
    .reel-card { min-height: calc(100svh - var(--header-h) - 1rem); }
    .reel-content { padding: .82rem 1rem 1.05rem; }
    .reel-uploader { margin-bottom: .42rem; }
    .reel-meta { margin-bottom: .35rem; }
    .reel-description { margin-bottom: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reels-feed { scroll-behavior: auto; }
    .reel-visit,
    .reel-navigation button,
    .reel-play-toggle { transition: none; }
    .reel-media-placeholder > span,
    .reel-boundary-card.is-loading .reel-boundary-mark { animation: none; }
}

/* "Change city" on the empty state is a button */
button.reel-visit { margin-top: .5rem; font-family: inherit; cursor: pointer; }

/* Watching one builder / agent's reels: a pill back to their profile */
.reels-owner-bar {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: calc(100% - 2rem);
    padding: .5rem .875rem .5rem .625rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(5, 16, 38, .6);
    backdrop-filter: blur(10px);
    font-size: .8125rem;
    color: #fff;
    text-decoration: none;
}
.reels-owner-bar:hover { background: rgba(5, 16, 38, .8); }
.reels-owner-bar .icon { flex: 0 0 auto; width: 1rem; height: 1rem; transform: rotate(180deg); }
.reels-owner-bar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }