/* assets/css/style.css */

/* Custom Font Fallback & General Fixes */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* CSS Only Image Gallery */
.gallery-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main-images {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Creates a square aspect ratio */
    overflow: hidden;
}

.main-images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.thumbnails label {
    cursor: pointer;
    width: 70px;
    height: 70px;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.thumbnails label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover effect on thumbnails */
.thumbnails label:hover {
    border-color: #a7f3d0; /* Tailwind green-200 */
}

/* Logic for active image (Controlled via hidden radio inputs) */
#img1:checked ~ .thumbnails label[for="img1"],
#img2:checked ~ .thumbnails label[for="img2"],
#img3:checked ~ .thumbnails label[for="img3"],
#img4:checked ~ .thumbnails label[for="img4"] {
    border-color: #059669; /* Tailwind green-600 */
}

#img1:checked ~ .main-images .img1,
#img2:checked ~ .main-images .img2,
#img3:checked ~ .main-images .img3,
#img4:checked ~ .main-images .img4 {
    opacity: 1;
    z-index: 10;
}