/* ============================================================

   ABC Gabig — Book product gallery strip + lightbox

   ============================================================ */



.book-gallery {

  padding: 28px 0 36px;

  overflow: visible;

  background: transparent;

}



.book-gallery.book-gallery--inline {

  overflow: visible;

}



/* Embedded in About / English edition — no own band background */

.book-gallery--in-about,

.book-gallery--inline {

  background: transparent;

}



.book-gallery--in-about {

  padding: clamp(16px, 2.5vw, 24px) clamp(16px, 4vw, 24px) clamp(8px, 1.5vw, 12px);

  width: 100%;

  box-sizing: border-box;

}



/* Armenian gallery in About — no edge fades; soft per-thumb shadows only */

.book-gallery--in-about .book-gallery__strip-outer {

  max-width: var(--max-width);

  margin: 0 auto;

  padding: 0;

}



.book-gallery--in-about .book-gallery__strip-outer::before,

.book-gallery--in-about .book-gallery__strip-outer::after {

  display: none;

}



.book-gallery--in-about .book-gallery__strip {

  width: 100%;

  max-width: 100%;

  overflow-x: visible;

  justify-content: center;

  gap: clamp(14px, 2.5vw, 22px);

  padding: 28px clamp(4px, 1vw, 8px) 32px;

  scroll-snap-type: none;

}



.book-gallery--in-about .book-gallery__thumb {

  flex: 1 1 0;

  width: auto;

  min-width: 0;

  max-width: calc((100% - 3 * clamp(14px, 2.5vw, 22px)) / 4);

  scroll-snap-align: unset;

}



.book-gallery__inner {

  max-width: var(--max-width);

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  overflow: visible;

}



.book-gallery__strip-outer {

  position: relative;

  width: 100%;

  max-width: var(--max-width);

  margin: 0 auto;

  padding: 0 8px;

  overflow: visible;

}



.book-gallery__strip-outer::before,

.book-gallery__strip-outer::after {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  width: clamp(40px, 7vw, 72px);

  z-index: 2;

  pointer-events: none;

}



.book-gallery__strip-outer::before {

  left: 0;

  background: linear-gradient(

    to right,

    var(--gallery-shadow-fade, rgba(0, 28, 68, 0.94)) 0%,

    rgba(0, 28, 68, 0.45) 42%,

    transparent 100%

  );

}



.book-gallery__strip-outer::after {

  right: 0;

  background: linear-gradient(

    to left,

    var(--gallery-shadow-fade, rgba(0, 28, 68, 0.94)) 0%,

    rgba(0, 28, 68, 0.45) 42%,

    transparent 100%

  );

}



.book-gallery__strip {

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  gap: clamp(14px, 2.5vw, 22px);

  width: max-content;

  max-width: none;

  margin: 0 auto;

  overflow-x: auto;

  overflow-y: hidden;

  padding: 36px clamp(28px, 5vw, 48px) 40px;

  scroll-snap-type: x proximity;

  scroll-padding-inline: clamp(28px, 5vw, 48px);

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;

  scrollbar-color: rgba(213, 190, 118, 0.45) transparent;

}



.book-gallery__strip::-webkit-scrollbar {

  height: 6px;

}



.book-gallery__strip::-webkit-scrollbar-thumb {

  background: rgba(213, 190, 118, 0.45);

  border-radius: 999px;

}



.book-gallery__thumb {

  flex: 0 0 auto;

  width: clamp(120px, 16vw, 172px);

  aspect-ratio: 1;

  padding: 0;

  margin: 0;

  border: none;

  border-radius: 0;

  background: transparent;

  cursor: zoom-in;

  scroll-snap-align: center;

  overflow: visible;

  transition: transform 0.22s ease;

}



.book-gallery__thumb-surface {

  display: block;

  width: 100%;

  height: 100%;

  border-radius: 14px;

  overflow: hidden;

  border: 1px solid rgba(213, 190, 118, 0.16);

  box-shadow:

    0 1px 2px rgba(0, 0, 0, 0.06),

    0 4px 10px rgba(0, 0, 0, 0.1),

    0 10px 24px rgba(0, 0, 0, 0.12),

    0 20px 48px rgba(0, 0, 0, 0.1);

  transition:

    transform 0.22s ease,

    box-shadow 0.22s ease,

    border-color 0.22s ease;

}



.book-gallery__thumb:hover,

.book-gallery__thumb:focus-visible {

  outline: none;

}



.book-gallery__thumb:hover .book-gallery__thumb-surface,

.book-gallery__thumb:focus-visible .book-gallery__thumb-surface {

  transform: translateY(-5px) scale(1.02);

  border-color: rgba(213, 190, 118, 0.55);

  box-shadow:

    0 2px 4px rgba(0, 0, 0, 0.08),

    0 8px 18px rgba(0, 0, 0, 0.14),

    0 16px 36px rgba(0, 0, 0, 0.14),

    0 28px 56px rgba(0, 0, 0, 0.12);

}



.book-gallery__thumb img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* English edition: all four thumbs visible in the content column */

.book-gallery--inline {

  padding: 20px 0 0;

  width: 100%;

  align-self: stretch;

}



.book-gallery--inline .book-gallery__strip-outer {

  max-width: 100%;

  padding: 0;

}



.book-gallery--inline .book-gallery__strip-outer::before,

.book-gallery--inline .book-gallery__strip-outer::after {

  display: none;

}



