.wp-block-formasuisse-testimonials-slider {
  /* Variant theme variables — overridden per data-variant below. */
  --ts-bg: var(--color-primary, #062343);
  --ts-ink: #ffffff;
  --ts-sub: rgba(255, 255, 255, 0.72);
  --ts-faint: rgba(255, 255, 255, 0.55);
  --ts-rule: rgba(255, 255, 255, 0.18);
  --ts-eyebrow: var(--color-accent, #328efe);
  --ts-portrait-bg: rgba(255, 255, 255, 0.08);
  --ts-dot-active: var(--color-accent, #328efe);
  /* Monogram is slightly softened against dark bands (navy + blue inherit). */
  --ts-monogram: rgba(255, 255, 255, 0.85);
  /* Tagline "sticky-note" card — dark-band defaults (navy + blue inherit). */
  --ts-note-bg: rgba(255, 255, 255, 0.05);
  --ts-note-border: rgba(255, 255, 255, 0.15);
  --ts-note-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

  background: var(--ts-bg);
  color: var(--ts-ink);
  padding: clamp(40px, 5.5vw, 76px) 0;
  outline: none;
}

.wp-block-formasuisse-testimonials-slider[data-variant="blue"] {
  --ts-bg: var(--color-accent, #328efe);
  --ts-eyebrow: var(--color-primary, #062343);
  --ts-portrait-bg: rgba(255, 255, 255, 0.16);
  --ts-dot-active: var(--color-primary, #062343);
}

.wp-block-formasuisse-testimonials-slider[data-variant="light"] {
  --ts-bg: var(--color-surface, #ffffff);
  --ts-ink: var(--color-primary, #062343);
  --ts-sub: var(--color-text-sub, #5a5a5a);
  --ts-faint: var(--color-text-muted, #999999);
  --ts-rule: var(--color-rule, #d8dde3);
  --ts-eyebrow: var(--color-accent, #328efe);
  --ts-portrait-bg: var(--color-surface-pill, #f0f3f7);
  --ts-dot-active: var(--color-primary, #062343);
  --ts-monogram: var(--ts-ink);
  --ts-note-bg: var(--color-surface, #ffffff);
  --ts-note-border: var(--color-rule, #e3e6ea);
  --ts-note-shadow: 0 6px 16px rgba(6, 35, 67, 0.07);
}

.wp-block-formasuisse-testimonials-slider[data-variant="soft"] {
  --ts-bg: var(--color-surface-pill, #f0f3f7);
  --ts-ink: var(--color-primary, #062343);
  --ts-sub: var(--color-text-sub, #5a5a5a);
  --ts-faint: var(--color-text-muted, #999999);
  --ts-rule: var(--color-rule, #d8dde3);
  --ts-eyebrow: var(--color-accent, #328efe);
  --ts-portrait-bg: var(--color-surface, #ffffff);
  --ts-dot-active: var(--color-primary, #062343);
  --ts-monogram: var(--ts-ink);
  --ts-note-bg: var(--color-surface, #ffffff);
  --ts-note-border: var(--color-rule, #e3e6ea);
  --ts-note-shadow: 0 6px 16px rgba(6, 35, 67, 0.07);
}

.wp-block-formasuisse-testimonials-slider .fs-testi__head {
  margin-bottom: clamp(22px, 3vw, 38px);
}

.wp-block-formasuisse-testimonials-slider .fs-testi__eyebrow {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ts-eyebrow);
  margin-bottom: 12px;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  color: var(--ts-ink);
}

.wp-block-formasuisse-testimonials-slider .fs-testi__stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.wp-block-formasuisse-testimonials-slider .fs-testi__viewport {
  min-width: 0;
  display: grid;
}

/* All slides are stacked in a single grid cell so the viewport always reserves
   the height of the tallest quote. The active slide fades in on top while the
   others stay in layout (holding the height) but hidden via `visibility` —
   which also drops them from the a11y tree and tab order. This keeps the arrows
   and dots from reflowing (and the screen from flickering) between slides. */
.wp-block-formasuisse-testimonials-slider .fs-testi__slide {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  /* Fixed first track (= tagline-card width) so the quote column always starts
     at the same x, whether the slide leads with a photo/monogram circle or the
     wider tagline card. With `auto` the two widths differed and the quote text
     shifted between slides — jarring when switching and, stacked in print,
     visibly misaligned. */
  grid-template-columns: clamp(150px, 18vw, 200px) 1fr;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
  visibility: hidden;
  opacity: 0;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__slide.is-active {
  visibility: visible;
  opacity: 1;
  animation: fsTestiFade 380ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-formasuisse-testimonials-slider .fs-testi__slide.is-active {
    animation: none;
  }
}

@keyframes fsTestiFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.wp-block-formasuisse-testimonials-slider .fs-testi__portrait {
  /* Fills the fixed first track (= tagline-card width) so the photo circle and
     the tagline card read at the same size — the design's synced treatment. */
  width: clamp(150px, 18vw, 200px);
  height: clamp(150px, 18vw, 200px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--ts-portrait-bg);
  border: 2px solid var(--ts-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__monogram {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ts-monogram);
  letter-spacing: 0.02em;
}

/* No-photo portrait can instead show a short tagline (opt-in per item via
   `tagline`). Rendered as a slightly-rotated "sticky-note" card with an accent
   top rule, rather than the circular portrait. */
.wp-block-formasuisse-testimonials-slider .fs-testi__portrait.is-quote {
  box-sizing: border-box;
  width: clamp(150px, 18vw, 200px);
  height: auto;
  padding: clamp(14px, 1.6vw, 18px);
  background: var(--ts-note-bg);
  border: 1px solid var(--ts-note-border);
  border-top: 2px solid var(--ts-eyebrow);
  border-radius: 0;
  overflow: visible;
  flex-direction: column;
  gap: 5px;
  transform: rotate(-1.5deg);
  box-shadow: var(--ts-note-shadow);
}
.wp-block-formasuisse-testimonials-slider .fs-testi__qmark {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 0.5;
  color: var(--ts-eyebrow);
}
.wp-block-formasuisse-testimonials-slider .fs-testi__tagline {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ts-ink);
  text-wrap: balance;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__body {
  min-width: 0;
}

/* Single testimonial — arrows/dots are already dropped in render.php (count===1).
   `.is-single` presents the lone quote as a centered spotlight so it reads as a
   deliberate single testimonial, not a carousel missing its second slide. This
   is the collapse target the standalone `quote` block used to serve. */
.wp-block-formasuisse-testimonials-slider.is-single .fs-testi__slide {
  max-width: 880px;
  margin-inline: auto;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__quote {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem);
  line-height: 1.42;
  color: var(--ts-ink);
  text-wrap: pretty;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__cite {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: 18px;
  border-top: 1px solid var(--ts-rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-style: normal;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ts-ink);
}

.wp-block-formasuisse-testimonials-slider .fs-testi__role {
  font-size: 0.9rem;
  color: var(--ts-sub);
}

.wp-block-formasuisse-testimonials-slider .fs-testi__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  color: var(--ts-ink);
  background: transparent;
  border: 1px solid var(--ts-rule);
  transition:
    background 150ms ease-out,
    border-color 150ms ease-out;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__arrow:hover {
  background: var(--ts-rule);
}

.wp-block-formasuisse-testimonials-slider .fs-testi__dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

.wp-block-formasuisse-testimonials-slider .fs-testi__dot {
  width: 9px;
  height: 9px;
  /* Padding grows the tappable area to the 24×24px target-size minimum
     without enlarging the visible dot: box-sizing:content-box keeps width/
     height as the visual size, background-clip:content-box keeps the fill
     out of the padding. */
  padding: 8px;
  box-sizing: content-box;
  border-radius: var(--radius-sm, 3px);
  border: 0;
  cursor: pointer;
  background: var(--ts-faint);
  background-clip: content-box;
  opacity: 0.5;
  transition:
    opacity 150ms ease-out,
    width 150ms ease-out,
    background 150ms ease-out;
}

.wp-block-formasuisse-testimonials-slider .fs-testi__dot.is-active {
  opacity: 1;
  width: 26px;
  background: var(--ts-dot-active);
  background-clip: content-box;
}

@media (max-width: 600px) {
  .wp-block-formasuisse-testimonials-slider .fs-testi__slide {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .wp-block-formasuisse-testimonials-slider .fs-testi__cite {
    align-items: center;
  }
  .wp-block-formasuisse-testimonials-slider .fs-testi__arrow {
    width: 40px;
    height: 40px;
  }
  .wp-block-formasuisse-testimonials-slider .fs-testi__stage {
    gap: 10px;
  }
}

/* The global `.wrapper` clips with `overflow:hidden` (redundant here — it also
   sets `display:flow-root`, which already clears floats). That clip can shave
   the edge navigation arrows (and their focus ring) at some widths, so let this
   slider's wrapper overflow visibly. */
.wp-block-formasuisse-testimonials-slider .wrapper {
  overflow: visible;
}

/* Box width: by default the coloured band is full-bleed (the theme sets no
   content-width constraint). `.is-boxed` instead caps the whole band at the
   content-pane width and centres it, so it reads as a contained section aligned
   to the page's content column — with an inner gutter so text isn't flush to
   the coloured edge. */
.wp-block-formasuisse-testimonials-slider.is-boxed {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
.wp-block-formasuisse-testimonials-slider.is-boxed .wrapper {
  width: 100%;
  padding-inline: clamp(24px, 4vw, 48px);
}

@media (max-width: 1199px) {
  .wp-block-formasuisse-testimonials-slider .wrapper {
    padding: 0 clamp(20px, 4vw, 56px);
  }
}

/* Print: no JS carousel on paper — take every slide out of the stacked grid
   cell, make it visible, and drop the arrows / dots. */
@media print {
  /* Browsers strip the navy band background when printing, leaving white text on
     white. Recolour to the dark-on-white "light" variant so the quotes are
     readable. Uses [data-variant] to outrank the per-variant colour rules. */
  .wp-block-formasuisse-testimonials-slider[data-variant] {
    --ts-bg: #ffffff;
    --ts-ink: var(--color-primary, #062343);
    --ts-sub: var(--color-text-sub, #5a5a5a);
    --ts-faint: var(--color-text-muted, #999999);
    --ts-rule: var(--color-rule, #d8dde3);
    --ts-eyebrow: var(--color-primary, #062343);
    --ts-portrait-bg: var(--color-surface-pill, #f0f3f7);
    --ts-monogram: var(--color-primary, #062343);
    --ts-note-bg: var(--color-surface, #ffffff);
    --ts-note-border: var(--color-rule, #e3e6ea);
    --ts-note-shadow: none;
  }
  /* Drop the ≤1199px side gutter (paper width triggers it) so the band isn't
     inset — the @page margin already frames the page. */
  .wp-block-formasuisse-testimonials-slider .wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  .wp-block-formasuisse-testimonials-slider .fs-testi__viewport {
    display: block;
  }
  .wp-block-formasuisse-testimonials-slider .fs-testi__slide {
    grid-area: auto;
    visibility: visible;
    opacity: 1;
    animation: none;
    break-inside: avoid;
    /* Rule between stacked testimonials so it's clear which author belongs to
       which quote (each slide already has an internal quote/author divider). */
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-rule, #d8dde3);
  }
  /* The active slide keeps its fade-in (higher specificity than the rule above);
     its `from` keyframe is opacity:0, which print captures — making that one
     testimonial vanish on paper. Cancel the animation here so it stays visible. */
  .wp-block-formasuisse-testimonials-slider .fs-testi__slide.is-active {
    animation: none;
  }
  .wp-block-formasuisse-testimonials-slider .fs-testi__slide:last-of-type {
    border-bottom: none;
  }
  .wp-block-formasuisse-testimonials-slider .fs-testi__arrow,
  .wp-block-formasuisse-testimonials-slider .fs-testi__dots {
    display: none;
  }
}