/**
 * Infinite Scroll Styles
 * Requirements: 10.1, 10.3
 */

/* Skeleton loaders container */
.infinite-scroll-skeletons {
    display: contents; /* Makes children behave as if they're direct children of grid */
}

/* Error message */
.infinite-scroll-error {
    grid-column: 1 / -1;
    padding: var(--spacing-4, 16px);
    margin: var(--spacing-4, 16px) 0;
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 8px;
    text-align: center;
    color: #c33;
}

.infinite-scroll-error p {
    margin: 0;
}

.infinite-scroll-error .btn--link {
    color: #c33;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 var(--spacing-2, 8px);
    font-size: inherit;
}

.infinite-scroll-error .btn--link:hover {
    color: #a22;
}

/* Fade in animation for newly loaded articles */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* Loading indicator at bottom */
.infinite-scroll-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-6, 24px);
    color: var(--text-secondary, #666);
}

.infinite-scroll-loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: var(--spacing-2, 8px);
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* End of content indicator */
.infinite-scroll-end {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-6, 24px);
    color: var(--text-secondary, #666);
    font-size: 0.875rem;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .infinite-scroll-error {
        font-size: 0.875rem;
        padding: var(--spacing-3, 12px);
    }
    
    .infinite-scroll-skeletons .article-skeleton {
        margin-bottom: var(--spacing-4, 16px);
    }
}