.book-gallery--inline .book-gallery__strip {

  width: 100%;

  max-width: 100%;

  overflow-x: visible;

  justify-content: space-between;

  gap: clamp(8px, 2vw, 14px);

  padding: 28px 4px 32px;

  scroll-snap-type: none;

}



.book-gallery--inline .book-gallery__thumb {

  flex: 1 1 0;

  width: auto;

  min-width: 0;

  max-width: calc((100% - 3 * clamp(8px, 2vw, 14px)) / 4);

  scroll-snap-align: unset;

}



/* ---------- Lightbox ---------- */

body.book-lightbox-open {

  overflow: hidden;

}



.book-lightbox[hidden] {

  display: none;

}



.book-lightbox {

  position: fixed;

  inset: 0;

  z-index: 1100;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

}



.book-lightbox__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(8, 9, 20, 0.92);

}



.book-lightbox__dialog {

  position: relative;

  z-index: 1;

  width: min(960px, 100%);

  max-height: 96vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  padding-top: 8px;

}



.book-lightbox__stage {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 0;

}



.book-lightbox__img {

  display: block;

  max-width: 100%;

  max-height: min(78vh, 820px);

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 8px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);

}



.book-lightbox__close {

  position: absolute;

  top: -8px;

  right: 0;

  z-index: 2;

  width: 44px;

  height: 44px;

  border: none;

  border-radius: 50%;

  background: rgba(226, 209, 182, 0.12);

  color: var(--cream-light);

  font-size: 1.75rem;

  line-height: 1;

  cursor: pointer;

  transition: background var(--transition);

}



.book-lightbox__close:hover,

.book-lightbox__close:focus-visible {

  background: rgba(213, 190, 118, 0.28);

  outline: none;

}



.book-lightbox__nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

  width: 44px;

  height: 44px;

  border: none;

  border-radius: 50%;

  background: rgba(226, 209, 182, 0.12);

  color: var(--cream-light);

  font-size: 2rem;

  line-height: 1;

  cursor: pointer;

  transition: background var(--transition);

}



.book-lightbox__nav:hover,

.book-lightbox__nav:focus-visible {

  background: rgba(213, 190, 118, 0.28);

  outline: none;

}



.book-lightbox__nav--prev {

  left: -4px;

}



.book-lightbox__nav--next {

  right: -4px;

}



.book-lightbox__caption {

  margin: 0;

  font-family: var(--font-heading);

  font-size: 1rem;

  color: var(--cream);

  text-align: center;

}



.book-lightbox__counter {

  margin: 0;

  font-size: 0.85rem;

  color: var(--text-muted);

}



@media (max-width: 900px) {

  /* Match English: no extra horizontal padding on gallery wrapper */

  .book-gallery--in-about {

    padding-left: 0;

    padding-right: 0;

  }



  /* Shared mobile thumbs — no edge fades on either carousel */

  .book-gallery--in-about .book-gallery__strip-outer::before,

  .book-gallery--in-about .book-gallery__strip-outer::after,

  .book-gallery--inline .book-gallery__strip-outer::before,

  .book-gallery--inline .book-gallery__strip-outer::after {

    display: none;

  }



  .book-gallery--in-about .book-gallery__thumb,

  .book-gallery--inline .book-gallery__thumb {

    flex: 0 0 auto;

    width: clamp(90px, 25vw, 135px);

    max-width: none;

    scroll-snap-align: center;

  }



  /* Armenian: full-width section, strip scrolls inside */

  .book-gallery--in-about .book-gallery__strip {

    width: max-content;

    max-width: 100%;

    overflow-x: auto;

    justify-content: flex-start;

    scroll-snap-type: x proximity;

    gap: clamp(14px, 2.5vw, 22px);

    padding: 24px clamp(20px, 5vw, 32px) 28px;

    scroll-padding-inline: clamp(20px, 5vw, 32px);

  }



  /* English: stay inside content column — do not expand parent layout */

  .book-gallery--inline {

    width: 100%;

    align-self: stretch;

    min-width: 0;

    max-width: 100%;

  }



  .book-gallery--inline .book-gallery__inner {

    align-items: stretch;

    width: 100%;

    max-width: 100%;

  }



  .book-gallery--inline .book-gallery__strip-outer {

    width: 100%;

    max-width: 100%;

    min-width: 0;

  }



  .book-gallery--inline .book-gallery__strip {

    width: 100%;

    max-width: 100%;

    overflow-x: auto;

    justify-content: flex-start;

    scroll-snap-type: x proximity;

    gap: clamp(14px, 2.5vw, 22px);

    padding: 24px clamp(20px, 5vw, 32px) 28px;

    scroll-padding-inline: clamp(20px, 5vw, 32px);

  }

}



@media (max-width: 600px) {

  .book-gallery {

    padding: 20px 0 28px;

  }



  .book-gallery--in-about {

    padding: 12px 0 8px;

  }



  .book-gallery__thumb {

    width: clamp(108px, 28vw, 148px);

  }



  .book-gallery--in-about .book-gallery__thumb,

  .book-gallery--inline .book-gallery__thumb {

    width: clamp(90px, 25vw, 135px);

  }



  .book-gallery__thumb-surface {

    border-radius: 12px;

  }



  .book-lightbox {

    padding: 12px;

  }



  .book-lightbox__nav--prev {

    left: 4px;

  }



  .book-lightbox__nav--next {

    right: 4px;

  }



  .book-lightbox__close {

    top: 4px;

    right: 4px;

  }



  .book-lightbox__img {

    max-height: 70vh;

  }

}