/* ============================================================
   EMPIRE BEAUTY BAR
   GALLERY PAGE
   ============================================================ */


/* ============================================================
   GALLERY GRID
   ============================================================ */

.gallery-grid {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-auto-rows:
    190px;

  gap:
    10px;

  position:
    relative;

}


/* ============================================================
   GALLERY ITEM
   ============================================================ */

.g-item {

  position:
    relative;

  overflow:
    hidden;

  cursor:
    pointer;

  background:
    rgba(29, 15, 23, .08);

  opacity:
    0;

  transform:
    translateY(24px)
    scale(.985);

  animation:
    galleryReveal
    .8s
    cubic-bezier(.16,1,.3,1)
    forwards;

  animation-delay:
    var(--gallery-delay, 0ms);

  isolation:
    isolate;

}


/* ============================================================
   REVEAL ANIMATION
   ============================================================ */

@keyframes galleryReveal {

  from {

    opacity:
      0;

    transform:
      translateY(24px)
      scale(.985);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0)
      scale(1);

  }

}


/* ============================================================
   IMAGE WRAPPER
   ============================================================ */

.g-item .ph {

  position:
    absolute;

  inset:
    0;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      rgba(29,15,23,.12),
      rgba(29,15,23,.04)
    );

}


/* ============================================================
   IMAGE
   ============================================================ */

.g-item .gallery-image {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  opacity:
    0;

  transform:
    scale(1.035);

  transition:
    opacity .7s ease,
    transform 1s cubic-bezier(.16,1,.3,1);

}


/* Loaded image */

.g-item.loaded .gallery-image {

  opacity:
    1;

  transform:
    scale(1);

}


/* ============================================================
   IMAGE ERROR
   ============================================================ */

.g-item.image-error .gallery-image {

  opacity:
    0;

}


/* ============================================================
   HOVER IMAGE
   ============================================================ */

.g-item:hover .gallery-image {

  transform:
    scale(1.075);

}


/* ============================================================
   ORIGINAL GRID COMPOSITION
   ============================================================ */

.g1 {

  grid-column:
    span 2;

  grid-row:
    span 2;

}


.g4 {

  grid-row:
    span 2;

}


/* ============================================================
   DARK OVERLAY
   ============================================================ */

.g-item::before {

  content:
    '';

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(29,15,23,.72) 100%
    );

  z-index:
    2;

  opacity:
    0;

  transition:
    opacity .5s ease;

  pointer-events:
    none;

}


.g-item:hover::before {

  opacity:
    1;

}


/* ============================================================
   CAPTION
   ============================================================ */

.g-item span {

  position:
    absolute;

  left:
    18px;

  bottom:
    18px;

  z-index:
    4;

  max-width:
    calc(100% - 36px);

  color:
    var(--bone);

  font-size:
    .62rem;

  letter-spacing:
    .18em;

  line-height:
    1.5;

  text-transform:
    uppercase;

  opacity:
    0;

  transform:
    translateY(12px);

  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.16,1,.3,1);

}


.g-item:hover span {

  opacity:
    1;

  transform:
    translateY(0);

}


/* ============================================================
   VIEW INDICATOR
   ============================================================ */

.gallery-view {

  position:
    absolute;

  top:
    18px;

  right:
    18px;

  width:
    42px;

  height:
    42px;

  border:
    1px solid rgba(231,201,145,.65);

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--gold-light);

  z-index:
    5;

  opacity:
    0;

  transform:
    scale(.75);

  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.16,1,.3,1),
    background .3s ease;

}


.gallery-view span {

  position:
    static;

  opacity:
    1;

  transform:
    none;

  color:
    inherit;

  font-size:
    .48rem;

  letter-spacing:
    .12em;

}


.g-item:hover .gallery-view {

  opacity:
    1;

  transform:
    scale(1);

}


.gallery-view:hover {

  background:
    var(--gold);

  color:
    var(--plum-deep);

}


/* ============================================================
   SKELETON LOADING
   ============================================================ */

.g-skeleton {

  min-height:
    190px;

  background:
    linear-gradient(
      100deg,
      rgba(29,15,23,.06) 30%,
      rgba(255,255,255,.22) 50%,
      rgba(29,15,23,.06) 70%
    );

  background-size:
    300% 100%;

  animation:
    gallerySkeleton
    1.7s
    ease-in-out
    infinite;

}


.g-skeleton.g1 {

  grid-column:
    span 2;

  grid-row:
    span 2;

}


.g-skeleton.g4 {

  grid-row:
    span 2;

}


@keyframes gallerySkeleton {

  0% {

    background-position:
      100% 0;

  }

  100% {

    background-position:
      -100% 0;

  }

}


/* ============================================================
   EMPTY / ERROR MESSAGE
   ============================================================ */

.gallery-message {

  grid-column:
    1 / -1;

  min-height:
    360px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  padding:
    60px 20px;

}


