.messageCenter.messageCenter-type-vertical {
  overflow: clip;
  transition: none;
}

.messageCenter-type-vertical {
  --mc-viewport-width: 100dvw;
  --mc-viewport-height: 100dvh;
  --mc-step-distance: var(--mc-viewport-height);
  --mc-sticky-top: 0px;
  --mc-image-travel: calc(var(--mc-slide-height) + var(--mc-slide-gap));
  --mc-text-travel: calc(var(--mc-image-travel) * 1.3);
  --mc-image-duration: 1000ms;
  --mc-text-duration: 700ms;
  --mc-text-delay: calc(var(--mc-image-duration) - var(--mc-text-duration));
  --mc-text-exit-duration: var(--mc-text-duration);
  --mc-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --mc-slide-height: 75dvh;
  --mc-slide-gap: 24px;
  --mc-max-width: 1600px;
  --mc-stage-padding: 2.5vh 2.5vw;
  --mc-radius: 20px;
  --mc-image-width: 65%;
  --mc-card-width: 45%;
  --mc-card-overlap: calc(100% - var(--mc-image-width) - var(--mc-card-width));
  --mc-image-height: 100%;
  --mc-image-min-height: 0px;
  --mc-card-padding: 40px 42px;
  --mc-accent: var(--baylorGreen);
  --mc-surface: #fff;
}

.messageCenter-type-vertical {
  position: relative;
  width: var(--mc-viewport-width);
  max-width: 100%;
  margin-inline: calc(50% - (var(--mc-viewport-width) / 2));
}

.messageCenter-type-vertical.is-enhanced {
  height: calc(var(--mc-count, 1) * var(--mc-step-distance) + var(--mc-viewport-height));
}

.messageCenter-stage {
  position: sticky;
  top: var(--mc-sticky-top);
  height: calc(var(--mc-viewport-height) - var(--mc-sticky-top));
  overflow: clip;
}

.messageCenter-steps {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.messageCenter-step {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--mc-i, 0) * var(--mc-step-distance));
  height: var(--mc-step-distance);
}

.messageCenter-type-vertical .messageCenter-slide-link {
  --mc-offset: calc(var(--mc-i, 0) - var(--mc-active, 0));
  display: flex;
  align-items: center;
  width: var(--mc-viewport-width);
  height: var(--mc-viewport-height);
  background: none !important;
  font-weight: normal !important;
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.messageCenter-type-vertical .messageCenter-slide-link:is(:hover, :focus, :active) {
  background: none !important;
  color: inherit !important;
  text-decoration: none !important;
}

.messageCenter-type-vertical .messageCenter-slide-link:focus-visible {
  outline: none;
}

.messageCenter-type-vertical .messageCenter-slide-link:focus-visible .messageCenter-slide-link-text {
  outline: 3px solid currentColor;
  outline-offset: -8px;
}

.messageCenter-type-vertical.is-enhanced .messageCenter-slide-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: calc(var(--mc-count, 1) - var(--mc-i, 0));
}

.messageCenter-type-vertical.is-enhanced .messageCenter-slide-link.is-visible {
  pointer-events: auto;
}

.messageCenter-type-vertical .messageCenter-slide-link-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--mc-slide-height);
  max-width: var(--mc-max-width);
  margin-inline: auto;
  padding: var(--mc-stage-padding);
  box-sizing: border-box;
}

.messageCenter-type-vertical.is-enhanced .messageCenter-slide-link-image {
  translate: 0 calc(var(--mc-offset) * var(--mc-image-travel));
  transition: translate var(--mc-image-duration) var(--mc-ease);
}

.messageCenter-type-vertical.is-enhanced .messageCenter-slide-link-text {
  translate: 0 calc(var(--mc-offset) * var(--mc-text-travel));
  transition: translate var(--mc-text-exit-duration) var(--mc-ease);
}

.messageCenter-type-vertical.is-enhanced .messageCenter-slide-link.is-visible .messageCenter-slide-link-text {
  transition-duration: var(--mc-text-duration);
  transition-delay: var(--mc-text-delay);
}

.messageCenter-type-vertical .messageCenter-slide-link-image {
  order: 1;
  position: relative;
  width: var(--mc-image-width);
  height: var(--mc-image-height);
  min-height: var(--mc-image-min-height);
  overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--mc-radius);
}

.messageCenter-type-vertical .messageCenter-slide-link-image-bkg {
  position: absolute;
  inset: 0;
  /* Consumes the --mc-bg custom property set inline per-slide in
     views-view-fields--message-center-display-vertical.html.twig.
     The "none" fallback prevents a broken/empty url() if a slide is
     ever missing an image, rather than erroring or showing alt text. */
  background-image: var(--mc-bg, none);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transition: var(--mc-transition-slow);
}

.messageCenter-type-vertical .messageCenter-slide-link-image img {
  display: none;
}

.messageCenter-type-vertical .messageCenter-slide-link:is(:hover, :focus) .messageCenter-slide-link-image-bkg {
  transform: scale(1.05);
}

