/* Charoal home hero v16 — seamless artwork blend and white welcome spacing. */

/* Make the desktop/tablet hero read as one continuous banner. The artwork
   remains fully contained in its own column; the copy surface now fades into
   the artwork instead of ending on a hard vertical edge. */
@media (min-width: 768px) {
  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-link {
    background: #050506 !important;
  }

  html.charoal-home-hero-v15 body.id-1.type-index
    #carousel.charoal-carousel .charoal-hero-copy {
    width: calc(100% + 58px) !important;
    overflow: visible !important;
    background: linear-gradient(
      90deg,
      #120c15 0%,
      #0d090f 78%,
      rgba(5, 5, 6, .96) 84%,
      rgba(5, 5, 6, 0) 100%
    ) !important;
    box-shadow: none !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 {
    background: #050506 !important;
  }
}

/* The complete carousel/welcome area sits on white. Only the actual welcome
   card stays pink, followed by one comfortable line of white space. */
html.charoal-home-hero-v15 body.id-1.type-index
  .content-wrapper.homepage-box.before-carousel {
  background: #fff !important;
}

html.charoal-home-hero-v15 body.id-1.type-index .welcome-full-bleed {
  margin-bottom: 20px !important;
}

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

@media (max-width: 767px) {
  html.charoal-home-hero-v15 body.id-1.type-index .welcome-full-bleed {
    margin-bottom: 16px !important;
  }
}

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