not ; extend agent-card for anchor context */
.agent-card--linked { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.agent-card--linked:hover .agent-card__link { text-decoration: underline; }
/* ── Listings (detail header, filter bar, pager, map) ─────── */
.listing-header .listing-price{ font-size:2rem; font-weight:700; margin:.2em 0; }
.listing-header .listing-stats span{ margin-right:1.25rem; }
.listing-header .listing-addr{ color:var(--ink-muted); }
.listings-filter{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.25rem 0; }
.listings-filter select,.listings-filter input{ padding:.5rem .7rem; border:1px solid var(--line); border-radius:6px; }
.listings-count{ color:var(--ink-muted); margin:.5rem 0 1rem; }
.listings-pager{ display:flex; gap:.4rem; margin-top:1.5rem; flex-wrap:wrap; }
.listings-pager a{ padding:.4rem .7rem; border:1px solid var(--line); border-radius:6px; }
.listings-pager a.active{ font-weight:700; }
.listings-empty{ padding:2rem 0; color:var(--ink-muted); }
.listing-map{ width:100%; border-radius:8px; overflow:hidden; }
/* Spec sheet — individual `spec` blocks stack into a clean definition grid. */
.spec{ display:grid; grid-template-columns:minmax(120px,35%) 1fr; align-items:baseline; column-gap:1.5rem; row-gap:0; padding:10px 0; border-bottom:1px solid var(--line); }
.spec__label{ color:var(--ink-muted); font-size:13.5px; font-weight:600; line-height:1.4; }
.spec__value{ font-size:14.5px; color:var(--ink); line-height:1.4; }
.agent-card--linked:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); }
/* ── Listing page — top zone wrapper ─────────────────────────────────────── */
/* Reduces vertical rhythm between the hero and gallery on listing pages. */
.listing-top { display: flex; flex-direction: column; }
.listing-top .section { padding-top: 40px; padding-bottom: 40px; }
.listing-top .hero.listing-hero { /* keep hero full height, no override */ }
/* Listing gallery — on listing pages: hero-first-image wide, rest in a grid. */
/* The .listing-top scope means this only fires inside listing detail pages. */
.listing-top .gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 10px;
}
/* First photo spans the full width — the hero shot */
.listing-top .gallery__tile:first-child {
grid-column: 1 / -1;
border-radius: 12px;
}
.listing-top .gallery__tile:first-child img {
aspect-ratio: 16/7;
border-radius: 12px;
}
/* Remaining photos: uniform 3/2 cells */
.listing-top .gallery__tile {
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.listing-top .gallery__tile img {
aspect-ratio: 3/2;
border-radius: 10px;
}
/* Section head (title "Photos") inside listing gallery: compact */
.listing-top .section-head { margin-bottom: 20px; }
.listing-top .section-head h2 { font-size: clamp(18px, 2vw, 24px); font-weight: 700; }
/* Listing detail — 2-column (main + sidebar), stacks on mobile */
.listing-detail{
display:grid;
grid-template-columns: minmax(0,1fr) 340px;
gap: 2rem;
max-width: 1280px;
margin: 0 auto;
padding: 2rem 24px 3rem;
align-items: start;
}
.listing-detail__side{
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Side column — compress section padding on map + lead form cards */
.listing-detail__side .section {
padding: 24px 28px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--bg);
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
/* The lead form inside the sidebar: hide the full split-photo layout;
keep only the form portion. The .lead__left photo panel is not useful
in the narrow sidebar. */
.listing-detail__side .lead { display: block; }
.listing-detail__side .lead__left { display: none; }
.listing-detail__side .lead__right {
padding: 0;
background: transparent;
}
.listing-detail__side .lead__title { font-size: clamp(18px, 2vw, 22px); margin-bottom: 12px; }
/* Spec section headings (text_block) inside the main column:
render as a clean subhead that separates spec groups. */
.listing-detail__main .section { padding: 0; background: transparent; }
.listing-detail__main .section + .section { margin-top: 2rem; }
.listing-detail__main .text__title {
font-size: clamp(15px, 1.5vw, 18px);
font-weight: 700;
letter-spacing: .01em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
/* First spec group: no extra top margin */
.listing-detail__main .section:first-child { margin-top: 0; }
/* Tighten the spec rows in the main column: no max-width cap, flush left */
.listing-detail__main .spec { margin: 0; max-width: none; padding: 9px 0; }
/* Last spec in each group: no bottom hairline */
.listing-detail__main .section .spec:last-of-type { border-bottom: none; }
/* ── bio_links block — link-in-bio button stack ─────────────────────────── */
.bio-links { max-width: 540px; margin: 0 auto; width: 100%; padding: 0 24px; }
.bio-links__head { text-align: center; margin-bottom: 32px; }
.bio-links__head h2 { margin-bottom: 8px; }
.bio-links__head p { color: var(--ink-muted); font-size: 16px; margin: 0; }
.bio-links__stack { display: flex; flex-direction: column; gap: 14px; }
.bio-link-btn {
display: block;
width: 100%;
padding: 16px 24px;
text-align: center;
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
color: var(--ink);
background: var(--bg);
border: 1.5px solid var(--line);
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
text-decoration: none;
}
.bio-link-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,.10);
border-color: var(--accent);
color: var(--ink);
}
.section--soft .bio-link-btn, .section--light .bio-link-btn { background: var(--bg); }
/* ── bio_qr block — centered QR code for agent site ────────────────────── */
.bio-qr { max-width: 400px; margin: 0 auto; text-align: center; padding: 0 24px; }
.bio-qr__image-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.bio-qr__img { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: 12px; display: block; }
.bio-qr__caption { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.bio-qr__sub { color: var(--ink-muted); font-size: 14px; margin: 0 0 16px; }
.bio-qr__downloads { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.btn-ghost--sm {
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
background: transparent;
border: 1.5px solid var(--line);
border-radius: 8px;
text-decoration: none;
transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn-ghost--sm:hover { background: rgba(12,12,13,.04); border-color: var(--ink); color: var(--ink); }
/* ── hero--bio: centered link-in-bio profile card ───────────────────────── *
* Replaces the standard full-bleed photo hero on agent /bio pages only. *
* Standard .hero styles do not apply here (layout override via modifier). *
* All values use existing brand tokens — no new palette introduced. *
* ─────────────────────────────────────────────────────────────────────────*/
/* Reset the full-screen photo hero defaults for this variant */
.hero--bio {
min-height: 0;
background: var(--paper);
display: block;
overflow: visible;
color: var(--ink);
padding: calc(var(--nav-h) + 48px) 24px 0;
}
/* Suppress the overlay pseudo-element from the base .hero rule */
.hero--bio .hero__bg::after { display: none; }
/* ── Bio inner card — centered single column ── */
.bio-hero__inner {
max-width: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
text-align: center;
}
/* ── Avatar ── */
.bio-hero__avatar-wrap {
margin-bottom: 24px;
}
.bio-hero__avatar {
width: 112px;
height: 112px;
border-radius: 50%;
object-fit: cover;
display: block;
/* Full border ring in accent — restrained, premium */
border: 3px solid var(--line);
box-shadow: 0 0 0 4px var(--paper), 0 4px 20px rgba(0,0,0,.10);
}
/* Initials fallback: same size/shape as photo avatar */
.bio-hero__avatar--initials {
background: var(--ink);
color: var(--paper);
font-size: 36px;
font-weight: 700;
letter-spacing: -.02em;
display: flex;
align-items: center;
justify-content: center;
/* width/height inherited from .bio-hero__avatar */
}
/* ── Identity: name + role·market ── */
.bio-hero__identity {
margin-bottom: 16px;
}
.bio-hero__name {
font-size: clamp(28px, 6vw, 40px);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1.05;
color: var(--ink);
margin: 0 0 6px;
}
.bio-hero__eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-muted);
}
/* ── Quoted bio paragraph ── */
.bio-hero__quote {
font-size: 16px;
line-height: 1.75;
color: var(--ink-muted);
max-width: 40ch;
margin: 0 0 32px;
padding: 20px 24px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--bg);
font-style: normal; /* intentional — editorial, not italic */
position: relative;
}
/* Subtle open-quote glyph above the box — decorative only, not a giant slab */
.bio-hero__quote::before {
content: '\201C';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
font-size: 32px;
line-height: 1;
color: var(--line);
background: var(--paper);
padding: 0 6px;
}
/* ── Contact action row — equal-width 3-up pill buttons ── */
.bio-hero__actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
max-width: 400px;
margin-bottom: 8px;
}
/* Single button visible (e.g. only phone): collapse to auto-width centered */
.bio-hero__actions:has(:only-child) {
grid-template-columns: 1fr;
max-width: 160px;
}
/* Two buttons: 2-col */
.bio-hero__actions:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
grid-template-columns: repeat(2, 1fr);
max-width: 280px;
}
.bio-action-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 14px 8px 12px;
border-radius: 14px;
border: 1.5px solid var(--line);
background: var(--bg);
color: var(--ink);
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
/* Equal height — no accidental line-wrap on labels */
min-height: 72px;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.bio-action-btn:hover {
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(0,150,255,.12);
transform: translateY(-2px);
color: var(--ink);
}
.bio-action-btn__icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
margin-bottom: 2px;
}
.bio-action-btn__label {
white-space: nowrap;
line-height: 1;
}
/* Phone number sub-line — smaller, muted, intentional second line */
.bio-action-btn__sub {
font-size: 10px;
font-weight: 500;
color: var(--ink-muted);
letter-spacing: .02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
text-transform: none;
}
/* Graceful reflow on very narrow screens (< 360px) */
@media (max-width: 360px) {
.bio-hero__actions {
grid-template-columns: 1fr;
max-width: 200px;
}
.bio-action-btn {
flex-direction: row;
gap: 10px;
padding: 14px 20px;
min-height: 52px;
justify-content: flex-start;
text-transform: none;
letter-spacing: 0;
font-size: 14px;
}
.bio-action-btn__icon { margin-bottom: 0; }
}
/* ── bio_links: tighten spacing on bio page ── */
.hero--bio ~ .section .bio-links,
.bio-links { max-width: 480px; }
/* Hairline divider between sections on the bio page — clean rhythm */
.hero--bio ~ .section {
padding-top: 36px;
padding-bottom: 36px;
}
.hero--bio ~ .section + .section {
border-top: 1px solid var(--line);
}
/* ── bio_qr refinement: slightly larger, more prominent ── */
.bio-qr__img {
width: 220px;
height: 220px;
border-radius: 16px;
}
.bio-qr__caption {
font-size: 15px;
font-weight: 700;
letter-spacing: .02em;
}
/* Listing detail: tablet — sidebar drops below on ≤ 900px */
@media (max-width:900px){
.listing-detail{ grid-template-columns:1fr; padding:1.5rem 20px 2.5rem; }
.listing-detail__side{ position:static; }
/* Gallery on tablet: 2-up grid instead of 3-up */
.listing-top .gallery { grid-template-columns: repeat(2, 1fr); }
.listing-top .gallery__tile:first-child img { aspect-ratio: 16/8; }
}
/* Listing detail: phone — 1-up gallery */
@media (max-width:600px){
.listing-detail{ gap:1.5rem; padding:1rem 16px 2rem; }
.listing-top .section { padding-top:28px; padding-bottom:28px; }
.listing-top .gallery { grid-template-columns: 1fr; gap:8px; }
.listing-top .gallery__tile:first-child { grid-column: auto; border-radius:10px; }
.listing-top .gallery__tile:first-child img { aspect-ratio:4/3; border-radius:10px; }
.listing-top .gallery__tile img { aspect-ratio:4/3; }
.listing-detail__side .section { padding:20px; border-radius:10px; }
}
/* ── Listings import-builder preview (scoped — never affects live pages) ── */
.tr-listing-preview .hero,
.tr-listing-preview .listing-hero { min-height: 380px; }
.tr-listing-preview .listing-detail__side { position: static; }
.tr-listing-preview [data-field].tr-hl { outline: 3px solid var(--accent, #0096ff); outline-offset: 2px; border-radius: 4px; }
.tr-listing-preview .tr-field-cap { position: relative; }
/* ── Listings import-builder: Field map pane ────────────────────────────── */
.import-fieldmap{border:1px solid var(--line,#ccd);border-radius:10px;background:#fff;padding:8px 0;overflow-y:auto;max-height:680px}
.import-fieldmap .fmsec{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#667);padding:10px 16px 4px;border-top:1px solid var(--line,#ccd);margin-top:4px}
.import-fieldmap .fmsec:first-child{border-top:none;margin-top:0}
.import-fieldmap .fmrow{display:grid;grid-template-columns:130px 1fr auto;gap:6px 10px;align-items:baseline;padding:4px 16px}
.import-fieldmap .fmrow--warn{background:#fff8e1}
.import-fieldmap .fmlabel{font-size:12px;font-weight:600;color:var(--ink,#111);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-fieldmap .fmval{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink,#111);word-break:break-all}
.import-fieldmap .fmval--empty{color:var(--muted,#667);font-style:italic;font-family:inherit}
.import-fieldmap .fmsrc{font-size:11px;color:var(--accent,#0070f3);white-space:nowrap;font-weight:500}
.import-fieldmap .fmsrc--warn{color:#b45309;font-weight:600}