/**
 * Hello Home — testimonial carousel.
 *
 * The track is a scroll-snap container, not a JS slider: swipe, momentum and
 * keyboard scrolling come from the browser, and the arrows and dots only call
 * scrollTo. Values below are the comp's.
 */

.hello-testimonials {
  --hello-pad-x: clamp(20px, 5vw, 80px);
  --hello-pad-y: clamp(48px, 5vw, 72px);
  --hello-width: 100%;
  background: #2b2b2b;
  color: #fff;
  text-align: center;
}

.hello-testimonials .hello-widget__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding-bottom: 36px;
}

.hello-testimonials__heading {
  max-width: 820px;
  margin: 0;
  font-size: clamp(36px, 4.4vw, 68px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.5px;
  text-wrap: balance;
}

/* ---- carousel ----------------------------------------------------------- */

.hello-testimonials__carousel {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  width: 100%;
  max-width: 1440px;
}
/* A single quote needs no arrows, so the track takes the whole row. */
.hello-testimonials__carousel.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.hello-testimonials__arrow {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #bdbdbd;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hello-testimonials__arrow:hover,
.hello-testimonials__arrow:focus-visible {
  color: #fff;
  outline: none;
}
.hello-testimonials__arrow:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.hello-testimonials__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  outline: none;
}
.hello-testimonials__track::-webkit-scrollbar {
  display: none;
}
/* Honour a reduced-motion preference for the snap animation too. */
@media (prefers-reduced-motion: reduce) {
  .hello-testimonials__track {
    scroll-behavior: auto;
  }
}

/**
 * The slide must be exactly one track width. Capping it at the comp's 800px
 * reading measure instead leaves the track wider than the slide, and
 * scroll-snap-align centres it -- so the previous and next quotes show either
 * side. The measure belongs on the content below, not on the slide.
 */
.hello-testimonials__slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2vw, 28px);
  margin: 0;
  padding: 0 4px;
  min-height: clamp(180px, 15vw, 220px);
}

/* Explicit white: the theme sets `q, blockquote { color: ... }`, and any
   matching rule beats the colour this would otherwise inherit from the band. */
/**
 * The artist portrait.
 *
 * Only artists have one -- students are shown without, which is how the
 * existing home page has it. The slide keeps the same minimum height either
 * way, so the carousel does not jump as it moves between the two.
 *
 * Same circular treatment as the artist grid, and the same shipped file, so
 * a face that appears in both places looks identical in both.
 */
.hello-testimonials__portrait {
  display: block;
  width: clamp(72px, 7vw, 96px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #2a2a2a;
}
@supports not (aspect-ratio: 1 / 1) {
  .hello-testimonials__portrait { height: clamp(72px, 7vw, 96px); }
}

.hello-testimonials__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The theme rounds images in post content; the wrapper already clips. */
  border-radius: 0;
}

.hello-testimonials__quote {
  width: 100%;
  max-width: 800px;
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.1vw, 34px);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}
/* The comp wraps each quote in typographic quote marks. */
.hello-testimonials__quote::before { content: "\201C"; }
.hello-testimonials__quote::after  { content: "\201D"; }

.hello-testimonials__cite {
  width: 100%;
  max-width: 800px;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 500;
  color: #fff;
}

.hello-testimonials__name {
  color: #f5c02c;
  font-weight: 700;
}

/* ---- dots --------------------------------------------------------------- */

.hello-testimonials__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.hello-testimonials__dot {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.hello-testimonials__dot.is-active {
  background: #fff;
}
.hello-testimonials__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---- mobile -------------------------------------------------------------
 * Arrows drop below the quote, beside the dots -- at this width they would
 * otherwise eat a third of the slide. Swiping still works, since the snap
 * container does not depend on them.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .hello-testimonials__carousel {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .hello-testimonials__arrow {
    display: none;
  }
  .hello-testimonials__slide {
    min-height: 0;
  }
}