/* ==========================================================================
   PARK 699 · 柏舍 — 相关媒体
   继承 style.css 的设计令牌（--paper / --ink / --gold / --sky / --serif …），
   本文件只补齐媒体页独有的排版与组件。
   ========================================================================== */

.media-body{
  background: #16191c;
  color: var(--onphoto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.media-body img{ display:block; max-width:100%; height:auto; }
.media-body a{ color: inherit; text-decoration: none; }
.media-body button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.media-body code{
  font-family: var(--mono); font-size: .86em;
  padding: .12em .42em; border-radius: 3px;
  background: rgba(178,140,78,.14); color: var(--gold-hi);
}
.media-body ::selection{ background: rgba(90,125,98,.3); color: #fff; }

.mwrap{ width: min(1240px, 100% - var(--pad-x)*2); margin-inline: auto; }

/* ── 顶部导航 ───────────────────────────────────────────── */
.mnav{
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 24px;
  height: var(--nav-h); padding: 0 var(--pad-x);
  background: rgba(18,21,24,.78);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
.mbrand{
  font-family: var(--serif); font-size: 19px; letter-spacing: .1em;
  white-space: nowrap;
}
.mbrand .brand-cn{
  display: inline-block; margin-left: .5em; padding-left: .55em;
  font-size: 12px; letter-spacing: .22em; color: var(--gold);
  border-left: 1px solid var(--line);
}
.mnav-links{ display:flex; align-items:center; gap: 22px; margin-left:auto; font-size: 13.5px; }
.mnav-links a{ color: var(--onphoto-dim); padding: 6px 2px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.mnav-links a:hover{ color: #fff; }
.mnav-links a[aria-current="page"]{ color: var(--gold-hi); border-bottom-color: var(--gold); }
.mback{
  font-size: 13px; color: var(--onphoto-dim); white-space: nowrap;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 2px;
  transition: border-color .2s, color .2s;
}
.mback:hover{ color: #fff; border-color: var(--gold); }
@media (max-width: 720px){
  .mnav{ gap: 12px; }
  .mnav-links{ gap: 14px; font-size: 12.5px; }
  .mback{ display: none; }
}

/* ── 通用小标签 ─────────────────────────────────────────── */
.tech-label{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
.tech-label .coord{ color: rgba(255,255,255,.42); margin-right: .9em; }
.rule{ display:block; width: 56px; height: 1px; background: var(--gold); margin-top: 22px; opacity:.7; }

/* ── 封面 ───────────────────────────────────────────────── */
.mhero{ position: relative; padding: clamp(72px,12vh,150px) 0 clamp(64px,10vh,120px); overflow: hidden; }
.mhero-grid{
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(0deg,   rgba(255,255,255,.028) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.028) 0 1px, transparent 1px 64px),
    radial-gradient(ellipse 60% 50% at 78% 12%, rgba(143,176,201,.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 12% 88%, rgba(178,140,78,.13), transparent 70%);
}
.mhero-inner{ position: relative; width: min(1240px, 100% - var(--pad-x)*2); margin-inline: auto; }
.mhero-title{
  font-family: var(--serif); font-size: clamp(46px, 9vw, 108px);
  line-height: 1.02; letter-spacing: .04em; font-weight: 400; margin-bottom: .18em;
  text-shadow: var(--halo-soft);
}
.mhero-cn{ font-size: clamp(14px,1.7vw,17px); letter-spacing: .16em; color: var(--gold-hi); margin-bottom: 1.5em; }
.mhero-body{ max-width: 46ch; font-size: clamp(14.5px,1.6vw,16.5px); line-height: 2.05; color: var(--onphoto-dim); text-shadow: var(--halo-soft); }
.mhero-meta{ display:flex; flex-wrap: wrap; gap: 12px; list-style:none; margin: 42px 0 0; padding:0; }
.mhero-meta li{
  min-width: 132px; padding: 14px 18px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 3px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mhero-meta b{ display:block; font-family: var(--serif); font-size: 27px; line-height:1.2; color: var(--ink); font-weight:400; }
.mhero-meta span{ font-size: 11.5px; letter-spacing: .1em; color: var(--faint); }
.mhero-foot{ margin-top: 40px; font-size: 12px; line-height: 1.85; color: rgba(255,255,255,.44); max-width: 60ch; text-shadow: var(--halo-soft); }

/* ── 区块骨架 ───────────────────────────────────────────── */
.msec{ padding: clamp(64px,9vh,116px) 0; }
.msec--paper{ background: var(--paper); color: var(--ink); }
.msec--paper .tech-label{ color: var(--gold-deep); }
.msec--paper .tech-label .coord{ color: rgba(35,40,45,.4); }
.msec--paper .rule{ background: var(--gold-deep); }
.msec--paper .msec-lead{ color: var(--faint); }
.msec-head{ width: min(1240px, 100% - var(--pad-x)*2); margin: 0 auto clamp(38px,5vh,64px); }
.mzh-title{
  font-family: var(--serif); font-size: clamp(30px,4.4vw,50px);
  line-height: 1.14; letter-spacing: .1em; font-weight: 400;
  text-shadow: var(--halo-soft);
}
.msec--paper .mzh-title{ text-shadow: none; }
.msec-lead{ max-width: 62ch; margin-top: 20px; font-size: 14.5px; line-height: 1.95; color: rgba(255,255,255,.66); }

/* ── 市场切片 ───────────────────────────────────────────── */
.mkt-row{
  width: min(1240px, 100% - var(--pad-x)*2); margin: 0 auto;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  background: var(--line); border: 1px solid var(--line);
}
.mkt-cell{ padding: 30px 26px 32px; background: var(--paper); transition: background .25s; }
.mkt-cell:hover{ background: #fffdf8; }
.mkt-label{ font-size: 12.5px; letter-spacing: .06em; color: var(--sub); }
.mkt-value{ display:flex; align-items: baseline; gap: .35em; margin: 14px 0 12px; }
.mkt-num{ font-family: var(--serif); font-size: clamp(34px,4.6vw,48px); line-height: 1; color: var(--ink); }
.mkt-unit{ font-size: 14px; color: var(--sub); }
.mkt-note{ font-size: 12.5px; line-height: 1.75; color: var(--sub); }
.mkt-src{ display:inline-block; margin-top: 14px; font-size: 12px; color: var(--gold-deep); border-bottom: 1px solid var(--gold); }

/* ── 筛选 ───────────────────────────────────────────────── */
.filters{ width: min(1240px, 100% - var(--pad-x)*2); margin: 0 auto 40px; display: grid; gap: 14px; }
.filter-row{ display:flex; align-items: flex-start; gap: 16px; }
.filter-label{
  flex: none; width: 44px; padding-top: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.42);
}
.chips{ display:flex; flex-wrap: wrap; gap: 8px; }
.chip{
  padding: 6px 15px; font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,.66); border: 1px solid var(--line); border-radius: 999px;
  transition: color .2s, border-color .2s, background .2s;
}
.chip:hover{ color:#fff; border-color: rgba(255,255,255,.4); }
.chip[aria-pressed="true"]{ color: var(--ink); background: var(--gold); border-color: var(--gold); }
.chip b{ font-weight: 400; opacity: .6; margin-left: .35em; font-family: var(--mono); font-size: 11px; }
.chip[aria-pressed="true"] b{ opacity: .72; }
.search-wrap{ position: relative; flex: 1 1 auto; max-width: 420px; }
.search-wrap input{
  width: 100%; padding: 8px 74px 8px 14px;
  font: inherit; font-size: 13.5px; color: #fff;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .2s, background .2s;
}
.search-wrap input::placeholder{ color: rgba(255,255,255,.34); }
.search-wrap input:focus{ outline: none; border-color: var(--gold); background: rgba(255,255,255,.08); }
.search-hint{ position:absolute; right: 15px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.36); }
.reset{
  flex: none; padding: 8px 18px; font-size: 12.5px; color: rgba(255,255,255,.6);
  border: 1px solid var(--line); border-radius: 999px; transition: color .2s, border-color .2s;
}
.reset:hover{ color:#fff; border-color: var(--gold); }

/* ── 内容卡片 ───────────────────────────────────────────── */
.cards{
  width: min(1240px, 100% - var(--pad-x)*2); margin: 0 auto;
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.card{
  display: flex; flex-direction: column; overflow: hidden;
  background: #1b1f23; border: 1px solid var(--line-soft); border-radius: 4px;
  transition: transform .38s var(--ease-out), border-color .3s, box-shadow .38s var(--ease-out);
}
.card:hover{ transform: translateY(-4px); border-color: rgba(178,140,78,.5); box-shadow: 0 18px 46px rgba(0,0,0,.5); }
.card-frame{ position: relative; aspect-ratio: 16/10; overflow: hidden; background: #101315; }
.card-frame img{ width:100%; height:100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.card:hover .card-frame img{ transform: scale(1.045); }
.card-pf{
  position:absolute; inset:0; padding: 16px;
  display:flex; align-items:flex-start; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 42%);
}
.card-date{ font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.8); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.card-gal{
  padding: 4px 10px; font-size: 11.5px; color: #fff;
  background: rgba(20,23,26,.7); border: 1px solid rgba(255,255,255,.26); border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.card:hover .card-gal{ background: var(--gold); border-color: var(--gold); }
.card-body{ display:flex; flex-direction:column; gap: 11px; flex: 1; padding: 20px 20px 22px; }
.card-pf-b{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.card-plat{
  padding: 3px 10px; font-size: 11.5px; letter-spacing: .05em; color: var(--gold-hi);
  border: 1px solid rgba(178,140,78,.42); border-radius: 999px;
}
.card-title{ font-family: var(--serif); font-size: 18.5px; line-height: 1.5; letter-spacing: .01em; }
.card-sum{ font-size: 13px; line-height: 1.85; color: rgba(255,255,255,.56); }
.card-tags{ display:flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.card-tagchip{ padding: 2px 9px; font-size: 11px; color: rgba(255,255,255,.46); background: rgba(255,255,255,.06); border-radius: 3px; }
.card-more{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--gold);
}
.card-more span{ transition: transform .3s var(--ease-out); }
.card:hover .card-more span{ transform: translateX(3px); }
.empty{ width: min(1240px,100% - var(--pad-x)*2); margin: 40px auto 0; text-align:center; font-size:14px; color: rgba(255,255,255,.44); }

/* ── 在售房源 ───────────────────────────────────────────── */
.list-row{
  width: min(1240px, 100% - var(--pad-x)*2); margin: 0 auto;
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
  background: var(--line); border: 1px solid var(--line);
}
.list-cell{ padding: 28px 26px 30px; background: var(--paper); transition: background .25s; }
.list-cell:hover{ background:#fffdf8; }
.list-top{ display:flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.list-price{ font-family: var(--serif); font-size: 34px; line-height:1; color: var(--ink); }
.list-unit{ font-size: 14px; color: var(--ink-2); }
.list-spec{ font-size: 13.5px; color: var(--ink-2); margin-bottom: 4px; }
.list-meta{ display:flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--sub); margin-bottom: 18px; }
.list-badge{ padding: 2px 9px; background: rgba(90,125,98,.14); color: var(--green-hi); border-radius: 3px; }
.list-shots{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.list-shots button{ overflow:hidden; border-radius: 2px; background:#ddd; aspect-ratio: 4/3; }
.list-shots img{ width:100%; height:100%; object-fit:cover; transition: transform .45s var(--ease-out); }
.list-shots button:hover img{ transform: scale(1.08); }
.list-link{ display:inline-block; margin-top: 18px; font-size: 12.5px; color: var(--gold-deep); border-bottom: 1px solid var(--gold); }

/* ── 页脚 ───────────────────────────────────────────────── */
.mfoot{
  padding: clamp(58px,8vh,92px) var(--pad-x); text-align: center;
  border-top: 1px solid var(--line-soft); background: #121517;
}
.mfoot-brand{ font-family: var(--serif); font-size: 21px; letter-spacing: .1em; }
.mfoot-addr{ margin-top: 8px; font-size: 12.5px; letter-spacing: .12em; color: rgba(255,255,255,.42); }
.mfoot-links{ display:flex; justify-content:center; flex-wrap: wrap; gap: 26px; margin: 26px 0 20px; font-size: 13.5px; }
.mfoot-links a{ color: rgba(255,255,255,.7); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.mfoot-links a:hover{ color: var(--gold-hi); border-bottom-color: var(--gold); }
.mfoot-disc{ font-size: 11.5px; line-height: 1.9; color: rgba(255,255,255,.3); }

/* ── 灯箱 ───────────────────────────────────────────────── */
.lb{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: clamp(16px,4vw,56px);
  background: rgba(10,12,14,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: lbIn .26s var(--ease-out);
}
.lb[hidden]{ display: none; }
@keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } }
.lb-fig{ margin:0; max-width: min(1100px, 100%); max-height: 100%; display:flex; flex-direction: column; gap: 14px; }
.lb-fig img{ max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: 3px; background: #0c0e10; }
.lb-fig figcaption{ display:flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 12.5px; color: rgba(255,255,255,.6); }
#lb-idx{ flex:none; font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.4); }
.lb-close{
  position: absolute; top: 18px; right: 22px;
  width: 40px; height: 40px; font-size: 17px; color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  transition: color .2s, border-color .2s;
}
.lb-close:hover{ color:#fff; border-color: var(--gold); }
.lb-nav{
  flex: none; width: 46px; height: 78px; font-size: 30px; line-height: 1; color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.14); border-radius: 4px;
  transition: color .2s, border-color .2s, background .2s;
}
.lb-nav:hover{ color:#fff; border-color: var(--gold); background: rgba(178,140,78,.14); }
@media (max-width: 640px){
  .lb-nav{ width: 36px; height: 60px; font-size: 24px; }
  .lb-fig img{ max-height: calc(100vh - 220px); }
}

/* ── 进场动画 ───────────────────────────────────────────── */
.rv{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rv.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .lb{ animation:none; }
  html{ scroll-behavior: auto; }
}