/* Charoal home hero v15 — single-slide frame, clean arrows and compact welcome card. */

html.charoal-home-hero-v15 body.id-1.type-index #carousel.charoal-carousel {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel > .carousel-inner {
  width: 100% !important;
  grid-column: 1 / -1 !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel > .charoal-carousel-preview {
  display: none !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .charoal-carousel-status {
  max-width: calc(100% - 180px) !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .carousel-control {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  color: #72257f !important;
  background: rgba(255, 255, 255, .96) !important;
  background-image: none !important;
  border: 1px solid rgba(114, 37, 127, .18) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(17, 12, 20, .18) !important;
  opacity: 1 !important;
  transform: translateY(-50%) !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease,
    box-shadow .2s ease, transform .2s ease !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .carousel-control.left {
  right: auto !important;
  left: 18px !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .carousel-control.right {
  right: 18px !important;
  left: auto !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .carousel-control:hover,
html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .carousel-control:focus-visible {
  color: #fff !important;
  background: #d92f93 !important;
  border-color: #d92f93 !important;
  box-shadow: 0 12px 30px rgba(217, 47, 147, .28) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .carousel-control::before,
html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .carousel-control::after {
  display: none !important;
  content: none !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  #carousel.charoal-carousel .carousel-control > :not(.sr-only):not(.charoal-v15-arrow) {
  display: none !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .charoal-v15-arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

html.charoal-home-hero-v15 body.id-1.type-index .charoal-v15-arrow svg {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
  stroke: currentColor;
}

/* Give the artwork most of the desktop/tablet frame. Native banner artwork is
   contained instead of cropped; the dark media surface absorbs any letterbox. */
@media (min-width: 992px) {
  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-link {
    grid-template-columns: minmax(360px, .68fr) minmax(0, 1.32fr) !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-copy {
    padding-right: clamp(34px, 3.7vw, 58px) !important;
    padding-left: clamp(72px, 5vw, 82px) !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-title {
    font-size: clamp(38px, 3.35vw, 56px) !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-link {
    grid-template-columns: minmax(265px, .78fr) minmax(0, 1.22fr) !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-copy {
    padding-right: 24px !important;
    padding-left: 68px !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-title {
    font-size: clamp(32px, 4.4vw, 40px) !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-cta {
    max-width: 100% !important;
    gap: 12px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
    font-size: 14px !important;
  }
}

@media (min-width: 768px) {
  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .item:not(.charoal-featured-slide) .charoal-hero-media {
    background: #0c0a0d !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .item:not(.charoal-featured-slide) .charoal-hero-image,
  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .item:not(.charoal-featured-slide) .charoal-hero-link > picture > img {
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* The old inline script paints a full-viewport pink layer. V15 keeps the colour
   only on the actual text card. */
html.charoal-home-hero-v15 body.id-1.type-index .welcome-bg-viewport {
  display: none !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .welcome-full-bleed {
  width: min(calc(100% - 64px), 1290px) !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f8e3fa !important;
  border: 1px solid #efd2f1 !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(92, 38, 101, .07) !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  .welcome-full-bleed.charoal-welcome-empty {
  display: none !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 25px 30px 23px !important;
  background: transparent !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner p {
  margin: 0 0 11px !important;
  color: #211b23 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner p span {
  font-size: inherit !important;
  line-height: inherit !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner p:first-child,
html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner p:first-child span {
  font-size: 22px !important;
  line-height: 1.25 !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner p:last-child {
  margin-bottom: 0 !important;
}

html.charoal-home-hero-v15 body.id-1.type-index
  .content-wrapper.homepage-box.before-carousel {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .charoal-quick-categories {
  padding-top: 24px !important;
}

@media (max-width: 767px) {
  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .carousel-control {
    width: 40px !important;
    height: 40px !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .carousel-control.left {
    left: 10px !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .carousel-control.right {
    right: 10px !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-carousel-status {
    max-width: calc(100% - 94px) !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index .welcome-full-bleed {
    width: calc(100% - 28px) !important;
    margin-top: 14px !important;
    border-radius: 14px !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner {
    padding: 20px 18px 18px !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner p {
    font-size: 14px !important;
    line-height: 1.48 !important;
    text-align: left !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner p:first-child,
  html.charoal-home-hero-v15 body.id-1.type-index .welcome-inner p:first-child span {
    font-size: 19px !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index .charoal-quick-categories {
    padding-top: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .carousel-control {
    transition: none !important;
  }
}