/**
 * @file
 * This file is for: native CSS grid and js-driven. Not Bootstrap/Foundation.
 *
 * Intentionally over-specified to not break easily.
 * As of v1.1, the library still does not display the corect aspect ratio.
 * This file is NOT loaded at admin UI, just front-end.
 *
 * The following is an attempt to fix it internally, not perfect, yet.
 * Various contents: IMG, IFRAME, BG, etc., including empty contents such as
 * text captions only without IMG, etc., shared difficulties to manage.
 * Also ungridstack, where layout engine is disabled such as Masonry/Packery
 * with Custom Grid option, without gridstack/ native layouts.
 *
 * What this file does is trying to find similarities between various layout
 * engines where they actually have different ways, especially the use of
 * relative and absolute positionings for either .box or .box__content.
 *
 * Many js-driven (Masonry, Packery, Isotope, including the GridStack library)
 * uses absolute positioning for the .box. While native Grid relative.
 * Once they are all disabled such as for mobile, they are expected to be
 * treated equally. Watch out the !important rule here or other files.
 *
 * The .is-gs-ratio is to disable Blazy aspect ratio.
 * Basically replacing padding-hack with exact height if applicable.
 * Blazy formatter Aspect ratio doesn't work out well with gapless grid.
 * _The reason: Aspect ratio is based on image dimensions. While Gridstack
 * wants images to fill in the entire box to look gapless ignoring the actual
 * dimensions. Layout design compactness is more important than image sizes.
 * The warning was provided at TROUBLESHOOTING, however sometimes blazy contents
 * are also embedded outside gridstacks. Hence we only concern those embedded
 * inside gridstack.
 *
 * At most cases, no need to re-touch this file.
 *
 * @see css/gridstack.css for details
 */

.is-gs-enabled .box__content,
.is-gs-enabled.is-gs-ratio .b-noratio,
.is-gs-enabled.is-gs-ratio .media--player,
.is-gs-enabled.is-gs-ratio .box__content::before {
  display: block;
  width: 100%;
  height: 100%; /* @todo recheck with various contents, including empty images. */
  min-height: 1px;
}

/* Ungridstack, or caption only without media images. etc. */
.is-gs-enabled.is-gs-ratio .b-noratio,
.is-gs-enabled.is-gs-ratio .box__content::before {
  position: absolute;
  top: 0;
  left: 0;
}

.is-gs-enabled.is-gs-ratio .box__content::before {
  z-index: -1;
  content: "";
}

/* Prevents nested padding hacks to avoid issues with its parent padding hack. */
.gridstack--js .b-noratio,
.is-gs-enabled.is-gs-ratio .b-bg,
.is-gs-enabled.is-gs-ratio .box > .media {
  height: 100%;
  padding-bottom: 0 !important; /* csslint allow: known-properties, important */
}

.is-gs-enabled.is-gs-ratio .b-noratio > img:not(.is-b-animated .b-blur),
.is-gs-enabled.is-gs-ratio .b-noratio > video,
.is-gs-enabled.is-gs-ratio .b-noratio > iframe {
  height: inherit;
  object-fit: cover;
}

.gridstack--js > .box,
.gridstack--js .b-noratio {
  max-height: 100%; /* @fixed for absurd height during resizing. */
}

.is-gs-disabled > .box,
.is-gs-disabled .b-noratio {
  max-height: 480px; /* @fixed for absurd height with deep levels images, adjust. */
}