/* ============================================================
   iRA Blocks — property listings + property page
   Mirrors the investor app's listings and detail layouts using
   the site's own tokens (main.css :root).
   ============================================================ */

:root{
    --lst-hairline:#E7EAF1;
    --lst-hairline-soft:#F1F3F8;
    --lst-canvas:#F7F8FB;
    --lst-mint:#0F8A5F;
    --lst-warn:#B45309;
    --lst-warn-soft:#FFF7ED;
    --lst-radius:22px;
    --lst-shadow:0 1px 2px rgba(11,12,15,.04), 0 10px 30px rgba(11,12,15,.06);
    --lst-lift:0 18px 40px rgba(11,12,15,.14);
}

/* ---------- listings block (sits on the dark panel of index.html) ----------
   Same surfaces as the site's product cards: #141519 on black, hairline at
   7% white. The app's card layout, the site's palette. */

/* Wider than the site's 1240px column, with a tighter gutter, so three cards
   get real room. The block pulls out of the section's padding (--pad) with
   negative margins and leaves --lst-gutter on each side; its children are
   capped at 1400px and centred. The heading above it moves with it. On a
   phone --pad and --lst-gutter are both 18px, so the margins are zero. */
.listings, .sec__head.sec__head--properties{
    --lst-gutter:clamp(18px, 2vw, 20px);
    width:auto;
    max-width:none;
    margin-left:calc(var(--lst-gutter) - var(--pad));
    margin-right:calc(var(--lst-gutter) - var(--pad));
}
.listings > *, .sec__head.sec__head--properties > *{
    max-width:1400px;
    margin-left:auto; margin-right:auto;
}
.lst-grid{ gap:20px; }

.lst-toolbar{
    display:flex;
    flex-direction:column;
    gap:14px;
    /* Tight sides: the pills and the search field carry their own inner
       padding, so the bar only needs a thin rim around them. */
    padding:10px 10px;
    border-radius:var(--lst-radius);
    background:#141519;
    border:1px solid rgba(255,255,255,.07);
}
@media (min-width:1024px){
    .lst-toolbar{ flex-direction:row; align-items:center; justify-content:space-between; }
}

.lst-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.lst-tab{
    padding:8px 16px;
    border:0; border-radius:999px;
    background:transparent;
    color:rgba(255,255,255,.6);
    font:600 14px/1.2 'Archivo', system-ui, sans-serif;
    cursor:pointer;
    transition:background .2s var(--ease), color .2s var(--ease);
}
.lst-tab:hover{ background:rgba(255,255,255,.08); color:#fff; }
.lst-tab[aria-selected="true"]{ background:#fff; color:var(--ink); }

.lst-search{ display:flex; align-items:center; gap:8px; }
@media (min-width:1024px){ .lst-search{ width:26rem; } }
.lst-search__field{ position:relative; flex:1; }
.lst-search__field::before{
    content:'';
    position:absolute; left:14px; top:50%;
    width:14px; height:14px;
    transform:translateY(-50%);
    border:2px solid rgba(255,255,255,.5);
    border-radius:50%;
    box-sizing:border-box;
}
.lst-search__field::after{
    content:'';
    position:absolute; left:25px; top:calc(50% + 4px);
    width:6px; height:2px;
    background:rgba(255,255,255,.5);
    transform:rotate(45deg);
}
.lst-search__field input{
    width:100%;
    padding:10px 14px 10px 40px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    font:500 14px/1.2 'Archivo', system-ui, sans-serif;
    color:#fff;
}
.lst-search__field input::placeholder{ color:rgba(255,255,255,.4); }
.lst-search__field input:focus{ outline:0; border-color:var(--blue); background:rgba(255,255,255,.1); box-shadow:0 0 0 4px rgba(18,88,236,.25); }
.lst-sort{
    flex-shrink:0;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    font:500 14px/1.2 'Archivo', system-ui, sans-serif;
    color:#fff;
}
.lst-sort option{ color:var(--ink); }
.lst-sort:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(18,88,236,.25); }

/* Right-aligned, flush with the right edge of the card row below it. */
.lst-summary{
    margin:14px 0 0;
    font-size:14px;
    text-align:right;
    color:rgba(255,255,255,.6);
}
.lst-summary strong{ color:#fff; }
.lst-summary__clear{
    margin-left:12px;
    padding:0; border:0; background:none;
    color:var(--blue-300);
    font:600 14px/1 'Archivo', system-ui, sans-serif;
    cursor:pointer;
}
.lst-summary__clear:hover{ text-decoration:underline; }

.lst-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:22px;
}
@media (min-width:640px){ .lst-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px){ .lst-grid{ grid-template-columns:repeat(3, 1fr); } }

/* ---------- card (the app's ListingCard, on the site's dark surface) ---------- */

.lst-card{
    position:relative;
    display:flex; flex-direction:column;
    overflow:hidden;
    border-radius:var(--lst-radius);
    background:#141519;
    border:1px solid rgba(255,255,255,.07);
    color:#fff;
    cursor:pointer;
    transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lst-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.16); box-shadow:0 24px 50px rgba(0,0,0,.45); }

