/* Hero and testimonial behavior scoped to /_variants/home-responsive/. */

body.video-gallery-2.mcrl-home-responsive-test .mcrl-mobile-home__hero {
  position: relative;
  isolation: isolate;
  background: #fff;
}

body.video-gallery-2.mcrl-home-responsive-test .mcrl-mobile-home__hero > .wrap {
  position: relative;
  z-index: 1;
}

body.video-gallery-2.mcrl-home-responsive-test .mcrl-home-responsive__hero-media {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.video-gallery-2.mcrl-home-responsive-test .mcrl-home-responsive__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

body.video-gallery-2.mcrl-home-responsive-test .mcrl-home-responsive__hero-media::after {
  /* Let the products show through the copy area; end the fade just beyond it. */
  --hero-copy-width: min(560px, calc((87% - 20px) * 0.52));
  --hero-copy-right: calc(13% + var(--hero-copy-width));
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 92%) 0%,
    rgb(255 255 255 / 90%) calc(var(--hero-copy-right) - 120px),
    rgb(255 255 255 / 88%) calc(var(--hero-copy-right) - 24px),
    rgb(255 255 255 / 80%) var(--hero-copy-right),
    rgb(255 255 255 / 35%) calc(var(--hero-copy-right) + 32px),
    rgb(255 255 255 / 0%) calc(var(--hero-copy-right) + 80px)
  );
}

@media (min-width: 1025px) {
  body.video-gallery-2.mcrl-home-responsive-test .mcrl-mobile-home__hero > .wrap {
    /* Align the text with the reference mark, 13% from the viewport's left edge. */
    width: 87%;
    max-width: none;
    margin-right: 0;
    padding-left: 0;
  }

  body.video-gallery-2.mcrl-home-responsive-test .mcrl-mobile-home__hero > .wrap > * {
    max-width: min(560px, 52%);
  }
}

@media (max-width: 1024px) {
  body.video-gallery-2.mcrl-home-responsive-test .mcrl-mobile-home__hero {
    padding-bottom: 0;
  }

  body.video-gallery-2.mcrl-home-responsive-test .mcrl-home-responsive__hero-media {
    position: relative;
    inset: auto;
    margin-top: 40px;
  }

  body.video-gallery-2.mcrl-home-responsive-test .mcrl-home-responsive__hero-media img {
    height: auto;
  }

  body.video-gallery-2.mcrl-home-responsive-test .mcrl-home-responsive__hero-media::after {
    content: none;
  }
}

body.video-gallery-2.mcrl-home-responsive-test
  .mcrl-home-responsive__testimonial-controls[hidden] {
  display: none;
}

@media (max-width: 1024px) {
  body.video-gallery-2.mcrl-home-responsive-test
    .mcrl-home-responsive__testimonial-controls {
    display: none;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    [data-testimonial-slide]:nth-child(n + 3) {
    display: none;
  }
}

@media (min-width: 1025px) {
  body.video-gallery-2.mcrl-home-responsive-test
    [data-home-testimonials].is-enhanced
    [data-testimonial-viewport] {
    position: relative;
    display: grid;
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    [data-home-testimonials].is-enhanced
    [data-testimonial-slide] {
    grid-area: 1 / 1;
    width: 100%;
    max-width: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    [data-home-testimonials].is-enhanced.is-transition-ready
    [data-testimonial-slide] {
    transition:
      opacity 280ms ease,
      visibility 0s linear 280ms;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    [data-home-testimonials].is-enhanced
    [data-testimonial-slide].is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    .mcrl-home-responsive__testimonial-controls {
    display: flex;
    max-width: 920px;
    margin: 22px auto 0;
    justify-content: center;
    align-items: center;
    gap: 18px;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    .mcrl-home-responsive__testimonial-button {
    min-width: 132px;
    border: 2px solid var(--magenta);
    border-radius: 7px;
    padding: 3px 18px;
    background: #fff;
    color: var(--magenta);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    .mcrl-home-responsive__testimonial-button:hover,
  body.video-gallery-2.mcrl-home-responsive-test
    .mcrl-home-responsive__testimonial-button:focus-visible {
    background: var(--magenta);
    color: #fff;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    .mcrl-home-responsive__testimonial-button:disabled {
    border-color: var(--muted);
    background: transparent;
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.55;
  }

  body.video-gallery-2.mcrl-home-responsive-test
    .mcrl-home-responsive__testimonial-status {
    min-width: 64px;
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    text-align: center;
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  body.video-gallery-2.mcrl-home-responsive-test
    [data-home-testimonials].is-enhanced.is-transition-ready
    [data-testimonial-slide] {
    transition: none;
  }
}