/* SPDX-License-Identifier: MIT */
/* Time Capsule gallery: the row of year thumbnails, the album, and the single
   picture viewer with Previous, Next, Back to the Time Capsule and Close
   underneath the picture. Every part works on a phone, a tablet and a
   desktop. */

body.lc-lightbox-open { overflow: hidden; }

/* ---------------- the six photographs ----------------
   The six pictures at the top of the gallery page. The admin can set the
   caption that sits under each one. A picture with no caption is hidden, so
   the grid closes up neatly, and the link that wraps it goes with it. */

.gallery .ph.is-empty { display: none; }
.gallery a.ph-tile.is-empty { display: none; }

/* a tag or a description the admin has emptied is hidden on the page */
.capsule-year .year-tag[hidden],
.capsule-year .year-blurb[hidden] { display: none; }

/* ---------------- the year strip on the gallery page ----------------
   A plain row of small thumbnails, the same as the site has always had.
   The sizes come from css/styles.css. The captions are not shown here:
   they belong to the album, which opens from More memories, and to the
   single picture viewer. */

.year-thumbs { overflow-x: auto; }
.year-thumbs .cap-thumb { flex: 0 0 88px; width: 88px; height: 88px; }

/* ---------------- the album ---------------- */

.lc-album {
  position: fixed;
  inset: 0;
  /* Above the cookie banner, which sits at z-index 300, so the banner can
     never cover the buttons of the viewer. */
  z-index: 310;
  background: rgba(9, 14, 24, .97);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.lc-album-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 1rem;
}
.lc-album-title {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  margin: 0;
}
.lc-album-x {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lc-album-x:hover { background: rgba(255, 255, 255, .22); }
.lc-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.lc-album-item { margin: 0; min-width: 0; }
.lc-album-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  /* contain, not cover. The preview shows the WHOLE picture, so nobody sees
     a square cut out of the middle of a photo. */
  background: #1e293b center / contain no-repeat;
  border: 1px solid rgba(255, 255, 255, .16);
  position: relative;
}
.lc-album-thumb.is-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, .45);
}
.lc-album-thumb.is-video::before {
  content: '\25B6';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.6rem;
  z-index: 1;
}
.lc-album-caption {
  margin: .45rem 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: .85rem;
  line-height: 1.45;
}
.lc-album-caption:empty { display: none; }

/* ---------------- the single picture viewer ---------------- */

.lc-viewer {
  position: fixed;
  inset: 0;
  /* Above the cookie banner, which sits at z-index 300. */
  z-index: 320;
  background: rgba(9, 14, 24, .97);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.lc-viewer-x {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lc-viewer-x:hover { background: rgba(255, 255, 255, .24); }
.lc-viewer-frame {
  flex: 1 1 auto;
  min-height: 0;
  /* This was a grid with one automatic row. The row grew to the full size of
     the picture, so a picture ran past the bottom of the screen and the
     bottom of it was cut off. This is a flex box whose height is known, so
     the picture can be scaled down to the space that is really free. */
  display: flex;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 0 .25rem;
}
.lc-viewer-frame img,
.lc-viewer-frame video {
  /* The whole picture must be visible, with its own shape kept, and it must
     never be blown up past its real size. */
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  background: #000;
}
.lc-viewer-caption {
  flex: 0 0 auto;
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  line-height: 1.45;
  max-width: 820px;
  margin-inline: auto;
}
.lc-viewer-caption[hidden] { display: none; }
.lc-viewer-count {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(255, 255, 255, .6);
  font-size: .78rem;
  text-align: center;
}
.lc-viewer-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  padding-top: .3rem;
}
.lc-viewer-btn {
  min-height: 44px;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
}
.lc-viewer-btn:hover:not([disabled]) { background: rgba(255, 255, 255, .22); }
.lc-viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lc-viewer-btn[disabled] { opacity: .35; cursor: not-allowed; }
.lc-viewer-btn.is-close {
  background: var(--bd-green);
  border-color: var(--bd-green);
}

/* ---------------- small screens ---------------- */

@media (max-width: 560px) {
  .lc-viewer { padding: .7rem; gap: .45rem; }
  .lc-viewer-caption { font-size: .9rem; }
  .lc-viewer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    width: 100%;
  }
  .lc-viewer-btn {
    width: 100%;
    padding: .6rem .4rem;
    font-size: .84rem;
  }
  /* Previous and Next sit together on the first row. Back to the Time Capsule
     and Close each take a full row under them. The reading order in the code
     stays Previous, Back, Next, Close. */
  .lc-viewer-btn[data-lc-action="prev"] { order: 1; }
  .lc-viewer-btn[data-lc-action="next"] { order: 2; }
  .lc-viewer-btn[data-lc-action="back"] { order: 3; grid-column: 1 / -1; }
  .lc-viewer-btn[data-lc-action="close"] { order: 4; grid-column: 1 / -1; }
  .lc-album { padding: .7rem; }
  .lc-album-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: .7rem; }
  .lc-album-caption { font-size: .78rem; }
}
@media (max-width: 400px) {
  .year-thumbs .cap-thumb { flex: 0 0 72px; width: 72px; height: 72px; }
}