/* Pagina di una fotografia (server/views/photo.mjs, public/assets/js/photo.js). La foto sta in un «palco» scuro, grande quanto lo schermo
   permette senza tagliarla; sotto titolo, luogo, nota, richiesta di stampa e dati di scatto; poi la sessione e le foto correlate.
   Nessun elemento fisso o sticky. */

/* ---------------------------------------------------------------- palco */
.ph-top { padding-top: clamp(16px, 2.6vw, 36px); } /* la testata (sticky) occupa già il suo spazio nel flusso */
.ph-crumbs { margin-bottom: clamp(12px, 1.8vw, 20px); }
.ph-stage { position: relative; display: grid; justify-items: center; padding-inline: var(--pad); }
.ph-frame {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--r-photo);
  aspect-ratio: var(--ar, 1.5);
  /* larga quanto il contenitore, ma mai più alta dello schermo meno la testata (le verticali restano intere) */
  width: min(100%, var(--container), calc((100vh - var(--header-space) - 140px) * var(--ar, 1.5)));
  width: min(100%, var(--container), calc((100svh - var(--header-space) - 140px) * var(--ar, 1.5)));
  min-width: min(100%, 280px);
  background: var(--c, var(--surface));
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95);
}
.ph-frame img { width: 100%; height: 100%; object-fit: cover; animation: ph-settle 1.6s var(--ease-out) both; }
@keyframes ph-settle { from { transform: scale(1.025); } }
.ph-arrow {
  position: absolute; z-index: 2; top: 50%; translate: 0 -50%;
  display: none; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(241, 236, 228, .22); background: rgba(13, 12, 11, .55); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s, border-color .25s;
}
.ph-arrow .i { width: 22px; height: 22px; stroke-width: 1.8; }
.ph-arrow--prev { left: calc(var(--pad) + 14px); }
.ph-arrow--next { right: calc(var(--pad) + 14px); }
@media (min-width: 900px) { .ph-arrow { display: inline-grid; } }
@media (hover: hover) { .ph-arrow:hover { background: rgba(13, 12, 11, .85); border-color: var(--accent); } }

/* ---------------------------------------------------------------- titolo, luogo, nota, richiesta; dati di scatto a destra */
.ph-info__grid { display: grid; gap: clamp(36px, 5vw, 88px); }
@media (min-width: 900px) { .ph-info__grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; } }
.ph-main { display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; min-width: 0; }
.ph-cat { display: inline-flex; align-items: center; min-height: 32px; transition: color .25s; }
.ph-title { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); line-height: 1.02; font-weight: 400; letter-spacing: -.012em; overflow-wrap: break-word; }
.ph-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; color: var(--muted); font-size: var(--fs-small); }
.ph-where__place { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-body); color: var(--accent-2); }
.ph-where__place .i { width: 18px; height: 18px; color: var(--accent); }
.ph-where__place span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(232, 207, 163, .4); }
.ph-note { display: grid; gap: 12px; margin: 6px 0 0; padding-left: clamp(16px, 2vw, 26px); border-left: 1px solid var(--accent); max-width: 40em; }
.ph-note__text { margin: 0; font: italic 400 clamp(1.45rem, 1.2rem + 1vw, 2.05rem)/1.36 var(--font-display); }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 4px; }
.ph-share { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-share__native { display: contents; }
html:not(.js) .ph-share { display: none; } /* condividere e copiare richiedono JavaScript */
.ph-print { display: flex; align-items: flex-start; gap: 10px; max-width: 56ch; color: var(--muted); font-size: var(--fs-small); }
.ph-print .i { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.ph-print strong { color: var(--accent-2); font-weight: 500; }
.ph-side { display: grid; gap: 16px; min-width: 0; }
.ph-side__title { font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.ph-exif > div { align-content: start; }
.ph-exif > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* numero dispari di dati: l'ultimo prende tutta la riga */
.ph-exif dd a { color: var(--text); text-decoration-color: rgba(241, 236, 228, .35); }
@media (hover: hover) { .ph-cat:hover { color: var(--accent-2); } .ph-where__place:hover span { text-decoration-color: currentColor; } }

/* ---------------------------------------------------------------- precedente / successiva */
.ph-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(44px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--line); }
.ph-pager__link { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 44px; }
.ph-pager__link--next { justify-self: end; flex-direction: row-reverse; text-align: right; }
.ph-pager__thumb { flex: none; width: 104px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-photo); background: var(--c, var(--surface)); }
.ph-pager__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ph-pager__text { display: grid; gap: 4px; min-width: 0; }
.ph-pager__dir { display: inline-flex; align-items: center; gap: 6px; font: 500 .6875rem/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ph-pager__link--next .ph-pager__dir { justify-content: flex-end; }
.ph-pager__title { font: 450 1.45rem/1.15 var(--font-display); overflow-wrap: break-word; }
@media (max-width: 559px) { /* sul telefono una sotto l'altra: due colonne strette farebbero accavallare le etichette */
  .ph-pager { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ph-pager > span:empty { display: none; }
  .ph-pager__thumb { width: 76px; }
  .ph-pager__title { font-size: 1.375rem; }
}
@media (hover: hover) { .ph-pager__link:hover .ph-pager__title { color: var(--accent-2); } .ph-pager__link:hover img { transform: scale(1.05); } }

/* ---------------------------------------------------------------- la sessione e le foto correlate */
.ph-session__grid { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 1000px) { .ph-session__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } }
.ph-session__text { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.ph-session__title { font-size: var(--fs-h2); }
.ph-session__meta { font: 500 var(--fs-kicker)/1.5 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ph-session__summary { color: var(--muted); max-width: 52ch; }
.ph-session__photos { display: grid; gap: 14px; min-width: 0; }
.ph-small-title { font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.ph-gallery.gallery--dense { --row: calc((100% - var(--gutter)) / 3.02); }
@media (min-width: 600px) { .ph-gallery.gallery--dense { --row: calc((100% - 2 * var(--gutter)) / 4.6); } }
@media (min-width: 1100px) { .ph-gallery.gallery--dense { --row: 200px; } .ph-session .ph-gallery.gallery--dense { --row: 190px; } .ph-session .ph-gallery--few.gallery--dense { --row: 250px; } }
@media (max-width: 599px) { .ph-gallery .photo__caption { display: none; } } /* foto piccole: il titolo tagliato non aiuta (il nome del link resta l'alt) */

@media (prefers-reduced-motion: reduce) { .ph-frame img { animation: none; } }