/*
  "Quote slider" — nested entry inside the CKEditor rich text fields.
  Template: templates/_partials/entry/quoteSlider.twig
  Rendered inside `.richText`, so a few inherited rules are reset below.
*/

.entryQuoteSlider {
  margin: 3.2rem 0;
}

@media screen and (min-width: 940px) {
  .entryQuoteSlider {
    margin: 4.8rem 0;
  }
}

.entryQuoteSlider__viewport {
  overflow: hidden;
}

/* Every slide is as tall as the tallest quote, so changing slide never reflows the
   page. Swiper's `.swiper-wrapper` is a flex row that stretches its items by default;
   all this needs is for the slide to stop forcing `height: 100%` (which Swiper sets)
   and for the card to fill the slide it sits in. `autoHeight` is off in the JS. */
.entryQuoteSlider .swiper-slide {
  height: auto;
  display: flex;
}

/* Card */

.entryQuoteSlider__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Quote at the top, author at the bottom — the gap acts as the minimum gutter
     between them when a short quote leaves slack to distribute. */
  justify-content: space-between;
  gap: 2.4rem;
  padding: 2.4rem;
  background-color: var(--color-gray-lighter);
  border-left: 0.4rem solid var(--color-yellow);
  /* The card owns its alignment. Without this it inherits the centring that
     `.sectionRichText.media-middle` applies to that section's whole text column. */
  text-align: left;
}

@media screen and (min-width: 940px) {
  .entryQuoteSlider__item {
    gap: 3.2rem;
    padding: 4.8rem;
  }
}

/* Quote.
   `.richText blockquote` adds its own yellow left border and type scale — reset it
   here so the card doesn't end up with a second accent bar. */

.richText .entryQuoteSlider__quote,
.entryQuoteSlider__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-inter);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.04rem;
  color: var(--color-gray-dark);
}

@media screen and (min-width: 940px) {
  .richText .entryQuoteSlider__quote,
  .entryQuoteSlider__quote {
    font-size: 2.4rem;
    letter-spacing: -0.048rem;
  }
}

/* Author */

.entryQuoteSlider__author {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

@media screen and (min-width: 940px) {
  .entryQuoteSlider__author {
    gap: 2.4rem;
  }
}

.entryQuoteSlider__author__image {
  position: relative;
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--color-gray-light);
}

@media screen and (min-width: 940px) {
  .entryQuoteSlider__author__image {
    width: 6.4rem;
    height: 6.4rem;
  }
}

.entryQuoteSlider__author__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entryQuoteSlider__author__name,
.entryQuoteSlider__author__meta {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-gray-dark);
}

.entryQuoteSlider__author__name {
  font-weight: 600;
}

.entryQuoteSlider__author__meta {
  font-weight: 400;
}

/* Slideshow controls */

.entryQuoteSlider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 4rem;
  margin-top: 2rem;
}

/* Dots are styled through Swiper's own custom properties rather than by
   out-selectoring its rules: `.swiper-pagination-horizontal.swiper-pagination-bullets
   .swiper-pagination-bullet` is (0,3,0) and would otherwise win. Note this file is
   registered from a nested entry, so it loads *before* richText.css and global.css —
   every rule here has to win on specificity, never on order. */
.entryQuoteSlider .entryQuoteSlider__pagination {
  --swiper-pagination-bullet-width: 1.2rem;
  --swiper-pagination-bullet-height: 1.2rem;
  --swiper-pagination-bullet-border-radius: 0.4rem;
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-inactive-color: var(--color-border);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-color: var(--color-gray-dark);

  position: static;
  display: flex;
  gap: 1.2rem;
  width: auto;
  margin: 0;
}

.entryQuoteSlider .entryQuoteSlider__pagination .swiper-pagination-bullet {
  transition: background-color 0.2s ease;
}

.entryQuoteSlider__nav {
  display: flex;
  flex-shrink: 0;
  gap: 1.2rem;
}

.entryQuoteSlider__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
  background-color: transparent;
  color: var(--color-gray-dark);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.entryQuoteSlider__button:hover {
  border-color: var(--color-gray-dark);
}

.entryQuoteSlider__button.swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.entryQuoteSlider__button svg {
  width: 1.8rem;
  height: 1.8rem;
}

.entryQuoteSlider__button--prev svg {
  transform: rotate(180deg);
}