/* ===== 数字丝路地图（首页板块） =====
   版式：左图右栏；地图用真实边界 + 金色丝路线 + 节点；移动端改为上图下列表。 */

.silk { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.silk__stage {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .95fr);
    gap: clamp(1rem, 2vw, 1.8rem); align-items: stretch;
    margin-top: 1.4rem;
}

/* 地图容器：装裱式内框，避免大片留白 */
.silk__mapwrap {
    position: relative; border-radius: 18px; overflow: hidden;
    background-color: #F4EBD8;
    background-image:
        linear-gradient(180deg, rgba(251, 246, 233, .26), rgba(251, 246, 233, .12)),
        url('../../_source/地图背景.png');
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: cover, cover;
    border: 1px solid rgba(169,95,69,.16);
    box-shadow: 0 18px 50px -30px rgba(60,40,20,.45);
}
.silk__mapwrap::before {
    content: ''; position: absolute; inset: 12px; border: 1px solid rgba(169,95,69,.14);
    border-radius: 12px; pointer-events: none; z-index: 1;
}
.silk__map { width: 100%; height: clamp(380px, 46vw, 560px); }
/* 竖排水印 */
.silk__mark {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl; letter-spacing: .5em; font-size: .72rem;
    color: rgba(169,95,69,.36); pointer-events: none; z-index: 2;
    font-family: 'Noto Serif SC', serif;
}
.silk__legend {
    position: absolute; left: 20px; bottom: 16px; z-index: 2;
    display: flex; align-items: center; gap: .9rem; font-size: .72rem; color: #7A6A54;
}
.silk__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.silk__legend i { width: 22px; height: 2px; background: linear-gradient(90deg, rgba(216,180,116,.2), #D8B474); }
.silk__legend em { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px var(--primary); }

/* 右侧城市卡 */
.silk__panel {
    display: flex; flex-direction: column; min-width: 0;
    background: #FFFDF8; border: 1px solid rgba(169,95,69,.16); border-radius: 18px;
    overflow: hidden; box-shadow: 0 18px 50px -34px rgba(60,40,20,.4);
}
.silk__photo { position: relative; aspect-ratio: 16 / 9; background: #EFE6D4; overflow: hidden; }
.silk__photo-media { position: absolute; inset: 0; }
.silk__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.silk__panel:hover .silk__photo img { transform: scale(1.04); }
.silk__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,14,8,0) 42%, rgba(20,14,8,.55) 100%);
}
.silk__photo-cap {
    position: absolute; left: 1rem; right: 1rem; bottom: .85rem; z-index: 2;
    display: flex; align-items: baseline; gap: .55rem; color: #fff;
}
.silk__photo-cap b { font-family: 'Noto Serif SC', serif; font-size: 1.4rem; letter-spacing: .06em; }
.silk__photo-cap s { text-decoration: none; font-size: .72rem; opacity: .82; letter-spacing: .12em; }

.silk__body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.silk__tagline { font-size: .94rem; line-height: 1.75; color: #3C4350; margin: 0; }
.silk__intro {
    font-size: .82rem; line-height: 1.85; color: #6A6257; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.silk__facts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .74rem; color: #7A6A54; }
.silk__facts b { color: var(--dark); font-weight: 600; }
.silk__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.silk__chips span {
    font-size: .72rem; padding: .2rem .55rem; border-radius: 999px;
    background: rgba(169,95,69,.08); color: #6B5236;
}
.silk__spots { display: flex; flex-wrap: wrap; gap: .35rem; }
.silk__spots a, .silk__spots span {
    font-size: .74rem; padding: .22rem .6rem; border-radius: 6px;
    border: 1px solid rgba(25,59,56,.22); color: var(--primary); text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.silk__spots a:hover { background: var(--primary); color: #fff; }
.silk__cta { margin-top: auto; padding-top: .4rem; }
.silk__cta .btn { width: 100%; justify-content: center; }

/* 城市列表（移动端主要入口，桌面端作为快速切换） */
.silk__list {
    display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .6rem; margin-top: 1rem;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.silk__list button {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .85rem; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(169,95,69,.22); background: #FFFDF8; color: #5C5245;
    font-size: .82rem; font-family: inherit; transition: all .2s ease;
}
.silk__list button:hover { border-color: rgba(25,59,56,.4); color: var(--primary); }
.silk__list button.is-active {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: 0 6px 18px -8px rgba(25,59,56,.7);
}
.silk__list button i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }

.silk__note {
    margin: .9rem 0 0; font-size: .72rem; color: #8A7C68; line-height: 1.8;
}
.silk__note a { color: #8A7C68; }

/* 平板 / 手机 */
@media (max-width: 980px) {
    .silk__stage { grid-template-columns: 1fr; }
    .silk__map { height: clamp(320px, 58vw, 420px); }
    .silk__panel { flex-direction: row; }
    .silk__photo { flex: 0 0 42%; aspect-ratio: auto; }
    .silk__body { padding: .85rem 1rem; }
    .silk__intro { -webkit-line-clamp: 2; }
}
@media (max-width: 640px) {
    .silk__panel { flex-direction: column; }
    .silk__photo { flex: none; aspect-ratio: 16 / 9; }
    .silk__map { height: 320px; }
    .silk__mark { display: none; }
    .silk__legend { font-size: .66rem; gap: .6rem; left: 14px; }
}


/* ---- 视图控件（缩放/重置） ---- */
.silk__ctrl {
    position: absolute; right: 14px; top: 14px; z-index: 4;
    display: flex; flex-direction: column; gap: 6px;
}
.silk__ctrl button {
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(25,59,56,.18); background: rgba(243,237,224,.92);
    color: var(--primary); font-size: 1rem; line-height: 1; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.silk__ctrl button:nth-child(3) { font-size: .95rem; }
.silk__ctrl button:hover { background: var(--primary); color: #F3EDE0; }
.silk__ctrl button:active { transform: scale(.94); }
.silk__map:focus-visible, .silk__list button:focus-visible, .silk__ctrl button:focus-visible,
.silk__links a:focus-visible, .silk__spots a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px;
}

/* ---- 加载 / 失败状态 ---- */
.silk__state[hidden] { display: none; }   /* 关键：display:flex 会盖过 [hidden] */
.silk__state {
    position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #F7F1E4 0%, #EFE4CE 100%);
    color: #6F6450; font-size: .9rem; letter-spacing: .04em; text-align: center; padding: 1.5rem;
}
.silk__state.is-error { color: var(--primary); }
.silk__state-txt { max-width: 22rem; line-height: 1.9; }
.silk__state button {
    margin-left: .5rem; padding: .35rem .8rem; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--primary); background: transparent; color: var(--primary); font-family: inherit;
}

/* ---- 面板三入口 ---- */
.silk__links {
    display: flex; flex-wrap: wrap; gap: .4rem .9rem; padding-top: .2rem;
    font-size: .78rem;
}
.silk__links a {
    color: var(--primary); text-decoration: none; border-bottom: 1px solid rgba(25,59,56,.25);
    padding-bottom: 1px; transition: border-color .2s ease, color .2s ease;
}
.silk__links a:hover { color: var(--ochre); border-color: var(--ochre); }