/* Justified-rows gallery. Row widths and heights are set inline by
   js/gallery.js; this file styles what sits inside them. */

.gallery {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
}

.gallery-row {
    display: flex;
    margin-bottom: 4px;
}

.gallery-error {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--spacing-lg) 0;
}

.photo {
    position: relative;
    overflow: hidden;
    margin: 0;
    cursor: pointer;
    background: var(--color-border);
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.photo:hover img {
    transform: scale(1.03);
}

.photo:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.photo figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

.photo:hover figcaption,
.photo:focus-visible figcaption {
    opacity: 1;
}

.photo-subject {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.lightbox-subject {
    font-size: 1.05rem;
    font-weight: 500;
}

.photo-place {
    font-size: 0.85rem;
    line-height: 1.3;
}

.photo-date {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-info {
    margin-top: 16px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lightbox-place {
    font-size: 1rem;
}

.lightbox-date {
    font-size: 0.9rem;
    opacity: 0.7;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    z-index: 2001;
    line-height: 1;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: 1;
}

.lightbox-close {
    top: 20px;
    right: 30px;
    font-size: 40px;
    padding: 10px;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    padding: 20px;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.9rem;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .gallery {
        padding: var(--spacing-sm) 2px var(--spacing-md);
    }

    .gallery-row {
        margin-bottom: 2px;
    }

    .photo figcaption {
        padding: 6px 10px;
    }

    /* A caption on a phone sits over a tile barely 110px wide, where the
       desktop sizes ran to half the height of the photograph. The subject had
       been left at its full size while the other two lines shrank. */
    .photo figcaption { gap: 0; }

    .photo-subject { font-size: 0.7rem; line-height: 1.25; }
    .photo-place { font-size: 0.64rem; line-height: 1.25; }
    .photo-date { font-size: 0.58rem; }

    .lightbox-prev,
    .lightbox-next {
        font-size: 36px;
        padding: 10px;
    }

    .lightbox-prev { left: 5px; }
    .lightbox-next { right: 5px; }

    .lightbox-close {
        top: 10px;
        right: 15px;
        font-size: 32px;
    }
}

/* On touch devices there is no hover, so captions stay visible. */
@media (hover: none) {
    .photo figcaption {
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    }

    .photo:hover img {
        transform: none;
    }
}

/* Toolbar above the grid */
.gallery-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    /* The same measure as .gallery. At 1800 the toolbar was 200px wider than
       the photographs it belongs to, so the search box sat to the left of the
       first picture and Shuffle to the right of the last. */
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-sm) 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Sits in the toolbar beside the search box, qualifying the grid below.
   It carries the spring that pushes the buttons to the far end, so the note
   reads as part of the left-hand group rather than floating between them. */
.gallery-note {
    margin-right: auto;
    color: var(--color-text-muted);
    font-style: italic;
}

.gallery-bar button {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    padding: 0.3rem 0.85rem;
    background: var(--color-bg-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    cursor: pointer;
}

.gallery-bar button:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.gallery-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.3rem 0.15rem 0.7rem;
    border: 1px solid var(--color-accent);
    border-radius: 3px;
    color: var(--color-accent);
}

.gallery-filter button { padding: 0.1rem 0.5rem; font-size: 0.8rem; }

/* The display above would otherwise beat the browser's own [hidden] rule, and
   the chip would sit there empty whenever no place is being filtered on. */
.gallery-filter[hidden] { display: none; }

/* Globe */
.globe-section {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
    text-align: center;
}

.globe-section h2 {
    font-size: 1.6rem;
    /* The hint paragraph used to hold the globe off the heading. */
    margin-bottom: var(--spacing-sm);
}

.globe-holder {
    display: flex;
    justify-content: center;
    min-height: 320px;
    cursor: grab;
}

.globe-holder:active { cursor: grabbing; }

/* Whose imagery this is. Quiet, but it has to be there. */
.globe-credit {
    margin: var(--spacing-xs) 0 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    opacity: 0.75;
}


@media (max-width: 600px) {
    .globe-section { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
}

/* Globe markers */
.globe-marker {
    --size: 14px;
    position: relative;
    width: var(--size);
    height: var(--size);
    cursor: pointer;
    transition: opacity 0.25s ease;
}

.globe-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fdfbf6;
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 0 3px rgba(253, 251, 246, 0.28), 0 2px 6px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.globe-count {
    font-family: var(--font-serif);
    font-size: calc(var(--size) * 0.46);
    line-height: 1;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.globe-marker:hover .globe-dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 5px rgba(253, 251, 246, 0.35), 0 3px 10px rgba(0, 0, 0, 0.5);
}

.globe-marker.is-on .globe-dot {
    background: var(--color-accent);
    border-color: #fdfbf6;
    transform: scale(1.4);
    box-shadow: 0 0 0 6px rgba(23, 50, 92, 0.35), 0 3px 12px rgba(0, 0, 0, 0.55);
}

.globe-marker.is-on .globe-count { color: #fdfbf6; }

/* The name, shown on hover and while selected */
.globe-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(16, 18, 22, 0.92);
    color: #fdfbf6;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    line-height: 1.3;
    padding: 5px 9px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    text-align: center;
}

.globe-label em {
    display: block;
    font-style: normal;
    font-size: 0.72rem;
    opacity: 0.7;
}

.globe-marker:hover .globe-label,
.globe-marker.is-on .globe-label { opacity: 1; }

/* Tooltip for a globe marker */
.globe-tip {
    background: rgba(16, 18, 22, 0.92);
    color: #fdfbf6;
    padding: 6px 10px;
    border-radius: 3px;
    font-family: var(--font-serif);
    font-size: 0.86rem;
    line-height: 1.35;
    text-align: center;
}

.globe-tip b { display: block; font-weight: 500; }
.globe-tip span { opacity: 0.72; font-size: 0.78rem; }