/* Shared by every photo surface (gallery pages, Cajas explorer, ranking pages):
   album cards, photo tiles, the full-screen viewer and annotation overlays. */

/* Album cards */
.photo-albums { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-6) var(--s-5); margin:var(--s-5) 0; }
.photo-album { min-width:0; }
.photo-album-cover { display:block; color:var(--ink); text-decoration:none; }
.photo-album-cover>img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--lime-sunken); }
.photo-album-cover strong { display:flex; align-items:center; min-height:var(--hit); padding-top:var(--s-2); font:700 var(--t-sub)/var(--lh-head) var(--sans); }
.photo-album-cover:hover strong { text-decoration:underline; text-underline-offset:3px; }
.photo-album>p,.photo-album>span { font:var(--t-dense)/var(--lh-dense) var(--sans); }
.photo-album>p { margin:0 0 var(--s-2); color:var(--ink-2); }
.photo-album>span { color:var(--ink-3); }
.photo-albums.has-feature .is-lead { grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; }
.photo-albums.has-feature .is-lead .photo-album-cover { flex:1; display:flex; flex-direction:column; }
.photo-albums.has-feature .is-lead .photo-album-cover>img { flex:1 1 0; min-height:320px; height:0; aspect-ratio:auto; }
.photo-albums.has-feature .is-lead strong { font:800 var(--t-head)/var(--lh-head) var(--display); }
.photo-albums.is-compact { grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:var(--s-4); }
.photo-albums.is-compact .photo-album-cover strong { min-height:0; padding:var(--s-2) 0 var(--s-1); font:700 var(--t-body)/var(--lh-head) var(--sans); }
@media(prefers-reduced-motion:no-preference) {
 .photo-album-cover,.photo-tile>a { overflow:hidden; }
 .photo-album-cover>img,.photo-tile img { transition:transform .4s var(--ease),filter .2s var(--ease); }
 .photo-album-cover:hover>img,.photo-tile>a:hover img { transform:scale(1.03); }
}

/* Photo tiles: an even grid (dialogs), or "flow" rows that keep each photograph's shape */
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-5) var(--s-4); }
.photo-tile { margin:0; min-width:0; }
.photo-tile[hidden] { display:none; }
.photo-tile>a { display:block; }
.photo-tile img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--lime-sunken); }
.photo-grid:not(.photo-flow) .photo-tile figcaption { padding:var(--s-2) 0; font:var(--t-dense)/var(--lh-dense) var(--sans); }
.photo-grid:not(.photo-flow) .photo-tile figcaption a { display:inline-flex; min-height:var(--hit); align-items:center; color:var(--ink); }
.photo-grid:not(.photo-flow) .photo-tile figcaption span { display:block; color:var(--ink-3); }
.photo-flow { --row:200px; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.photo-flow::after { content:''; flex:100000 1 0; }
.photo-flow .photo-tile { position:relative; flex:calc(var(--r) * 100) 1 calc(var(--r) * var(--row)); max-width:100%; }
.photo-flow .photo-tile>a { height:100%; }
.photo-flow .photo-tile img { height:100%; aspect-ratio:var(--r); }
.photo-flow .photo-tile figcaption { position:absolute; inset:auto 0 0; padding:var(--s-2) var(--s-3); background:color-mix(in srgb,var(--stone-panel) 88%,transparent); color:var(--ink-inverse); font:600 var(--t-dense)/var(--lh-dense) var(--sans); pointer-events:none; opacity:0; transition:opacity var(--dur) var(--ease); }
.photo-flow .photo-tile figcaption a { color:inherit; text-decoration:none; }
.photo-flow .photo-tile figcaption span { display:block; font-weight:400; opacity:.85; }
.photo-flow .photo-tile:is(:hover,:focus-within) figcaption { opacity:1; }
@media(hover:none) { .photo-flow .photo-tile figcaption { display:none; } }
@media(max-width:600px) { .photo-flow { --row:104px; gap:var(--s-1); } .photo-grid:not(.photo-flow) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.photo-missing { display:grid; place-items:center; min-height:var(--s-9); height:100%; padding:var(--s-4); background:var(--lime-sunken); color:var(--ink-2); font:var(--t-dense)/var(--lh-dense) var(--sans); }
.photo-missing[hidden],.photo-annotation-overlay[hidden] { display:none; }

/* Annotations share the full, uncropped image box */
.photo-stage { position:relative; width:100%; }
.photo-stage>img { display:block; width:100%; height:auto; }
.photo-annotation-overlay,.photo-annotation-overlay>svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.photo-annotation-overlay>svg { fill:none; stroke:var(--ink-inverse); stroke-width:3; }
.photo-annotation-overlay svg :is(rect,ellipse,circle,line,polygon,polyline) { vector-effect:non-scaling-stroke; }
.photo-annotation-overlay :is(circle,marker) { fill:var(--ink); stroke:var(--ink-inverse); }
.photo-annotation-overlay .photo-connector { stroke-dasharray:5 4; stroke-width:2; }
.photo-annotation-label { position:absolute; width:max-content; max-width:40%; padding:var(--s-1) var(--s-2); background:var(--stone-panel); color:var(--ink-inverse); font:600 var(--t-dense)/var(--lh-dense) var(--sans); overflow-wrap:anywhere; }
.photo-labels-hidden :is(.photo-annotation-label,.photo-connector) { display:none; }
.photo-annotation-controls { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }
.photo-annotation-list { margin:var(--s-3) 0; font:var(--t-dense)/var(--lh-dense) var(--sans); }
.photo-annotation-list summary { min-height:var(--hit); cursor:pointer; }
.photo-annotation-list li { margin-bottom:var(--s-2); }
.photo-annotation-list a { display:inline-flex; align-items:center; min-height:var(--hit); }

/* Full-screen viewer: the photograph on a dark ground, as large as the screen allows */
html.photo-viewer-lock { overflow:hidden; }
.photo-viewer { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--stone-panel); color:var(--ink-inverse); }
.photo-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.photo-viewer::backdrop { background:var(--ink); }
.photo-viewer-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-2) var(--s-3) var(--s-2) var(--s-5); }
.photo-viewer-nav p { margin:0; font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--celeste-pale); font-variant-numeric:tabular-nums; }
.photo-viewer-icon { display:grid; place-items:center; width:var(--hit); height:var(--hit); padding:0; border:1px solid var(--celeste-pale); background:transparent; color:inherit; font:300 var(--t-head)/1 var(--sans); cursor:pointer; }
.photo-viewer-icon:hover { background:color-mix(in srgb,var(--ink-inverse) 14%,transparent); }
.photo-viewer-body { container-type:size; display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; justify-items:center; min-height:0; }
.photo-viewer .photo-stage { grid-area:1/2; width:min(100cqw - 128px,100cqh * var(--photo-ratio)); }
.photo-viewer-arrow[data-photo-prev] { grid-area:1/1; }
.photo-viewer-arrow[data-photo-next] { grid-area:1/3; }
.photo-viewer .photo-stage>img { background:var(--ink); }
.photo-viewer-arrow { width:48px; height:88px; padding:0; border:0; background:color-mix(in srgb,var(--ink-inverse) 8%,transparent); color:inherit; font:300 var(--t-title)/1 var(--sans); cursor:pointer; }
.photo-viewer-arrow:hover:not(:disabled) { background:color-mix(in srgb,var(--ink-inverse) 20%,transparent); }
.photo-viewer-arrow:disabled { opacity:.2; cursor:default; }
.photo-viewer-arrow[hidden] { display:block; visibility:hidden; }
.photo-viewer :focus-visible { outline:2px solid var(--celeste-pale); outline-offset:2px; }
.photo-viewer-info { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:var(--s-2) var(--s-6); width:min(100%,1200px); margin:0 auto; padding:var(--s-3) var(--s-5) var(--s-4); }
.photo-viewer-info p { margin:var(--s-1) 0 0; max-width:70ch; }
.photo-viewer-info h2 { margin:0; color:inherit; font:700 var(--t-sub)/var(--lh-head) var(--sans); overflow-wrap:anywhere; }
.photo-viewer-caption { font:var(--t-body)/var(--lh-body) var(--sans); }
.photo-viewer-places,.photo-viewer-credit { font:var(--t-dense)/var(--lh-dense) var(--sans); }
.photo-viewer-credit { color:var(--celeste-pale); }
.photo-viewer-info a { color:var(--celeste-pale); }
.photo-viewer .photo-annotation-controls,.photo-viewer .photo-annotation-list { color:inherit; margin:0; }
@media(max-width:600px) {
 .photo-viewer-body { position:relative; grid-template-columns:minmax(0,1fr); }
 .photo-viewer .photo-stage { grid-area:1/1; width:min(100cqw,100cqh * var(--photo-ratio)); }
 .photo-viewer-arrow { position:absolute; top:50%; z-index:1; width:40px; height:72px; transform:translateY(-50%); background:color-mix(in srgb,var(--stone-panel) 65%,transparent); font-size:var(--t-head); }
 .photo-viewer-arrow[data-photo-prev] { left:0; }
 .photo-viewer-arrow[data-photo-next] { right:0; }
 .photo-viewer-arrow:disabled { visibility:hidden; }
 .photo-viewer-info { padding:var(--s-2) var(--s-4) var(--s-3); }
 .photo-viewer-nav { padding-left:var(--s-4); }
}

