/* =========================================================================
   Photos from Wikimedia Commons (assets/js/photos.js): the record figure,
   the map panel, archive thumbnails, the local photo box and the
   "Fotografitë" page. Uses the tokens of app.css (both themes).
   ========================================================================= */
.photo { margin: 4px 0 26px; }
.photo-frame { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.photo-frame img { display: block; width: 100%; height: auto; max-height: min(66vh, 600px); object-fit: contain; background: var(--bg-2); }
/* On a record page the frame hugs the picture, so a portrait is not set in a wide, empty box. */
.photo:not(.photo-panel) .photo-frame { width: min(100%, calc(min(66vh, 600px) * var(--ar, 1.5))); max-width: 100%; }
/* The frame hugs the picture (a portrait gets a narrow frame), at its size before the picture arrives: --ar is its shape. */
.photo:not(.photo-panel) .photo-frame img { width: 100%; height: auto; max-height: none; aspect-ratio: var(--ar, 1.5); }
.photo figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.photo .photo-desc { font: 400 16px/1.5 var(--serif); color: var(--text-2); }
.photo-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.photo-credit a:hover { color: var(--gold); text-decoration-color: currentColor; }
.photo-note { font-size: 12px; font-style: italic; color: var(--text-3); }
.photo-note.to-verify { color: var(--clay); }
.photo-note.wlm { font-style: normal; font-weight: 700; color: var(--gold); }

/* journeys: the station photo, and a small photo beside each place in its list */
.step .photo-panel { margin: 14px 0 14px; }
.step .stop-list .stop-photo { flex-shrink: 0; width: 64px; height: 48px; margin-left: auto; border: 1px solid var(--line); border-radius: 6px; object-fit: cover; background: var(--bg-3); }

/* map side panel */
.photo-panel { margin: 0 0 14px; }
.photo-panel .photo-frame img { max-height: 240px; object-fit: cover; object-position: 50% 30%; }
.photo-panel:is([data-kind="document"], [data-kind="artwork"], [data-kind="artifact"], [data-kind="map"], [data-kind="historical-depiction"]) .photo-frame img { object-fit: contain; object-position: center; }
.photo-panel figcaption { margin-top: 7px; font-size: 12px; }

/* archive cards: a small picture above "show on map" (credits are on the record page and on #/fotot) */
.photo-thumb { display: block; width: 128px; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-3); }
.photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .3s var(--ease); }
.result:hover .photo-thumb img { transform: scale(1.04); }

/* the box to change a photo (local server only) */
.photo-edit { margin: 0 0 28px; padding: 16px 18px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--bg-2); }
.photo-edit-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.photo-edit-title svg { width: 16px; height: 16px; }
.photo-edit-form, .photo-card-form { display: flex; gap: 8px; }
.photo-edit-form input, .photo-card-form input { flex: 1; min-width: 0; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); color: var(--text); font: 400 14px var(--sans); }
.photo-edit-form input:hover, .photo-card-form input:hover, .photo-edit-form input:focus, .photo-card-form input:focus { border-color: var(--gold); }
.photo-edit-actions, .photo-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-edit-help { margin: 10px 0 0; font-size: 13px; color: var(--text-3); }
.photo-edit-msg, .photo-card-msg { margin: 8px 0 0; font-size: 14px; color: var(--green); }
.photo-edit-msg:empty, .photo-card-msg:empty { display: none; }
.has-error .photo-edit-msg, .has-error .photo-card-msg { color: var(--red); }

/* the Fotografitë page */
.photo-stats { margin: 16px 0 0; font-size: 15px; color: var(--text-2); }
.photo-stats strong { color: var(--gold); }
.photo-local { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: var(--gold-soft); font-size: 14px; }
.photo-local svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.photo-page { padding: 26px 0 80px; }
.photo-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.photo-grid .empty-state { grid-column: 1 / -1; }
.photo-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); transition: border-color .2s; }
.photo-card:hover { border-color: var(--line-2); }
.photo-card-img { display: block; aspect-ratio: 4 / 3; background: var(--bg-3); overflow: hidden; }
.photo-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.photo-card-img.none { display: grid; place-items: center; color: var(--line-2); }
.photo-card-img.none svg { width: 40px; height: 40px; }
.photo-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.photo-card-body .eyebrow { margin: 0; }
.photo-card-body h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.photo-card-body h2 a { text-decoration: none; }
.photo-card-body h2 a:hover { color: var(--gold); }
.photo-card .photo-credit { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); overflow-wrap: anywhere; }
.photo-card-form { margin-top: 6px; }

@media (max-width: 960px) {
  .photo-thumb { width: 104px; }
  .photo-edit-form, .photo-card-form { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .photo-thumb img { transition: none; } }
/* The Wiki Loves Monuments switch stands apart from the kinds, at the row's end. */
.chip-switch { margin-left: auto; }