/**
 * 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);
}

/**
 * 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.
 */
/**
 * With a portrait, the slide becomes a two-column grid: face on the left,
 * quote and attribution stacked beside it.
 *
 * A grid rather than a row of flex children because the figure holds three
 * siblings -- portrait, blockquote, figcaption -- and a flex row would put
 * all three side by side. The portrait spans both rows; the text takes the
 * second column. No change to the markup.
 *
 * The text column is max-content, NOT 1fr. A 1fr column fills the whole
 * track, so the quote caps at its 800px measure inside a much wider column
 * and the pair ends up hard against the left with dead space on the right --
 * justify-content has nothing to centre. Sized to content, the two columns
 * are only as wide as they need to be and the block centres properly.
 */
.hello-testimonials__slide.has-portrait {
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  justify-content: center;
  align-items: center;
  column-gap: clamp(10px, 1.3vw, 18px);
  row-gap: 10px;
}
.hello-testimonials__slide.has-portrait .hello-testimonials__portrait {
  grid-row: 1 / 3;
}
/**
 * A narrower measure beside a portrait -- and this, not column-gap, is what
 * controls the space you actually see.
 *
 * The quote box fills its column and the text is centred inside it, so at
 * the full 800px measure the words started 123px from the portrait while the
 * box started 17px from it. Shrinking the gap moved the box edge and almost
 * nothing visible.
 *
 * text-wrap: balance comes off here, and that matters more than the measure.
 * Balance evens the line lengths, which is what you want for a centred
 * headline and exactly wrong here -- it makes every line shorter than the
 * box, and the leftover is the space beside the portrait. Greedy wrapping
 * fills each line to the edge instead.
 *
 * Measured across the six artist quotes, gap from portrait to first word:
 *
 *   balance on,  620px    33 95 76 67 24 64   spread 71
 *   balance off, 620px    33 55 43 25 24 20   spread 35
 *   balance off, 560px    26 25 24 37 18 31   spread 19
 *
 * The spread is the point. A gap that changes by 70px as the carousel moves
 * reads as broken; one that holds within 20px reads as a margin.
 */
.hello-testimonials__slide.has-portrait .hello-testimonials__quote,
.hello-testimonials__slide.has-portrait .hello-testimonials__cite {
  grid-column: 2;
  max-width: 560px;
}
.hello-testimonials__slide.has-portrait .hello-testimonials__quote {
  text-wrap: wrap;
}

.hello-testimonials__portrait {
  display: block;
  /* Sized against the quote beside it: a three-line quote at the top of the
     clamp is ~118px tall, and a portrait much under that reads as an
     afterthought rather than as half the composition. */
  width: clamp(88px, 9.5vw, 124px);
  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(88px, 9.5vw, 124px); }
}

.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;
}

/* Explicit white: the theme sets `q, blockquote { color: ... }`, and any
   matching rule beats the colour this would otherwise inherit from the band. */
.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;
  }
  /**
   * Beside the quote needs a quote's worth of width. At this size the text
   * column is narrower than the portrait is wide, so the face goes back
   * above it and everything re-centres.
   */
  .hello-testimonials__slide.has-portrait {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .hello-testimonials__slide.has-portrait .hello-testimonials__portrait {
    grid-row: auto;
  }
  .hello-testimonials__slide.has-portrait .hello-testimonials__quote,
  .hello-testimonials__slide.has-portrait .hello-testimonials__cite {
    grid-column: auto;
    text-align: center;
  }
}