/* ENZO JOSSI — V5.6 GALERIE RACING */

.gallery-page{
  margin:0;
  background:#080808;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
.gallery-page *{box-sizing:border-box}

.gallery-shell{
  width:min(1540px,calc(100% - 64px));
  margin:0 auto;
  padding:155px 0 100px;
}

.gallery-hero{
  max-width:1000px;
  margin-bottom:55px;
}
.gallery-eyebrow{
  margin:0 0 17px;
  color:#e00000;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.22em;
}
.gallery-hero h1{
  margin:0;
  font-size:clamp(70px,8vw,124px);
  line-height:.80;
  letter-spacing:-.065em;
  font-weight:1000;
}
.gallery-hero h1 span{color:#e00000}
.gallery-hero > p:last-child{
  max-width:650px;
  margin:28px 0 0;
  color:#aaa;
  font-size:16px;
  line-height:1.6;
}

.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:25px;
}
.gallery-filters button{
  appearance:none;
  border:1px solid #292929;
  background:#0f0f0f;
  color:#777;
  padding:12px 16px;
  font:900 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
  cursor:pointer;
}
.gallery-filters button:hover,
.gallery-filters button.is-active{
  background:#e00000;
  border-color:#e00000;
  color:#fff;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:dense;
  grid-auto-rows:260px;
  gap:10px;
}
.gallery-item{
  position:relative;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  overflow:hidden;
  background:#111;
  cursor:pointer;
  text-align:left;
}
.gallery-item.is-wide{grid-column:span 2}
.gallery-item.is-tall{grid-row:span 2}
.gallery-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.001);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.gallery-item:hover img{transform:scale(1.035)}

.gallery-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.88) 100%);
  opacity:.82;
}
.gallery-meta{
  position:absolute;
  left:20px;
  right:54px;
  bottom:18px;
  z-index:2;
}
.gallery-meta small{
  display:block;
  margin-bottom:7px;
  color:#e00000;
  font-size:6.5px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
}
.gallery-meta strong{
  display:block;
  color:#fff;
  font-size:17px;
  line-height:1.04;
  font-weight:900;
  text-transform:uppercase;
}
.gallery-meta em{
  display:block;
  margin-top:7px;
  color:#999;
  font-size:7px;
  line-height:1;
  font-style:normal;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.gallery-open{
  position:absolute;
  right:17px;
  bottom:15px;
  z-index:2;
  color:#fff;
  font-size:22px;
  line-height:1;
  transition:.2s ease;
}
.gallery-item:hover .gallery-open{
  color:#e00000;
  transform:translate(2px,-2px);
}

.gallery-empty{
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border:1px solid #242424;
  text-align:center;
}
.gallery-empty span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:26px;
  background:#e00000;
  color:#fff;
  font-weight:1000;
}
.gallery-empty h2{
  margin:0;
  font-size:42px;
  line-height:.9;
}

.gallery-lock{overflow:hidden}
.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  grid-template-rows:minmax(0,1fr) auto;
  background:rgba(0,0,0,.97);
  color:#fff;
}
.gallery-lightbox.is-open{display:grid}

.gallery-lightbox-stage{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:65px 90px 20px;
}
.gallery-lightbox-stage img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 210px);
  object-fit:contain;
}

.gallery-close,
.gallery-prev,
.gallery-next{
  position:absolute;
  z-index:3;
  appearance:none;
  border:0;
  background:rgba(15,15,15,.78);
  color:#fff;
  cursor:pointer;
}
.gallery-close:hover,
.gallery-prev:hover,
.gallery-next:hover{background:#e00000}

.gallery-close{
  top:18px;
  right:18px;
  width:46px;
  height:46px;
  font-size:29px;
}
.gallery-prev,
.gallery-next{
  top:50%;
  width:52px;
  height:70px;
  transform:translateY(-50%);
  font-size:23px;
}
.gallery-prev{left:18px}
.gallery-next{right:18px}

.gallery-lightbox-info{
  min-height:140px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:50px;
  padding:23px max(40px,5vw) 28px;
  border-top:1px solid #222;
  background:#090909;
}
.gallery-lightbox-info span{
  color:#e00000;
  font-size:7px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
}
.gallery-lightbox-info h2{
  margin:8px 0 0;
  font-size:25px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
}
.gallery-lightbox-info p{
  max-width:750px;
  margin:10px 0 0;
  color:#999;
  font-size:12px;
  line-height:1.5;
}
.gallery-lightbox-side{
  min-width:220px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:13px;
}
.gallery-lightbox-side small{
  color:#777;
  font-size:7px;
  letter-spacing:.08em;
}
.gallery-lightbox-side a{
  color:#fff;
  text-decoration:none;
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
  border-bottom:2px solid #e00000;
  padding-bottom:7px;
}

@media(max-width:900px){
  .gallery-shell{
    width:calc(100% - 24px);
    padding:110px 0 65px;
  }
  .gallery-hero{margin-bottom:34px}
  .gallery-eyebrow{font-size:7px}
  .gallery-hero h1{
    font-size:clamp(52px,17vw,78px);
    line-height:.82;
  }
  .gallery-hero > p:last-child{
    margin-top:20px;
    font-size:14px;
  }
  .gallery-filters{
    gap:5px;
    margin-bottom:12px;
  }
  .gallery-filters button{
    padding:10px 12px;
    font-size:6px;
  }
  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:190px;
    gap:6px;
  }
  .gallery-item.is-wide{grid-column:span 2}
  .gallery-meta{
    left:12px;
    right:36px;
    bottom:11px;
  }
  .gallery-meta small{font-size:5.5px}
  .gallery-meta strong{font-size:12px}
  .gallery-meta em{font-size:5.5px}
  .gallery-open{
    right:10px;
    bottom:10px;
    font-size:16px;
  }
  .gallery-lightbox-stage{
    padding:62px 10px 12px;
  }
  .gallery-lightbox-stage img{
    max-height:calc(100vh - 230px);
  }
  .gallery-prev,
  .gallery-next{
    top:auto;
    bottom:150px;
    width:44px;
    height:54px;
    transform:none;
  }
  .gallery-prev{left:8px}
  .gallery-next{right:8px}
  .gallery-close{
    top:10px;
    right:10px;
  }
  .gallery-lightbox-info{
    min-height:155px;
    grid-template-columns:1fr;
    gap:12px;
    padding:18px 16px 22px;
  }
  .gallery-lightbox-info h2{font-size:20px}
  .gallery-lightbox-side{
    min-width:0;
    align-items:flex-start;
    justify-content:flex-start;
  }
}