/* ==========================================================
   JUBILEUSZ 90 - GALERIA ZDJĘĆ
   ========================================================== */

.fs-media-gallery {
  width: 100%;
  margin: 2.5rem 0;
}


/* ==========================================================
   GALERIA - WIDOK NA STRONIE
   ========================================================== */

.fs-media-gallery .gallery-single {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}


/* ----------------------------------------------------------
   POJEDYNCZE POLE ZDJĘCIA
   ---------------------------------------------------------- */

.fs-media-gallery .gallery-single > div {
  position: relative;

  width: 100%;
  aspect-ratio: 3 / 2;

  overflow: hidden;

  background: #f2f3f5;

  border-radius: 8px;

  cursor: pointer;
}


/* ----------------------------------------------------------
   PIERWSZE ZDJĘCIE - DUŻE
   ---------------------------------------------------------- */

.fs-media-gallery .gallery-single > div:first-child {
  grid-column: 1 / -1;

  aspect-ratio: 16 / 9;
}


/* ----------------------------------------------------------
   ZDJĘCIA
   ---------------------------------------------------------- */

.fs-media-gallery .gallery-single > div img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover;
  object-position: center;

  border-radius: 0 !important;

  transition: transform 0.35s ease;
}


/* ----------------------------------------------------------
   HOVER
   ---------------------------------------------------------- */

.fs-media-gallery .gallery-single > div::after {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0;

  pointer-events: none;

  background-color: rgba(16, 43, 70, 0.25);

  transition: opacity 0.25s ease;
}


.fs-media-gallery .gallery-single > div:hover::after {
  opacity: 1;
}


.fs-media-gallery .gallery-single > div:hover img {
  transform: scale(1.03);
}


/*
 * Opcjonalnie:
 * jeśli skopiujesz ikonę zoom do:
 *
 * fileadmin/jubileusz90/assets/img/icons/zoom-in-line.svg
 */

.fs-media-gallery .gallery-single > div:hover::after {
  background-image:
    url("../img/icons/zoom-in-line.svg");

  background-repeat: no-repeat;

  background-size: 26px;

  background-position:
    right 16px bottom 16px;
}


.fs-media-gallery .gallery-single > div:first-child:hover::after {
  background-position:
    right 32px bottom 32px;
}


/* ==========================================================
   MODAL GALLERY
   ========================================================== */

#galleryModal.modal {
  display: none;

  position: fixed;
  z-index: 9999;

  inset: 0;

  width: 100%;
  height: 100%;

  padding: 80px 24px 24px;

  overflow: auto;

  background: #fff;
}


/* ----------------------------------------------------------
   ZAWARTOŚĆ MODALA
   ---------------------------------------------------------- */

#galleryModal .modal-content {
  position: relative;

  width: 100%;
  max-width: 1140px;

  min-height: 0;

  margin: 0 auto;
  padding: 0;

  background: #fff;

  border: 0;
  border-radius: 0;
}


/* ==========================================================
   GŁÓWNY SLAJD
   ========================================================== */

#galleryModal .gallerySlider {
  display: none;

  width: 100%;

  height: 75vh;
  max-height: 752px;

  overflow: hidden;

  background: #f2f3f5;

  border-radius: 8px;
}


#galleryModal .gallerySlider img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  margin: 0 auto;

  object-fit: contain !important;
  object-position: center;

  border-radius: 0 !important;
}


/* ==========================================================
   MINIATURY W MODALU
   ========================================================== */

#galleryModal .gallery-thumbs {
  display: flex;

  width: 100%;

  gap: 16px;

  padding: 8px 4px;

  overflow-x: auto;
  overflow-y: hidden;

  cursor: grab;

  scrollbar-width: thin;

  scroll-behavior: smooth;
}


#galleryModal .gallery-thumbs:active {
  cursor: grabbing;
}


#galleryModal .gallery-thumbs img {
  flex: 0 0 auto;

  width: 110px !important;
  height: 72px !important;

  object-fit: cover;

  margin: 0 !important;

  border-radius: 6px !important;

  outline: 3px solid transparent;
  outline-offset: 1px;

  opacity: 0.7;

  cursor: pointer;

  transition:
    opacity 0.2s ease,
    outline-color 0.2s ease;
}


#galleryModal .gallery-thumbs img:hover {
  opacity: 1;
}


#galleryModal .gallery-thumbs img.active {
  opacity: 1;

  outline-color: #102b46;
}


/* ==========================================================
   PRZYCISKI MODALA
   Bazowy wygląd .slick-arrow masz już w am_style.css
   ========================================================== */

#galleryModal .close {
  top: -56px;
  right: 0;
}


#galleryModal .prev {
  left: -24px;
}


#galleryModal .next {
  right: -24px;
}


/* ==========================================================
   RESPONSYWNOŚĆ
   ========================================================== */

@media (max-width: 1199.98px) {

  #galleryModal .prev {
    left: 0;
  }

  #galleryModal .next {
    right: 0;
  }

  #galleryModal .gallerySlider {
    height: 70vh;
    max-height: none;
  }

}


