/* ============================================
   Magazine Hero Themed Component
   Extracted from layouts/partials/magazine-hero.html
   ============================================ */

/* Theme Variables */
.magazine-hero-themed {
    --hero-height: 400px;
    --hero-radius: 32px;
    --hero-shadow: var(--shadow-heavy);
    --hero-gradient: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    --hero-text-color: white;
    --hero-accent: var(--golden-yellow);
    --hero-accent-text: var(--dark-gray);
}

/* Dark theme - more dramatic */
.magazine-hero-themed[data-theme="dark"] {
    --hero-gradient: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.95));
}

/* Minimal theme - subtle overlay */
.magazine-hero-themed[data-theme="minimal"] {
    --hero-gradient: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.6));
    --hero-shadow: var(--shadow-medium);
}

/* Core Hero Styles */
.magazine-hero {
    margin-bottom: var(--spacing-xl);
    border-radius: var(--hero-radius);
    overflow: hidden;
    box-shadow: var(--hero-shadow);
}

.magazine-hero-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.magazine-hero-img {
    width: 100%;
    height: var(--hero-height);
    object-fit: cover;
    transition: transform var(--transition-medium);
}

.magazine-hero-link:hover .magazine-hero-img {
    transform: scale(1.02);
}

.magazine-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-lg);
    background: var(--hero-gradient);
    color: var(--hero-text-color);
}

.magazine-hero-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: var(--spacing-sm);
    color: var(--hero-text-color);
}

.magazine-hero-excerpt {
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
}

.magazine-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--hero-accent);
    color: var(--hero-accent-text);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--border-radius-pill);
    margin-bottom: var(--spacing-sm);
}

.magazine-meta {
    display: flex;
    gap: var(--spacing-md);
    opacity: 0.8;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .magazine-hero-img {
        height: 250px;
    }
}