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

/* Column count modifiers — add one of these alongside .archive-grid */
.archive-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

.archive-grid--3col {
    grid-template-columns: repeat(3, 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 {
        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;
    }
}