/* deluxe.css — black & silver "Deluxe Collection" theme for deluxe-apartments.html.
   Everything scoped under .dlx so it never touches the shared site header/footer.
   Adapted from the luxury-collection handoff; cards are rendered by deluxe-list.js. */
.dlx{ --line:#2e2c33; background:#0c0c0e; color:#e9e7ee; }
.dlx .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ── dark hero ── */
.dlx-hero{ position:relative; background:radial-gradient(120% 130% at 80% -10%, #23222b 0%, #0c0c0e 55%); padding:54px 0 30px; overflow:hidden; }
.dlx-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 42%, rgba(214,219,228,.06) 50%, transparent 58%); pointer-events:none; }
.dlx-hero .crumbs{ font-size:13px; color:#8f8b97; }
.dlx-hero .crumbs a{ color:#b7b4bf; text-decoration:none; }
.dlx-badge{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; border-radius:999px; background:linear-gradient(120deg,#9aa0ad,#eef1f6 50%,#8b91a0); color:#16151a; }
.dlx-hero h1{ font-family:'Archivo',sans-serif; font-size:clamp(34px,5vw,58px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:1; margin:16px 0 0; background:linear-gradient(180deg,#fff 0%,#cfd2da 55%,#9fa3ad 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dlx-hero h1 i{ font-style:normal; }
.dlx-lede{ font-size:17px; color:#b7b4bf; max-width:60ch; margin:18px 0 0; line-height:1.6; }

/* ── list header ── */
.dlx-list-sec{ padding:26px 0 70px; }
.dlx .fhead{ display:flex; align-items:center; justify-content:space-between; padding:20px 4px 18px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.dlx .fhead h2{ font-family:'Archivo'; font-size:19px; font-weight:900; margin:0; color:#f0eee9; }
.dlx .fhead .sub{ font-size:12.5px; color:#8f8b97; margin-top:2px; }
.dlx .dlx-pill{ border-radius:999px; padding:6px 13px; font-size:12px; font-weight:800; background:rgba(255,255,255,.05); border:1px solid rgba(190,196,208,.4); color:#c4c8d2; }
.dlx #dlxList{ display:flex; flex-direction:column; gap:16px; }
.dlx .dlx-loading{ color:#8f8b97; padding:40px 4px; font-size:14.5px; }

/* ── luxury card ── */
.dlx .bRow{ display:flex; gap:14px; border-radius:16px; padding:14px; text-decoration:none; color:inherit; }
.dlx .bRow.lux{ background:linear-gradient(155deg,#1a1a1d 0%,#101013 55%,#1d1c20 100%); border:1.5px solid #2e2c33; box-shadow:0 30px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.dlx .bRow.lux:hover{ transform:translateY(-3px); box-shadow:0 40px 80px -38px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08); }
.dlx .bRow.lux::after{ content:""; position:absolute; top:0; left:-80%; width:85%; height:100%; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.085) 50%, rgba(255,255,255,.04) 60%, transparent 100%); animation:luxsheen 34s linear infinite; pointer-events:none; z-index:4; }
@keyframes luxsheen{ 0%{ left:-80%; } 55%{ left:170%; } 100%{ left:170%; } }

.dlx .bGal{ flex:0 0 620px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; height:200px; }
.dlx .bGal > div{ position:relative; border-radius:11px; overflow:hidden; background:#141417; }
.dlx .bGal > div img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.dlx .bGal .more{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(12,10,16,.4); color:#fff; font-family:'Archivo'; font-weight:800; font-size:14px; z-index:5; }

.dlx .badge{ position:absolute; top:11px; left:11px; z-index:5; font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; }
.dlx .lux-badge{ background:linear-gradient(120deg,#9aa0ad,#eef1f6 50%,#8b91a0); color:#16151a; box-shadow:0 4px 14px -4px rgba(190,196,208,.6); }

.dlx .bInfo{ flex:1; display:flex; flex-direction:column; position:relative; z-index:3; min-width:0; }
.dlx .tag{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#c4c8d2; }
.dlx .luxname{ font-family:'Archivo'; font-size:19px; font-weight:800; margin-top:3px; line-height:1.1; background:linear-gradient(180deg,#fff 0%,#cfd2da 55%,#9fa3ad 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dlx .lux-rating{ text-align:right; font-size:13px; font-weight:700; color:#e9e9ee; white-space:nowrap; }
.dlx .lux-muted{ color:#9b98a3; }
.dlx .bSpec{ font-size:13.5px; margin-top:8px; color:#9b98a3; }
.dlx .bSpec span{ display:inline-flex; align-items:center; gap:5px; margin-right:14px; white-space:nowrap; }
.dlx .lux-pill{ background:rgba(255,255,255,.06); border:1px solid rgba(190,196,208,.4); color:#d4d7de; padding:5px 11px; font-size:11.5px; border-radius:999px; }
.dlx .lux-price{ color:#fff; font-size:15px; }
.dlx .lux-price b{ font-size:20px; font-family:'Archivo'; font-weight:900; }
.dlx .btn-lux{ display:inline-flex; align-items:center; gap:7px; border:none; border-radius:10px; padding:11px 17px; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:800; font-size:13px; cursor:pointer; background:linear-gradient(120deg,#aeb4c0,#f2f4f8 48%,#9197a4); color:#16151a; box-shadow:0 8px 22px -10px rgba(190,196,208,.7); }

@media (prefers-reduced-motion: reduce){ .dlx .bRow.lux::after{ animation:none; opacity:.22; } }

/* mobile: single photo, stacked */
@media (max-width:820px){
  .dlx .bRow{ flex-direction:column; }
  .dlx .bGal{ flex:0 0 auto; grid-template-columns:1fr; height:210px; }
  .dlx .bGal .extra{ display:none; }
}