/* album-viewer.css */

:root {
    --av-gutter: 4px;
    --av-bg: #fbfcfd;
    --av-muted: #6b7280;
}

body {
    background: var(--av-bg);
    color: #0b1220;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.album-wrap {
    width: 100vw;
    margin: 0;
    padding: 0;
}

.album-header {
    text-align: center;
    /*padding: 40px 20px;*/
}

.album-header h1 {
    /*margin: 0;*/
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 500;
    margin-top: 80px;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    color: #0b1220;
}

.album-meta {
    margin-top: 0;
    font-size: 0.95rem;
    color: var(--av-muted);
    margin-bottom: 30px;
    /*padding: 10px 10px;*/
}

/* FLEXBOX LAYOUT (Justified Grid) */
.album-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--av-gutter);
    padding: 0 var(--av-gutter);
}

/* TILE: The Flex Item */
.album-tile {
    /* height: auto allows the container to stretch.
       The actual 'row height' is controlled by the min-height below.
       flex-grow is set inline in HTML!
    */
    height: auto;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* CONTROLLING DENSITY (Items per row)
   We manipulate 'height' to force items to wrap.
   Taller height = Fewer items per row.
   Shorter height = More items per row.
*/

/* Mobile: Target ~2 Landscape or 3 Portrait */
.album-tile img {
    height: 240px;
    width: auto;
    min-width: 100%;
    object-fit: cover; /* Ensures flush edges without gaps */
    object-position: center;
    display: block;
}

/* Desktop: Limit to ~4 landscape photos */
@media (min-width: 900px) {
    .album-tile img {
        height: 220px;
    }
}

/* Ultra Wide: Limit to ~5 landscape photos */
@media (min-width: 1600px) {
    .album-tile img {
        height: 300px;
    }
}

/* OPTIONAL: Handle the very last row so it doesn't stretch huge */
.album-grid::after {
    content: '';
    flex-grow: 999999999; /* Consumes remaining space */
}