/**
 * Article Card Enhancements
 * Enhancements for content-card component when used in article listings
 * Requirements: 3.4, 3.5, 3.6, 3.7, 3.8, 3.9
 */

/* Category Badge Overlay */
.content-card__category-badge {
    position: absolute;
    top: var(--spacing-3, 12px);
    left: var(--spacing-3, 12px);
    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: white;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    border-radius: var(--radius-full, 9999px);
    text-decoration: none;
    z-index: 2;
    transition: all 0.2s ease;
}

.content-card__category-badge:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

/* 16:9 Aspect Ratio for Vertical Layout */
.content-card--vertical .content-card__cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Title Truncation (2-3 lines) */
.content-card--vertical .content-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: calc(1.4em * 3); /* 3 lines */
}

/* Excerpt Truncation (2 lines) */
.content-card--vertical .content-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: calc(1.5em * 2); /* 2 lines */
}

/* Ensure author info is visible */
.content-card__author {
    display: inline-flex !important;
    align-items: center;
    gap: var(--spacing-2, 8px);
    margin-top: var(--spacing-3, 12px);
}

/* Ensure metadata is visible */
.content-card__meta {
    margin-top: var(--spacing-3, 12px);
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .content-card__category-badge {
        font-size: var(--font-size-2xs, 0.625rem);
        padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
    }
    
    .content-card--vertical .content-card__title {
        -webkit-line-clamp: 2;
        max-height: calc(1.4em * 2); /* 2 lines on mobile */
    }
}

/* Hover Effects - Requirements: 3.10, 3.11 */

/* Card Lift Effect */
.content-card--vertical {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card--vertical:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Image Scale Transform on Hover */
.content-card--vertical .content-card__image {
    transition: transform 0.3s ease;
}

.content-card--vertical:hover .content-card__image {
    transform: scale(1.05);
}

/* Smooth transitions for all interactive elements */
.content-card__category-badge,
.content-card__title-link,
.content-card__author {
    transition: all 0.2s ease;
}

/* Prevent layout shift during hover */
.content-card--vertical .content-card__cover {
    overflow: hidden;
}