/** Shopify CDN: Minification failed

Line 45:3 Cannot use type selector "__text-container" directly after nesting selector "&"
Line 57:3 Cannot use type selector "__media-container" directly after nesting selector "&"

**/
quote-section {
  display: block;
  background-color: var(--background_color);
  color: var(--primary_text);
}

.quote-section__wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.quote-section__image-panel {
  display: none;
}

.quote-section__swiper .product-carousel__navigation .swiper-pagination {
  position: static;
  width: 100%;
  transform: none;
  margin-top: 3rem;
}

.quote-block {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-sizing: border-box;

  &__text-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    /* Neutralize per-block margin-top (--adjustment_m) so the gap between
       image and quote stays consistent across slides on mobile. */
    & > .adjustment {
      margin-top: 0;
    }
  }

  &__media-container {
    position: relative;
    width: 100%;

    & .quote-block__link {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    & .image__container {
      border-radius: 0.5rem;
      width: 100%;
      overflow: hidden;
    }

    & .image__container .image__element,
    & .videoHolder > .video-js { /* .videoHolder: project-wide class defined in videojs.css — camelCase intentional, renaming would break all snippets/JS */
      transition: transform 500ms ease;
    }

    & .videoHolder {
      border-radius: 0.5rem;
      overflow: hidden;

      & video {
        pointer-events: none;
      }
    }

  }

  /* Line before author — second text block gets the line */
  & .heading-block + .heading-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;

    &::before {
      content: '';
      display: block;
      width: 3.75rem;
      height: 1px;
      flex-shrink: 0;
      background-color: var(--primary_text);
    }
  }
}

@media (min-width: 1025px) {
  .quote-block .heading-block + .heading-block::before {
    width: 5rem;
  }

  .quote-section__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
    align-items: start;
    row-gap: 3rem;
  }

  .quote-section__heading {
    grid-column: 1 / -1;
  }

  .quote-section__swiper {
    grid-column: 1;
    max-height: 863px; /* Figma design value */
    overflow-y: auto !important; /* Swiper sets overflow: hidden inline on init */
    scrollbar-width: none; /* Firefox */

    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari */
    }

    & .swiper-wrapper {
      flex-direction: column;
      transform: none !important; /* Swiper sets inline transform: translate3d() */
      height: auto !important; /* Swiper sets inline fixed height on the wrapper */
    }

    & .swiper-slide {
      width: 100% !important; /* Swiper sets inline width per slide */
      height: auto !important; /* Swiper sets inline height per slide */
    }

    & .product-carousel__navigation {
      display: none;
    }
  }

  quote-section[data-quote-enhanced] .quote-section__image-panel {
    display: block;
    grid-column: 2;
    position: sticky;
    top: 2rem;
    overflow: hidden;
  }

  .quote-section__panel-strip {
    display: flex;
    flex-direction: column;
    transition: transform 300ms ease-in-out;
  }

  .quote-section__panel-image {
    flex-shrink: 0;
    width: 100%;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  quote-section[data-animations-disabled] .quote-section__panel-strip {
    transition: none;
  }

  .quote-block {
    cursor: pointer;
  }

  quote-section[data-quote-enhanced] .quote-block {
    color: var(--secondary_gray);

    &.is-active {
      color: var(--primary_text);
    }

    & .heading-block + .heading-block::before {
      background-color: var(--secondary_gray);
    
    }

    &.is-active .heading-block + .heading-block::before {
      background-color: var(--primary_text);
    }
  }
  .quote-block__text-container {
    padding: 2rem 3rem;
    display: block;
    gap: normal;

    & > .adjustment {
      margin-top: var(--adjustment_d);
    }
  }
  /* Hide all block images on desktop — shown in the right panel instead */
  .quote-block__media-container,
  .quote-block__text-container .image__container,
  .quote-block__text-container .videoHolder {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-section__panel-strip,
  .quote-block__media-container .image__container .image__element,
  .quote-block__media-container .videoHolder > .video-js {
    transition: none;
  }
}