/* The Cajas explorer's album browser */
.photo-albums-dialog { width:min(calc(100% - var(--s-4)),var(--page-max)); max-height:94svh; padding:var(--s-4); border:1px solid var(--rule); border-radius:var(--radius); background:var(--lime); color:var(--ink); box-shadow:var(--shadow-overlay); }
.photo-albums-dialog::backdrop { background:var(--ink); opacity:.8; }
.photo-viewer-head { display:flex; align-items:start; justify-content:space-between; gap:var(--s-3); }
.photo-viewer-head h2 { margin:0; font:700 var(--t-sub)/var(--lh-head) var(--sans); overflow-wrap:anywhere; }
.photo-viewer-head button { flex:none; }
.photo-albums-dialog .photo-grid { gap:var(--s-4); }
.photo-albums-dialog .photo-tile figcaption>span { display:none; }
.landscape-photo-open { display:block; width:100%; padding:0; border:0; background:var(--lime-sunken); color:var(--ink); cursor:pointer; }
.landscape-photo-open>img { display:block; width:100%; height:auto; }
.landscape-photo-open>span { display:flex; justify-content:center; align-items:center; min-height:var(--hit); font:600 var(--t-dense)/var(--lh-dense) var(--sans); }

@media(max-width:850px) {
 .photo-albums { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .photo-albums.has-feature .is-lead { grid-column:1/-1; grid-row:auto; }
 .photo-albums.has-feature .is-lead .photo-album-cover>img { flex:none; height:auto; min-height:0; aspect-ratio:3/2; }
}
@media(max-width:480px) {
 .photo-albums { gap:var(--s-5) var(--s-3); }
 .photo-albums.has-feature .photo-album:not(.is-lead)>p { display:none; }
 .photo-album-cover strong { font-size:var(--t-body); }
 .photo-albums.has-feature .is-lead strong { font-size:var(--t-sub); }
 .photo-albums.is-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .photo-albums-dialog { padding:var(--s-3); }
 .photo-annotation-label { max-width:50%; }
}