/* 铰链.cn | 照片版覆盖样式 + 域名出售页
   在 style.css 之后加载，覆盖线稿时代的容器规则；不改动基础样式表。
*/
.figure { padding: 0; display: block; min-height: 0; background: #eef2f7; overflow: hidden; }
.figure picture, .figure img { display: block; width: 100%; }
.figure img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-note { font-size: 12.5px; color: var(--muted); }

.hero-visual .drawing { padding: 0; background: #fff; border: 1px solid rgba(255,255,255,.3); overflow: hidden; backdrop-filter: none; box-shadow: 0 18px 46px rgba(0,0,0,.3); }
.hero-visual picture, .hero-visual img { display: block; width: 100%; }
.hero-visual img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.split-visual { padding: 0; display: block; min-height: 0; background: #eef2f7; box-shadow: var(--shadow); }
.split-visual picture, .split-visual img { display: block; width: 100%; }
.split-visual img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.pblock > .figure { position: relative; display: block; min-height: 290px; }
.pblock > .figure picture { position: absolute; inset: 0; height: 100%; }
.pblock > .figure img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
.news-card .figure img { aspect-ratio: 16 / 10; }

/* ---------- 首页域名出售条幅 ---------- */
.sale-strip { background: linear-gradient(100deg, #0b2440, #1b4f8c); color: #fff; border-top: 3px solid var(--brass); padding: 26px 0; }
.sale-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.sale-strip .sale-label { font-size: 12px; letter-spacing: .18em; color: var(--brass-light); font-weight: 700; }
.sale-strip h2 { font-size: clamp(19px, 2.3vw, 26px); color: #fff; margin: 6px 0 5px; }
.sale-strip p { color: #c9dbea; margin: 0; font-size: 14px; }
.sale-strip .domain-hl { color: var(--brass-light); font-weight: 700; }

/* ---------- 域名出售页 ---------- */
.domain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 34px 0 26px; }
.domain-card { position: relative; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--brass); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.domain-card .badge { position: absolute; right: 22px; top: 22px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.domain-name { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: var(--navy); line-height: 1.3; margin-bottom: 10px; }
.domain-puny { display: inline-block; font-family: Consolas, "Courier New", monospace; font-size: 12.5px; color: #40556b; background: var(--bg); border: 1px solid var(--line); padding: 5px 10px; border-radius: 4px; margin-bottom: 18px; word-break: break-all; }
.domain-price { font-size: 19px; font-weight: 800; color: var(--brass); margin: 0 0 14px; }
.domain-list { list-style: none; padding: 0; margin: 0 0 20px; }
.domain-list li { position: relative; padding-left: 22px; font-size: 14.5px; color: #40556b; margin-bottom: 9px; }
.domain-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.domain-card .btn { margin-top: 4px; }
.sale-note { background: #fff9ef; border: 1px solid #efd9b3; border-left: 4px solid var(--brass); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; font-size: 14px; color: #6a5230; line-height: 1.85; }
.sale-note strong { color: #7a4d16; }
.sale-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sale-why .scene-icon { margin-bottom: 16px; }
.domain-compare td:first-child { white-space: normal; }

@media (max-width: 860px) {
  .pblock > .figure { position: relative; min-height: 0; }
  .pblock > .figure picture { position: static; height: auto; }
  .pblock > .figure img { position: static; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .sale-why { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .domain-grid { grid-template-columns: 1fr; }
  .sale-why { grid-template-columns: 1fr; }
  .domain-card { padding: 24px; }
  .domain-card .badge { position: static; display: inline-block; margin-bottom: 12px; }
  .sale-strip .container { flex-direction: column; align-items: flex-start; }
}