/* Custom styles for Impressto Homelab */

/* Ensure sidebar respects hide parameter */
#sidebar[data-hide-sidebar="true"] {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Photo container styling */
.photo-container {
    width: 100%;
    overflow: hidden;
    margin: 0.5em 0 1.5em;
    max-height: 60vh; /* Match the max-height of the image */
}

/* Photo of the week styling */
#photo-of-the-week {
    width: 100%; /* Make image take full width of container */
    height: auto; /* Let height be determined by aspect ratio */
    max-height: 60vh; /* Limit height on large screens to 60% of viewport height */
    object-fit: cover; /* Crop image to fill the container while maintaining aspect ratio */
    object-position: center; /* Center the image when cropping */
    border-radius: 15px; /* More rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for depth */
    display: block; /* Remove any inline spacing */
    margin: 0 auto; /* Center the image if it's smaller than container */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    #photo-of-the-week {
        max-height: none; /* On smaller screens, let the height be determined by aspect ratio */
    }
}