/* ══════════════════════════════════════════════════════════
   PROPERTY CARD — matches homepage .prop-card exactly.
   ══════════════════════════════════════════════════════════ */

@keyframes brg-imgLoad {
  from { opacity:0 }
  to   { opacity:1 }
}
.prop-card .prop-card-img img[loading="lazy"] {
  animation: brg-imgLoad .6s cubic-bezier(0.16,1,0.3,1) both
}
.prop-card.reveal {
  opacity: 0;
  transform: translateY(24px) scale(.985)
}
.prop-card {
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1),
              transform .7s cubic-bezier(0.16,1,0.3,1),
              box-shadow .7s cubic-bezier(0.16,1,0.3,1)
}
.prop-card.reveal-d1 { transition-delay: .12s }
.prop-card.reveal-d2 { transition-delay: .24s }
.prop-card.reveal.visible {
  opacity: 1;
  transform: none
}
.prop-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  display: block
}
.prop-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden
}
.prop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1)
}
.prop-card:hover .prop-card-img img {
  transform: scale(1.04)
}
/* Second photo — sits on top, fades in on hover. The load-fade animation
   is suppressed so it stays hidden until hover. */
.prop-card-img .prop-img-b {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: none !important;
  transition: opacity .7s cubic-bezier(0.16,1,0.3,1),
              transform 1.4s cubic-bezier(0.16,1,0.3,1);
}
@media (hover:hover) {
  .prop-card:hover .prop-card-img .prop-img-b { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .prop-card.reveal { opacity: 1; transform: none; transition: none }
  .prop-card-img img { transition: none }
}
.prop-card-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 11px 15px;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--sans, 'Neue Montreal', sans-serif);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase
}
.prop-body {
  padding: 20px 0 30px;
  background: #fff
}
.prop-body .prop-title {
  margin-top: 10px; /* was inherited from the legacy h4 rule */
  font-family: var(--serif, 'ABC Arizona', Georgia, serif);
  font-size: 1.3rem;
  font-weight: 300;
  color: #1d1d1b;
  line-height: 1.25;
  margin-bottom: 12px
}
.prop-meta {
  display: flex;
  gap: 5px 0;
  flex-wrap: wrap;
  margin-bottom: 16px
}
.prop-meta span {
  font-family: var(--sans, 'Neue Montreal', sans-serif);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b6b68
}
.prop-meta span:not(:first-child)::before {
  content: '·';
  margin: 0 8px;
  color: #9a9a96
}
.prop-price {
  font-family: var(--sans, 'Neue Montreal', sans-serif);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .01em;
  color: #1d1d1b;
  border-top: 1px solid rgba(29,29,27,.12);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
/* ── Listing grid (listing pages, district archives, search, Club) ──
   One column on phones, two from 768px, three from 992px; 30px between
   columns, 28px between rows, 40px side margins (15px up to 992px).
   Replaces Bootstrap's .container-fluid / .row / .col-md-4 col-sm-6 col-xs-12
   with the same measurements. Cards in a row share the tallest height. */
.brg-grid-wrap { padding-left: 40px; padding-right: 40px }
@media only screen and (max-width: 992px) { .brg-grid-wrap { padding-left: 15px; padding-right: 15px } }
#brgPropGrid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 30px; align-items: stretch }
@media (min-width: 768px) { #brgPropGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 992px) { #brgPropGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
/* Empty-state messages span the whole row */
#brgPropGrid > :not(.prop-col) { grid-column: 1 / -1; margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px }
.prop-col { display: flex; flex-direction: column; min-width: 0; margin-bottom: 28px }
.prop-col .prop-card { flex: 1; display: flex; flex-direction: column }
.prop-col .prop-card .prop-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between }





/* ══ BRG DARK THEME — generated, additive; see header.php tokens ══ */

/* ──────────────────────────────────────────────────────────────────────────
   Every rule below is ADDITIVE and scoped to :where(:root[data-theme="dark"]).
   Nothing above this marker was modified, so light mode renders exactly as it
   did before dark mode existed.

   :where() contributes ZERO specificity on purpose. These rules therefore tie
   with the light-mode rules they shadow and win only on source order — which
   means a page template loading after header.php can still override them (that
   is what keeps the photo-hero nav white and transparent).
   ────────────────────────────────────────────────────────────────────────── */
:where(:root[data-theme="dark"]) .prop-card{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .prop-body{background:var(--surface)}
:where(:root[data-theme="dark"]) .prop-body .prop-title{color:var(--ink)}
:where(:root[data-theme="dark"]) .prop-meta span{color:var(--ink-2)}
:where(:root[data-theme="dark"]) .prop-meta span:not(:first-child)::before{color:var(--ink-3)}
:where(:root[data-theme="dark"]) .prop-price{color:var(--ink);border-top:1px solid rgba(255,255,255,.12)}
/* ══ end BRG DARK THEME ══ */