/* ============================================================
   THAI.CONDOS — Redesign 2026 LISTING-DETAIL layer (phase-04)
   Scope: /properties/{slug} — single listing view, 2x2 gallery,
   sticky agent enquiry card.
   ============================================================ */

/* Full-bleed ivory page background (mockup L_BG) - edge to edge, behind the
   centered content column. 2026-05-28. */
.rd-listing-bg {
    background: var(--color-bg-light);
}
/* Ivory all the way to the footer: the footer carries an 80px top margin that
   otherwise shows the white body between the ivory main and the navy footer.
   Painting the body ivory on listing pages fills that gap (class added by
   js/rd-listing-cta.js). Mirrors the mockup's ivory-before-footer spacing. */
body.rd-listing-page { background: var(--color-bg-light); }
.rd-listing {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 24px 56px;
    font-family: var(--rd-font-body);
    color: var(--color-text-primary-light);
    background: transparent;
}

/* ── Top action bar (breadcrumbs + share/save) ──────────── */
.rd-listing__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 12px;
    gap: 14px;
    flex-wrap: wrap;
}
.rd-listing__crumb {
    font-size: 13px;
    color: var(--color-text-secondary-light);
}
.rd-listing__crumb a {
    color: var(--color-text-secondary-light);
}
.rd-listing__crumb a:hover { color: var(--color-warm); }
.rd-listing__crumb-sep {
    margin: 0 8px;
    color: var(--color-text-muted-light);
}
.rd-listing__crumb-current {
    color: var(--color-text-primary-light);
    font-weight: 600;
}
.rd-listing__actions {
    display: flex;
    gap: 8px;
}

/* ── Gallery (2x2 + hero) ───────────────────────────────── */
.rd-listing__gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 480px;
    margin-bottom: 28px;
    border-radius: 12px;
    overflow: hidden;
}
.rd-listing__hero {
    grid-row: 1 / span 2;
    background: var(--color-bg-light);
    overflow: hidden;
    display: block;
}
.rd-listing__hero img,
.rd-listing__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.rd-listing__thumbs {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
}
.rd-listing__thumb {
    position: relative;
    background: var(--color-bg-light);
    overflow: hidden;
    display: block;
}
.rd-listing__thumb-more {
    position: absolute;
    bottom: 14px; right: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Two-column body ────────────────────────────────────── */
.rd-listing__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    margin-top: 8px;
}

/* ── Header strip ───────────────────────────────────────── */
.rd-listing__header {
    /* Sits on the ivory page bg, no white card (mockup). */
    padding: 4px 0 0;
    margin-bottom: 8px;
}

/* In-page section nav (mockup InPageNav). Non-sticky, sits on the ivory bg
   with thin top/bottom rules - no white card. Anchor targets get
   scroll-margin-top so headings clear the sticky topnav when jumped to. */
.rd-listing__pagenav {
    display: flex;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 28px 0 8px;
    background: transparent;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}
.rd-listing__pagenav::-webkit-scrollbar { display: none; }
.rd-listing__pagenav a {
    padding: 16px 18px 16px 0;
    margin-right: 22px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary-light);
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.rd-listing__pagenav a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    text-decoration: none;
}
.rd-listing__anchor,
.rd-listing__gallery { scroll-margin-top: 90px; }

/* For-sale badge (mockup): square-ish, clay/red fill, white uppercase text. */
.rd-listing__type-pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    background: var(--color-clay, var(--color-warm));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Header two-column row: title + address left, price + spec boxes right. */
.rd-listing__header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
}
/* flex-basis 0 + min-width 0 lets the main column shrink so a long address
   wraps inside it instead of forcing the price/specs to wrap to a new line. */
.rd-listing__header-main { flex: 1 1 0; min-width: 0; }
.rd-listing__header-main .rd-listing__address { flex-wrap: wrap; }
.rd-listing__header-specs {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-shrink: 0;
}

/* Typography matched to mockup (Thai Condos.html ListingHeader): title 40/800,
   price 44/800, address 15, both near-black. clamp caps the desktop size at
   the mockup value while scaling down on phones. 2026-05-28. */
.rd-listing__title {
    font-family: var(--rd-font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--color-text-primary-light);
}
.rd-listing__address {
    color: var(--color-text-secondary-light);
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 0;
}
.rd-listing__address > i { flex-shrink: 0; margin-top: 3px; }
/* min-width:0 lets the text span shrink + wrap inside the flex row instead of
   forcing a one-line width that overflows the viewport on mobile. */
.rd-listing__address > span { min-width: 0; }
.rd-listing__price {
    font-family: var(--rd-font-display);
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--color-text-primary-light);
    margin-bottom: 0;
}

