.photo-link { display: block; position: relative; cursor: zoom-in; border-radius: inherit; }
.photo-link::after {
  content: 'Powiększ ↗'; position: absolute; right: 0.8rem; bottom: 0.8rem;
  padding: 0.35rem 0.7rem; border: 1px solid var(--color-white); border-radius: 2rem;
  color: var(--color-white); background: var(--color-olive-dark); font-size: 0.8rem; font-weight: 700;
  line-height: 1.5; opacity: 0; pointer-events: none;
}
.photo-link:hover::after, .photo-link:focus-visible::after { opacity: 1; }
.hero__picture-wrap > .photo-link { border-radius: 46% 46% 24% 24%; }
.hero__picture-wrap > .photo-link::after { right: 18%; bottom: 1.25rem; z-index: 3; }
html.has-lightbox { overflow: hidden; }
html.has-lightbox body { position: fixed; top: var(--lightbox-scroll-top); left: 0; right: 0; width: 100%; }
.lightbox:not([open]) { display: none; }
.lightbox {
  position: fixed; inset: 0; margin: auto; padding: 0;
  width: calc(100% - 2rem); max-width: 76rem;
  height: calc(100vh - 2rem); height: calc(100dvh - 2rem);
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow: hidden; border: 1px solid var(--color-border); border-radius: 1.25rem;
  background: var(--color-paper); color: var(--color-ink);
  box-shadow: 0 1.5rem 5rem #0006;
}
.lightbox::backdrop { background: rgb(54 54 54 / 88%); }
.lightbox__panel { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.lightbox__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 1rem; }
.lightbox__toolbar h2 { margin: 0; font: 750 1.1rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif; }
.lightbox__control {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: 3rem; min-height: 3rem; padding: 0.5rem 0.85rem;
  color: var(--color-ink); background: var(--color-white);
  border: 1px solid var(--color-muted); border-radius: 0.7rem;
  font-size: 0.95rem; font-weight: 750; line-height: 1.4; cursor: pointer;
}
.lightbox__control:hover { background: var(--color-sage); }
.lightbox__control:focus-visible, .lightbox__caption:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lightbox__control svg { width: 1.4rem; height: 1.4rem; flex: none; }
.lightbox__control[hidden] { display: none; }
.lightbox__stage { min-height: 0; position: relative; display: grid; place-items: center; background: var(--color-charcoal); overflow: hidden; touch-action: pan-y pinch-zoom; }
.lightbox__stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; user-select: none; }
.lightbox__stage img[hidden] { display: none; }
.lightbox__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; color: #fff; text-align: center; }
.lightbox__loading[hidden] { display: none; }
.lightbox__caption { margin: 0; padding: 0.65rem 1rem 0; max-height: 24vh; max-height: 24dvh; overflow-y: auto; font-size: 0.95rem; line-height: 1.5; text-align: center; }
.lightbox__navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; }
.lightbox__previous { justify-self: start; }
.lightbox__next { justify-self: end; }
.lightbox__counter { grid-column: 2; margin: 0; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 35rem) {
  .lightbox { width: calc(100% - 1rem); height: calc(100vh - 1rem); height: calc(100dvh - 1rem); max-height: calc(100dvh - 1rem); border-radius: 0.9rem; }
  .lightbox__toolbar, .lightbox__navigation { padding: 0.6rem; }
  .lightbox__toolbar h2 { font-size: 1rem; }
  .lightbox__control { padding: 0.5rem 0.65rem; }
  .lightbox__navigation .lightbox__control span { display: none; }
}
@media (hover: none) { .photo-link::after { opacity: 1; } }
@media (forced-colors: active) {
  .lightbox, .lightbox__control { border: 2px solid CanvasText; }
  .lightbox::backdrop { background: Canvas; opacity: 0.95; }
  .lightbox__stage { background: Canvas; }
  .lightbox__loading { color: CanvasText; }
}
@media print { .lightbox { display: none !important; } html.has-lightbox body { position: static; } }