/* Portrait: gallery card radius, gallery actions and shared photo viewer. */
:root { --client-photo-card-radius:10px; }
html body .client-photo-grid article,
html body .client-resource-portrait { border-radius:var(--client-photo-card-radius); }
html body .client-resource-portrait { display:block; margin:0; padding:0; }
/* A restrained Apple TV-style rim follows the visible gallery thumbnail only. */
html body .client-photo-visual::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  box-shadow:inset 0 0 0 1px rgba(153,153,153,.12);
  border-radius:var(--client-photo-card-radius);
  pointer-events:none;
}
/* Keep the rim still while only the photo moves a little on desktop hover. */
html body .client-photo-visual > button picture { overflow:hidden; border-radius:inherit; }
html body .client-photo-visual > button picture img { transition:transform .55s cubic-bezier(.22,.61,.36,1); }
@media (hover:hover) and (pointer:fine) {
  html body .client-photo-visual > button:hover picture img { transform:scale(1.025); }
}
/* Preview-only visitors keep the full photo brightness on hover and keyboard focus. */
html body.client-photo-download-denied .client-photo-visual:is(:hover,:focus-within) img { filter:none; }
@media (prefers-reduced-motion:reduce) {
  html body .client-photo-visual > button picture img { transition:none; }
}
html body .client-portrait-open { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:inherit; background:transparent; color:inherit; cursor:pointer; }
html body .client-portrait-actions { position:absolute; z-index:2; top:50%; left:50%; display:flex; gap:12px; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-44%); transition:opacity .24s ease,transform .36s cubic-bezier(.2,0,0,1),visibility 0s linear .24s; }
html body .client-portrait-actions :is(button,a) { color:#fff; }
html body .client-resource-portrait:focus-within .client-portrait-actions { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-50%); transition-delay:0s; }
html body .client-resource-portrait:focus-within img { filter:brightness(.52); transform:scale(1.025); }
html body .client-portrait-open:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
@media (hover:hover) and (pointer:fine) {
  html body .client-resource-portrait:hover .client-portrait-actions { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-50%); transition-delay:0s; }
}
@media (hover:none), (pointer:coarse) {
  html body .client-portrait-actions { display:none; }
  html body .client-resource-portrait:focus-within img { filter:none; transform:none; }
  html body .client-photo-preview-stage { padding-inline:2.5vw; }
  html body .client-photo-preview-stage>.client-photo-preview-previous,
  html body .client-photo-preview-stage>.client-photo-preview-next { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html body .client-portrait-actions { transition:none; }
}

/* Shared private-page viewer surface: PDFs and photos fill the viewport. */
html body .client-pdf-overlay,
html body .client-photo-preview-overlay {
  box-sizing:border-box;
  padding:0;
}
html body .client-pdf-dialog,
html body .client-photo-preview-dialog {
  box-sizing:border-box;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Reserve room for the caption and controls above tall photos. */
html body .client-photo-preview-stage {
  padding-top:calc(92px + env(safe-area-inset-top, 0px));
}

/* The existing viewer measures the stage padding to place the image and controls. */
@media (min-width:761px) and (pointer:fine) {
  html body .client-photo-preview-stage {
    --client-photo-display-max:1200px;
    padding-inline:max(74px, calc((100vw - var(--client-photo-display-max))/2));
    padding-top:max(calc(92px + env(safe-area-inset-top, 0px)), calc((100dvh - var(--client-photo-display-max))/2));
    padding-bottom:max(64px, calc((100dvh - var(--client-photo-display-max))/2));
  }
}