/* team-sold.css — Sold Properties page.
 *
 * Grid of closed team sales. Shares the Inter/neutral card language with
 * team-map.css but is a normal document-flow page (no fixed split view), so it
 * scrolls under the team header instead of pinning to it.
 * --tsh (team header height) is set at runtime by team-sold.js.
 */
:root { --tsh: 92px; --ts-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

/* Elementor uppercases and letter-spaces almost everything; opt this subtree out. */
.tsold, .tsold * { font-family: var(--ts-font) !important; text-transform: none !important; letter-spacing: normal !important; box-sizing: border-box; }

.tsold { max-width: 1280px; margin: 0 auto; padding: calc(var(--tsh) + 34px) 22px 80px; }

/* The site header is transparent-over-hero by default (white logo + white nav).
   This page is white, so force it solid and flip the logo — same treatment
   team-map.css applies to map-search. */
.tsold-lock .header-main-wrap { background: #fff !important; box-shadow: 0 1px 0 rgba(0,0,0,.08) !important; }
.tsold-lock .header-main-wrap a, .tsold-lock .header-main-wrap .elementor-item { color: #1a1a1a !important; }
.tsold-lock .header-main-wrap img[src*="Logo-White"], .tsold-lock .header-main-wrap img[src*="14402964"] { filter: invert(1) !important; }

/* ── header ─────────────────────────────────────────── */
.tsold-head { margin-bottom: 26px; }
/* !important throughout: Elementor's page CSS sets a white heading colour for
   the hero this shell was copied from, which otherwise wins. */
.tsold-h {
  font-family: 'LEMON MILK', 'Lemonmilk', var(--ts-font) !important;
  font-size: 34px; font-weight: 700; color: #2f2f2f !important;
  letter-spacing: 0.01em !important; margin: 0 0 10px;
}
.tsold-sub { font-size: 14.5px; color: #6b6b6b !important; line-height: 1.55; margin: 0; max-width: 62ch; }
.tsold-count { font-size: 12px; letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: #8a8a8a; margin-top: 16px; font-weight: 600; }

/* ── filter bar ─────────────────────────────────────── */
.tsold-bar { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 28px; }
.tsold-bar input, .tsold-bar select {
  font-size: 13.5px; padding: 9px 12px; border: 1px solid #dcdcdc; border-radius: 7px;
  background: #fff; color: #222; outline: none; min-width: 150px;
}
.tsold-bar input:focus, .tsold-bar select:focus { border-color: #141414; }
.tsold-bar input[type="search"] { flex: 1 1 260px; min-width: 220px; }
.tsold-reset {
  font-size: 13px; font-weight: 600; padding: 9px 16px; border: 1px solid #141414;
  border-radius: 7px; background: #fff; color: #141414; cursor: pointer;
}
.tsold-reset:hover { background: #141414; color: #fff; }

/* ── grid ───────────────────────────────────────────── */
.tsold-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }

.tsold-card {
  background: #fff; border: 1px solid #ececec; border-radius: 10px; overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tsold-card:hover { border-color: #c8c8c8; box-shadow: 0 10px 26px -14px rgba(0,0,0,0.28); transform: translateY(-2px); }

.tsold-photo { position: relative; aspect-ratio: 4 / 3; background: #f1f1f1 center/cover no-repeat; }
.tsold-badge {
  position: absolute; top: 9px; left: 9px; background: #141414; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; padding: 4px 9px; border-radius: 4px;
}
.tsold-date {
  position: absolute; bottom: 9px; right: 9px; background: rgba(255,255,255,0.94); color: #333;
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 4px;
}

.tsold-body { padding: 13px 14px 15px; }
.tsold-price { font-size: 19px; font-weight: 700; color: #111; margin-bottom: 4px; }
.tsold-ask { font-size: 11.5px; color: #999; font-weight: 500; margin-left: 7px; }
.tsold-addr { font-size: 13.5px; font-weight: 600; color: #222; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsold-city { font-size: 12px; color: #8a8a8a; margin-top: 2px; }
.tsold-meta { font-size: 11.5px; color: #8a8a8a; margin-top: 9px; padding-top: 9px; border-top: 1px solid #f0f0f0; }
.tsold-agent { font-size: 11.5px; color: #6b6b6b; margin-top: 6px; }

/* ── states ─────────────────────────────────────────── */
.tsold-state { padding: 70px 20px; text-align: center; color: #8a8a8a; font-size: 14.5px; }
.tsold-more { display: block; margin: 34px auto 0; font-size: 13.5px; font-weight: 600;
  padding: 12px 30px; border: 1px solid #141414; border-radius: 7px; background: #fff;
  color: #141414; cursor: pointer; }
.tsold-more:hover { background: #141414; color: #fff; }

.tsold-skel { background: #f4f4f4; border-radius: 10px; aspect-ratio: 4 / 3.35;
  animation: tsold-pulse 1.4s ease-in-out infinite; }
@keyframes tsold-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.55 } }
@media (prefers-reduced-motion: reduce) {
  .tsold-skel { animation: none }
  .tsold-card:hover { transform: none }
}

@media (max-width: 640px) {
  .tsold { padding-left: 15px; padding-right: 15px; }
  .tsold-h { font-size: 24px; }
  .tsold-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 13px; }
}