/*!
_gallery.scss
Source file (relative to compiled *.css file): ./scss/_gallery.scss

This file is included in PhotoBerry Studio. For licensing and copyright notices, please see ../../license.txt (relative to *.css file) or ../../../license.txt (relative to *.scss file).
*/

.photoberry-gallery {

  max-width  : 90%;
  margin     : auto;
  text-align : center;

  h3 {
    font-size: var(--ps-h3-font-size);
    }

  .photoberry-gallery-description {
    margin-bottom : 80px;
    }

  .photoberry-gallery-header {
    background-color: var(--ps-gray-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 80vh;
    min-height: 200px;
    max-height: 600px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding: 10px 25px 30px;
    justify-content: center;
    color: #fff;
    position: relative;

    @media (min-width: 1200px) {
      padding-bottom: 50px;
      }

    > div {
      z-index: 2;
      }

     h2 {
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
      color: #fff;
     }

    &:before {
      position   : absolute;
      display    : block;
      content    : "";
      width      : 100%;
      height     : 240px;
      bottom        : 0;
      left       : 0;
      transition : transform 0.5s ease;
      background : transparent;
      opacity    : 1;
      z-index: 1;
      background : linear-gradient(to top,
              rgba(0, 0, 0, 0.5) 0px,
              rgba(0, 0, 0, 0.3) 120px,
              rgba(0, 0, 0, 0.1) 200px,
              rgba(0, 0, 0, 0) 240px)
      }

    }

  .photoberry-gallery-header a {
    display: inline-block;

    }
  }

.photoberry-gallery-items {
  padding    : 0;
  margin: 0;

  > li > a {
    outline : none 0;
    }
  }

// Header templates

.photoberry-gallery.photoberry-gallery-template-image {
  .photoberry-gallery-description {
    margin-top: 45px;
    }
  }

// Cropped grid — column counts per photo size tier and breakpoint (wide / laptop / tablet / narrow).

$grid-cropped-column-map: (
  240: (5, 4, 2, 1),
  280: (4, 3, 2, 1),
  320: (3, 3, 2, 1),
  460: (3, 2, 1, 1),
  500: (2, 2, 1, 1),
) !default;

.photoberry-gallery-layout-grid-cropped {

  ul.photoberry-gallery-items {
    --ps-grid-columns       : 3;
    --ps-crop-aspect-ratio  : 1 / 1;
    display                 : grid;
    grid-template-columns   : repeat(var(--ps-grid-columns), 1fr);
    grid-template-rows      : auto;
    grid-gap                : 15px;
    justify-items           : stretch;

    @media (max-width: 1199px) {
      --ps-grid-columns: 3;
    }

    @media (max-width: 767px) {
      --ps-grid-columns: 2;
    }

    @media (max-width: 481px) {
      --ps-grid-columns: 1;
    }

    @each $size, $counts in $grid-cropped-column-map {
      &[data-photo-size="#{$size}"] {
        --ps-grid-columns: #{nth($counts, 1)};

        @media (max-width: 1199px) {
          --ps-grid-columns: #{nth($counts, 2)};
        }

        @media (max-width: 767px) {
          --ps-grid-columns: #{nth($counts, 3)};
        }

        @media (max-width: 481px) {
          --ps-grid-columns: #{nth($counts, 4)};
        }
      }
    }

   > li {
      width         : 100%;
      list-style    : none;
      padding       : 0;
      margin-bottom : 0;

      a {
        display      : block;
        overflow     : hidden;
        aspect-ratio : var(--ps-crop-aspect-ratio);
        }

      img {
        width           : 100%;
        height          : 100%;
        object-fit      : cover;
        display         : block;
        object-position : center;
        }

      }

    }
  }

.photoberry-gallery-layout-grid {

  .photoberry-gallery-items {

    > li {
      float         : left;
      margin-bottom : 10px;
      list-style    : none; 

      img {
        max-width      : 100%;
        height         : 100%;
        vertical-align : bottom;
        display        : inline-block; 
        }

      > a {
        height     : 100%;
        display    : inline-block;
        max-width  : 100%;
        max-height : 100%;
        overflow   : hidden; 
        }

      }

    /* remove margin bottom on last row */
    .last-row, .last-row ~ .item {
      margin-bottom : 0;
      }

    }

  &:after {
    content : "";
    clear   : both;
    display : table;
    }
  }

.photoberry-gallery-layout-masonry {

  ul.photoberry-gallery-items {
    list-style : none;

   >  li {
      margin-bottom : 16px;
      }

    a {
      display : block;

      img {
        width   : 100%;
        height  : auto;
        display : block;
        }
      }
    }
  }

// Lightbox

#baguetteBox-overlay .photoberry-studio-item-title {
font-size: var(--ps-font-size-large);
  }
// Actions

.photoberry-gallery-template-default .photoberry-gallery-contents {

  margin-bottom: 30px;


  // Masonry
  .photoberry-gallery-items.photoberry-studio-masonry li {
    > div {
      position: relative;
      }
    }

  // Grid
  .photoberry-gallery-items.photoberry-studio-grid-cropped li,
  .photoberry-gallery-items.photoberry-studio-grid li {
    position: relative;
    }

  @include photoberry-gallery-item-interactions();
  }

// Download

form#photoberry-gallery-header-form {
  display: inline;
  }