/* Homepage infinite scroll: skeleton (dark theme), status and fallback pagination. */
.home-feed-controls {
    margin-top: 8px;
    /* Controls sit inside the template's grid/flex row; always take a full row. */
    grid-column: 1 / -1;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
.home-feed-controls [hidden] { display: none !important; }
.home-feed-sentinel { height: 1px; width: 100%; }

/* Thumbnails rendered as native lazy <img> inside the template's own thumb box. */
.feed-thumb { position: relative; overflow: hidden; }
.feed-thumb > .feed-thumb-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

.home-feed-status {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skeleton — follows each template's card wrapper, always dark. */
.feed-skeleton {
    background: #111827 !important;
    border: 1px solid #1f2937 !important;
    color: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    overflow: hidden;
}
.feed-skeleton--card { border-radius: 18px; padding: 14px; height: 100%; }
.feed-skeleton--panel { border-radius: 18px; padding: 24px; margin-bottom: 1.5rem; }
.feed-skeleton--list .list-copy { padding: 18px; }
.feed-skeleton--list .list-order { background: #0b1220 !important; border-color: #1f2937 !important; }

.sk {
    display: block;
    border-radius: 8px;
    background-color: #1f2937;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .05) 65%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: home-feed-shimmer 1.3s ease-in-out infinite;
}
.sk-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; margin-bottom: 14px; }
.sk-media { width: 100%; height: 100%; min-height: 190px; border-radius: 0; }
.sk-meta { height: 10px; width: 35%; margin-bottom: 12px; }
.sk-title { height: 18px; width: 90%; margin-bottom: 10px; }
.sk-title.sk-short { width: 60%; }
.sk-line { height: 11px; width: 100%; margin-bottom: 9px; }
.sk-line.sk-short { width: 70%; }
.sk-button { height: 32px; width: 120px; border-radius: 999px; margin-top: 14px; }
.sk-num { width: 38px; height: 38px; border-radius: 50%; margin: auto; }

@keyframes home-feed-shimmer {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sk { animation: none; }
}

.home-feed-end { text-align: center; opacity: .75; margin: 20px 0 8px; font-size: .95rem; }
.home-feed-retry {
    display: block; margin: 18px auto; padding: .6rem 1.25rem;
    border-radius: 999px; border: 1px solid #374151;
    background: #111827; color: #e5e7eb; cursor: pointer; font: inherit;
}
.home-feed-retry:hover { background: #1f2937; }

.home-feed-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px; margin: 22px 0 6px; font-size: .92rem;
}
.home-feed-pagination a {
    display: inline-block; padding: .45rem 1rem; border-radius: 999px;
    border: 1px solid currentColor; text-decoration: none; opacity: .85;
}
.home-feed-pagination a:hover { opacity: 1; }
.home-feed-pagination span { opacity: .7; }