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

/* =========================================
   GRID SYSTEM
   ========================================= */

/* 1. Standard 3-Column Grid (Homepage & Archives) */
.viral-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr); /* Default PC: 3 Cols */
}

/* 2. Recommended 2-Column Grid (Single Post) */
.recommended-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr); /* Default PC: 2 Cols */
}


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

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

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


/* =========================================
   SECTION HEADERS (Typography)
   ========================================= */
.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 (Matches Comment Form Title) --- */
.recommended-heading {
    text-align: center;
    font-size: 1.8rem; 
    font-weight: 800; 
    color: var(--heading-color);
    margin-bottom: 30px;
}

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


/* =========================================
   CARD DESIGN (Shared)
   ========================================= */
.viral-card, 
.recommended-card {
    position: relative; 
    display: block; 
    width: 100%; 
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 16px; 
    overflow: hidden; 
    text-decoration: none;
    background: #334155; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    transform: translateZ(0);
}

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

/* Background Image */
.card-bg, .rec-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; 
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.viral-card:hover .card-bg, .recommended-card:hover .rec-bg { transform: scale(1.08); }

/* Gradient Overlay */
.card-overlay, .rec-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    z-index: 1;
}

/* Content Layer */
.card-content, .rec-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, .rec-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.6);
    
    /* Line Clamp */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

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


/* =========================================
   HOMEPAGE ELEMENTS (Bubbles, Intro, Btn)
   ========================================= */

/* Bubbles */
.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; text-decoration: none !important;
    padding: 10px 20px; border-radius: 5px; font-weight: 500; 
    box-shadow: 0 4px 6px rgba(234, 88, 12, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bubble-link:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(234, 88, 12, 0.3); 
}

/* Intro Text */
.home-intro { 
    text-align: center; margin: 0 auto 50px; max-width: 900px; 
}
.intro-content { 
    font-size: 1.1rem; line-height: 1.8; color: #334155; 
}

/* Load More Button */
.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: transform 0.2s ease, box-shadow 0.2s ease;
}
.more-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 25px rgba(37, 99, 235, 0.4); 
    color: #fff; 
}


/* =========================================
   DARK MODE SUPPORT
   ========================================= */
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; 
}


/* =========================================
   RESPONSIVE (Mobile & Tablet)
   ========================================= */

/* Tablet (Between 600px and 900px) */
@media (max-width: 900px) {
    .viral-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (Below 600px) */
@media (max-width: 600px) {
    
    /* 1. Stack Grids */
    .viral-grid, 
    .recommended-grid { 
        grid-template-columns: 1fr; 
        gap: 20px; 
    }

    /* 2. Adjust Card Aspect Ratio for Mobile */
    .viral-card, 
    .recommended-card { 
        padding-top: 56.25%; /* 16:9 looks better full width */
        border-radius: 10px; 
    }

    /* 3. Limit Recommended Items */
    .recommended-card:nth-child(n+5) { display: none; }

    /* 4. Typography Adjustments */
    .section-title { font-size: 1.8rem; }
    
    .recommended-heading { 
        font-size: 1.5rem; /* Matches Mobile Comment Title */
        margin-bottom: 20px; 
    }
    
    .card-title, .rec-title { font-size: 1.2rem; }

    /* 5. Spacing Fixes */
    .recommended-section { 
        margin-left: 20px; 
        margin-right: 20px;
        margin-top: 20px;
    }
    .home-section { margin-bottom: 40px; }
}