/*
 * Washnah Media Lightbox
 * Elegant image preview with zoom, arrows and album navigation.
 */
.washnah-lightbox-ready [data-washnah-lightbox],
.washnah-lightbox-ready a[data-washnah-lightbox],
.washnah-lightbox-ready button[data-washnah-lightbox] {
  cursor: zoom-in;
}

.washnah-lightbox-trigger {
  position: relative;
}

.washnah-lightbox-trigger::after {
  content: "\F52A";
  font-family: "bootstrap-icons";
  position: absolute;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 7;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(20, 8, 12, .72);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}

.washnah-lightbox-trigger:hover::after,
.washnah-lightbox-trigger:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.washnah-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 34px);
  color: #fff;
  background:
    radial-gradient(circle at 20% 10%, rgba(128,25,34,.30), transparent 32%),
    radial-gradient(circle at 80% 90%, rgba(255,255,255,.10), transparent 30%),
    rgba(5, 7, 12, .92);
  backdrop-filter: blur(16px);
}

.washnah-lightbox.is-open {
  display: flex;
}

.washnah-lightbox__shell {
  position: relative;
  width: min(1520px, 100%);
  height: min(900px, calc(100vh - 42px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 32px 90px rgba(0,0,0,.45);
  overflow: hidden;
}

.washnah-lightbox__bar,
.washnah-lightbox__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  background: rgba(10, 12, 18, .58);
  border-color: rgba(255,255,255,.10);
}

.washnah-lightbox__bar {
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.washnah-lightbox__caption {
  border-top: 1px solid rgba(255,255,255,.10);
}

.washnah-lightbox__title {
  display: block;
  max-width: min(820px, 72vw);
  overflow: hidden;
  color: rgba(255,255,255,.94);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.washnah-lightbox__counter {
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 700;
}

.washnah-lightbox__actions,
.washnah-lightbox__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.washnah-lightbox__btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.washnah-lightbox__btn:hover,
.washnah-lightbox__btn:focus-visible {
  background: rgba(128,25,34,.88);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-1px);
  outline: none;
}

.washnah-lightbox__btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

.washnah-lightbox__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.03) 75%);
  background-size: 32px 32px;
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
}

.washnah-lightbox__image {
  display: block;
  max-width: 92%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 22px 65px rgba(0,0,0,.38);
  transform-origin: center center;
  transition: transform .16s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.washnah-lightbox__stage.is-dragging .washnah-lightbox__image {
  transition: none;
  cursor: grabbing;
}

.washnah-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10, 12, 18, .58);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.washnah-lightbox__nav:hover,
.washnah-lightbox__nav:focus-visible {
  background: rgba(128,25,34,.88);
  transform: translateY(-50%) scale(1.04);
  outline: none;
}

html[dir="ltr"] .washnah-lightbox__prev,
html:not([dir="rtl"]) .washnah-lightbox__prev {
  left: 18px;
}

html[dir="ltr"] .washnah-lightbox__next,
html:not([dir="rtl"]) .washnah-lightbox__next {
  right: 18px;
}

html[dir="rtl"] .washnah-lightbox__prev {
  right: 18px;
}

html[dir="rtl"] .washnah-lightbox__next {
  left: 18px;
}

.washnah-lightbox__nav[disabled] {
  opacity: .28;
  pointer-events: none;
}

.washnah-lightbox__zoom {
  min-width: 54px;
  color: rgba(255,255,255,.72);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

body.washnah-lightbox-lock {
  overflow: hidden;
}

.news-detail__thumbnail [data-washnah-lightbox],
.media-detail__stage [data-washnah-lightbox] {
  border: 0;
  padding: 0;
  background: transparent;
  display: block;
  width: 100%;
}

.news-detail__thumbnail [data-washnah-lightbox] img,
.media-detail__stage [data-washnah-lightbox] img {
  display: block;
  width: 100%;
}

@media (max-width: 768px) {
  .washnah-lightbox {
    padding: 8px;
  }

  .washnah-lightbox__shell {
    height: calc(100vh - 16px);
    border-radius: 20px;
  }

  .washnah-lightbox__title {
    max-width: 52vw;
    font-size: 12px;
  }

  .washnah-lightbox__btn {
    width: 38px;
    height: 38px;
  }

  .washnah-lightbox__nav {
    width: 46px;
    height: 46px;
  }

  html[dir="ltr"] .washnah-lightbox__prev,
  html:not([dir="rtl"]) .washnah-lightbox__prev {
    left: 10px;
  }

  html[dir="ltr"] .washnah-lightbox__next,
  html:not([dir="rtl"]) .washnah-lightbox__next {
    right: 10px;
  }

  html[dir="rtl"] .washnah-lightbox__prev {
    right: 10px;
  }

  html[dir="rtl"] .washnah-lightbox__next {
    left: 10px;
  }
}


/* Washnah media image trigger normalizer */
.washnah-media-image-button {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
  overflow: hidden;
  cursor: zoom-in;
  text-align: inherit;
}

.washnah-media-image-button img {
  display: block;
  width: 100%;
}
