/* stylelint-disable selector-class-pattern, no-descending-specificity */
.paragraph--type--blade.paragraph--view-mode--preview .paragraph--type--action-panel-container.paragraph--view-mode--default.actionpanel,
table.field-multiple-table.responsive-enabled .paragraph--type--action-panel-container.paragraph--view-mode--preview.actionpanel {
  margin-top: 30px;
}

.paragraph--type--blade.paragraph--view-mode--preview .paragraph--type--action-panel-container.paragraph--view-mode--default.actionpanel .actionpanel_list .actionpanel_detail,
table.field-multiple-table.responsive-enabled .paragraph--type--action-panel-container.paragraph--view-mode--default.actionpanel .actionpanel_list .actionpanel_detail {
  padding: 0 !important;
}

.actionpanel_bg {
  margin: 0 auto;
  display: block;
  height: 100%;
  position: relative;
  min-height: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

.actionpanel.actionpanel_horizontal {
  min-height: 150px;
}

.actionpanel_list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

a:focus>.actionpanel_bg {
  outline: rgb(77 144 254) auto 10px;
  outline-offset: -5px;
}

/* DESKTOP SCREEN */
@media screen and (width >= 1281px) {
  .actionpanel.actionpanel_horizontal .actionpanel_list {
    min-height: 300px;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list {
    height: 75vh;
    max-height: 720px;
  }

  .actionpanel .actionpanel_list .actionpanel_item {
    display: block;
    flex: 1;
    margin-bottom: 0;
  }



  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_detail .actionpanel_caption {
    display: flex;
    grid-gap: 0;
    align-items: flex-end;
    flex: 1;
    min-width: 1px;
    min-height: 1px;

    /* grid-template-columns: minmax(20px, max-content) 1fr; */
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_title {
    word-wrap: break-word;
    box-sizing: border-box;
    font-size: 5.3rem;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_title,
  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_subtitle {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
  }

  .actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_title {
    font-size: 2.8rem;
    margin: auto;
    text-align: center;
  }

  .actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_subtitle {
    opacity: 0;
    margin: auto;
    font-size: 1.4rem;
    text-align: center;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_subtitle {
    opacity: 0;
    margin: 0 auto 0 0;
    font-size: 2.1rem;
  }

  .actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_subtitle,
  .actionpanel .actionpanel_list .actionpanel_item:focus-within .actionpanel_subtitle {
    opacity: 1;
  }

}

/* TABLET SCREEN */
@media screen and (width <= 1280px) {
  .actionpanel .actionpanel_list {
    display: block;
  }

  .actionpanel .actionpanel_list .actionpanel_item {
    display: block;
    margin-bottom: 0;
    height: 300px;
  }

  .actionpanel.actionpanel .actionpanel_list .actionpanel_detail .actionpanel_caption {
    grid-template-rows: 1fr;
  }

  .actionpanel .actionpanel_list .actionpanel_title {
    margin: auto auto 0 0;
    font-size: 5.3rem;
  }

  .actionpanel .actionpanel_list .actionpanel_subtitle {
    opacity: 1;
    font-size: 2.1rem;
  }

  .actionpanel .actionpanel_list .actionpanel_title,
  .actionpanel .actionpanel_list .actionpanel_subtitle {
    writing-mode: horizontal-tb;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_detail .actionpanel_caption {
    display: grid;
    grid-gap: 0;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_title,
  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_subtitle {
    display: grid;
  }

}

/* MOBILE SCREEN */
@media screen and (width <= 640px) {
  .actionpanel .actionpanel_list .actionpanel_item {
    height: 150px;
  }

  .actionpanel .actionpanel_list .actionpanel_title {
    font-size: 2.4rem;
  }

  .actionpanel .actionpanel_list .actionpanel_subtitle {
    font-size: 1.4rem;
    line-height: 1.4;
  }

}


.actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_bg,
.actionpanel .actionpanel_list .actionpanel_item:focus-within .actionpanel_bg {
  filter: grayscale(0);
}

/* focus-within: the list item is not focusable, the link inside it is. */
.actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_overlay,
.actionpanel .actionpanel_list .actionpanel_item:focus-within .actionpanel_overlay {
  background: linear-gradient(transparent 25%, black);
  background-color: transparent !important;
}

.actionpanel .actionpanel_list .actionpanel_link {
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
  border-bottom: none !important;
}

.actionpanel .actionpanel_list .actionpanel_bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  transition: .25s;
  width: 100%;
  z-index: 1;
}

@media screen and (prefers-reduced-motion: reduce) {
.actionpanel .actionpanel_list .actionpanel_bg {
  transition: none;
}
}

.actionpanel .actionpanel_list .actionpanel_overlay {
  background: rgb(0 51 102 / 75%);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: .25s;
  z-index: 2;
}

@media screen and (prefers-reduced-motion: reduce) {
.actionpanel .actionpanel_list .actionpanel_overlay {
  transition: none;
}
}

.actionpanel .actionpanel_list .actionpanel_detail {
  padding: 24px;
  width: 100%;
  height: 100%;
  bottom: 0;
  position: absolute;
  z-index: 3;
  display: grid;
  grid-gap: 0;
}

.actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_detail {
  align-items: center;
  grid-template-columns: 1fr 0;
}

.actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_detail {
  grid-template-columns: 1fr;
}

.actionpanel.actionpanel_list .actionpanel_detail .actionpanel_caption {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_detail .actionpanel_caption {
  display: block;
}

.actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_title,
.actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_subtitle {
  display: block;

  /* fit-content so the hover scrim hugs the text. */
  width: fit-content;
  max-width: 100%;
}

/* anywhere, not break-word: only anywhere shrinks min-content, so a long
  word cannot hold a panel wider than a 320px viewport. */
.actionpanel .actionpanel_list .actionpanel_title,
.actionpanel .actionpanel_list .actionpanel_subtitle {
  overflow-wrap: anywhere;

  /* Constant padding so the hover scrim cannot reflow the text. */
  padding: 0.1em 0.35em;
}

.actionpanel .actionpanel_list .actionpanel_title {
  color: white;
  font-family: Produkt, serif;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.actionpanel .actionpanel_list .actionpanel_subtitle {
  color: white;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  transition: .25s;
  line-height: 1.75;
  text-transform: uppercase;
}

/* Scrim behind caption text on hover and focus: the overlay fades to a
  gradient there, leaving text on the raw image. Neutral, so one alpha
  covers the whole palette. */
.actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_title,
.actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_subtitle,
.actionpanel .actionpanel_list .actionpanel_item:focus-within .actionpanel_title,
.actionpanel .actionpanel_list .actionpanel_item:focus-within .actionpanel_subtitle {
  background-color: rgb(0 0 0 / 60%);
}

@media screen and (prefers-reduced-motion: reduce) {
.actionpanel .actionpanel_list .actionpanel_subtitle {
  transition: none;
}
}

/* Overlay stays on focus, or the title lands on the raw image. */
.actionpanel_link:focus .actionpanel_subtitle {
  opacity: 1 !important;
}

/* Fallback when no Panel Overlay Color is set. The theme has the
  background-color-<hex> utilities but not the empty class. */
div.background-color- {
  background-color: #003660;
}
/* stylelint-enable selector-class-pattern, no-descending-specificity */