/* --- SHRINE.CSS (Gallery Specific Styles) --- */

/* The Main Grid Area */
.shrine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns across */
    gap: 20px;
    padding: 10px;
}

/* The Individual Box for each item */
.shrine-item {
    text-align: center;
    background: #eee;
    padding: 10px;
    border: 2px solid #000;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Hover Effect: Pop up + Red Shadow */
.shrine-item:hover {
    transform: translateY(-5px); 
    box-shadow: 6px 6px 0px #cc0000; /* Monogatari Red Shadow */
    z-index: 10;
}

/* The Frame around the image */
.img-frame {
    width: 100%;
    aspect-ratio: 1 / 1; /* Forces it to be a perfect square */
    background: #000;
    border: 2px solid #000;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

/* The Image itself */
.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(120%); /* Black & White + High Contrast */
    transition: filter 0.3s;
}

/* When hovering the box, colorize the image */
.shrine-item:hover .img-frame img {
    filter: grayscale(0%) contrast(100%);
}

/* The Text */
.shrine-item p {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.shrine-item strong {
    background-color: #000;
    color: #fff;
    padding: 0 5px;
}

/* Mobile Responsiveness for Shrine */
@media (max-width: 768px) {
    .shrine-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on mobile */
    }
}