/* ---- Photo gallery styles ---- */

.gallery-header {
    margin: 1.5rem 0 1rem;
}
.gallery-header h1 { margin-bottom: .25rem; }
.gallery-header .subtitle { color: #6c757d; font-size: 1rem; }

/* Flexbox justified grid (Flickr-style). Each item grows proportional to its
   aspect ratio and is normalized to a target row height, so rows fill the width
   with no JS layout pass and no layout shift (dimensions come from the DB). */
.justified-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    --row-height: 240px;
}
.justified-grid .tile {
    position: relative;
    height: var(--row-height);
    flex-grow: 1;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #f0f0f0;
}
.justified-grid .tile img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/* Pushes the final row to the left instead of stretching it. */
.justified-grid::after {
    content: "";
    flex-grow: 999999;
}
.justified-grid .tile .caption-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: .5rem .6rem .4rem;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    color: #fff;
    font-size: .85rem;
    opacity: 0;
    transition: opacity .15s ease-in-out;
}
.justified-grid .tile:hover .caption-overlay { opacity: 1; }

@media (max-width: 575px) {
    .justified-grid { --row-height: 160px; }
}

/* ---- Album index ---- */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.album-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .15s ease-in-out;
}
.album-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.album-card .cover {
    aspect-ratio: 3 / 2;
    background: #ececec;
    overflow: hidden;
}
.album-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.album-card .meta { padding: .6rem .75rem .75rem; }
.album-card .meta h3 { font-size: 1.05rem; margin: 0 0 .15rem; }
.album-card .meta .subtitle { color: #6c757d; font-size: .85rem; }
.album-card .meta .count { color: #999; font-size: .8rem; }

/* ---- Single photo permalink ---- */
.photo-permalink .frame {
    background: #111;
    border-radius: 6px;
    text-align: center;
}
.photo-permalink .frame img { max-width: 100%; width: auto; height: auto; max-height: 60vh; }
@media (max-width: 575px), (orientation: portrait) {
    .photo-permalink .frame img { max-height: none; }
}
.photo-permalink .meta { margin-top: 1rem; }
.photo-permalink #map { height: 280px; border-radius: 6px; margin-top: 1rem; }

.photo-permalink .detail-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem 1.1rem;
}
.photo-permalink .detail-label {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .5rem;
}
.photo-permalink .detail-card h2 a { text-decoration: none; }
.photo-permalink .detail-card h2 .ext-icon { color: #6c757d; margin-left: .1rem; vertical-align: 1px; }
.photo-permalink .detail-location svg { color: #6c757d; margin-right: .2rem; vertical-align: -1px; }
.photo-permalink .exif-list { display: flex; flex-direction: column; gap: .45rem; }
.photo-permalink .exif-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.photo-permalink .exif-row dt { font-weight: 400; color: #6c757d; margin: 0; }
.photo-permalink .exif-row dd { font-weight: 600; margin: 0; text-align: right; }

/* ---- Admin ---- */
.admin-table img.thumb { height: 56px; width: 56px; object-fit: cover; border-radius: 4px; }
.dropzone {
    border: 2px dashed #adb5bd;
    border-radius: 8px;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #6c757d;
    background: #fafafa;
}
.dropzone.dragover { border-color: #0d6efd; background: #eef5ff; color: #0d6efd; }
.upload-badge { font-variant-numeric: tabular-nums; }

/* ---- Dark mode overrides for hardcoded light colors above ---- */
[data-bs-theme="dark"] .gallery-header .subtitle { color: #adb5bd; }
[data-bs-theme="dark"] .justified-grid .tile { background: #2a2a2a; }
[data-bs-theme="dark"] .album-card { border-color: #3a3a3a; background: #1e1e1e; }
[data-bs-theme="dark"] .album-card .cover { background: #2a2a2a; }
[data-bs-theme="dark"] .album-card .meta .subtitle { color: #adb5bd; }
[data-bs-theme="dark"] .album-card .meta .count { color: #888; }
[data-bs-theme="dark"] .dropzone { border-color: #555; color: #adb5bd; background: #2a2a2a; }
[data-bs-theme="dark"] .dropzone.dragover { border-color: #0d6efd; background: #14223a; color: #6ea8fe; }
[data-bs-theme="dark"] .photo-permalink .detail-card { background: #1e1e1e; }
[data-bs-theme="dark"] .photo-permalink .detail-label { color: #adb5bd; }
[data-bs-theme="dark"] .photo-permalink .detail-card h2 .ext-icon { color: #adb5bd; }
[data-bs-theme="dark"] .photo-permalink .detail-location svg { color: #adb5bd; }
[data-bs-theme="dark"] .photo-permalink .exif-row dt { color: #adb5bd; }