/* * LAYOUT: Archive, Homepage & Recommended Grids
 * File: viralgrid/assets/css/layout-archive.css
 */

/* =========================================
   GRID SYSTEM
   ========================================= */
.viral-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr);
}

.recommended-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

/* =========================================
   SECTION CONTAINERS & HEADERS
   ========================================= */
.home-section, 
.recommended-section { margin-bottom: 60px; }

.recommended-section { 
    margin-top: 40px; padding-top: 30px; 
    border-top: 1px solid var(--border-color); 
}

.section-divider { 
    border: 0; height: 1px; 
    background: var(--border-color); 
    margin: 60px auto; width: 80%; 
}

.section-header { text-align: center; margin-bottom: 40px; }

.section-title {
    font-size: 2rem; font-weight: 900; 
    color: var(--heading-color);
    text-transform: uppercase; margin: 0 0 10px 0; 
    letter-spacing: -0.5px;
}

.section-desc {
    font-size: 1.1rem; color: #64748b; 
    line-height: 1.6; max-width: 700px; margin: 0 auto;
}

.recommended-heading {
    text-align: center; font-size: 1.8rem; 
    font-weight: 800; color: var(--heading-color); 
    margin-bottom: 30px;
}

.archive-header {
    max-width: 800px; margin-left: auto; margin-right: auto; 
    margin-bottom: 50px;
}
.archive-header .section-title { font-size: 2.5rem; }


/* =========================================
   CARD DESIGN & APP-LIKE SHIMMER
   ========================================= */
.viral-card {
    position: relative; 
    display: block; 
    width: 100%; 
    border-radius: 16px; 
    overflow: hidden; 
    text-decoration: none;
    background: #fff; /* Light mode card bg */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    transform: translateZ(0);
}

.viral-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 12px 30px rgba(0,0,0,0.15); 
}

/* 1. THE SKELETON WRAPPER (Light Mode Default) */
.card-img-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    
    /* LIGHT MODE COLORS: Light Gray Base -> White Shimmer */
    background: #e2e8f0; 
    background-image: linear-gradient(
        90deg, 
        #e2e8f0 0px, 
        #f8fafc 60px, /* Lighter/White streak */
        #e2e8f0 120px
    );
    background-size: 600px; 
    animation: shimmer-wave 2s infinite linear;
}

@keyframes shimmer-wave {
    0% { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

/* 2. THE IMAGE */
.card-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; 
    transform: scale(1.05); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* 3. THE REVEAL */
.card-img.is-loaded {
    opacity: 1;
    transform: scale(1);
}

/* Stop animation */
.card-img-wrapper.finished {
    animation: none;
    background-image: none;
    background-color: transparent;
}

.viral-card:hover .card-img { transform: scale(1.08); }

/* Overlay & Content */
.card-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Darker gradient at bottom to make text pop on white images */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    z-index: 1; pointer-events: none;
}

.card-content {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px;
    box-sizing: border-box; z-index: 2; display: flex; flex-direction: column;
}

.card-title {
    color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1.3; 
    margin: 0 0 8px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-meta { 
    color: rgba(255, 255, 255, 0.9); font-size: 0.85rem; font-weight: 500; 
}

/* ... (Homepage Elements) ... */
.popular-bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0 40px; }
.bubble-link { background: linear-gradient(to right, #ef4444, #ea580c); color: #fff !important; padding: 10px 20px; border-radius: 5px; font-weight: 500; box-shadow: 0 4px 6px rgba(234, 88, 12, 0.2); transition: all 0.2s ease; text-decoration: none !important; }
.bubble-link:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(234, 88, 12, 0.3); }
.home-intro { text-align: center; margin: 0 auto 50px; max-width: 900px; }
.intro-content { font-size: 1.1rem; line-height: 1.8; color: #334155; }
.section-footer { text-align: center; margin-top: 40px; }
.more-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(to right, #3b82f6, #2563eb); color: #fff; padding: 12px 35px; border-radius: 50px; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); transition: all 0.2s ease; }
.more-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(37, 99, 235, 0.4); color: #fff; }

/* --- DARK MODE OVERRIDES --- */
body.dark-mode .section-title, 
body.dark-mode .recommended-heading, 
body.dark-mode .archive-header .section-title { color: #f8fafc; }
body.dark-mode .intro-content, 
body.dark-mode .section-desc { color: #94a3b8; }
body.dark-mode .section-divider { background: #334155; }

body.dark-mode .viral-card {
    background: #1e293b; /* Dark card bg */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
}

/* Dark Mode Skeleton (The one you liked) */
body.dark-mode .card-img-wrapper {
    background: #1e293b; /* Dark base */
    background-image: linear-gradient(90deg, #1e293b 0px, #334155 60px, #1e293b 120px);
}

/* Responsive */
@media (max-width: 900px) { .viral-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { 
    .viral-grid, .recommended-grid { grid-template-columns: 1fr; gap: 20px; }
    .viral-card { border-radius: 10px; }
    .recommended-section { margin: 20px; }
}