/* ==========================================================================
   Our Properties (listing) — uses the tokens and components of site.css
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.lh { position: relative; color: var(--cream); background: radial-gradient(110% 90% at 80% 20%, var(--maroon-2) 0%, var(--deep) 46%, var(--deepest) 100%); overflow: hidden; }
.lh::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(246, 241, 234, .035) 0 1px, transparent 1px 120px); pointer-events: none; }
.lh__inner { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); padding-top: calc(var(--header-h) + 18px); padding-bottom: clamp(56px, 8vw, 110px); }
.lh__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; color: var(--cream-70); }
.lh__crumbs a { text-decoration: none; transition: color .3s; }
.lh__crumbs a:hover { color: var(--cream); }
.lh__crumbs [aria-current] { color: var(--cream); font-weight: 600; }
.lh__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lh__copy { display: grid; gap: 18px; justify-items: start; }
.lh__title { font: 700 clamp(2.6rem, 5vw, 5rem)/.92 var(--font); font-variation-settings: var(--wide); letter-spacing: -.045em; text-transform: uppercase; }
.lh__title .line { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.lh__title .line > span { display: inline-block; }
.lh__title em { font-style: normal; font-weight: 300; color: var(--gold-soft); }
.lh__lede { max-width: 46ch; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--cream-70); }
.lh__stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 10px; border-top: 1px solid var(--line-light); width: 100%; }
.lh__stats div { flex: 1 1 0; min-width: 120px; padding: 18px 18px 0 0; }
.lh__stats div + div { padding-left: 18px; border-left: 1px solid var(--line-light); }
.lh__stats dt { font-size: .6875rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-50); }
.lh__stats dd { margin: 4px 0 0; font: 650 clamp(1.1rem, 1.6vw, 1.45rem)/1.15 var(--font); font-variation-settings: var(--semi); color: var(--cream); }
.lh__cards { position: relative; height: clamp(360px, 40vw, 560px); }
.lh-card { position: absolute; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 6px solid rgba(246, 241, 234, .92); box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .75); background: var(--deep); }
.lh-card--1 { left: 0; top: 4%; width: 68%; height: 74%; z-index: 1; }
.lh-card--2 { right: 0; bottom: 0; width: 44%; height: 70%; z-index: 2; }
.lh-card figcaption { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 40px 16px 14px; background: linear-gradient(0deg, rgba(23, 9, 8, .85), transparent); }
.lh-card figcaption b { font: 700 1rem/1.1 var(--font); font-variation-settings: var(--semi); text-transform: uppercase; letter-spacing: .02em; }
.lh-card figcaption span { font-size: .8125rem; color: var(--cream-70); }

/* --------------------------------------------------------------- listing */
.lst { padding-block: clamp(48px, 6vw, 88px) var(--section); }
.lst__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-bottom: 22px; margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.lst__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.lst__count { font-size: .9375rem; color: var(--stone); }
.lst__count b { color: var(--maroon); font-weight: 700; }
.lst__list { display: grid; gap: clamp(56px, 8vw, 120px); }
.lst__empty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--ink-2); }
.lst__empty .link-arrow { background: none; border: 0; padding: 0; cursor: pointer; }

.lrow { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; }
.lrow[hidden] { display: none; }
.lrow--flip .lrow__media { order: 2; }
.lrow__media { position: relative; display: grid; gap: 10px; }
.lrow__main { display: block; aspect-ratio: 16 / 11; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow-2); }
.lrow__main img { transition: transform 1.2s var(--ease); }
.lrow__main:hover img { transform: scale(1.04); }
.lrow__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lrow__thumbs--1 { grid-template-columns: 1fr; }
.lrow__thumbs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lrow__thumb { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; background: var(--paper-3); }
.lrow__thumb img { transition: transform .9s var(--ease); }
.lrow__thumb:hover img { transform: scale(1.06); }
.lrow__index { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 12px; border-radius: 999px; background: rgba(246, 241, 234, .92); color: var(--accent); font: 700 1rem/1 var(--font); font-variation-settings: var(--wide); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.lrow__body { display: grid; gap: 16px; align-content: start; justify-items: start; }
.lrow__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.lrow__name { font: 700 clamp(2rem, 3.8vw, 3.6rem)/.94 var(--font); font-variation-settings: var(--wide); letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); }
.lrow__name a { text-decoration: none; transition: color .3s; }
.lrow__name a:hover { color: var(--accent); }
.lrow__tagline { font-size: clamp(1.02rem, 1.3vw, 1.2rem); font-weight: 550; color: var(--accent); margin-top: -6px; }
.lrow__summary { color: var(--ink-2); line-height: 1.6; max-width: 52ch; }
.lrow__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 100%; border-radius: var(--r-md); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.lrow__facts div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-content: center; padding: 14px 16px; background: var(--card); }
.lrow__facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lrow__facts .icon { grid-row: 1 / span 2; align-self: center; width: 24px; height: 24px; color: var(--accent); }
.lrow__facts dt { font-size: .6875rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.lrow__facts dd { margin: 2px 0 0; font-weight: 650; line-height: 1.3; color: var(--ink); }
.lrow__amen { display: flex; flex-wrap: wrap; gap: 6px; }
.lrow__amen li { padding: 6px 12px; border-radius: 999px; background: var(--paper-2); font-size: .8125rem; color: var(--ink-2); }
.lrow__amen .is-more { background: transparent; border: 1px solid var(--line-strong); }
.lrow__amen .is-more a { text-decoration: none; color: var(--maroon); font-weight: 650; }
.lrow__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
    .lrow { grid-template-columns: minmax(0, 1fr); }
    .lrow--flip .lrow__media { order: 0; }
    .lrow__body { max-width: 720px; }
}
@media (max-width: 900px) {
    .lh__grid { grid-template-columns: minmax(0, 1fr); }
    .lh__cards { height: clamp(300px, 78vw, 460px); }
}
@media (max-width: 640px) {
    .lh__title { font-size: clamp(2rem, 10.4vw, 3.2rem); }
    .lh__stats div { flex: 1 1 50%; min-width: 0; padding: 14px 12px 0 0; }
    .lh__stats div + div { padding-left: 0; border-left: 0; }
    .lh__stats div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line-light); }
    .lh-card { border-width: 4px; }
    .lh-card figcaption { padding: 30px 12px 10px; }
    .lh-card figcaption b { font-size: .875rem; }
    .lrow__main { aspect-ratio: 4 / 3; }
    .lrow__thumbs { gap: 8px; }
    .lrow__index { min-width: 44px; height: 44px; top: 12px; left: 12px; font-size: .875rem; }
    .lrow__facts div { padding: 12px 12px; column-gap: 10px; }
    .lrow__facts .icon { width: 20px; height: 20px; }
    .lrow__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .lrow__main img, .lrow__thumb img { transition: none; }
}