/**
 * Weekly Briefing - Hub de Inteligencia
 *
 * Estilos para el diseño tipo newsletter/briefing
 *
 * @package ecomNinja
 */

/* ==========================================================================
   Base & Layout
   ========================================================================== */

.weekly-briefing-page {
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
}

/* Serif para títulos */
.weekly-briefing-page h1,
.weekly-briefing-page h2,
.weekly-briefing-page h3.font-serif,
.weekly-briefing-page .font-serif {
    font-family: Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   Top 3 Briefing Cards
   ========================================================================== */

.weekly-briefing-page .grid-cols-3 > a {
    display: flex;
    flex-direction: column;
}

.weekly-briefing-page .grid-cols-3 > a:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   Filter Pills
   ========================================================================== */

.weekly-briefing-page [data-filter] {
    cursor: pointer;
}

.weekly-briefing-page [data-filter].active,
.weekly-briefing-page [data-filter]:focus {
    outline: none;
}

/* ==========================================================================
   Hero Card (Dark)
   ========================================================================== */

.hero-card {
    min-height: 280px;
}

.hero-card h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

/* ==========================================================================
   Feed Items
   ========================================================================== */

.feed-item {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.feed-item:last-child {
    border-bottom: none;
}

.feed-item h3 {
    font-family: Georgia, "Times New Roman", serif;
}

.feed-item .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Thumbnail with badge positioning */
.feed-item .relative img {
    transition: transform 0.3s ease;
}

/* ==========================================================================
   Sidebar Widgets
   ========================================================================== */

/* Tool of the Week */
.weekly-briefing-page aside > div:first-child {
    position: relative;
}

/* Market Movements dots */
.weekly-briefing-page aside .rounded-full {
    flex-shrink: 0;
}

/* Newsletter CTA */
.weekly-briefing-page aside .bg-gray-900 {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .weekly-briefing-page .lg\:col-span-2 {
        order: 1;
    }

    .weekly-briefing-page aside {
        order: 2;
    }
}

@media (max-width: 768px) {
    .weekly-briefing-page h1 {
        font-size: 2rem;
    }

    .hero-card {
        min-height: 220px;
    }

    .hero-card h2 {
        font-size: 1.5rem;
    }

    .feed-item .flex {
        flex-direction: column;
    }

    .feed-item .w-40,
    .feed-item .w-48 {
        width: 100%;
        height: 180px;
        margin-bottom: 1rem;
    }

    /* Stack briefing cards */
    .weekly-briefing-page .grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feed-item {
    animation: fadeInUp 0.4s ease forwards;
}

.feed-item:nth-child(1) { animation-delay: 0s; }
.feed-item:nth-child(2) { animation-delay: 0.05s; }
.feed-item:nth-child(3) { animation-delay: 0.1s; }
.feed-item:nth-child(4) { animation-delay: 0.15s; }
.feed-item:nth-child(5) { animation-delay: 0.2s; }

/* ==========================================================================
   Loading States
   ========================================================================== */

#hub-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#hub-load-more.loading {
    pointer-events: none;
}

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .weekly-briefing-page aside,
    .weekly-briefing-page [data-filter],
    #hub-load-more {
        display: none;
    }

    .weekly-briefing-page .lg\:col-span-2 {
        width: 100%;
    }
}