/**
 * fas_listing single page — re-skin Surface 3 (v0.13.9), styled through the --fas-*
 * tokens (assets/css/tokens.css, a registered dependency) to match the Ziti IDX
 * single. No hardcoded hexes. Layout: header/hero/price-bar/key-facts full-width;
 * then a two-column body (main content + sticky contact sidebar).
 */

.fas-listing {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--fas-font-sans);
    color: var(--fas-text-strong);
}

.fas-listing__header { margin-bottom: var(--fas-space-3); }
.fas-listing__title { margin: 0 0 var(--fas-space-1); color: var(--fas-text); }
.fas-listing__location { margin: 0; color: var(--fas-text-muted); }

.fas-listing__hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--fas-radius-lg);
}

/* Price bar — price (+ struck original / sold-for) + status pill. */
.fas-listing__price-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--fas-space-3);
    margin: var(--fas-space-5) 0 var(--fas-space-3);
}
.fas-listing__price { font-size: 32px; font-weight: 700; color: var(--fas-text); }
.fas-listing__price-orig {
    font-size: 18px;
    text-decoration: line-through;
    color: var(--fas-text-faint);
}
.fas-listing__status-pill {
    padding: 6px 14px;
    border-radius: var(--fas-radius-full);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--fas-bg-subtle);
    color: var(--fas-text);
}
.fas-listing__status-pill--active { background: var(--fas-status-active); color: var(--fas-surface); }
.fas-listing__status-pill--pending { background: var(--fas-status-pending); color: var(--fas-surface); }
.fas-listing__status-pill--sold,
.fas-listing__status-pill--closed { background: var(--fas-status-sold); color: var(--fas-surface); }

/* Key-facts tiles. */
.fas-listing__keyfacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fas-space-3);
    margin: var(--fas-space-5) 0;
}
.fas-keyfact {
    display: flex;
    flex-direction: column;
    min-width: 76px;
    padding: var(--fas-space-3) var(--fas-space-4);
    border: 1px solid var(--fas-border-subtle);
    border-radius: var(--fas-radius-md);
    background: var(--fas-surface);
}
.fas-keyfact__value { font-size: 20px; font-weight: 700; color: var(--fas-text); }
.fas-keyfact__label {
    margin-top: 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fas-text-faint);
}

/* Two-column body: main content + sticky contact sidebar. */
.fas-listing__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--fas-space-8);
    align-items: start;
    margin-top: var(--fas-space-6);
}
.fas-listing__aside { position: sticky; top: var(--fas-space-5); }
.fas-listing__aside .fas-contact { margin-top: 0; }

@media (max-width: 880px) {
    /* Collapse to one column; lift the contact card above the long content (CSS-only
       reorder; DOM stays [main][aside]). */
    .fas-listing__body { grid-template-columns: 1fr; gap: var(--fas-space-5); }
    .fas-listing__aside { position: static; order: -1; }
}

/* Single-listing Stadia map (one marker). fas-map.css supplies the rest. */
.fas-listing__map-wrap { margin: var(--fas-space-6) 0; }
.fas-listing__map { width: 100%; height: 360px; border-radius: var(--fas-radius-lg); overflow: hidden; }

.fas-listing__remarks { margin: var(--fas-space-6) 0; line-height: 1.6; }

/* Detail tables — section auto-hides when empty (FieldRow). */
.fas-detail { margin: var(--fas-space-6) 0; }
.fas-detail__heading { margin: 0 0 var(--fas-space-3); font-size: 18px; font-weight: 700; color: var(--fas-text); }
.fas-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--fas-space-3) var(--fas-space-5);
    margin: 0;
}
.fas-detail__row { margin: 0; }
.fas-detail__label {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fas-text-faint);
}
.fas-detail__value { display: block; margin: 2px 0 0; color: var(--fas-text-strong); }
.fas-detail__chips { display: flex; flex-wrap: wrap; gap: var(--fas-space-1); margin-top: 2px; }
.fas-detail__chip {
    padding: 3px 8px;
    border-radius: var(--fas-radius-full);
    background: var(--fas-bg-subtle);
    color: var(--fas-text-muted);
    font-size: 12px;
}

.fas-listing__vtour { margin: var(--fas-space-5) 0; }
.fas-listing__vtour-link { font-weight: 600; color: var(--fas-primary); }

.fas-listing__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--fas-space-2);
    margin: var(--fas-space-6) 0;
}
.fas-listing__gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--fas-radius-sm);
    display: block;
}

/* Compliance footer — buyer-agent CTA above the IDX disclaimer. */
.fas-listing__compliance {
    margin-top: var(--fas-space-8);
    padding-top: var(--fas-space-4);
    border-top: 1px solid var(--fas-border-subtle);
    font-size: 0.8em;
    line-height: 1.5;
    color: var(--fas-text-faint);
}
.fas-listing__buyer-cta {
    margin-bottom: var(--fas-space-4);
    padding: var(--fas-space-4);
    border: 1px solid var(--fas-border);
    border-radius: var(--fas-radius-lg);
    font-size: 1.15em;
    color: var(--fas-text-strong);
}
.fas-listing__buyer-cta-link { text-decoration: underline; }

.fas-listing__disclaimer p { margin: 0 0 0.6em; }
.fas-listing__disclaimer p:last-child { margin-bottom: 0; }

/* Smooth in-page jump from the CTA's "contact us" to the form (page-scoped here,
   reduced-motion-respectful); scroll-margin clears a sticky theme header. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
#fas-contact { scroll-margin-top: var(--fas-space-5); }

@media (max-width: 600px) {
    .fas-listing__price { font-size: 26px; }
}