/* Photography pages, age gate, gallery, and lightbox. */

.intro {
  max-width:900px;
  margin:0 auto 5rem;
}

.body-copy {
  color:var(--muted);
  max-width:850px;
}

.card-grid {
  columns:4 230px;
  column-gap:1rem;
}

.photo-card {
  display:block;
  break-inside:avoid;
  margin-bottom:1rem;
  position:relative;
  overflow:hidden;
  background:#333;
}

.photo-card img {
  width:100%;
  height:auto;
}

.post-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:2rem;
}

.post-grid a img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  margin-bottom:1rem;
}

.post-grid a span,.post-grid small {
  display:block;
}

.post-grid small {
  color:var(--muted);
}

.photo-home .intro {
  max-width:none;
  margin:0 0 2rem;
}

.photo-home .intro .body-copy p:first-child {
  margin-top:0;
}

.photo-home .card-grid {
  columns:4 230px;
}

.gallery {
  text-align:left;
}

.gallery-cover {
  display:block;
  width:100%;
  height:490px;
  object-fit:cover;
  margin:0 auto 2.5rem;
}

.gallery-details {
  margin:0 0 5rem;
}

.gallery-details h1 {
  font:1.65rem Abel,Arial,sans-serif;
  margin:0 0 .2rem;
}

.gallery-meta {
  font-size:.75rem;
  letter-spacing:.28em;
  color:#999;
  margin:.2rem 0 2rem;
}

.gallery-details .body-copy {
  margin:0;
  font-size:.8rem;
}

.gallery-images {
  margin-top:4rem;
}

@media(max-width:700px) {
  .gallery-cover {
    height:230px;
  }

  .gallery-details {
    margin-bottom:3rem;
  }

  .gallery-meta {
    letter-spacing:.12em;
  }
}

.photo .reveal-photo {
  opacity:0;
  transform:scale(.58);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}

.photo .reveal-photo.is-visible {
  opacity:1;
  transform:scale(1);
}

.age-screen {
  background:var(--bg);
  color:#fff;
  margin:0;
}

#evav-overlay-wrap {
  flex:1;
  padding:2rem 1rem;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
}

#evav-overlay {
  text-align:center;
  width:min(840px,calc(100% - 24px));
  transform:translateY(30px);
}

#evav-overlay h1 {
  font:400 25px/1.3 Abel,Arial,sans-serif;
  margin:0 0 9px;
  color:#fff;
  font-weight:700;
  font-size:23px;
}

#evav_verify_form {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:15px;
  margin:0;
}

#evav_verify_form button {
  width:290px;
  max-width:95%;
  height:50px;
  padding:0;
  border:0;
  border-radius:10px;
  color:white;
  font:16px Abel,Arial,sans-serif;
  cursor:pointer;
}

#evav_verify_form .evav-confirm {
  background:#2dc937;
}

#evav_verify_form .evav-decline {
  background:#cc3232;
}

#evav_verify_form button:hover {
  box-shadow:0 0 4px 1px blanchedalmond;
}

.evav-error {
  font-size:14px;
  color:#fff;
  margin:0;
}

.evav-error[hidden] {
  display:none;
}

#evav-overlay .disclaimer {
  font:11px/14px Abel,Arial,sans-serif;
  color:#fff;
  margin:12px auto 0;
  max-width:800px;
}

.gallery-images {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;
  margin:4rem 0 0;
}

.gallery-column {
  min-width:0;
  display:flex;
  flex-direction:column;
}

.gallery-images a {
  position:relative;
  display:block;
  margin:5px;
  overflow:hidden;
  background:#eee;
}

.gallery-images a img {
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.gallery-images a::before {
  content:'';
  position:absolute;
  inset:0;
  background:#000b;
  opacity:0;
  transition:opacity .2s;
}

.gallery-images a::after {
  content:'⛶';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:white;
  font-size:28px;
  opacity:0;
  transition:opacity .2s;
}

.gallery-images a:hover::before,.gallery-images a:hover::after {
  opacity:1;
}

#lightbox {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:rgba(0,0,0,.86);
  color:#fff;
  font-family:Arial,sans-serif;
  overflow:hidden;
}

#lightbox::backdrop {
  background:#000b;
}

#lightbox[open] {
  display:block;
}

.lightbox-top {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50px;
  z-index:3;
  background:linear-gradient(#111b,#1110);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:7px 10px;
}

.lightbox-top .counter {
  font-size:13px;
  padding-top:7px;
}

.lightbox-toolbar {
  display:flex;
  gap:3px;
}

#lightbox button,.lightbox-toolbar a {
  border:0;
  border-radius:0;
  background:#161616cc;
  color:white;
  min-width:37px;
  height:36px;
  padding:0 7px;
  font:22px/36px Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
}

#lightbox button:hover,.lightbox-toolbar a:hover {
  background:#454545;
}

.lightbox-stage {
  position:absolute;
  inset:0 45px 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  top:60px;
}

.lightbox-stage img {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:none;
}

.lightbox-stage.zoomed {
  overflow:auto;
  display:block;
  text-align:center;
}

.lightbox-stage.zoomed img {
  max-width:none;
  max-height:none;
  cursor:zoom-out;
}

#lightbox .previous,#lightbox .next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
}

#lightbox .previous {
  left:10px;
}

#lightbox .next {
  right:10px;
}

.lightbox-thumbs {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:54px;
  display:flex;
  justify-content:center;
  gap:4px;
  overflow-x:auto;
  background:#1119;
  z-index:2;
}

.lightbox-thumbs button {
  flex:0 0 68px;
  width:68px;
  height:50px;
  padding:0;
  border:3px solid transparent;
  background:none;
}

.lightbox-thumbs button.active {
  border-color:white;
}

.lightbox-thumbs img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.lightbox-info {
  position:absolute;
  right:8px;
  top:50px;
  z-index:4;
  background:#262626;
  padding:16px 20px;
  min-width:220px;
  box-shadow:0 8px 25px #000a;
  font:14px Abel,Arial,sans-serif;
}

.lightbox-info[hidden] {
  display:none;
}

.lightbox-toast {
  position:absolute;
  top:55px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  background:#222;
  padding:6px 12px;
}

.lightbox-toast[hidden] {
  display:none;
}

@media(max-width:800px) {
  .gallery-images {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .lightbox-toolbar button:nth-child(3),.lightbox-toolbar button:nth-child(5),.lightbox-toolbar button:nth-child(6) {
    display:none;
  }
}

@media(max-width:480px) {
  .gallery-images {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lightbox-toolbar {
    gap:1px;
  }

  #lightbox button,.lightbox-toolbar a {
    min-width:30px;
    padding:0 4px;
    font-size:18px;
  }

  .lightbox-stage {
    inset:0 34px 54px;
  }

  .lightbox-thumbs {
    justify-content:flex-start;
  }
}

@media(prefers-reduced-motion:reduce) {
  .photo .reveal-photo {
    opacity:1;
    transform:none;
    transition:none;
  }
}

.photo .photo-home .card-grid {
  column-gap:0;
}

.photo .photo-home .photo-card {
  margin-bottom:0;
}