.lst-card__media{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#1C1E24;
}
.lst-card__media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s var(--ease);
}
.lst-card:hover .lst-card__media img{ transform:scale(1.04); }
.lst-card__media::after{
    content:'';
    position:absolute; left:0; right:0; top:0; height:96px;
    background:linear-gradient(to bottom, rgba(11,12,15,.45), transparent);
    pointer-events:none;
}
.lst-card__media--empty{
    display:grid; place-items:center;
    background:linear-gradient(160deg, var(--navy), #061029);
}
.lst-card__media-note{
    position:relative; z-index:1;
    font-size:11px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.7);
}

.lst-badge{
    position:absolute; z-index:1;
    top:16px; left:16px;
    padding:5px 10px;
    border-radius:999px;
    font-size:11px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase;
    box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.lst-badge--end{ left:auto; right:16px; }
.lst-badge--brand{ background:var(--blue); color:#fff; }
.lst-badge--ink{ background:rgba(11,12,15,.75); color:#fff; }
.lst-badge--mint{ background:var(--lst-mint); color:#fff; }
.lst-badge--paper{ background:rgba(255,255,255,.95); color:var(--ink); }
.lst-badge--static{ position:static; box-shadow:none; }

.lst-card__body{ display:flex; flex:1; flex-direction:column; padding:22px; }
.lst-card__title{
    font-family:var(--font-display);
    font-size:18px; font-weight:900;
    line-height:1.3; letter-spacing:-.02em;
    color:#fff;
}
.lst-card__link{ color:inherit; text-decoration:none; }
.lst-card__link::after{ content:''; position:absolute; inset:0; }
.lst-card__link:focus-visible{ outline:0; box-shadow:0 0 0 4px rgba(18,88,236,.35); }
.lst-card__loc{
    margin-top:6px;
    font-size:11px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--blue-300);
}

/* projected figures — the disclaimer is part of the unit */
.lst-proj{ display:flex; flex-direction:column; gap:4px; margin-top:20px; }
.lst-proj--hero{ gap:2px; }
.lst-proj__label{
    font-size:11px; font-weight:600;
    letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-soft);
}
.lst-card .lst-proj__label{ color:rgba(255,255,255,.5); }
.lst-proj__value{
    font-family:var(--font-display);
    font-size:40px; font-weight:900;
    line-height:1.05; letter-spacing:-.03em;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}
.lst-card .lst-proj__value{ color:#fff; }
.lst-proj__value--md{ font-size:26px; }
.lst-proj__value--na{ color:rgba(107,114,128,.5); }
.lst-card .lst-proj__value--na{ color:rgba(255,255,255,.3); }
.lst-proj__caption{ font-size:12px; color:var(--ink-soft); }
.lst-card .lst-proj__caption{ color:rgba(255,255,255,.55); }
.lst-disclaimer{ font-size:12px; line-height:1.5; color:var(--ink-soft); }
.lst-card .lst-disclaimer{ color:rgba(255,255,255,.45); }
.lst-disclaimer--fine{ margin-top:4px; font-size:11px; line-height:1.35; }

.lst-progress{ margin-top:20px; }
.lst-progress__bar{ height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }
.lst-progress__fill{ height:100%; border-radius:999px; background:var(--blue); }
.lst-progress__meta{
    display:flex; justify-content:space-between;
    margin-top:6px;
    font-size:12px; color:rgba(255,255,255,.55);
    font-variant-numeric:tabular-nums;
}

.lst-card__facts{
    display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
    margin-top:20px; padding-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
}
.lst-card__facts dt{
    font-size:11px; font-weight:600;
    letter-spacing:.07em; text-transform:uppercase;
    color:rgba(255,255,255,.5);
}
.lst-card__facts dd{
    margin-top:4px;
    font-family:var(--font-display);
    font-size:16px; font-weight:700;
    color:#fff;
    font-variant-numeric:tabular-nums;
}
.lst-card__fact--end{ text-align:right; }

/* skeletons / empty / unavailable */
.lst-skeleton{
    height:380px;
    border-radius:var(--lst-radius);
    background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
    background-size:200% 100%;
    animation:lstShimmer 1.4s linear infinite;
}
.lst-skeleton--hero{ height:clamp(15rem, 46vh, 30rem); background:linear-gradient(90deg, #EEF0F5, #F7F8FB, #EEF0F5); background-size:200% 100%; }
.lst-skeleton--row{ height:160px; margin-top:24px; background:linear-gradient(90deg, #EEF0F5, #F7F8FB, #EEF0F5); background-size:200% 100%; }
@keyframes lstShimmer{ to{ background-position:-200% 0; } }

.lst-empty{
    grid-column:1 / -1;
    padding:48px 24px;
    border-radius:var(--lst-radius);
    background:#141519;
    border:1px solid rgba(255,255,255,.07);
    text-align:center;
    color:#fff;
}
.lst-empty__title{ font-family:var(--font-display); font-size:18px; font-weight:700; }
.lst-empty__body{ max-width:28rem; margin:8px auto 0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.55); }
.lst-empty__body a{ color:var(--blue-300); font-weight:600; }

/* pagination */
.lst-pager{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:6px;
    margin-top:28px;
}
.lst-pager__btn{
    min-width:40px; height:40px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font:600 14px/1 'Archivo', system-ui, sans-serif;
    cursor:pointer;
    transition:background .2s var(--ease);
}
.lst-pager__btn:hover:not(:disabled){ background:rgba(255,255,255,.14); }
.lst-pager__btn[aria-current="page"]{ background:var(--blue); border-color:var(--blue); }
.lst-pager__btn:disabled{ opacity:.35; cursor:not-allowed; }
.lst-pager__btn--edge{ padding:0 16px; }
.lst-pager__gap{ color:rgba(255,255,255,.5); padding:0 4px; }

/* ---------- property page ---------- */

/* Exactly the investor app's PropertyDetailPage frame: full width, side
   padding 20px → 32px (640px) → 48px (1024px), columns 32px apart on a phone
   and 40px from 1024px, the panel 23rem wide and 26rem from 1280px. */
.property{
    max-width:none;
    margin:0 auto;
    padding:calc(var(--nav-h) + 32px) 20px 14vh;
}
@media (min-width:640px){ .property{ padding-left:32px; padding-right:32px; padding-top:calc(var(--nav-h) + 48px); } }
@media (min-width:1024px){ .property{ padding-left:48px; padding-right:48px; } }
.pd-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:32px;
    align-items:start;
    padding-bottom:96px;
}
@media (min-width:1024px){
    .pd-layout{ grid-template-columns:minmax(0, 1fr) 23rem; gap:40px; padding-bottom:0; }
}
@media (min-width:1280px){
    .pd-layout{ grid-template-columns:minmax(0, 1fr) 26rem; }
}
.pd-article{ display:flex; flex-direction:column; gap:40px; min-width:0; }
/* On a phone the calculator follows the article and the pinned bar carries
   the action; from 1024px it sits beside the article and sticks. */
.pd-aside{ order:0; }
@media (min-width:1024px){
    .pd-aside{ position:sticky; top:calc(var(--nav-h) + 16px); max-height:calc(100dvh - var(--nav-h) - 32px); overflow-y:auto; }
}

.pd-back{
    display:inline-flex; align-items:center; gap:6px;
    width:fit-content;
    font-size:14px; font-weight:600;
    color:var(--ink-soft);
    text-decoration:none;
}
.pd-back:hover{ color:var(--ink); }
.pd-heading{ display:flex; flex-direction:column; gap:14px; }
.pd-heading__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.pd-heading__where{ font-size:14px; color:var(--ink-soft); }
.pd-title{
    font-family:var(--font-display);
    font-size:clamp(30px, 4.2vw, 44px);
    font-weight:900;
    line-height:1.08; letter-spacing:-.035em;
}
.pd-address{ font-size:14px; color:var(--ink-soft); }

.pd-gallery{ display:flex; flex-direction:column; gap:12px; }
.pd-gallery__hero{
    height:clamp(15rem, 46vh, 30rem);
    overflow:hidden;
    border-radius:var(--lst-radius);
    background:var(--lst-hairline);
}
.pd-gallery__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-gallery__hero--empty{
    display:grid; place-items:center;
    background:linear-gradient(160deg, var(--navy), #061029);
}
.pd-gallery__thumbs{ list-style:none; display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
.pd-gallery__thumb{
    width:80px; height:80px;
    padding:0; overflow:hidden;
    border:2px solid transparent; border-radius:14px;
    background:var(--lst-hairline);
    cursor:pointer;
}
.pd-gallery__thumb[aria-current="true"]{ border-color:var(--blue); }
.pd-gallery__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.pd-facts{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    overflow:hidden;
    border-radius:var(--lst-radius);
    border:1px solid var(--lst-hairline);
    background:var(--lst-hairline);
    box-shadow:var(--lst-shadow);
}
@media (min-width:640px){ .pd-facts{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1024px){ .pd-facts{ grid-template-columns:repeat(5, 1fr); } }
.pd-fact{ padding:16px 20px; background:#fff; }
.pd-fact dt{
    white-space:nowrap;
    font-size:11px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft);
}
.pd-fact dd{
    margin-top:6px;
    font-family:var(--font-display);
    font-size:18px; font-weight:900;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
}

.pd-section__title{
    font-family:var(--font-display);
    font-size:20px; font-weight:900;
    letter-spacing:-.02em;
}
.pd-section__blurb{ max-width:65ch; margin-top:4px; font-size:14px; line-height:1.6; color:var(--ink-soft); }
.pd-section > :nth-child(2):not(.pd-section__blurb), .pd-section > .pd-section__blurb + *{ margin-top:16px; }

.pd-case{ display:grid; gap:24px; }
@media (min-width:640px){ .pd-case{ grid-template-columns:repeat(2, 1fr); } }
.pd-case .lst-proj{ margin-top:0; }
.pd-dates{
    margin-top:24px;
    padding:20px;
    border-radius:var(--lst-radius);
    background:linear-gradient(160deg, var(--navy), #061029);
    font-size:15px; line-height:1.65;
    color:rgba(255,255,255,.8);
}
.pd-dates strong{ color:#fff; }
.pd-dates__note{ color:#E7C77A; }

.pd-lines{ border-top:1px solid var(--lst-hairline); }
.pd-lines__row{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:12px 0;
    border-bottom:1px solid var(--lst-hairline);
    font-size:15px;
}
.pd-lines__row dt{ color:var(--ink-soft); }
.pd-lines__row dd{ flex-shrink:0; font-variant-numeric:tabular-nums; }
.pd-lines__row--total{ border-top:2px solid rgba(11,12,15,.2); font-weight:700; }
.pd-lines__row--total dt{ color:var(--ink); }
.pd-lines__row--total dd{ font-family:var(--font-display); font-size:18px; }
.pd-disclaimer{ margin-top:16px; }

.pd-details{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px 24px; }
@media (min-width:640px){ .pd-details{ grid-template-columns:repeat(3, 1fr); } }
.pd-details .pd-fact{ padding:0; background:transparent; }
.pd-details .pd-fact dd{ font-family:inherit; font-size:14px; font-weight:400; letter-spacing:0; text-transform:capitalize; }
.pd-subtitle{ margin:24px 0 12px; font-size:14px; font-weight:700; }
.pd-floorplan{ width:100%; border-radius:var(--lst-radius); border:1px solid var(--lst-hairline); }

.pd-text{ font-size:14px; line-height:1.65; }
.pd-muted{ font-size:14px; line-height:1.6; color:var(--ink-soft); }

.pd-docs{ list-style:none; border-top:1px solid var(--lst-hairline); }
.pd-docs li{ padding:12px 0; border-bottom:1px solid var(--lst-hairline); }
.pd-docs a{ font-size:14px; font-weight:600; color:var(--blue); text-decoration:none; }
.pd-docs a:hover{ text-decoration:underline; }
.pd-docs .pd-muted{ margin-top:2px; font-size:12px; text-transform:capitalize; }
.pd-note{
    margin-top:16px;
    padding:16px 18px;
    border-radius:16px;
    background:var(--blue-100);
    font-size:14px; line-height:1.6;
    color:var(--ink);
}
.pd-note__title{ font-weight:700; margin-bottom:4px; }

.pd-risks{
    list-style:none;
    display:grid; gap:16px;
    padding:20px;
    border-radius:var(--lst-radius);
    border:1px solid rgba(180,83,9,.25);
    background:var(--lst-warn-soft);
}
@media (min-width:640px){ .pd-risks{ grid-template-columns:repeat(2, 1fr); } }
.pd-risks__title{ font-size:14px; font-weight:700; color:var(--lst-warn); }
.pd-risks__body{ margin-top:4px; font-size:14px; line-height:1.6; color:rgba(11,12,15,.75); }

/* buy panel */
.pd-panel{
    overflow:hidden;
    border-radius:var(--lst-radius);
    border:1px solid var(--lst-hairline);
    background:#fff;
    box-shadow:var(--lst-lift);
}
.pd-panel__head{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    padding:16px 24px;
    background:var(--ink);
}
.pd-panel__title{ font-family:var(--font-display); font-size:18px; font-weight:900; letter-spacing:-.02em; color:#fff; }
.pd-panel__closed .pd-panel__title{ color:var(--ink); }
.pd-panel__price{ font-size:14px; color:rgba(255,255,255,.6); }
.pd-panel__body, .pd-panel__closed{ display:flex; flex-direction:column; gap:18px; padding:24px; }
.pd-panel__label{ font-size:14px; font-weight:600; }
.pd-stepper{ display:flex; align-items:stretch; gap:8px; margin-top:-8px; }
.pd-stepper__btn{
    width:44px; height:44px; flex-shrink:0;
    border:1px solid var(--lst-hairline); border-radius:50%;
    background:#fff;
    font-size:20px; font-weight:700; color:var(--ink);
    cursor:pointer;
}
.pd-stepper__btn:hover:not(:disabled){ border-color:var(--blue); color:var(--blue); }
.pd-stepper__btn:disabled{ opacity:.4; cursor:not-allowed; }
.pd-stepper__input{
    width:100%; min-width:0;
    padding:10px 12px;
    border:1px solid var(--lst-hairline); border-radius:14px;
    text-align:center;
    font-family:var(--font-display);
    font-size:20px; font-weight:700;
    font-variant-numeric:tabular-nums;
}
.pd-stepper__input:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(18,88,236,.15); }
.pd-panel__limits{ margin-top:-10px; font-size:12px; }
.pd-pay{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid #CCDBFF;
    background:rgba(230,238,255,.6);
}
.pd-pay__label{ font-size:14px; font-weight:600; }
.pd-pay__value{ font-family:var(--font-display); font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; }
.pd-rows{ margin-top:-8px; }
.pd-rows__row{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:8px 0;
    border-bottom:1px solid var(--lst-hairline);
    font-size:14px;
}
.pd-rows__row:last-child{ border-bottom:0; }
.pd-rows__row dt{ color:var(--ink-soft); }
.pd-rows__row dd{ font-weight:600; font-variant-numeric:tabular-nums; }
.pd-rows__row--em dt{ color:var(--ink); font-weight:600; }
.pd-rows__row--em dd{ font-family:var(--font-display); font-size:20px; font-weight:900; }
.pd-panel__cadence{ margin-top:-6px; font-size:12px; }
.pd-panel__cta{ justify-content:center; height:52px; font-size:15px; }
.pd-panel__fine{ margin-top:-8px; text-align:center; font-size:12px; }

/* pinned bar on small screens */
.pd-mobilebar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:12px var(--pad);
    background:#fff;
    border-top:1px solid var(--lst-hairline);
    box-shadow:0 -10px 30px rgba(11,12,15,.08);
}
.pd-mobilebar__label{ display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.pd-mobilebar__value{ font-family:var(--font-display); font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; }
@media (min-width:1024px){ .pd-mobilebar{ display:none; } }

.pd-error{ max-width:40rem; padding:32px 0; }
.pd-error__title{ font-family:var(--font-display); font-size:22px; font-weight:900; }
.pd-error__body{ margin:8px 0 20px; font-size:15px; color:var(--ink-soft); }
.pd-loading{ display:flex; flex-direction:column; }