.messageCenter-type-vertical .messageCenter-slide-link-text {
  order: 2;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--mc-card-width);
  margin-left: var(--mc-card-overlap);
  padding: var(--mc-card-padding);
  box-sizing: border-box;
  background: var(--mc-surface);
  border-radius: var(--mc-radius);
  box-shadow:
          0 2px 2px rgb(0 0 0 / 10%),
          0 3px 6px rgb(0 0 0 / 8%);
}

.messageCenter-type-vertical .messageCenter-slide-link-text[data-text-align="left"] {
  order: 1;
  margin-left: 0;
  margin-right: var(--mc-card-overlap);
}

.messageCenter-type-vertical .messageCenter-slide-link-text[data-text-align="left"] ~ .messageCenter-slide-link-image {
  order: 2;
}

.messageCenter-type-vertical .messageCenter-slide-link-text-headline {
  font-family: var(--font-family--campaign--serif);
  color: var(--mc-accent);
  margin-bottom: 5px;
}

.messageCenter-type-vertical .messageCenter-slide-link-text-description {
  color: var(--charcoal);
  font-family: var(--font-family--sans);
}

.messageCenter-type-vertical .messageCenter-slide-link-text-button {
  margin: 20px 0 0;
}

.messageCenter-type-vertical .messageCenter-slide-link-text-button-interior.baylor-button {
  background-color: var(--mc-accent);
  border: 3px solid var(--mc-accent);
  border-radius: 30px;
  color: var(--mc-surface);
  text-transform: none;
  font-family: var(--font-family--campaign--serif);
  font-size: 1.25rem;
  overflow: hidden;
  transition: var(--mc-transition-fast);
}

.messageCenter-type-vertical .messageCenter-slide-link-text-button-interior.baylor-button:hover {
  border-color: var(--mc-accent);
  color: var(--mc-accent);
}

.messageCenter-type-vertical .messageCenter-slide-link-text-button-interior.baylor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mc-surface);
  border-radius: inherit;
  z-index: -1;
  transform: translateX(-105%);
  transition: var(--mc-transition-fast);
}

.messageCenter-type-vertical .messageCenter-slide-link-text-button-interior.baylor-button:hover::before {
  transform: translateX(0);
}

@media (max-width: 900px) {
  .messageCenter-type-vertical {
    --mc-image-width: 100%;
    --mc-card-width: 100%;
    --mc-card-overlap: 0px;
    --mc-image-min-height: min(60vw, 55dvh);
    --mc-image-height: auto;
    --mc-card-padding: 30px;
    --mc-slide-height: var(--mc-viewport-height);
    --mc-slide-gap: 0px;
    --mc-stage-padding: 0;
  }

  .messageCenter-type-vertical .messageCenter-slide-link {
    align-items: flex-start;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-container {
    flex-direction: column;
    justify-content: unset;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-image {
    border-radius: 0;
    max-height: var(--mc-slide-height);
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text {
    border-radius: var(--mc-radius);
    margin-top:-30px;
    max-width:95%;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text[data-text-align="left"] {
    order: 2;
    margin-right: 0;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text[data-text-align="left"] ~ .messageCenter-slide-link-image {
    order: 1;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text-headline {
    font-size: 40px;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .messageCenter-type-vertical {
    --mc-image-min-height: 45dvh;
    --mc-card-padding: 16px 20px;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .messageCenter-type-vertical {
    --mc-slide-height: 85dvh;
  }

  .messageCenter-type-vertical.is-enhanced {
    --mc-bottom-space: 20px;
    --mc-stage-padding: 0 0 12px; /* room for the card's drop shadow */
    box-sizing: content-box; /* so the padding adds to the height */
    padding-bottom: var(--mc-bottom-space);
  }
}

@media (prefers-reduced-motion: reduce) {
  .messageCenter-type-vertical.is-enhanced .messageCenter-slide-link-image,
  .messageCenter-type-vertical.is-enhanced .messageCenter-slide-link-text,
  .messageCenter-type-vertical .messageCenter-slide-link-image-bkg {
    transition: none;
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .messageCenter-type-vertical {
    /* Use the theme's header-height variable if it has one. */
    --mc-sticky-top: 56px;
    --mc-slide-height: calc(var(--mc-viewport-height) - var(--mc-sticky-top));
    --mc-image-min-height: 64px;
    --mc-card-padding: 12px 20px;
  }

  /* Image fills whatever height the card leaves. */
  .messageCenter-type-vertical .messageCenter-slide-link-image {
    flex: 1 1 0;
    min-height: var(--mc-image-min-height);
    max-height: none;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text {
    flex: none;
    margin-top: -24px;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text-headline {
    font-size: clamp(20px, 6.5dvh, 28px);
    line-height: 1.1;
    margin-bottom: 4px;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text-description {
    font-size: 14px;
    line-height: 1.35;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text-description p {
    margin: 0;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text-button {
    margin-top: 10px;
  }

  .messageCenter-type-vertical .messageCenter-slide-link-text-button-interior.baylor-button {
    font-size: 1rem;
  }

  .messageCenter-type-vertical.is-enhanced {
    --mc-bottom-space: 20px;
    --mc-stage-padding: 0 0 12px; /* room for the card's drop shadow */
    box-sizing: content-box; /* so the padding adds to the height */
    padding-bottom: var(--mc-bottom-space);
  }
}