/**
 * 在地观察 · 列表页样式
 *
 * 只放 Tailwind 无法表达的排版规则（多列瀑布流）。
 * 颜色、间距、字体全部沿用模板里的 utility class。
 */

/* 多列瀑布流：column-count 比重排 JS 更稳，Chromium 下不会出现卡片撕裂 */
.masonry-container {
    column-count: 1;
    column-gap: 2rem;
    width: 100%;
}

@media (min-width: 768px) {
    .masonry-container {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-container {
        column-count: 3;
    }
}

/* 卡片容器：禁止跨列断开 */
.masonry-item {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    width: 100%;
    margin-bottom: 2rem;
    contain: layout style;
}

/* 加载更多按钮的忙碌态 */
#loadMoreBtn[data-loading="1"] {
    opacity: 0.45;
    pointer-events: none;
}