/* FunnyDivers - photo gallery (bento grid) + lightbox */

.fd-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:190px;
  grid-auto-flow:dense;
  gap:14px;
  margin-top:40px;
}
.fd-gallery .g-item{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:18px;
  background:#04303c;
  box-shadow:0 10px 30px rgba(2,40,50,.14);
  cursor:pointer;
  transform:translateZ(0);
}
.fd-gallery .g-item img,
.fd-gallery .g-item video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s cubic-bezier(.2,.9,.3,1),filter .4s ease;
}
.fd-gallery .g-item:hover img,
.fd-gallery .g-item:hover video{transform:scale(1.07);}
.fd-gallery .g-item::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,26,36,.78) 0%,rgba(2,26,36,.12) 42%,transparent 68%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.fd-gallery .g-item:hover::after,
.fd-gallery .g-item:focus-visible::after{opacity:1;}
.fd-gallery figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:0 16px 14px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1);
}
.fd-gallery .g-item:hover figcaption,
.fd-gallery .g-item:focus-visible figcaption{opacity:1;transform:none;}

.g-wide{grid-column:span 2;}
.g-tall{grid-row:span 2;}
.g-big{grid-column:span 2;grid-row:span 2;}

/* full-photo tiles: show the whole image uncropped instead of filling/cutting the cell */
.fd-gallery .g-fit img,
.fd-gallery .g-fit video{object-fit:contain;}

/* the video tile keeps a small badge so it reads as playable */
.g-video .g-play{
  position:absolute;
  z-index:3;
  top:12px;
  inset-inline-start:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px 6px 9px;
  border-radius:999px;
  background:rgba(2,26,36,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  font:700 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.g-video .g-play svg{flex:none;}

.fd-gallery-hint{
  margin-top:16px;
  text-align:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  color:#6b8c94;
}

@media(max-width:1100px){
  .fd-gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:170px;}
}
@media(max-width:820px){
  .fd-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:11px;}
  .g-big{grid-column:span 2;grid-row:span 2;}
  .g-wide{grid-column:span 2;grid-row:span 1;}
}
@media(max-width:520px){
  .fd-gallery{grid-auto-rows:124px;}
  .fd-gallery figcaption{opacity:1;transform:none;font-size:12px;}
  .fd-gallery .g-item::after{opacity:1;}
}

/* ---------------------------------------------------------------- lightbox */
body.fd-lb-open{overflow:hidden;}

.fd-lightbox{
  position:fixed;
  inset:0;
  z-index:9990;
  display:none;
  align-items:center;
  justify-content:center;
  padding:64px 72px 84px;
  background:rgba(1,14,20,.93);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.fd-lightbox.is-open{display:flex;animation:fdLbIn .28s ease;}
@keyframes fdLbIn{from{opacity:0}to{opacity:1}}

.fd-lb-stage{
  margin:0;
  max-width:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fd-lb-stage img,
.fd-lb-stage video{
  max-width:100%;
  max-height:calc(100vh - 148px);
  border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:fdLbPop .32s cubic-bezier(.2,.9,.3,1);
}
@keyframes fdLbPop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

.fd-lb-close,
.fd-lb-nav{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.fd-lb-close:hover,
.fd-lb-nav:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6);}
.fd-lb-close{top:20px;inset-inline-end:20px;width:44px;height:44px;}
.fd-lb-nav{top:50%;width:52px;height:52px;margin-top:-26px;}
.fd-lb-prev{inset-inline-start:16px;}
.fd-lb-next{inset-inline-end:16px;}
[dir=rtl] .fd-lb-prev svg,[dir=rtl] .fd-lb-next svg{transform:scaleX(-1);}

.fd-lb-bar{
  position:absolute;
  left:0;right:0;bottom:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 24px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:rgba(255,255,255,.9);
  font-size:14px;
  font-weight:600;
  text-align:center;
}
.fd-lb-count{color:rgba(255,255,255,.5);font-size:12.5px;font-variant-numeric:tabular-nums;}

@media(max-width:720px){
  .fd-lightbox{padding:56px 12px 78px;}
  .fd-lb-nav{width:42px;height:42px;margin-top:-21px;}
  .fd-lb-prev{inset-inline-start:6px;}
  .fd-lb-next{inset-inline-end:6px;}
  .fd-lb-stage img,.fd-lb-stage video{max-height:calc(100vh - 140px);}
}