/* ==========================================================================
   cities.html · 城市卡 Masonry 瀑布流
   依赖：assets/vendor/masonry.pkgd.min.js（本地，离线可用）
   ========================================================================== */

/* ---------- 容器：解除原 grid，交给 Masonry 绝对定位 ---------- */
.city-grid.masonry {
    display: block !important;
    position: relative;
    min-height: 0 !important;
    margin-bottom: .6rem;
}
/* Masonry 的列宽 / 缝隙参照元素（3 列：32% × 3 + 2% × 2 = 100%） */
.city-grid.masonry .grid-sizer,
.city-grid.masonry .city-card { width: 32%; }
.city-grid.masonry .gutter-sizer { width: 2%; }

/* ---------- 卡片 ---------- */
.city-grid.masonry .city-card {
    position: relative;
    margin: 0 0 1.6rem;
    display: flex;
    flex-direction: column;
    background: #FFFCF6;
    border: 1px solid rgba(38, 61, 56, .12);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 18px 40px -34px rgba(20, 38, 32, .75);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1),
                box-shadow .35s ease,
                border-color .35s ease;
}
.city-grid.masonry .city-card:hover {
    transform: translateY(-4px);
    border-color: rgba(216, 180, 116, .55);
    box-shadow: 0 28px 54px -34px rgba(20, 38, 32, .55);
}

/* ---------- 风景图：高度随各卡比例变化，形成瀑布 ---------- */
.city-grid.masonry .city-card__media {
    height: auto !important;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    background: #E9E1D2;
}
.city-grid.masonry .city-card__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12, 24, 20, .06) 0%, rgba(12, 24, 20, 0) 38%, rgba(12, 24, 20, .72) 100%);
    pointer-events: none;
}
.city-grid.masonry .city-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}
.city-grid.masonry .city-card:hover .city-card__img { transform: scale(1.06); }
/* 图片上叠的城市名 */
.city-grid.masonry .city-card__media strong {
    position: absolute; left: 1rem; bottom: .85rem; z-index: 2;
    font-family: "Noto Serif SC", "Songti SC", STSong, serif;
    font-size: 1.4rem; letter-spacing: .12em; color: #FBF7EC;
    text-shadow: 0 2px 12px rgba(10, 20, 16, .6);
}
.city-grid.masonry .city-card__media > svg { display: none; }

/* 三档图片比例：4:3 / 1:1 / 3:2 循环，Masonry 会自动错落 */
.city-grid.masonry .city-card:nth-of-type(3n+2) .city-card__media { aspect-ratio: 1 / 1; }
.city-grid.masonry .city-card:nth-of-type(3n)   .city-card__media { aspect-ratio: 3 / 2; }

/* ---------- 文字区 ---------- */
.city-grid.masonry .city-card__body {
    padding: 1rem 1.05rem 1.15rem;
    display: flex; flex-direction: column; gap: .45rem;
}
.city-grid.masonry .city-card__tag {
    font-size: .7rem; letter-spacing: .16em; color: #A95F45;
}
.city-grid.masonry .city-card__desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    font-size: .82rem; line-height: 1.8; color: #4E5C55;
}

/* 景点标签 */
.city-grid.masonry .city-card__spots {
    display: flex; flex-wrap: wrap; gap: .3rem;
    margin-top: .15rem;
}
.city-grid.masonry .city-card__chip {
    font-size: .7rem; line-height: 1.6; color: #6B5B43;
    background: rgba(216, 180, 116, .16);
    border: 1px solid rgba(216, 180, 116, .38);
    border-radius: 999px;
    padding: .12rem .55rem;
}

/* 专题链接 */
.city-grid.masonry .city-card__link {
    margin-top: .55rem;
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; color: #1F3D36; letter-spacing: .04em;
    padding-top: .7rem;
    border-top: 1px solid rgba(38, 61, 56, .1);
}
.city-grid.masonry .city-card__link svg { width: .95rem; height: .95rem; transition: transform .3s; }
.city-grid.masonry .city-card:hover .city-card__link svg { transform: translateX(3px); }

/* reveal 动画在瀑布流里会拖慢首屏，这里直接显示 */
.city-grid.masonry .city-card.reveal { opacity: 1 !important; transform: none; }
.city-grid.masonry .city-card.reveal:hover { transform: translateY(-4px); }

/* ---------- 响应式：2 列 / 1 列 ---------- */
.city-clear { border: 0; border-bottom: 1px solid currentColor; background: transparent; padding: 3px 0; color: #193B38; cursor: pointer; font: inherit; font-size: .8rem; }
.city-clear[hidden], .city-grid.masonry[hidden], .city-grid.masonry .city-card[hidden] { display: none !important; }
@media (max-width: 1099px) {
    .city-grid.masonry .grid-sizer,
    .city-grid.masonry .city-card { width: 48.5%; }
    .city-grid.masonry .gutter-sizer { width: 3%; }
}
@media (max-width: 700px) {
    .city-grid.masonry .grid-sizer,
    .city-grid.masonry .city-card { width: 100%; }
    .city-grid.masonry .gutter-sizer { width: 0; }
    .city-grid.masonry .city-card { margin-bottom: 1.1rem; }
    .city-grid.masonry .city-card__media,
    .city-grid.masonry .city-card:nth-of-type(3n+2) .city-card__media,
    .city-grid.masonry .city-card:nth-of-type(3n) .city-card__media {
        aspect-ratio: 16 / 10;
    }
}