/* Mobile Content Card - Compact Layout Optimizations */

/* Mobile-specific optimizations for content cards */
@media (max-width: 768px) {
    /* Reduce card padding */
    .content-card {
        min-height: auto;
        border-radius: 12px;
    }
    
    .content-card__content {
        padding: 14px;
    }
    
    /* Optimize cover image */
    .content-card__cover {
        border-radius: 12px 12px 0 0;
    }
    
    .content-card__image {
        object-fit: cover;
    }
    
    /* Reduce title size */
    .content-card__title {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 8px;
        /* Limit to 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Reduce excerpt size and limit to 2 lines */
    .content-card__excerpt {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Compact author section */
    .content-card__author {
        margin-bottom: 8px;
        gap: 6px;
    }
    
    .content-card__author-avatar,
    .content-card__author-placeholder {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
    
    .content-card__author-name {
        font-size: 13px;
    }
    
    /* Compact universe section */
    .content-card__universe {
        margin-bottom: 8px;
        gap: 4px;
    }
    
    .content-card__universe-icon {
        font-size: 14px;
    }
    
    .content-card__universe-name {
        font-size: 13px;
    }
    
    /* Compact metadata */
    .content-card__meta {
        font-size: 12px;
    }
    
    /* Reduce category badge size */
    .content-card__category-badge {
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 12px;
    }
    
    /* Compact badges */
    .content-card__badges {
        top: 8px;
        right: 8px;
        gap: 4px;
    }
    
    .content-card__badge {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    /* Compact edit button */
    .content-card__edit {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    /* Optimize grid spacing */
    .articles-grid {
        gap: 16px;
        padding: 0 16px;
    }
}

/* Extra small mobile (< 375px) */
@media (max-width: 374px) {
    .content-card__content {
        padding: 12px;
    }
    
    .content-card__title {
        font-size: 15px;
    }
    
    .content-card__excerpt {
        font-size: 13px;
    }
    
    .content-card__author-name,
    .content-card__universe-name {
        font-size: 12px;
    }
    
    .content-card__meta {
        font-size: 11px;
    }
    
    .articles-grid {
        gap: 12px;
        padding: 0 12px;
    }
}

/* Compact horizontal layout for mobile list view (optional) */
@media (max-width: 768px) {
    .content-card--mobile-horizontal {
        flex-direction: row;
        min-height: auto;
    }
    
    .content-card--mobile-horizontal .content-card__cover {
        width: 100px;
        min-width: 100px;
        height: 100px;
        aspect-ratio: 1;
        border-radius: 12px 0 0 12px;
    }
    
    .content-card--mobile-horizontal .content-card__content {
        flex: 1;
        padding: 12px;
    }
    
    .content-card--mobile-horizontal .content-card__title {
        font-size: 15px;
        -webkit-line-clamp: 2;
    }
    
    .content-card--mobile-horizontal .content-card__excerpt {
        display: none;
    }
    
    .content-card--mobile-horizontal .content-card__category-badge {
        position: static;
        display: inline-block;
        margin-bottom: 6px;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .content-card:hover .content-card__image {
        transform: none;
    }
    
    /* Optimize touch targets */
    .content-card__title-link,
    .content-card__cover-link {
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
    }
    
    /* Improve scrolling performance */
    .content-card {
        will-change: auto;
    }
    
    /* Optimize image loading */
    .content-card__image {
        content-visibility: auto;
    }
}

/* Dark mode support for mobile */
@media (max-width: 768px) {
    [data-theme="dark"] .content-card {
        background: #1f2937;
        border-color: #374151;
    }
    
    [data-theme="dark"] .content-card__title {
        color: #f9fafb;
    }
    
    [data-theme="dark"] .content-card__excerpt {
        color: #d1d5db;
    }
    
    [data-theme="dark"] .content-card__author-name,
    [data-theme="dark"] .content-card__universe-name {
        color: #e5e7eb;
    }
    
    [data-theme="dark"] .content-card__placeholder {
        background: #374151;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Larger touch targets */
    .content-card__title-link,
    .content-card__cover-link,
    .content-card__author,
    .content-card__universe {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Better focus indicators */
    .content-card__title-link:focus-visible,
    .content-card__cover-link:focus-visible,
    .content-card__author:focus-visible,
    .content-card__universe:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
        border-radius: 4px;
    }
}

/* Loading skeleton for mobile */
@media (max-width: 768px) {
    .content-card--skeleton {
        pointer-events: none;
    }
    
    .content-card--skeleton .content-card__cover {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
    }
    
    .content-card--skeleton .content-card__title,
    .content-card--skeleton .content-card__excerpt,
    .content-card--skeleton .content-card__author,
    .content-card--skeleton .content-card__meta {
        background: #f0f0f0;
        color: transparent;
        border-radius: 4px;
    }
    
    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }
        100% {
            background-position: 200% 0;
        }
    }
}