/* ====================
ARCHIVE GRID CONTAINER
==================== */
.archive-grid {
display: grid;
width: 100%;
margin: 0 auto;
gap: 5px;
}

.archive-grid--4col { grid-template-columns: repeat(4, 1fr); }
.archive-grid--3col { grid-template-columns: repeat(3, 1fr); }
.archive-grid--2col { grid-template-columns: repeat(2, 1fr); }

/* ====================
ARCHIVE BUTTON (image swap on hover)
==================== */
.archive-btn {
position: relative;
display: block;
}

.archive-btn img {
width: 100%;
display: block;
transition: transform 0.25s ease, opacity 0.25s ease;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.archive-btn .btn-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}

/* ====================
MOBILE RESPONSIVE
==================== */
@media (max-width: 768px) {
.archive-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
}

.archive-grid--4col,
.archive-grid--3col,
.archive-grid--2col {
grid-template-columns: repeat(2, 1fr);
margin: 0 auto;
width: 100%;
gap: 5px;
}

.archive-btn .btn-hover {
display: none;
}

.archive-btn img {
transition: transform 0.15s ease, opacity 0.15s ease;
}

.archive-btn:active img {
transform: scale(0.95);
opacity: 0.7;
}
}

/* ====================
DESKTOP HOVER
==================== */
@media (min-width: 769px) {
.archive-btn:hover {
position: relative;
z-index: 10;
}

.archive-btn:hover img {
transform: scale(1.02);
}

.archive-btn:hover .btn-hover {
opacity: 1;
}
}