/* Boxed spec items (beds, m²) — icon in a bordered square + value/label stack. */
.rd-listing__spec { display: flex; align-items: center; gap: 10px; }
.rd-listing__spec-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--color-bg-cream);
    border: 1px solid var(--color-border-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary-light);
    font-size: 18px;
}
.rd-listing__spec-text { display: flex; flex-direction: column; line-height: 1; }
.rd-listing__spec-value {
    font-family: var(--rd-font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary-light);
}
.rd-listing__spec-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted-light);
    margin-top: 4px;
}

/* legacy inline stats (unused after the boxed-spec rebuild, kept harmless) */
.rd-listing__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
}
.rd-listing__stats span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-primary-light);
}
.rd-listing__stats i {
    color: var(--color-accent);
    font-size: 17px;
}

/* ── Sectioned content ──────────────────────────────────────
   Sections sit on the ivory page bg (no white card). Each heading gets a
   rule beneath it; the Detail & Features table is the only white card here
   (mockup). 2026-05-28. */
.rd-listing__section {
    padding-top: 40px;
    margin-bottom: 0;
}
.rd-listing__section-title {
    font-family: var(--rd-font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--color-accent);
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-border-light);
    letter-spacing: -0.02em;
}
.rd-listing__section-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-primary-light);
}
/* Embedded Bootstrap .row (e.g. the Location map modal) carries -12px negative
   margins that used to be absorbed by the old section-card padding. The ivory
   redesign dropped that padding, so the row + its leaflet map overflowed the
   viewport on mobile (Richard 2026-05-28). Zero the row margins and clip the
   map so tiles can't push the page width. */
.rd-listing__section-body .row { margin-left: 0; margin-right: 0; }
.traffic-map-container,
#trafficMap { max-width: 100%; overflow: hidden; }

/* Detail & Features — white card, full-width key/value rows (mockup image). */
.rd-listing__facts {
    display: block;
    margin: 0;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
}
.rd-listing__fact {
    margin: 0;
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border-light);
}
.rd-listing__fact:first-child { border-top: 0; }
.rd-listing__fact dt {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary-light);
    margin: 0;
}
.rd-listing__fact dd { margin: 0; font-size: 14px; font-weight: 700; }

/* Amenities chip grid */
.rd-listing__amenity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0; margin: 0;
}
.rd-listing__amenity-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-bg-cream);
    border: 1px solid var(--color-border-light);
    font-size: 14px;
}
.rd-listing__amenity-icon { color: var(--color-warm); font-size: 18px; }

/* Nearby list */
.rd-listing__nearby-list { list-style: none; margin: 0; padding: 0; }
.rd-listing__nearby-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 14px;
}
.rd-listing__nearby-row:last-child { border-bottom: 0; }
.rd-listing__nearby-label {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--color-text-primary-light);
}
.rd-listing__nearby-label i { color: var(--color-accent); }
.rd-listing__nearby-dist {
    color: var(--color-text-muted-light);
    font-family: var(--rd-font-mono, monospace);
    font-size: 13px;
}

/* ── Sticky agent card ──────────────────────────────────── */
.rd-listing__aside {
    align-self: start;
    position: sticky;
    top: 80px;
    display: flex; flex-direction: column; gap: 16px;
}
.rd-agent-card {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-card-light);
}
/* 2026-05-28 (Richard msg 9473): dropped the navy header in favour of a clean
   white head with dark text + a separator, matching the original mockup. */
.rd-agent-card__head {
    background: #fff;
    color: var(--color-text-primary-light);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--color-border-light);
}
.rd-agent-card__avatar {
    /* contain (not cover) so agency logos with embedded text — like "My Pattaya" —
       fit fully inside the circle. Light ring reads cleanly on the white head. */
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    padding: 3px;
    box-shadow: 0 0 0 1px var(--color-border-light), 0 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.rd-agent-card__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* lets long agency names wrap inside flex */
}
.rd-agent-card__name {
    font-family: var(--rd-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary-light);
    line-height: 1.3;
    text-decoration: none;
    margin-bottom: 2px;
}
.rd-agent-card__name:hover { color: var(--color-warm); }
/* "✓ Verified agent" sub-label under the agent name (mockup). */
.rd-agent-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-text-secondary-light);
    line-height: 1.2;
}
.rd-agent-card__verified-check {
    color: var(--color-accent);
    font-weight: 700;
}

/* Contact methods — 3-up boxed buttons (mockup Thai Condos.html). Logged-out
   buyers tap to log in; logged-in buyers tap to call/mail/LINE. */
