/**
 * @file
 * This file is loaded for Layout Builder integration.
 *
 * The provided rules are not available at CSS framework, internal utilities.
 *
 * At most cases, might need to re-touch this file.
 */

/* Vertical margin rules. */
.vm-xs .box {
  margin-top: 5px;
  margin-bottom: 5px;
}

.vm-sm .box {
  margin-top: 10px;
  margin-bottom: 10px;
}

.vm-md .box {
  margin-top: 15px;
  margin-bottom: 15px;
}

.vm-lg .box {
  margin-top: 20px;
  margin-bottom: 20px;
}

.vm-xl .box {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Padding rules. */
/* Stick to a CSS framework, at least Bootstrap, for left and right padding. */
.p-xs {
  padding: 15px;
}

.p-sm {
  padding: 30px 15px;
}

.p-md {
  padding: 60px 15px;
}

.p-lg {
  padding: 120px 15px 60px;
}

.p-xl {
  padding: 210px 15px 60px;
}

/**
 * Min height to fix collapsed containers with contentless or edge to edge
 * due to background absolute position.
 * Media element (IMG, IFRAME, VIDEO) has class is-gs-media.
 * The min-height is configurable via Layout Builder UI, hence just basic.
 */
.b-gs,
.is-gs-media {
  min-height: 120px;
}

/* Ensures configurable options respected, put after the above. */
.mh-xs,
.mh-xs > .box__bg {
  min-height: 240px;
}

.mh-sm,
.mh-sm > .box__bg {
  min-height: 320px;
}

.mh-md,
.mh-md > .box__bg {
  min-height: 480px;
}

.mh-lg,
.mh-lg > .box__bg {
  min-height: 640px;
}

.mh-xl,
.mh-xl > .box__bg {
  min-height: 720px;
}

/* XS < 576px, SM >= 576px, MD >= 768px, LG >= 992px, XL >= 1200px */
@media screen and (min-width: 768px) {
  .mh-md-xs,
  .mh-md-xs > .box__bg {
    min-height: 240px;
  }

  .mh-md-sm,
  .mh-md-sm > .box__bg {
    min-height: 320px;
  }

  .mh-md-md,
  .mh-md-md > .box__bg {
    min-height: 480px;
  }

  .mh-md-lg,
  .mh-md-lg > .box__bg {
    min-height: 640px;
  }

  .mh-md-xl,
  .mh-md-xl > .box__bg {
    min-height: 720px;
  }
}

@media screen and (min-width: 1200px) {
  .mh-lg-xs,
  .mh-lg-xs > .box__bg {
    min-height: 240px;
  }

  .mh-lg-sm,
  .mh-lg-sm > .box__bg {
    min-height: 320px;
  }

  .mh-lg-md,
  .mh-lg-md > .box__bg {
    min-height: 480px;
  }

  .mh-lg-lg,
  .mh-lg-lg > .box__bg {
    min-height: 640px;
  }

  .mh-lg-xl,
  .mh-lg-xl > .box__bg {
    min-height: 720px;
  }
}

/* BG position. */
.bg-bottom .b-bg {
  background-position: bottom;
}

.bg-left .b-bg {
  background-position: left;
}

.bg-right .b-bg {
  background-position: right;
}

.bg-top .b-bg {
  background-position: top;
}

.bg-bottom-left .b-bg {
  background-position: bottom left;
}

.bg-bottom-right .b-bg {
  background-position: bottom right;
}

.bg-top-left .b-bg {
  background-position: top left;
}

.bg-top-right .b-bg {
  background-position: top right;
}

/* Bg dark with opacity */
.bg-dark-20 {
  background-color: rgba(0, 0, 0, 0.2);
}

.bg-dark-40 {
  background-color: rgba(0, 0, 0, 0.4);
}

.bg-dark-60 {
  background-color: rgba(0, 0, 0, 0.6);
}

.bg-dark-80 {
  background-color: rgba(0, 0, 0, 0.8);
}

.bg-dark-90 {
  background-color: rgba(0, 0, 0, 0.9);
}

/* Be careful, breaking layout. */
.row [class*="rounded"] { /* csslint allow: unqualified-attributes */
  position: relative;
  overflow: hidden;
}

.row [class*="rounded"] .box__bg { /* csslint allow: unqualified-attributes */
  padding-right: 0;
  padding-left: 0;
}

/* Fix for Claro collapse. */
.row .gridstack__inner {
  width: 100%;
}