/*
 * BWS 2.0 Property World
 * Description: Housing/catalog and member-home scene surfaces.
 * TOC: page shell; layered scene; cards; detail; room rails; responsive.
 * Summary: Uses environment, interior-window, building and sign layers for District housing.
 */
.property-body {
  min-height: 100vh;
  background: #080402;
  color: #f7e8cc;
}

.property-shell {
  width: min(1320px, calc(100% - 34px));
  margin: 0 auto;
  padding: 34px 0 76px;
}

.property-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 22px;
}

.property-kicker {
  color: #d99a31;
  font: 800 12px var(--font-ui);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.property-intro h1,
.property-copy h1,
.home-heading h1 {
  margin: 8px 0;
  color: #fff3df;
  font: 700 clamp(38px, 5vw, 66px)/.98 var(--font-display);
}

.property-intro p,
.property-copy p,
.home-heading p {
  max-width: 780px;
  color: rgba(255,237,205,.76);
  font-size: 17px;
  line-height: 1.5;
}

.source-pill {
  border: 1px solid rgba(222,159,53,.34);
  border-radius: 999px;
  padding: 8px 13px;
  color: #f2bb5e;
  font: 800 11px var(--font-ui);
  text-transform: uppercase;
}
.source-pill[data-live="true"] { color: #74e0b7; }

.property-tabs,
.detail-actions,
.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.property-tabs button,
.property-tabs a,
.detail-actions a,
.detail-actions button,
.room-actions button {
  border: 1px solid rgba(222,159,53,.38);
  border-radius: 6px;
  background: rgba(27,12,4,.8);
  color: #efd29b;
  cursor: pointer;
  font: 800 13px var(--font-ui);
  padding: 11px 16px;
  text-decoration: none;
  text-transform: uppercase;
}

.property-tabs button.is-active,
.detail-actions .primary {
  background: linear-gradient(180deg, #e3aa3d, #b76c1d);
  color: #180a03;
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.property-card {
  overflow: hidden;
  border: 1px solid rgba(216,148,40,.35);
  border-radius: 7px;
  background: rgba(20,9,3,.92);
}

.property-card img {
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: contain;
  background: radial-gradient(circle at 50% 75%, rgba(221,148,42,.24), transparent 48%);
  display: block;
}

.property-card-body {
  padding: 15px;
}

.property-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.property-badges span {
  border: 1px solid rgba(224,161,53,.32);
  border-radius: 999px;
  color: #e8b762;
  font: 800 11px var(--font-ui);
  padding: 5px 8px;
  text-transform: uppercase;
}

.property-card h2 {
  color: #fff0d6;
  font: 700 27px/1 var(--font-ui);
  margin: 0 0 8px;
}

.property-price {
  color: #efbc5e;
  display: block;
  font: 700 21px var(--font-ui);
  margin: 12px 0;
}

.property-card a {
  border: 1px solid rgba(224,161,53,.44);
  border-radius: 6px;
  color: #f3d295;
  display: block;
  font: 800 13px var(--font-ui);
  padding: 11px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.layered-scene {
  position: relative;
  min-height: min(68vh, 660px);
  overflow: hidden;
  border: 1px solid rgba(220,151,43,.35);
  border-radius: 8px;
  background: #070301;
}

.scene-environment,
.scene-interior {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-environment {
  filter: saturate(1.08) contrast(1.05);
}

.scene-interior {
  z-index: 1;
  object-fit: cover;
}

.scene-tone {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(7,3,1,.75), transparent 48%, rgba(7,3,1,.36)), linear-gradient(180deg, transparent 45%, rgba(7,3,1,.8));
}

.property-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
  gap: 18px;
  margin-top: 18px;
}

.property-copy,
.home-summary,
.room-row {
  border: 1px solid rgba(216,148,40,.29);
  border-radius: 7px;
  background: rgba(20,9,3,.88);
  padding: 18px;
}

.property-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 18px 0;
}

.property-specs div {
  border: 1px solid rgba(216,148,40,.2);
  padding: 11px;
}

.property-specs span {
  color: rgba(255,237,205,.58);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}

.property-specs strong { color: #fff0d6; }

.home-scene-wrap {
  width: 100%;
  margin-bottom: 22px;
}

.home-heading,
.home-summary {
  width: min(1320px, calc(100% - 34px));
  margin: 24px auto;
}

.room-levels {
  width: min(1320px, calc(100% - 34px));
  margin: 0 auto 70px;
  display: grid;
  gap: 18px;
}

.room-row-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.room-row h2 {
  color: #fff0d6;
  font: 700 27px var(--font-ui);
  margin: 0;
}

.room-rail {
  display: grid;
  grid-auto-columns: minmax(240px, 30%);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.room-card {
  position: relative;
  min-height: 205px;
  overflow: hidden;
  border: 1px solid rgba(222,159,53,.32);
  scroll-snap-align: start;
}
.room-card img { width: 100%; height: 205px; object-fit: cover; }
.room-card div {
  position: absolute;
  inset: auto 0 0;
  padding: 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.room-card strong { display: block; color: #fff3de; }
.room-card small { color: #e1af57; text-transform: uppercase; }

@media (max-width: 940px) {
  .property-grid,
  .property-detail-grid { grid-template-columns: 1fr; }
  .room-rail { grid-auto-columns: minmax(230px, 70%); }
}

@media (max-width: 600px) {
  .property-intro { align-items: start; flex-direction: column; }
  .layered-scene { min-height: 420px; }
}

/* ── New section shared ───────────────────────────────────────────────────── */
.prop-section { margin-top: 22px; }
.prop-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.prop-section-title {
  font: 700 clamp(26px, 4vw, 40px)/1 var(--font-display);
  color: #fff3df;
  margin: 0 0 8px;
}
.prop-section-sub {
  font-size: 14px;
  color: rgba(255, 237, 205, .62);
  max-width: 580px;
  line-height: 1.55;
  margin: 0;
}
.prop-list-btn {
  background: rgba(200, 137, 42, .15);
  border: 1px solid rgba(200, 137, 42, .38);
  border-radius: 7px;
  color: #c8892a;
  font: 700 13px var(--font-ui);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.prop-list-btn:hover { background: rgba(200, 137, 42, .26); }
.prop-loading { color: rgba(255, 237, 205, .38); font-size: 14px; padding: 48px 0; text-align: center; }
.prop-empty   { color: rgba(255, 237, 205, .38); font-size: 14px; padding: 48px 0; text-align: center; }

/* ── Physical address grid ────────────────────────────────────────────────── */
.prop-physical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.prop-physical-card {
  background: linear-gradient(165deg, rgba(24, 12, 4, .97), rgba(10, 7, 2, .98));
  border: 1px solid rgba(200, 137, 42, .22);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .14s, transform .14s;
}
.prop-physical-card:hover { border-color: rgba(200, 137, 42, .48); transform: translateY(-2px); }

.prop-phys-img {
  height: 160px;
  position: relative;
  background: linear-gradient(135deg, rgba(200, 137, 42, .22), rgba(80, 50, 10, .5));
}
.prop-phys-type {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(14, 11, 7, .82);
  border: 1px solid rgba(200, 137, 42, .32);
  color: #c8892a;
  font: 700 10px var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 99px;
}
.prop-phys-verified {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(46, 204, 113, .2);
  border: 1px solid rgba(46, 204, 113, .45);
  color: #2ecc71;
  font: 700 10px var(--font-ui);
  padding: 3px 9px;
  border-radius: 99px;
}
.prop-phys-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.prop-phys-name    { font: 700 16px/1.2 var(--font-ui); color: #f6ead7; margin-bottom: 4px; }
.prop-phys-address { font-size: 12px; color: #c8892a; font-family: var(--font-ui); margin-bottom: 9px; }
.prop-phys-desc    { font-size: 12px; color: rgba(246, 234, 215, .55); line-height: 1.55; margin: 0 0 12px; flex: 1; }
.prop-phys-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 13px;
}
.prop-phys-price { font: 700 17px var(--font-display); color: #f5d087; }
.prop-phys-size  { font-size: 11px; color: rgba(246, 234, 215, .38); font-family: var(--font-ui); }
.prop-phys-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prop-phys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background .12s;
  white-space: nowrap;
}
.prop-phys-btn--primary { background: #c8892a; color: #0e0b07; }
.prop-phys-btn--primary:hover { background: #d99f3a; }
.prop-phys-btn--ghost { background: transparent; border: 1px solid rgba(200, 137, 42, .35); color: #c8892a; }
.prop-phys-btn--ghost:hover { background: rgba(200, 137, 42, .1); }

/* ── Status symbols grid ──────────────────────────────────────────────────── */
.prop-symbols-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.prop-symbol-card {
  background: linear-gradient(165deg, rgba(24, 12, 4, .97), rgba(10, 7, 2, .98));
  border: 1px solid rgba(200, 137, 42, .22);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .14s, transform .14s;
}
.prop-symbol-card:hover { transform: translateY(-2px); }
.prop-symbol-card.tier-bronze  { border-color: rgba(176, 109, 52, .3); }
.prop-symbol-card.tier-bronze:hover  { border-color: rgba(176, 109, 52, .6); }
.prop-symbol-card.tier-silver  { border-color: rgba(189, 189, 189, .3); }
.prop-symbol-card.tier-silver:hover  { border-color: rgba(189, 189, 189, .6); }
.prop-symbol-card.tier-gold    { border-color: rgba(200, 137, 42, .38); }
.prop-symbol-card.tier-gold:hover    { border-color: rgba(200, 137, 42, .72); }
.prop-symbol-card.tier-platinum { border-color: rgba(149, 95, 203, .4); }
.prop-symbol-card.tier-platinum:hover { border-color: rgba(149, 95, 203, .76); }

.prop-sym-graphic {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 14, 4, .6);
}
.tier-bronze  .prop-sym-graphic { background: linear-gradient(135deg, rgba(176, 109, 52, .22), rgba(60, 30, 10, .5)); }
.tier-silver  .prop-sym-graphic { background: linear-gradient(135deg, rgba(189, 189, 189, .14), rgba(60, 60, 60, .42)); }
.tier-gold    .prop-sym-graphic { background: linear-gradient(135deg, rgba(200, 137, 42, .26), rgba(100, 60, 5, .52)); }
.tier-platinum .prop-sym-graphic { background: linear-gradient(135deg, rgba(149, 95, 203, .22), rgba(50, 20, 80, .52)); }

.prop-sym-icon { font-size: 44px; line-height: 1; }
.prop-sym-tier {
  position: absolute;
  bottom: 8px; right: 10px;
  font: 800 10px var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 99px;
}
.tier-bronze  .prop-sym-tier { color: #b06d34; background: rgba(176, 109, 52, .15); border: 1px solid rgba(176, 109, 52, .35); }
.tier-silver  .prop-sym-tier { color: #bdbdbd; background: rgba(189, 189, 189, .12); border: 1px solid rgba(189, 189, 189, .3); }
.tier-gold    .prop-sym-tier { color: #c8892a; background: rgba(200, 137, 42, .15); border: 1px solid rgba(200, 137, 42, .35); }
.tier-platinum .prop-sym-tier { color: #9b6fcf; background: rgba(149, 95, 203, .15); border: 1px solid rgba(149, 95, 203, .35); }

.prop-sym-body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.prop-sym-name     { font: 700 15px/1.2 var(--font-ui); color: #f6ead7; margin-bottom: 3px; }
.prop-sym-rarity   { font: 700 10px var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: rgba(246, 234, 215, .35); margin-bottom: 8px; }
.prop-sym-desc     { font-size: 12px; color: rgba(246, 234, 215, .55); line-height: 1.5; margin: 0 0 12px; flex: 1; }
.prop-sym-footer   { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.prop-sym-price    { display: block; font: 700 16px var(--font-display); color: #f5d087; }
.prop-sym-cred     { display: block; font-size: 11px; color: rgba(246, 234, 215, .34); font-family: var(--font-ui); }
.prop-sym-equipped { font-size: 11px; color: rgba(246, 234, 215, .3); font-family: var(--font-ui); }
.prop-sym-btn {
  background: rgba(200, 137, 42, .15);
  border: 1px solid rgba(200, 137, 42, .36);
  border-radius: 6px;
  color: #c8892a;
  font: 700 12px var(--font-ui);
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.prop-sym-btn:hover { background: rgba(200, 137, 42, .28); }
.tier-platinum .prop-sym-btn { border-color: rgba(149, 95, 203, .4); color: #9b6fcf; }
.tier-platinum .prop-sym-btn:hover { background: rgba(149, 95, 203, .2); }

@media (max-width: 700px) {
  .prop-physical-grid,
  .prop-symbols-grid { grid-template-columns: 1fr; }
  .prop-section-header { flex-direction: column; align-items: flex-start; }
}