/**
 * Article Skeleton Loader Styles
 * Loading placeholders with shimmer animation
 * Requirements: 9.1
 */

/* Shimmer Animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Base Skeleton Element */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-secondary, #f0f0f0) 25%,
        var(--color-bg-tertiary, #e0e0e0) 50%,
        var(--color-bg-secondary, #f0f0f0) 75%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: var(--radius-md, 8px);
}

/* Dark Theme Adjustments */
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
}

/* Article Skeleton Container */
.article-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 16px);
    background: var(--color-bg, #ffffff);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    padding: 0;
}

/* Vertical Layout (default) */
.article-skeleton--vertical {
    flex-direction: column;
}

.article-skeleton--vertical .article-skeleton__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

.article-skeleton--vertical .article-skeleton__content {
    padding: var(--spacing-4, 16px);
}

/* Horizontal Layout */
.article-skeleton--horizontal {
    flex-direction: row;
    padding: var(--spacing-4, 16px);
    gap: var(--spacing-6, 24px);
}

.article-skeleton--horizontal .article-skeleton__image {
    width: 200px;
    min-width: 200px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md, 8px);
}

.article-skeleton--horizontal .article-skeleton__content {
    flex: 1;
    padding: 0;
}

/* Compact Layout */
.article-skeleton--compact {
    flex-direction: row;
    padding: var(--spacing-3, 12px);
    gap: var(--spacing-4, 16px);
}

.article-skeleton--compact .article-skeleton__image {
    width: 80px;
    min-width: 80px;
    aspect-ratio: 1;
    border-radius: var(--radius-sm, 6px);
}

.article-skeleton--compact .article-skeleton__content {
    flex: 1;
    padding: 0;
}

/* Image Skeleton */
.article-skeleton__image {
    flex-shrink: 0;
}

/* Content Area */
.article-skeleton__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 12px);
}

/* Title Skeleton */
.article-skeleton__title {
    height: 20px;
    width: 100%;
    margin-bottom: var(--spacing-2, 8px);
}

.article-skeleton__title:last-of-type {
    margin-bottom: 0;
}

/* Excerpt Skeleton */
.article-skeleton__excerpt {
    height: 16px;
    width: 100%;
    margin-bottom: var(--spacing-1, 4px);
}

.article-skeleton__excerpt:last-of-type {
    margin-bottom: 0;
}

/* Meta Skeleton */
.article-skeleton__meta {
    display: flex;
    gap: var(--spacing-4, 16px);
    align-items: center;
    margin-top: var(--spacing-2, 8px);
}

.article-skeleton__meta-item {
    height: 14px;
    width: 60px;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .article-skeleton--horizontal {
        flex-direction: column;
        padding: 0;
    }
    
    .article-skeleton--horizontal .article-skeleton__image {
        width: 100%;
        border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    }
    
    .article-skeleton--horizontal .article-skeleton__content {
        padding: var(--spacing-4, 16px);
    }
}

/* Grid Container for Multiple Skeletons */
.articles-grid .article-skeleton {
    /* Inherits grid layout from parent */
}

/* Reduce Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: var(--color-bg-secondary, #f0f0f0);
    }
    
    [data-theme="dark"] .skeleton {
        background: rgba(255, 255, 255, 0.05);
    }
}