/* ==========================================================================
   Doorway Grid Section
   ========================================================================== */

/* Grid layout */
.doorway-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 calc(var(--gutter) * 0.5);
}

/* Base tile */
.doorway-grid__tile {
  border-radius: 20px;
  height: 375px;
  list-style: none;
  margin: 0 15px 30px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: calc(100% - 30px);
}

@media screen and (width >= 768px) {
  .doorway-grid__tile {
    height: 300px;
    margin: 0 15px 30px;
    width: calc(50% - 30px);
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid__tile {
    height: 429px;
    margin: 0 15px 30px;
    width: calc(25% - 30px);
  }
}

/* Tile overlay */
.doorway-grid__tile--has-content::after {
  background: #000;
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: var(--reduced-motion, 0.5s);
}

/* Content max-height */
.doorway-grid__tile .doorway-grid__content {
  max-height: calc(var(--h5-lh) * 2 + 30px);
}

@media screen and (width >= 768px) {
  .doorway-grid__tile .doorway-grid__content {
    max-height: calc(var(--h5-lh) * 2 + 30px);
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid__tile .doorway-grid__content {
    max-height: calc(var(--h5-lh) * 2 + 54px);
  }
}

/* Title sizing */
.doorway-grid__tile .doorway-grid__title {
  font-size: var(--h5-fs);
  height: calc(var(--h5-lh) * 2);
  line-height: var(--h5-lh);
}

/* Hover / focus states */
.doorway-grid__tile.hover,
.doorway-grid__tile:focus-within,
.doorway-grid__tile:hover {
  -webkit-tap-highlight-color: rgb(0 0 0 / 0);
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.doorway-grid__tile.hover::after,
.doorway-grid__tile:focus-within::after,
.doorway-grid__tile:hover::after {
  opacity: 0.7;
}

.doorway-grid__tile.hover .doorway-grid__img,
.doorway-grid__tile:focus-within .doorway-grid__img,
.doorway-grid__tile:hover .doorway-grid__img {
  transform: scale(1.05);
}

.doorway-grid__tile.hover .doorway-grid__content,
.doorway-grid__tile:focus-within .doorway-grid__content,
.doorway-grid__tile:hover .doorway-grid__content {
  max-height: 100%;
}

/* Content overlay */
.doorway-grid__content {
  background: var(--color-navy);
  bottom: 0;
  color: var(--color-white);
  overflow: hidden;
  padding: 15px;
  pointer-events: none;
  position: absolute;
  transition: var(--reduced-motion, 0.5s);
  width: 100%;
  z-index: 2;
}

@media screen and (width >= 768px) {
  .doorway-grid__content {
    padding: 15px;
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid__content {
    padding: 27px;
  }
}

.doorway-grid__content-is-visible .doorway-grid__content {
  max-height: 100%;
}

/* Image */
.doorway-grid__image {
  height: 100%;
  overflow: clip;
}

.doorway-grid__img {
  backface-visibility: hidden;
  transform: scale(1);
  transition: var(--reduced-motion, 0.5s);
  will-change: transform;
}

/* Title */
.doorway-grid__title {
  align-items: center;
  display: flex;
  margin: 0;
}

.doorway-grid__content-is-visible .doorway-grid__title {
  height: auto;
}

.doorway-grid__title-heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--color-white);
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  max-height: 100%;
  overflow: hidden;
}

/* Text */
.doorway-grid__text {
  margin-top: 15px;
}

@media screen and (width >= 768px) {
  .doorway-grid__text {
    margin-top: 15px;
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid__text {
    margin-top: 27px;
  }
}

.doorway-grid__text a {
  pointer-events: all;
}

.doorway-grid__text > p:first-child:last-child {
  margin-bottom: 0;
}

/* No-title variant */
.doorway-grid__content--no-title .doorway-grid__text {
  margin-top: 75px;
}

@media screen and (width >= 768px) {
  .doorway-grid__content--no-title .doorway-grid__text {
    margin-top: 75px;
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid__content--no-title .doorway-grid__text {
    margin-top: 87px;
  }
}

/* ==========================================================================
   Count-based responsive widths
   ========================================================================== */

/* Single */
@media screen and (768px <= width <= 1079px) {
  .doorway-grid--single .doorway-grid__tile {
    margin: 0 15px 30px;
    width: calc(100% - 30px);
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid--single .doorway-grid__tile {
    margin: 0 15px 30px;
    width: calc(100% - 30px);
  }

  .doorway-grid--double .doorway-grid__tile {
    margin: 0 15px 30px;
    width: calc(50% - 30px);
  }
}

/* Triple */
@media screen and (width <= 767px) {
  .doorway-grid--triple .doorway-grid__tile {
    margin: 0 15px 24px;
    width: calc(100% - 30px);
  }

  .doorway-grid--triple .doorway-grid__content {
    max-height: calc(var(--h6-lh) * 2 + 30px);
  }

  .doorway-grid--triple .doorway-grid__title {
    font-size: var(--h6-fs);
    height: calc(var(--h6-lh) * 2);
    line-height: var(--h6-lh);
  }

  .doorway-grid--triple .doorway-grid__text {
    display: none;
  }
}

@media screen and (768px <= width <= 1079px) {
  .doorway-grid--triple .doorway-grid__tile {
    margin: 0 15px 30px;
    width: calc(33.33333% - 30px);
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid--triple .doorway-grid__tile {
    margin: 0 15px 30px;
    width: calc(33.33333% - 30px);
  }
}

/* Quad */
@media screen and (width <= 767px) {
  .doorway-grid--quad .doorway-grid__tile {
    margin: 0 15px 24px;
    width: calc(100% - 30px);
  }

  .doorway-grid--quad .doorway-grid__content {
    max-height: calc(var(--h6-lh) * 2 + 30px);
  }

  .doorway-grid--quad .doorway-grid__title {
    font-size: var(--h6-fs);
    height: calc(var(--h6-lh) * 2);
    line-height: var(--h6-lh);
  }

  .doorway-grid--quad .doorway-grid__text {
    display: none;
  }
}

@media screen and (768px <= width <= 1079px) {
  .doorway-grid--quad .doorway-grid__tile {
    margin: 0 15px 30px;
    width: calc(25% - 30px);
  }

  .doorway-grid--quad .doorway-grid__content {
    max-height: calc(var(--h6-lh) * 2 + 30px);
  }

  .doorway-grid--quad .doorway-grid__title {
    font-size: var(--h6-fs);
    height: calc(var(--h6-lh) * 2);
    line-height: var(--h6-lh);
  }

  .doorway-grid--quad .doorway-grid__text {
    display: none;
  }
}

/* Quint */
@media screen and (width <= 767px) {
  .doorway-grid--quint .doorway-grid__tile {
    margin: 0 15px 24px;
    width: calc(100% - 30px);
  }

  .doorway-grid--quint .doorway-grid__content {
    max-height: calc(var(--h6-lh) * 2 + 30px);
  }

  .doorway-grid--quint .doorway-grid__title {
    font-size: var(--h6-fs);
    height: 30px;
    justify-content: center;
    line-height: var(--h6-lh);
  }

  .doorway-grid--quint .doorway-grid__text {
    display: none;
  }
}

@media screen and (768px <= width <= 1079px) {
  .doorway-grid--quint .doorway-grid__tile {
    margin: 0 15px 30px;
    width: calc(33.33333% - 30px);
  }

  .doorway-grid--quint .doorway-grid__tile--1,
  .doorway-grid--quint .doorway-grid__tile--2 {
    margin: 0 15px 30px;
    width: calc(50% - 30px);
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid--quint .doorway-grid__tile {
    margin: 0 15px 30px;
    width: calc(33.33333% - 30px);
  }

  .doorway-grid--quint .doorway-grid__tile--1,
  .doorway-grid--quint .doorway-grid__tile--2 {
    margin: 0 15px 30px;
    width: calc(50% - 30px);
  }
}

/* Sext */
@media screen and (width <= 767px) {
  .doorway-grid--sext .doorway-grid__tile {
    margin: 0 15px 24px;
    width: calc(100% - 30px);
  }

  .doorway-grid--sext .doorway-grid__content {
    max-height: calc(var(--h6-lh) * 2 + 30px);
  }

  .doorway-grid--sext .doorway-grid__title {
    font-size: var(--h6-fs);
    height: calc(var(--h6-lh) * 2);
    line-height: var(--h6-lh);
  }

  .doorway-grid--sext .doorway-grid__text {
    display: none;
  }
}

@media screen and (768px <= width <= 1079px) {
  .doorway-grid--sext .doorway-grid__tile--1,
  .doorway-grid--sext .doorway-grid__tile--2 {
    margin: 0 15px 30px;
    width: calc(100% - 30px);
  }
}

@media screen and (width >= 1080px) {
  .doorway-grid--sext .doorway-grid__tile--1,
  .doorway-grid--sext .doorway-grid__tile--2 {
    margin: 0 15px 30px;
    width: calc(50% - 30px);
  }
}

/* ==========================================================================
   Pagepart wrapper styles
   ========================================================================== */

.pagepart_wrapper_type__DoorwayGridPagePart.pagepart_wrapper--has-header {
  padding-top: 60px;
}

@media screen and (width >= 768px) {
  .pagepart_wrapper_type__DoorwayGridPagePart.pagepart_wrapper--has-header {
    padding-top: 120px;
  }
}

/* Header alignment overrides */
.pagepart_wrapper_type__DoorwayGridPagePart .pagepart__header--is-aligned-center .pagepart__header-title,
.pagepart_wrapper_type__DoorwayGridPagePart .pagepart__header--is-aligned-right .pagepart__header-title {
  max-width: inherit;
}

.pagepart_wrapper_type__DoorwayGridPagePart .pagepart__header--is-aligned-center .pagepart__header-title::before,
.pagepart_wrapper_type__DoorwayGridPagePart .pagepart__header--is-aligned-right .pagepart__header-title::before {
  content: none;
}

/* Header title decorative circle */
.pagepart_wrapper_type__DoorwayGridPagePart .pagepart__header-title {
  max-width: 300px;
}

.pagepart_wrapper_type__DoorwayGridPagePart .pagepart__header-title::before {
  background: url(../../images/circle-doorway.svg) no-repeat;
  content: "";
  height: 474px;
  left: -120px;
  position: absolute;
  top: -70px;
  width: 100%;
}

@media screen and (width >= 768px) {
  .pagepart_wrapper_type__DoorwayGridPagePart .pagepart__header-title::before {
    height: 567px;
    left: -100px;
    top: -100px;
    width: 567px;
  }
}

/* Content spacing */
.pagepart_wrapper_type__DoorwayGridPagePart .pagepart__content {
  margin-bottom: -30px;
  padding-bottom: 30px;
}

@media screen and (width >= 768px) {
  .pagepart_wrapper_type__DoorwayGridPagePart .pagepart__content {
    margin-bottom: -30px;
  }
}

@media screen and (width >= 1080px) {
  .pagepart_wrapper_type__DoorwayGridPagePart .pagepart__content {
    margin-bottom: -30px;
  }
}

.pagepart_wrapper_type__DoorwayGridPagePart:not(.pagepart_wrapper--has-footer):last-child .pagepart__content {
  padding-bottom: 30px;
}

@media screen and (width >= 768px) {
  .pagepart_wrapper_type__DoorwayGridPagePart:not(.pagepart_wrapper--has-footer):last-child .pagepart__content {
    padding-bottom: 30px;
  }
}

@media screen and (width >= 1080px) {
  .pagepart_wrapper_type__DoorwayGridPagePart:not(.pagepart_wrapper--has-footer):last-child .pagepart__content {
    padding-bottom: 30px;
  }
}

/* ==========================================================================
   Theme colors
   ========================================================================== */

.pagepart--theme-default .doorway-grid__content {
  background: var(--color-navy);
}

.pagepart--theme-green .doorway-grid__content {
  background: var(--color-green);
}

.pagepart--theme-yellow .doorway-grid__content {
  background: var(--color-yellow);
}

.pagepart--theme-yellow .doorway-grid__content,
.pagepart--theme-yellow .doorway-grid__title-heading {
  color: #000;
}

/* Button */
.doorway-grid__button {
  background: var(--color-red);
  color: var(--color-white);
}

.doorway-grid__button:active,
.doorway-grid__button:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .doorway-grid__tile--has-content::after,
  .doorway-grid__content,
  .doorway-grid__img {
    transition-duration: 0s;
  }
}

/* ==========================================================================
   Adjacent DoorwayGrid spacing collapse
   ========================================================================== */

/* Default -> Default */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-default:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-default:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}

/* Default -> Green */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-default:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-green:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}

/* Default -> Yellow */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-default:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-yellow:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}

/* Green -> Default */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-green:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-default:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}

/* Green -> Green */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-green:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-green:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}

/* Green -> Yellow */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-green:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-yellow:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}

/* Yellow -> Default */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-yellow:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-default:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}

/* Yellow -> Green */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-yellow:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-green:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}

/* Yellow -> Yellow */
.pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-yellow:not(.pagepart_wrapper--has-footer) + .pagepart_wrapper_type__DoorwayGridPagePart.pagepart--theme-yellow:not(.pagepart_wrapper--has-header) {
  margin-top: 0;
  padding-top: 0;
}