@media (max-width: 767.98px) {

  .fs-media-gallery .gallery-single {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 1rem;
  }


  .fs-media-gallery .gallery-single > div:first-child {
    grid-column: 1 / -1;
  }


  #galleryModal.modal {
    padding:
      70px 12px 16px;
  }


  #galleryModal .gallerySlider {
    height: 60vh;
  }


  #galleryModal .gallery-thumbs {
    gap: 10px;
  }


  #galleryModal .gallery-thumbs img {
    width: 86px !important;
    height: 56px !important;
  }


  #galleryModal .prev,
  #galleryModal .next {
    transform:
      translateY(calc(-50% - 30px));
  }

}


@media (max-width: 575.98px) {

  .fs-media-gallery .gallery-single {
    grid-template-columns: 1fr;
  }


  .fs-media-gallery .gallery-single > div:first-child {
    grid-column: auto;
  }


  .fs-media-gallery .gallery-single > div,
  .fs-media-gallery .gallery-single > div:first-child {
    aspect-ratio: 4 / 3;
  }


  #galleryModal .gallerySlider {
    height: 52vh;
  }

}


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

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

  .fs-media-gallery .gallery-single > div img,
  .fs-media-gallery .gallery-single > div::after,
  #galleryModal .gallery-thumbs,
  #galleryModal .gallery-thumbs img {
    transition: none;
    scroll-behavior: auto;
  }

}

/* ==========================================================
   GALERIA - IKONY NAWIGACYJNE
   Lokalny zamiennik starych klas ic-*
   ========================================================== */

#galleryModal .slick-arrow::before {
  display: block;

  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;

  color: #102b46;

  background: none !important;
}


/* zamknięcie */

#galleryModal .close::before {
  content: "\00D7"; /* × */

  font-size: 36px;
}


/* poprzednie */

#galleryModal .prev::before {
  content: "\2039"; /* ‹ */
}


/* następne */

#galleryModal .next::before {
  content: "\203A"; /* › */
}


/* hover */

#galleryModal .slick-arrow:hover::before {
  color: #04172f;
}

/* ==========================================================
   GALERIA - PRZYCISKI MODALA
   lokalne style dla jubileuszu
   ========================================================== */


/*
 * Punkt odniesienia dla absolutnie pozycjonowanych przycisków
 */

#galleryModal .modal-content {
  position: relative !important;
}


/* ----------------------------------------------------------
   WSPÓLNY WYGLĄD: X / LEWO / PRAWO
   ---------------------------------------------------------- */

#galleryModal .slick-arrow {
  position: absolute !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;
  min-height: 48px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid #ced5df !important;
  border-radius: 50% !important;

  background: #fff !important;
  color: #102b46 !important;

  z-index: 20;

  cursor: pointer;

  box-shadow: none !important;

  font-style: normal;
  line-height: 1;
}


/* znak wewnątrz */

#galleryModal .slick-arrow::before {
  display: block;

  margin: 0;
  padding: 0;

  background: none !important;

  color: #102b46 !important;

  font-family: Arial, sans-serif;
  font-weight: 400;
  font-style: normal;

  line-height: 1;
}


/* hover */

#galleryModal .slick-arrow:hover,
#galleryModal .slick-arrow:focus {
  background: #f2f4f7 !important;
  border-color: #9cacbf !important;
  color: #04172f !important;
}


/* klawiatura */

#galleryModal .slick-arrow:focus-visible {
  outline: 3px solid #102b46 !important;
  outline-offset: 3px;
}


/* ==========================================================
   ZAMKNIĘCIE
   ========================================================== */

#galleryModal .close {
  top: -64px !important;
  right: 0 !important;

  left: auto !important;

  transform: none !important;
}


#galleryModal .close::before {
  content: "\00D7"; /* × */

  font-size: 30px;
}


/* ==========================================================
   STRZAŁKA W LEWO
   ========================================================== */

#galleryModal .prev {
  top: 50% !important;

  left: -72px !important;
  right: auto !important;

  transform: translateY(-50%) !important;
}


#galleryModal .prev::before {
  content: "\2039"; /* ‹ */

  font-size: 34px;

  transform: translateY(-1px);
}


/* ==========================================================
   STRZAŁKA W PRAWO
   ========================================================== */

#galleryModal .next {
  top: 50% !important;

  right: -72px !important;
  left: auto !important;

  transform: translateY(-50%) !important;
}


#galleryModal .next::before {
  content: "\203A"; /* › */

  font-size: 34px;

  transform: translateY(-1px);
}


/* ==========================================================
   MNIEJSZE EKRANY
   ========================================================== */

@media (max-width: 1299.98px) {

  #galleryModal .prev {
    left: 12px !important;
  }

  #galleryModal .next {
    right: 12px !important;
  }

}


@media (max-width: 767.98px) {

  #galleryModal .slick-arrow {
    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;
    min-height: 44px !important;
  }


  #galleryModal .close {
    top: -56px !important;
    right: 0 !important;
  }


  #galleryModal .prev {
    left: 8px !important;
  }


  #galleryModal .next {
    right: 8px !important;
  }

}