.rd-agent-card__methods {
    display: flex;
    gap: 8px;
    padding: 16px 22px 0;
}
.rd-agent-card__method {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: #fff;
    border: 1px solid var(--color-border-line);
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.rd-agent-card__method:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-cream);
    text-decoration: none;
}
.rd-agent-card__method span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted-light);
    line-height: 1.2;
}
.rd-agent-card__method-icon {
    width: 22px;
    height: 22px;
}
.rd-agent-card__method-icon--phone { color: var(--color-accent); }
.rd-agent-card__method-icon--email { color: var(--color-warm); }
.rd-agent-card__method-icon--line  { color: #06c755; }

/* Friendly LINE-ID prompt — green callout above the enquiry form so buyers
   know sharing their LINE handle gets a faster reply (Richard mockup). */
.rd-agent-card__line-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 22px;
    margin-top: 18px;
    padding: 12px 14px;
    background: #eaf7ee;
    border: 1px solid #cfe9d6;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #1f5132;
}
.rd-agent-card__notice-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}
.rd-agent-card__form { padding: 22px; }

/* LINE ID field with inline green brand icon (mockup). */
.rd-field--line { position: relative; }
.rd-field__line-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #06c755;
    font-size: 17px;
    line-height: 1;
    pointer-events: none;
}
.rd-input--line { padding-left: 38px !important; }

/* ── Enquiry form fields ────────────────────────────────── */
.rd-enquiry-form .form-group { margin-bottom: 12px; }
.rd-enquiry-form .rd-input--readonly { background: var(--color-bg-cream); cursor: not-allowed; }
.rd-enquiry-form .rd-input--textarea { resize: vertical; }
.rd-enquiry-form__hint {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted-light);
    margin-top: 6px;
}
.rd-enquiry-form__pdpa {
    font-size: 12px;
    color: var(--color-text-muted-light);
    font-style: italic;
    margin: 12px 0;
    line-height: 1.5;
}
.rd-enquiry-form__cta {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* ── Recently viewed strip ──────────────────────────────── */
.rd-listing__recent {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-light);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1023px) {
    /* minmax(0, 1fr) - NOT 1fr - so the column can shrink below its content's
       min-content. Plain 1fr (= minmax(auto, 1fr)) let the agent card's
       intrinsic width (~560px) expand the column and overflow the viewport on
       mobile (Richard 2026-05-28). 2026-05-28. */
    .rd-listing__body { grid-template-columns: minmax(0, 1fr); }
    .rd-listing__aside { position: static; min-width: 0; }
    .rd-listing__gallery { height: 380px; }
}
@media (max-width: 720px) {
    .rd-listing { padding: 0 16px 40px; }
    .rd-listing__bar { padding: 14px 0 8px; }
    .rd-listing__gallery {
        grid-template-columns: 1fr;
        grid-template-rows: 200px;
        height: auto;
    }
    .rd-listing__hero { grid-row: auto; grid-column: 1 / -1; height: 280px; }
    .rd-listing__thumbs { grid-column: 1 / -1; height: 200px; }
    .rd-listing__fact { grid-template-columns: 120px 1fr; padding: 12px 16px; }
    .rd-listing__amenity-grid { grid-template-columns: 1fr; }
    .rd-listing__section { padding-top: 28px; }
    /* Stack the header on mobile so the price + spec boxes don't overflow the
       viewport (Richard 2026-05-28 - info breaking out of the container). The
       specs block was flex-shrink:0 and wider than a phone screen, forcing a
       horizontal scroll that shifted the whole page. Now: title/address on
       top, specs below, wrapping full-width. */
    /* stretch (not flex-start) so the main column is full-width and the long
       address wraps inside it - flex-start sized main to its content (the
       one-line address), which overflowed the viewport. */
    .rd-listing__header-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .rd-listing__header-main { width: 100%; }
    .rd-listing__header-specs { width: 100%; flex-wrap: wrap; gap: 12px 20px; }
    /* CTA bar: hide the thumbnail on narrow screens, keep price + button. */
    .rd-cta-bar__thumb { display: none; }
    .rd-cta-bar__inner { gap: 12px; }
    .rd-cta-bar { padding: 10px 16px; }
}

/* ── Fixed bottom Contact-Agent bar (mockup StickyCTA) ───────
   Slides up once the user scrolls past the header (is-visible toggled by JS
   in property.blade.php). Mirrors the mockup: thumb + price + summary on the
   left, Contact agent button on the right. 2026-05-28. */
.rd-cta-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1040;
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--color-border-light);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.rd-cta-bar.is-visible { transform: translateY(0); }
.rd-cta-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}
.rd-cta-bar__thumb {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.rd-cta-bar__meta { min-width: 0; }
.rd-cta-bar__price {
    font-family: var(--rd-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-accent);
}
.rd-cta-bar__sub {
    font-size: 12px;
    color: var(--color-text-secondary-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-cta-bar__spacer { flex: 1; }
.rd-cta-bar__btn { white-space: nowrap; }