/**
 * Masonry gallery paragraph
 */

// Colour variables used in this paragraph
$d-p-tiles-line-color: $color-agamemnon !default;
$d-p-tiles-line-color-inverted: $color-nestor !default;
$d-p-tiles-overlay-background: $color-cassandra !default;
$d-p-tiles-overlay-color: $color-odysseus !default;
$d-p-tiles-overlay-opacity: 0.6 !default;

// Margins, paddings and sizing.
$d-p-tiles-padding-top: 5% !default;
$d-p-tiles-padding-bottom: 5% !default;

// Override default values.
.padding-top-default {
  .paragraph.paragraph--type--d-p-tiles {
    padding-top: 0;
  }
}
.padding-bottom-default {
  .paragraph.paragraph--type--d-p-tiles {
    padding-bottom: 0;
  }
}
.required-spacing-top {
  &.padding-top-default {
    .paragraph--type--d-p-tiles {
      padding-top: $d-p-tiles-padding-top;
    }
  }
}
.required-spacing-bottom {
  &.padding-bottom-default {
    .paragraph--type--d-p-tiles {
      padding-bottom: $d-p-tiles-padding-bottom;
    }
  }
}

.paragraph--type--d-p-tiles {
  @include clearfix;
  text-align: center;

  .field--name-field-d-main-title {
    @include font-main-header;
    text-align: center;

    &::after {
      @include decoration-header-line-main-center($d-p-tiles-line-color, $d-p-tiles-line-color-inverted)
    }
  }

  .field--name-field-d-media-icon {
    text-align: center;
  }

  .field--name-field-d-media-image {
    a {
      display: block;
    }

    img {
      width: 100%;
      height: auto;
      margin: 0 !important;
      display: block;
    }
  }

  // Masonry styles.
  .tiles-wrapper {
    padding-left: 2px;
    padding-right: 2px;
  }

  .d-tiles {
    float: none !important;
    margin: 0 !important;
    display: block !important;
    width: 100%;

    .featured {
      a {
        width: 50%;
        @include media-breakpoint-down(sm) {
          width: 100%;
        }
      }
    }

    .standard {
      a {
        width: 25%;
        @include media-breakpoint-down(sm) {
          width: 50%;
        }
      }
    }

    .d-tiles-sizer,
    .d-tiles-item {
      width: 25%;
      @include media-breakpoint-down(sm) {
        width: 50%;
      }
    }

    .video-embed {
     max-width: 25%;
      max-height: 314px;
      @include media-breakpoint-down(sm) {
        max-width: 50%;
        max-height: 168px;
      }
    }

    .d-tiles-item {
      padding: 2px;
    }

    .d-tiles-item-2x2 {
      width: 50%;
      @include media-breakpoint-down(sm) {
        width: 100%;
      }
    }

    .d-tiles-caption {
      position: absolute;
      left: 2px;
      top: 2px;
      bottom: 2px;
      right: 2px;
      background: $d-p-tiles-overlay-background;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        color: $d-p-tiles-overlay-color;
        font-size: 1.5rem;
        font-weight: bold;

        small {
          display: block;
          font-size: 1rem;
          font-weight: normal;
        }
      }
    }

    .d-tiles-caption:hover {
      opacity: $d-p-tiles-overlay-opacity;
    }
  }
}

// @TODO Introduce .paragraph-light and .paragraph-dark

.wrapper-d_p_tiles + .wrapper-d_p_text_with_bckg,
.wrapper-d_p_tiles + .wrapper-d_p_subscribe_file,
.wrapper-d_p_tiles + .wrapper-d_p_form,
.wrapper-d_p_tiles + .wrapper-d_p_counters,
.wrapper-d_p_tiles + .wrapper-d_p_banner,
.wrapper-d_p_tiles + .wrapper-d_p_side_embed,
.wrapper-d_p_tiles + .wrapper-d_p_side_image {
  border-top: 2px solid transparent;
}

.wrapper-d_p_text_with_bckg + .wrapper-d_p_tiles.paragraph-top-dark,
.wrapper-d_p_subscribe_file + .wrapper-d_p_tiles.paragraph-top-dark,
.wrapper-d_p_form + .wrapper-d_p_tiles.paragraph-top-dark,
.wrapper-d_p_counters + .wrapper-d_p_tiles.paragraph-top-dark,
.wrapper-d_p_banner + .wrapper-d_p_tiles.paragraph-top-dark,
.wrapper-d_p_side_embed + .wrapper-d_p_tiles.paragraph-top-dark,
.wrapper-d_p_side_image + .wrapper-d_p_tiles.paragraph-top-dark {
  border-top: 2px solid transparent;
}

@include media-breakpoint-down(sm) {
  .wrapper-d_p_side_tiles + .wrapper-d_p_tiles.paragraph-top-dark {
    border-top: 2px solid transparent;
  }
}
