/* Custom CSS for Contemporary Photography Website */

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure images maintain aspect ratio within their grid cells */
.gallery-item img {
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensures images cover the area without distortion */
}

/* Floating blog images */
    .image-left {
      float: left;
      margin-right: 15px; /* Spacing on the right */
    }

    .image-right {
      float: right;
      margin-left: 15px; /* Spacing on the left */
    }

/* Navigation Dropdown Hover Effects */
.group:hover .group-hover\:block {
    display: block !important;
}

/* Subtle border for gallery items */
.gallery-item {
    border: 1px solid rgba(0, 0, 0, 0.05); /* Very light border for separation without margin */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Hide scrollbar by default (if desired, but usually not recommended for accessibility) */
/* For elevator bar, typically it's the browser's default scrollbar on the body */
body {
    overflow-y: scroll; /* Ensures a scrollbar is always present to prevent layout shifts */
}

/* Styling for the image preview metadata */
#image-metadata {
    white-space: pre-wrap; /* Ensures new lines from metadata are respected */
    word-wrap: break-word; /* Breaks long words to prevent overflow */
}