/* ==========================================================================
   Lightbox (assets/scripts/lightbox.js). Used by the Life pages: Photos,
   an album, Training, Modeling. Candidate for site.css once it has proved
   itself; until then each page lists it in `styles`.

   A calm, full-screen sheet in the page's own paper color, so it reads the
   same in light and dark. The photo keeps its proportions and the site's
   one radius; the caption sits under it in small text.
   ========================================================================== */

.lightbox-open { overflow: hidden; }

.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-3) var(--gutter) var(--space-5);
  border: 0;
  background: var(--paper);
  color: var(--ink-2);
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "bar  bar  bar"
    "prev fig  next";
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.lightbox[open] {
  display: grid;
  animation: lightbox-in var(--dur-slow) var(--ease);
}
.lightbox::backdrop { background: var(--paper); }

@keyframes lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox__bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
}
.lightbox__count { color: var(--ink-3); }

.lightbox__figure {
  grid-area: fig;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
}
.lightbox__img {
  width: auto;
  height: auto;
  /* Leave room for the bar, the caption and the padding. The width cap
     follows from the height cap and the image's shape (--ar, set by the
     script), so a wide image is never boxed taller than it is. */
  --fit-h: calc(100dvh - 10rem);
  max-width: min(100%, calc(var(--fit-h) * var(--ar, 10)));
  max-height: var(--fit-h);
  min-height: 0;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--surface);
}
.lightbox__caption {
  max-width: var(--measure);
  font-size: var(--step-n1);
  line-height: var(--leading-snug);
  color: var(--ink-3);
  text-align: center;
}

.lightbox .icon-btn { width: 44px; height: 44px; }
.lightbox__prev { grid-area: prev; }
.lightbox__next { grid-area: next; }
.lightbox__prev svg { transform: rotate(180deg); }
.lightbox__nav[hidden] { display: none; }

/* The phone frame around phone screenshots (.device, in site.css). For any
   other photo its parts step aside and the image is laid out on its own. */
.lightbox:not(.lightbox--device) .lightbox__device,
.lightbox:not(.lightbox--device) .device__body,
.lightbox:not(.lightbox--device) .device__screen { display: contents; }
.lightbox:not(.lightbox--device) .device__body::before,
.lightbox:not(.lightbox--device) .device__body::after { display: none; }
/* A phone is about 2.07 times as tall as it is wide, frame included. */
.lightbox--device .lightbox__device { width: min(100%, calc((100dvh - 10rem) / 2.07)); }
.lightbox--device .lightbox__img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  border-radius: 0;
  background: none;
}

/* The laptop (.laptop, in site.css) for screens from a laptop. Its screen
   keeps the laptop's 16:10 shape and the screenshot fills its width; a
   taller one scrolls inside, the way the page would, and a wider one
   widens the screen. A laptop is about
   0.575 times as tall as it is wide. */
.lightbox__laptop { display: none; }
.lightbox--laptop .lightbox__laptop {
  display: block;
  width: min(100%, calc((100dvh - 10rem) / 0.575));
}
.lightbox--laptop .laptop__screen {
  /* A screenshot wider than 16:10 widens the screen instead of leaving a
     black band under it. */
  aspect-ratio: max(1.6, var(--ar, 1.6));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lightbox--laptop .lightbox__img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  border-radius: 0;
  background: none;
  object-fit: initial;
}

/* Phones: arrows move under the photo so it gets the full width. */
@media (max-width: 40rem) {
  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "bar  bar"
      "fig  fig"
      "prev next";
  }
  .lightbox__prev { justify-self: start; }
  .lightbox__next { justify-self: end; }
  .lightbox__img { --fit-h: calc(100dvh - 13rem); }
  .lightbox--device .lightbox__device { width: min(100%, calc((100dvh - 13rem) / 2.07)); }
  .lightbox--laptop .lightbox__laptop { width: min(100%, calc((100dvh - 13rem) / 0.575)); }
}

/* Gallery: a photo grid whose photos open in the lightbox. Calmer and
   larger than the default grid: two across on phones, three on tablets,
   five at full width. */
.gallery .photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - var(--space-4)), 12.5rem), 1fr));
}
.gallery .photo-grid a { cursor: zoom-in; }