/*
 * The event gallery section.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.event-gallery {
  padding-top:120px;
  position:relative;
  width:100%;
}

@media screen and (max-width:1440px) {

  .event-gallery {
    padding-top:0;
  }
}

.event-gallery__inner {
  display:flex;
  flex-direction:column;
  gap:clamp(24px,3vw,48px);
  padding-inline:var(--offset-x);
  position:relative;
  width:100%;
  z-index:2;
}

.event-gallery__heading {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.event-gallery__grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

@media screen and (max-width:1440px) {

  .event-gallery__grid {
    gap:6px;
  }
}

.event-gallery__grid-item {
  flex:1 1 280px;
  height:clamp(150px,15vw,250px);
  overflow:hidden;
  position:relative;
  will-change:transform,opacity;
}

.event-gallery__grid-item:nth-child(6n+1) {
  flex-basis:360px;
}

.event-gallery__grid-item:nth-child(6n+2) {
  flex-basis:230px;
}

.event-gallery__grid-item:nth-child(6n+3) {
  flex-basis:310px;
}

.event-gallery__grid-item:nth-child(6n+4) {
  flex-basis:250px;
}

.event-gallery__grid-item:nth-child(6n+5) {
  flex-basis:380px;
}

.event-gallery__grid-item:nth-child(6n+6) {
  flex-basis:220px;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .event-gallery__grid-item {
    flex-basis:42%!important;
    height:120px;
  }
}

.event-gallery__grid-item picture {
  display:block;
  height:100%;
  width:100%;
}

.pos-north {
  grid-row:1;
}

.pos-south {
  grid-row:var(--rows);
}

.pos-west {
  grid-column:1;
}

.pos-east {
  grid-column:var(--columns);
}

.event-gallery__grid-img {
  cursor:pointer;
  display:block;
  height:100%;
  object-fit:cover;
  pointer-events:auto;
  transition:transform .6s cubic-bezier(.25,.25,0,1);
  width:100%;
  will-change:transform;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .event-gallery__grid-img:not(:disabled):hover {
    transform:scale(1.05);
  }
}

.grid--rounded .event-gallery__grid-img {
  border-radius:12px;
  will-change:transform,border-radius;
}

.grid--scale .event-gallery__grid-img {
  aspect-ratio:1;
  height:100%;
  width:auto;
}

.event-gallery__viewer-img {
  height:80vh;
  margin:auto;
  max-width:calc(100% - var(--grid-column-width)*2);
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s cubic-bezier(.25,.25,0,1);
  -webkit-user-select:none;
  user-select:none;
  width:auto;
}

@media screen and (max-width:1199px) {

  .event-gallery__viewer-img {
    height:auto;
    max-height:70vh;
    max-width:calc(100% - var(--offset-x)*2);
  }
}

.event-gallery__fullscreen {
  align-items:center;
  background-color:#18181800;
  display:flex;
  height:100%;
  inset:0;
  justify-content:center;
  left:0;
  pointer-events:none;
  position:fixed;
  top:0;
  transition:background-color .6s cubic-bezier(.25,.25,0,1);
  width:100%;
  z-index:100;
}

.event-gallery__fullscreen.is-active .event-gallery__viewer-img {
  opacity:1;
}

.event-gallery__fullscreen.is-active {
  background-color:#181818;
  pointer-events:all;
}

.event-gallery__fullscreen.is-active .event-gallery__close {
  opacity:1;
  transform:translate(-50%);
  transition-delay:.3s;
}

.event-gallery__fullscreen.is-active .event-gallery__pagination {
  opacity:1;
  transition-delay:.3s;
}

.event-gallery__fullscreen .event-gallery__grid-img {
  cursor:default;
}

@media screen and (max-width:1199px) {

  .event-gallery__fullscreen .event-gallery__grid-img {
    height:auto;
  }
}

.event-gallery__fullscreen .event-gallery__close {
  background-color:#fff;
  cursor:pointer;
  height:48px;
  left:50%;
  opacity:0;
  position:absolute;
  top:50px;
  transform:translate(-50%,-100%);
  transition:transform .6s cubic-bezier(.25,.25,0,1),opacity .6s cubic-bezier(.25,.25,0,1);
  transition-delay:0s;
  width:168px;
  z-index:10;
}

.event-gallery__fullscreen .event-gallery__close:after,
.event-gallery__fullscreen .event-gallery__close:before {
  background-color:#000;
  content:"";
  height:1px;
  left:50%;
  position:absolute;
  top:50%;
  transform:scaleX(0);
  transition:transform .6s cubic-bezier(.25,.25,0,1);
  width:16px;
}

.event-gallery__fullscreen .event-gallery__close:before {
  transform:translateX(-50%) rotate(45deg);
}

.event-gallery__fullscreen .event-gallery__close:after {
  transform:translateX(-50%) rotate(-45deg);
}

@media screen and (max-width:1440px) {

  .event-gallery__fullscreen .event-gallery__close {
    height:32px;
    width:112px;
  }

  .event-gallery__fullscreen .event-gallery__close:after,
  .event-gallery__fullscreen .event-gallery__close:before {
    width:12px;
  }
}

@media screen and (max-width:1199px) {

  .event-gallery__fullscreen .event-gallery__close {
    height:32px;
    width:64px;
  }

  .event-gallery__fullscreen .event-gallery__close:after,
  .event-gallery__fullscreen .event-gallery__close:before {
    width:8px;
  }
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .event-gallery__fullscreen .event-gallery__close:not(:disabled):hover:before {
    transform:translateX(-50%) rotate(45deg) scaleX(1.1);
  }

  .event-gallery__fullscreen .event-gallery__close:not(:disabled):hover:after {
    transform:translateX(-50%) rotate(-45deg) scaleX(1.1);
  }

  .event-gallery__fullscreen .event-gallery__grid-img:not(:disabled):hover {
    transform:none;
  }
}

.event-gallery__pagination {
  bottom:24px;
  left:calc(var(--grid-column-width)*1);
  opacity:0;
  position:absolute;
  right:calc(var(--grid-column-width)*1);
  transition:opacity .6s cubic-bezier(.25,.25,0,1);
  transition-delay:0s;
  z-index:5;
}

@media screen and (max-width:1440px) {

  .event-gallery__pagination {
    bottom:16px;
  }
}

.event-gallery__pagination-numbers {
  color:#fff;
  font-size:clamp(14px,2px + .9375vw,20px);
  margin-bottom:25px;
  text-align:center;
}

@media screen and (max-width:1440px) {

  .event-gallery__pagination-numbers {
    margin-bottom:16px;
  }
}

@media screen and (max-width:1199px) {

  .event-gallery__pagination-numbers {
    font-size:12px;
  }
}

.event-gallery__thumbs {
  display:flex;
  height:62px;
  overflow:hidden;
  width:100%;
}

@media screen and (max-width:1440px) {

  .event-gallery__thumbs {
    height:44px;
  }
}

.event-gallery__thumbs-wrapper {
  align-items:center;
  display:flex;
  height:100%;
  overflow-x:scroll;
  overflow-y:hidden;
  padding:0 5px;
  scrollbar-width:none;
  width:-webkit-fit-content;
  width:fit-content;
}

.event-gallery__thumbs-wrapper::-webkit-scrollbar {
  display:none;
  height:0;
  width:0;
}

.event-gallery__thumb {
  flex-shrink:0;
  height:54px;
  position:relative;
  width:96px;
}

.event-gallery__thumb:before {
  border:1px solid #fff;
  bottom:-4px;
  left:-4px;
  opacity:0;
  right:-4px;
  top:-4px;
}

.event-gallery__thumb:after,
.event-gallery__thumb:before {
  content:"";
  position:absolute;
  transition:opacity .6s cubic-bezier(.25,.25,0,1);
}

.event-gallery__thumb:after {
  background-color:#18181899;
  bottom:0;
  left:0;
  right:0;
  top:0;
}

.event-gallery__thumb:not(:last-child) {
  margin-right:8px;
}

.event-gallery__thumb.is-active:before {
  opacity:1;
}

.event-gallery__thumb.is-active:after {
  opacity:0;
}

@media screen and (max-width:1440px) {

  .event-gallery__thumb {
    height:36px;
    width:64px;
  }

  .event-gallery__thumb:not(:last-child) {
    margin-right:6px;
  }
}

.event-gallery__thumb-img {
  height:100%;
  object-fit:cover;
  pointer-events:none;
  width:100%;
}

.fullscreen--rounded {
  height:calc(100% - 30px);
  left:15px;
  top:15px;
  width:calc(100% - 30px);
}

.fullscreen--rounded .event-gallery__grid-img {
  border-radius:20px;
}

.fullscreen--scale {
  align-items:center;
  display:flex;
  height:100%;
  justify-content:center;
  left:0;
  top:0;
  width:100%;
}

.fullscreen--scale .event-gallery__grid-img {
  aspect-ratio:1;
  height:calc(var(--mobile-vh)*100);
  width:auto;
}