/* ==========================================================================
   Archive Nieuws - Thomas Vaer (zwart-wit)
   ========================================================================== */

#nieuws-hero {
    position: relative;
    padding: 200px 0 80px;
    overflow: hidden;
    background: #0a0a0a;
}

#nieuws-hero .container { position: relative; z-index: 2; }

#nieuws-hero .nieuws-hero-content h1 {
    font-size: 80px;
    line-height: 1;
    text-transform: uppercase;
    color: white;
    margin: 0 0 15px;
}

#nieuws-hero .nieuws-intro {
    font-size: 20px;
    color: rgba(255,255,255,0.6);
    margin: 0;
    max-width: 500px;
}

#nieuws-hero .radial {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
}

#nieuws-hero #radial1 { width: 400px; height: 400px; background: #fff; top: -100px; right: 10%; }
#nieuws-hero #radial2 { width: 300px; height: 300px; background: #ccc; bottom: -50px; left: 5%; }
#nieuws-hero #radial3 { width: 200px; height: 200px; background: #fff; top: 50%; left: 40%; }
#nieuws-hero #radial4 { width: 250px; height: 250px; background: #ddd; bottom: 0; right: 30%; }

#nieuws-hero .herobeeldmerk { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); opacity: 0.06; z-index: 1; }
#nieuws-hero .herobeeldmerk img { width: 500px; }

#nieuws-archive {
    padding: 60px 0 100px;
    background: #121212;
    min-height: 50vh;
}

/* Filters */
.nieuws-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.08); }

.filter-btn {
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    transition: all 0.3s ease;
}

.filter-btn:hover { color: white; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.filter-btn.active { color: white; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }

/* Grid */
.nieuws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.nieuws-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(30px);
    display: flex;
    flex-direction: column;
}

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

.nieuws-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    background: rgba(255,255,255,0.05);
}

.nieuws-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.nieuws-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.nieuws-card:hover .nieuws-card-media img { transform: scale(1.08); }
.nieuws-card-placeholder { width: 100%; height: 100%; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; font-size: 40px; color: rgba(255,255,255,0.1); }
.nieuws-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(18,18,18,0.8), transparent); pointer-events: none; }
.nieuws-card-video-badge { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #121212; font-size: 12px; z-index: 2; }

.nieuws-card-content { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.nieuws-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.nieuws-date { font-size: 13px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 6px; }
.nieuws-date i { font-size: 11px; }
.nieuws-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); padding: 3px 10px; border-radius: 20px; }
.nieuws-card-content h2 { font-size: 22px; line-height: 1.3; color: white; margin: 0 0 10px; text-transform: none; font-weight: 600; }
.nieuws-card-excerpt { flex: 1; }
.nieuws-card-excerpt p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.45); margin: 0; }
.nieuws-read-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: white; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 15px; transition: gap 0.3s ease; }
.nieuws-card:hover .nieuws-read-more { gap: 14px; }

/* Pagination */
.nieuws-pagination { margin-top: 60px; display: flex; justify-content: center; }
.nieuws-pagination .page-numbers { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
.nieuws-pagination .page-numbers li { display: inline-flex; }
.nieuws-pagination .page-numbers li a,
.nieuws-pagination .page-numbers li span { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.08); background: transparent; transition: all 0.3s ease; }
.nieuws-pagination .page-numbers li a:hover { color: white; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.nieuws-pagination .page-numbers li span.current { color: #121212; background: white; border-color: white; }

.nieuws-empty { text-align: center; padding: 100px 0; }
.nieuws-empty i { font-size: 60px; color: rgba(255,255,255,0.08); margin-bottom: 20px; }
.nieuws-empty h2 { color: white; font-size: 28px; text-transform: none; margin-bottom: 10px; }
.nieuws-empty p { color: rgba(255,255,255,0.4); }

@media only screen and (max-width: 1200px) { .nieuws-grid { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 1000px) { #nieuws-hero { padding: 160px 0 60px; } #nieuws-hero .nieuws-hero-content h1 { font-size: 50px; } .nieuws-card-content h2 { font-size: 20px; } }
@media only screen and (max-width: 700px) { #nieuws-hero .nieuws-hero-content h1 { font-size: 40px; } .nieuws-grid { grid-template-columns: 1fr; gap: 20px; } .nieuws-filters { gap: 8px; } .filter-btn { padding: 8px 16px; font-size: 12px; } #nieuws-archive { padding: 40px 0 60px; } }
@media only screen and (max-width: 500px) { #nieuws-hero .nieuws-hero-content h1 { font-size: 32px; } .nieuws-card-content { padding: 20px; } }