/* 华年养老地图 - 图册瀑布流共用样式（gallery.html 与 index.html 内嵌面板共用） */

/* 分类 tabs */
.tabs {
    display: flex; align-items: center; gap: 4px; overflow-x: auto;
    scrollbar-width: none; padding: 0 8px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    flex-shrink: 0; height: 34px; padding: 0 16px; border-radius: 17px;
    border: 1px solid #e0e0e0; background: #fff; font-size: 13px; color: #555;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tab:hover { color: #2E6BE6; border-color: #2E6BE6; }
.tab.active { background: #2E6BE6; color: #fff; border-color: #2E6BE6; font-weight: 600; }

/* 瀑布流 */
.masonry {
    max-width: 1680px; margin: 0 auto; column-gap: 14px;
}
@media (min-width: 1500px) { .masonry { column-count: 6; } }
@media (max-width: 1499px) and (min-width: 1200px) { .masonry { column-count: 5; } }
@media (max-width: 1199px) and (min-width: 900px) { .masonry { column-count: 4; } }
@media (max-width: 899px) and (min-width: 600px) { .masonry { column-count: 3; } }
@media (max-width: 599px) { .masonry { column-count: 2; } }

.card {
    break-inside: avoid; margin-bottom: 14px; background: #fff;
    border-radius: 10px; overflow: hidden; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: transform .18s, box-shadow .18s; position: relative;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.card .thumb { width: 100%; display: block; background: #eef0f3; min-height: 140px; }
.card .info {
    padding: 10px 12px 12px; position: relative;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 90px);
    margin-top: -64px; border: none; color: #fff;
}
.card .name {
    font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.card .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card .tag {
    font-size: 11px; padding: 1px 8px; border-radius: 9px; background: rgba(46,107,230,.92); color: #fff;
}
.card .tag.facility { background: rgba(0,150,136,.92); }
.card .loc { font-size: 11px; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* 加载状态 */
.status {
    text-align: center; color: #999; font-size: 13px; padding: 18px 0 30px;
    display: none;
}
.status.show { display: block; }
.status .spin {
    display: inline-block; width: 18px; height: 18px; border: 2px solid #d9d9d9;
    border-top-color: #2E6BE6; border-radius: 50%; vertical-align: -4px; margin-right: 8px;
    animation: gal-rot .8s linear infinite;
}
@keyframes gal-rot { to { transform: rotate(360deg); } }

.top-hint {
    text-align: center; font-size: 12px; color: #999; padding: 10px 0 0;
}
.top-hint b { color: #2E6BE6; }