/* =========================================
   หน้า Archive Activity (Grid & Filter)
   ========================================= */
.archive-activity-container { max-width: 1200px; margin: 60px auto 100px; padding: 0 20px; }

/* Hero Header */
.archive-header { margin-bottom: 50px; }
.archive-title { font-size: 2.8em; font-weight: 800; color: #222; margin-bottom: 10px; }
.archive-description { font-size: 1.2em; color: #666; max-width: 600px; margin: 0 auto; }

/* Category Filter (Horizontal Scroll on Mobile) */
.activity-category-filter {
    display: flex; gap: 10px; justify-content: center; margin-bottom: 40px;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 8px 20px; border-radius: 50px; background: #f4f4f5; color: #444;
    text-decoration: none; font-weight: 500; font-size: 0.95em;
    transition: all 0.3s ease; border: 1px solid transparent;
}
.filter-btn:hover, .filter-btn.active { background: #4CAF50; color: #fff; box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3); }

/* Activity Grid */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* The Card */
.activity-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; flex-direction: column;
}
.activity-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.activity-card-img-link { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }
.activity-card-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.activity-card:hover .activity-card-thumbnail { transform: scale(1.05); }
.activity-card-placeholder { width: 100%; height: 100%; background: #eaeaea; display: flex; align-items: center; justify-content: center; font-size: 3em; color: #ccc; }

.activity-card-badge {
    position: absolute; top: 15px; left: 15px; background: #4CAF50; color: #fff;
    padding: 4px 12px; border-radius: 30px; font-size: 0.8em; font-weight: 600; z-index: 2;
}

.activity-card-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.activity-card-meta { font-size: 0.9em; color: #888; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.activity-card-title { font-size: 1.3em; font-weight: 700; margin-bottom: 15px; line-height: 1.4; }
.activity-card-title a { color: #222; text-decoration: none; transition: color 0.2s; }
.activity-card-title a:hover { color: #4CAF50; }
.activity-card-excerpt { color: #666; font-size: 0.95em; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }

.activity-card-readmore { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #4CAF50; text-decoration: none; margin-top: auto; }
.activity-card-readmore i { transition: transform 0.2s; }
.activity-card-readmore:hover i { transform: translateX(5px); }

/* Pagination */
.activity-pagination .nav-links { display: flex; justify-content: center; gap: 8px; }
.activity-pagination .page-numbers { padding: 10px 16px; border-radius: 8px; background: #f4f4f5; color: #333; text-decoration: none; font-weight: bold; transition: 0.3s; }
.activity-pagination .page-numbers.current, .activity-pagination .page-numbers:hover { background: #4CAF50; color: #fff; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .activity-category-filter { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
    .activity-category-filter::-webkit-scrollbar { display: none; } /* ซ่อน Scrollbar บนมือถือ แต่ยังปัดได้ */
    .filter-btn { white-space: nowrap; }
}