/* panavida.estate/listings — matches the homepage: deep navy, gold, Cinzel + Cormorant Garamond. */
:root {
  --night:#1a2138; --navy:#2a3a5e; --ivory:#f6f2e9; --paper:#fffdf8; --ink:#1f2638; --muted:#6c7285;
  --gold:#c9a24e; --gold-soft:#e9c878; --gold-deep:#a8842f; --line:#e6ddc9;
  --display:"Cinzel", Georgia, serif; --serif:"Cormorant Garamond", Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ivory); color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.55; }
a { color:var(--gold-deep); }
img { max-width:100%; display:block; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

header.top { background:var(--night); display:flex; align-items:center; justify-content:space-between; padding:12px 20px;
  border-bottom:1px solid rgba(233,200,120,.35); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-family:var(--display); letter-spacing:.12em; font-size:17px; }
.brand img { width:44px; height:44px; border-radius:50%; }
.langs { display:flex; gap:4px; }
.langs a { color:rgba(255,255,255,.72); text-decoration:none; font-family:var(--ui); font-size:13px; letter-spacing:.08em; padding:6px 9px; border-radius:6px; }
.langs a[aria-current] { color:var(--night); background:var(--gold-soft); font-weight:600; }

main { max-width:1100px; margin:0 auto; padding:28px 18px 60px; }
.intro { text-align:center; padding:18px 0 8px; }
h1, h2 { font-family:var(--display); font-weight:500; color:var(--navy); letter-spacing:.03em; }
.intro h1 { font-size:clamp(28px, 5vw, 42px); margin:0 0 6px; }
.intro p { margin:0 auto; max-width:640px; color:var(--muted); font-style:italic; font-size:21px; }

.filters { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; justify-content:center; margin:26px 0 10px; font-family:var(--ui); font-size:13px; color:var(--muted); }
.filters label { display:flex; flex-direction:column; gap:4px; }
.filters select, .filters input[type=number] { font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); min-width:130px; }
.seg { border:0; padding:0; margin:0; display:flex; border:1px solid var(--line); border-radius:30px; overflow:hidden; background:var(--paper); }
.seg label { flex-direction:row; }
.seg input { position:absolute; opacity:0; }
.seg span { padding:8px 14px; cursor:pointer; font-size:14px; color:var(--navy); }
.seg input:checked + span { background:var(--navy); color:#fff; }
.seg input:focus-visible + span { outline:2px solid var(--gold); }
.count { text-align:center; font-family:var(--ui); font-size:13px; color:var(--muted); margin:6px 0 18px; }

.cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:22px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.card:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(26,33,56,.12); }
.card a { color:inherit; text-decoration:none; display:block; }
.card .hero { aspect-ratio:4/3; background:#e7e0cf; position:relative; }
.card .hero img { width:100%; height:100%; object-fit:cover; }
.flag { position:absolute; top:10px; left:10px; background:rgba(26,33,56,.85); color:var(--gold-soft); font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:20px; }
.flag.inline { position:static; vertical-align:middle; margin-left:6px; }
.card .body { padding:16px 18px 18px; }
.kicker { font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 6px; }
.card h2 { font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.25; margin:0 0 8px; color:var(--ink); letter-spacing:0; }
.price { font-family:var(--display); color:var(--navy); font-size:21px; margin:0; }
.price.big { font-size:28px; }
.facts, .place { font-family:var(--ui); font-size:14px; color:var(--muted); margin:6px 0 0; }
.empty { text-align:center; color:var(--muted); font-style:italic; padding:30px 10px; }
.cta { text-align:center; margin-top:34px; }
.btn { display:inline-block; font-family:var(--ui); font-weight:600; font-size:16px; letter-spacing:.04em; text-decoration:none; color:var(--night);
  background:linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep)); padding:13px 24px; border-radius:30px; box-shadow:0 6px 18px rgba(168,132,47,.3); }
.btn:hover { filter:brightness(1.06); }

/* detail */
.backlink { font-family:var(--ui); font-size:14px; margin:0 0 14px; }
.backlink a { text-decoration:none; }
.gallery { position:relative; margin:0 -18px 20px; }
.track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:6px; scrollbar-width:none; }
.track::-webkit-scrollbar { display:none; }
.track figure { margin:0; flex:0 0 100%; scroll-snap-align:center; aspect-ratio:3/2; background:#e7e0cf; }
.track img { width:100%; height:100%; object-fit:cover; }
.gallery .hint { position:absolute; right:14px; bottom:10px; margin:0; background:rgba(26,33,56,.75); color:#fff; font-family:var(--ui); font-size:12px; padding:3px 9px; border-radius:12px; }
.headline h1 { font-size:clamp(26px, 4.5vw, 38px); margin:6px 0 8px; line-height:1.2; }
.cols { display:grid; grid-template-columns:1.6fr 1fr; gap:34px; margin-top:26px; }
.cols h2 { font-size:18px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 10px; }
.cols section p { margin:0 0 14px; }
aside dl { margin:0 0 22px; font-family:var(--ui); font-size:15px; }
aside dl div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
aside dt { color:var(--muted); }
aside dd { margin:0; text-align:right; font-weight:600; color:var(--ink); }
.amen { list-style:none; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:6px; font-family:var(--ui); font-size:13px; }
.amen li { border:1px solid var(--line); background:var(--paper); padding:5px 11px; border-radius:20px; }

footer { background:var(--night); color:rgba(255,255,255,.75); text-align:center; padding:30px 18px 36px; font-family:var(--ui); font-size:13px; }
footer p { margin:6px 0; }
footer a { color:var(--gold-soft); }
.social { display:flex; gap:18px; justify-content:center; margin-bottom:12px; }
.social a { text-decoration:none; letter-spacing:.08em; }

@media (min-width: 760px) {
  .gallery { margin:0 0 24px; }
  .track figure { flex-basis:78%; border-radius:10px; overflow:hidden; }
}
@media (max-width: 760px) {
  .cols { grid-template-columns:1fr; gap:10px; }
  body { font-size:18px; }
}
@media (prefers-reduced-motion: reduce) { .card { transition:none; } }
.ipre { font-size:13px; color:#6b7183; margin-top:6px; } .ipre a { color:inherit; }