.gallery-message .eyebrow {

  margin-bottom:
    16px;

}


.gallery-message h3 {

  margin:
    0 0 12px;

  font-family:
    var(--display);

  font-size:
    clamp(2rem, 4vw, 3.4rem);

  font-weight:
    400;

}


.gallery-message p {

  max-width:
    520px;

  margin:
    0;

  opacity:
    .7;

}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox {

  position:
    fixed;

  inset:
    0;

  z-index:
    500;

  background:
    rgba(29,15,23,.96);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    20px;

  padding:
    70px 70px 50px;

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity .45s ease,
    visibility .45s ease;

}


.lightbox.open {

  opacity:
    1;

  visibility:
    visible;

}


/* ============================================================
   LIGHTBOX FRAME
   ============================================================ */

.lightbox-frame {

  width:
    min(78vw, 1100px);

  height:
    min(74vh, 720px);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  transform:
    scale(.94)
    translateY(12px);

  opacity:
    0;

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    opacity .45s ease;

}


.lightbox.open .lightbox-frame {

  transform:
    scale(1)
    translateY(0);

  opacity:
    1;

}


/* ============================================================
   LIGHTBOX IMAGE
   ============================================================ */

.lightbox-image-wrap {

  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.lightbox-frame img {

  max-width:
    100%;

  max-height:
    100%;

  width:
    auto;

  height:
    auto;

  display:
    block;

  object-fit:
    contain;

  box-shadow:
    0 30px 80px rgba(0,0,0,.45);

}


/* ============================================================
   LIGHTBOX CAPTION
   ============================================================ */

.lightbox-caption {

  font-family:
    var(--display);

  font-style:
    italic;

  color:
    var(--bone);

  font-size:
    1.15rem;

  text-align:
    center;

  max-width:
    700px;

}


/* ============================================================
   LIGHTBOX CLOSE
   ============================================================ */

.lightbox-close {

  position:
    absolute;

  top:
    28px;

  right:
    30px;

  background:
    transparent;

  border:
    1px solid var(--gold);

  color:
    var(--gold-light);

  font-size:
    .65rem;

  letter-spacing:
    .2em;

  text-transform:
    uppercase;

  padding:
    10px 18px;

  cursor:
    pointer;

  z-index:
    20;

  transition:
    background .3s ease,
    color .3s ease;

}


.lightbox-close:hover {

  background:
    var(--gold);

  color:
    var(--plum-deep);

}


/* ============================================================
   LIGHTBOX NAVIGATION
   ============================================================ */

.lightbox-navigation {

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

}


.lightbox-nav {

  position:
    absolute;

  top:
    50%;

  transform:
    translateY(-50%);

  width:
    52px;

  height:
    52px;

  border:
    1px solid rgba(231,201,145,.7);

  border-radius:
    50%;

  background:
    rgba(29,15,23,.35);

  color:
    var(--gold-light);

  font-size:
    1.2rem;

  cursor:
    pointer;

  pointer-events:
    auto;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;

}


.lightbox-prev {

  left:
    24px;

}


.lightbox-next {

  right:
    24px;

}


.lightbox-nav:hover {

  background:
    var(--gold);

  color:
    var(--plum-deep);

}


.lightbox-prev:hover {

  transform:
    translateY(-50%)
    translateX(-3px);

}


.lightbox-next:hover {

  transform:
    translateY(-50%)
    translateX(3px);

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

  .gallery-grid {

    grid-template-columns:
      repeat(3, minmax(0,1fr));

  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 880px) {

  .gallery-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr));

    grid-auto-rows:
      170px;

    gap:
      8px;

  }


  .g1 {

    grid-column:
      span 2;

    grid-row:
      span 2;

  }


  .g4 {

    grid-row:
      span 2;

  }


  .gallery-view {

    width:
      34px;

    height:
      34px;

    top:
      12px;

    right:
      12px;

  }


  .g-item span {

    left:
      12px;

    bottom:
      12px;

    font-size:
      .52rem;

  }


  .lightbox {

    padding:
      70px 18px 35px;

  }


  .lightbox-frame {

    width:
      94vw;

    height:
      70vh;

  }


  .lightbox-nav {

    width:
      42px;

    height:
      42px;

  }


  .lightbox-prev {

    left:
      8px;

  }


  .lightbox-next {

    right:
      8px;

  }


}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 520px) {

  .gallery-grid {

    grid-template-columns:
      1fr;

    grid-auto-rows:
      230px;

  }


  .g1 {

    grid-column:
      span 1;

    grid-row:
      span 2;

  }


  .g4 {

    grid-row:
      span 1;

  }


  .gallery-message {

    min-height:
      280px;

  }


  .lightbox-caption {

    font-size:
      1rem;

  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .g-item,
  .g-item .gallery-image,
  .gallery-view,
  .lightbox,
  .lightbox-frame {

    animation:
      none;

    transition:
      none;

  }

}