/*
 * "Mūsų darbai galerija" (galleryOurWork.tpl), and the "Mūsų darbai" carousel on "Sąrašas" (list.tpl, at the end).
 * Heading and text reuse .pictures__heading / .pictures__text from /css/pictures.css.
 * Colours, radii and spacing come from /media/variables.css (loaded via theme.css).
 */

.gallery-our-work__text {
  margin-bottom: var(--spacing-xl);
}

/* Grid: 1 column on phones, 2 from 480px, 3 from 992px; max width matches the rest of the site (1280px). */
.gallery-our-work__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.gallery-our-work__item {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* 3:2 tile, same proportion as the generated regular/zoomed/large images. */
.gallery-our-work__link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--gray-50);
  padding-bottom: 66.6667%;
  height: 0;
}

.gallery-our-work__link img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--timing-mid) ease;
}

.gallery-our-work__link:hover img,
.gallery-our-work__link:focus-visible img {
  transform: scale(1.05);
}

.gallery-our-work__link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

@media screen and (min-width: 480px) {
  .gallery-our-work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 768px) {
  .gallery-our-work__grid {
    gap: var(--spacing-lg);
  }
}

@media screen and (min-width: 992px) {
  .gallery-our-work__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-our-work__link img {
    transition: none;
  }
}

/* Lightbox caption (fancyBox wrapCSS = gallery-our-work-lightbox). Same black pill as the rest of the
   site (see .popup-title in /media/styles.css), but long captions may wrap on small screens.
   The title is anchored to its top (7px under the photo, same spot as the site default) so that a second
   taller block with Šaltinis or a wrapped caption grows downwards instead of covering the bottom of the photo. */
.gallery-our-work-lightbox .fancybox-title-float-wrap {
  top: 100%;
  bottom: auto;
  margin-top: 7px;
  margin-bottom: 0;
}

.gallery-our-work-lightbox .fancybox-title-float-wrap .child .popup-title {
  white-space: normal;
  max-width: 90vw;
}

/* Caption and "Šaltinis" (photo source / author / designer) in one block, the site's black title pill:
   the caption on top, the Šaltinis lines under it in a smaller, regular-weight font.
   pre-line keeps the line breaks typed in the admin textarea. */
.gallery-our-work-lightbox .fancybox-title-float-wrap .child .popup-title--with-source {
  padding-top: 6px;
  padding-bottom: 6px;
}
.gallery-our-work-lightbox .fancybox-title-float-wrap .child .popup-title__caption {
  display: block;
}
.gallery-our-work-lightbox .fancybox-title-float-wrap .child .popup-title__source {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: pre-line;
}
.gallery-our-work-lightbox .fancybox-title-float-wrap .child .popup-title__caption + .popup-title__source {
  margin-top: 2px;
}

/*
 * "Mūsų darbai" carousel on the "Sąrašas" template (list.tpl).
 * Same look as the bottom slider of the "Produktas" template (/css/pictures.css), copied here and scoped to
 * .list-our-work, because pictures.css is not loaded on list pages (its .desktop-only rule would also change the header).
 * Swiper itself is started for every .pictures__bottom__slider by /media/assets/main/scripts.js.
 */
.list-our-work {
  padding-top: var(--spacing-xl);
}
/* "MŪSŲ ATLIKTI DARBAI": typed in normal case in list.tpl, shown in capitals here */
.list-our-work__heading {
  max-width: 1280px;
  margin: 0 auto var(--spacing-xl);
  text-align: center;
  text-transform: uppercase;
}
.list-our-work .pictures__bottom__slider__outer__wrapper {
  max-width: 1280px;
  position: relative;
  margin: 0 auto var(--spacing-xl);
}
.list-our-work .pictures__bottom__slider .swiper-slide {
  height: 338px;
}
.list-our-work .pictures__bottom__slider .swiper-slide > a > img {
  border-radius: var(--radius-md);
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.list-our-work .pictures__bottom__slider__buttons {
  display: flex;
  padding-top: var(--spacing-md);
  column-gap: var(--spacing-md);
  justify-content: flex-end;
}
.list-our-work .swiper-button-prev.pictures__bottom__button-prev,
.list-our-work .swiper-button-next.pictures__bottom__button-next {
  position: relative;
  bottom: 0;
  left: unset;
  right: unset;
  top: unset;
}
.list-our-work .desktop-only {
  display: none !important;
}

@media screen and (min-width: 768px) {
  .list-our-work {
    padding-top: var(--spacing-3xl);
  }
  .list-our-work .desktop-only {
    display: flex !important;
  }
  .list-our-work .swiper-button-prev.pictures__bottom__button-prev,
  .list-our-work .swiper-button-next.pictures__bottom__button-next {
    position: absolute;
    top: 50%;
  }
  .list-our-work .swiper-button-prev.pictures__bottom__button-prev {
    left: -62px;
  }
  .list-our-work .swiper-button-next.pictures__bottom__button-next {
    right: -62px;
  }
  .list-our-work .pictures__bottom__slider__buttons {
    display: none;
  }
}

@media screen and (min-width: 992px) {
  .list-our-work .swiper-button-prev.pictures__bottom__button-prev {
    left: -64px;
  }
  .list-our-work .swiper-button-next.pictures__bottom__button-next {
    right: -64px;
  }
}