.city-photo-section{margin:36px 0;scroll-margin-top:24px}.city-photo-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:20px}.city-photo-heading h2{margin:4px 0!important}.city-photo-heading>p{max-width:320px;color:#64748b;margin:0}.city-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.city-photo-grid figure{margin:0;min-width:0}.city-photo-grid figure:first-child{grid-column:span 2;grid-row:span 2}.city-photo-open{position:relative;display:block;height:180px;overflow:hidden;border-radius:16px;background:#e2e8f0}.city-photo-grid figure:first-child .city-photo-open{height:420px}.city-photo-grid:has(figure:only-child){grid-template-columns:1fr}.city-photo-grid:has(figure:only-child) figure{grid-column:auto;grid-row:auto}.city-photo-open img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.city-photo-open:hover img{transform:scale(1.035)}.city-photo-enlarge{position:absolute;right:12px;bottom:12px;border-radius:50%;background:#fff;color:#0f172a;width:32px;height:32px;text-align:center;line-height:32px}.city-photo-grid figcaption{padding:8px 2px;line-height:1.5}.city-photo-caption{display:block;font-weight:600}.city-photo-credit{font-size:11px;color:#64748b}.city-photo-credit a{color:inherit}.city-photo-open:focus-visible{outline:3px solid #2563eb;outline-offset:3px}@media(max-width:700px){.city-photo-heading{display:block}.city-photo-heading>p{margin-top:12px;max-width:none}.city-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.city-photo-grid figure:first-child{grid-column:span 2;grid-row:auto}.city-photo-grid figure:first-child .city-photo-open{height:270px}.city-photo-open{height:155px}}@media(prefers-reduced-motion:reduce){.city-photo-open img{transition:none}}

@media(min-width:701px){.city-photo-grid:has(figure:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}.city-photo-grid:has(figure:nth-child(2):last-child) figure{grid-column:auto;grid-row:auto}.city-photo-grid:has(figure:nth-child(2):last-child) .city-photo-open{height:320px}}

/* Public photo viewer: controls and credits never scroll away with the image. */
html.city-photo-viewer-open { overflow: hidden; scroll-behavior: auto; }
.city-photo-viewer {
    box-sizing: border-box;
    width: min(1120px, calc(100vw - 48px));
    height: min(900px, calc(100dvh - 48px));
    max-width: none;
    max-height: none;
    padding: 0;
    margin: auto;
    border: 1px solid #303b4c;
    border-radius: 16px;
    overflow: hidden;
    background: #0c111b;
    color: #e8edf3;
    color-scheme: dark;
    overscroll-behavior: contain;
}
.city-photo-viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.city-photo-viewer::backdrop { background: rgba(0, 0, 0, .88); }
.city-photo-viewer-controls {
    display: flex;
    position: absolute;
    inset: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    z-index: 2;
}
.city-photo-viewer-count { flex-shrink: 0; color: #8d9bb0; white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
.city-photo-viewer button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #39475b;
    border-radius: 9px;
    background: #222e40;
    color: #edf3fc;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.city-photo-viewer button:hover { background: #30415a; border-color: #7b94b6; }
.city-photo-viewer button:focus-visible { outline: 2px solid #9fc8ff; outline-offset: 3px; }
.city-photo-viewer .city-photo-viewer-close { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; font-size: 30px; font-weight: 400; }
.city-photo-viewer button[hidden] { display: none; }
.city-photo-viewer-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 16px; overflow: hidden; }
.city-photo-viewer-stage img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.city-photo-viewer-stage img[hidden] { display: none; }
.city-photo-viewer-loading { grid-area: 1 / 1; max-width: 240px; margin: 0; padding: 12px; background: #131b28; border-radius: 8px; color: #b8c5d8; text-align: center; font-size: 13px; }
.city-photo-viewer-loading:empty { display: none; }
.city-photo-viewer-caption { max-height: min(22dvh, 150px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px; background: #131b28; border-top: 1px solid #283243; line-height: 1.5; overflow-wrap: anywhere; }
.city-photo-viewer-caption figcaption { margin: 0; }
.city-photo-viewer-caption .city-photo-caption { margin-bottom: 4px; font-size: 14px; }
.city-photo-viewer-caption .city-photo-credit { color: #b8c5d8; font-size: 12px; }
.city-photo-viewer-caption a { color: #c5dbff; text-underline-offset: 3px; }
@media (max-width: 700px), (max-height: 500px) {
    .city-photo-viewer {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
    .city-photo-viewer-controls {
        padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
        gap: 8px;
    }
    .city-photo-viewer button { padding: 10px; }
    .city-photo-viewer-stage { padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
    .city-photo-viewer-caption { padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
}
@media (max-width: 350px) {
    .city-photo-viewer-controls { padding-left: 8px; padding-right: 8px; }
}

/* Classic lightbox navigation, centered beside the photo. */
.city-photo-viewer .city-photo-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(184, 197, 216, .45);
    background: rgba(19, 27, 40, .85);
    color: #f3f7ff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 0;
}
.city-photo-viewer .city-photo-viewer-nav:hover { background: #30415a; border-color: #9fc8ff; }
.city-photo-viewer-previous { left: max(12px, env(safe-area-inset-left)); }
.city-photo-viewer-next { right: max(12px, env(safe-area-inset-right)); }

.city-photo-viewer-nav svg, .city-photo-viewer-close svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.city-photo-viewer-meta { display: flex; align-items: baseline; gap: 12px; }
.city-photo-viewer-meta .city-photo-credit { min-width: 0; }
.city-photo-viewer .city-photo-viewer-close,
.city-photo-viewer .city-photo-viewer-close:hover {
    pointer-events: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #edf3fc;
}
.city-photo-viewer-close svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); }