/* Kingdom Advisors Elementor Widgets — Testimonial Line Reveal
   Arrows in one column, the testimonial in the other. Slides are stacked in a single CSS grid cell so
   the block is as tall as the longest quote and never jumps height between testimonials.

   Controlled values arrive as `--kaw-tlr-*` variables the stylesheet reads, never as properties the
   control writes onto an element this file also styles — see the "Elementor specificity trap" note in
   the rundown for why that distinction is load-bearing. */

.kaw-tlr {
  --kaw-tlr-w: 800px;          /* testimonial column width */
  --kaw-tlr-col-gap: 40px;     /* arrows → testimonial */
  --kaw-tlr-meta-x: 24px;      /* counter → heading, side by side */
  --kaw-tlr-meta-gap: 96px;    /* heading row → quote */
  --kaw-tlr-cite-gap: 88px;    /* quote → photo */
  --kaw-tlr-avatar: 84px;      /* photo diameter */
  --kaw-tlr-avatar-gap: 22px;  /* photo → name */
  --kaw-tlr-arrows-order: 2;   /* mobile stack: 2 = arrows under the testimonial, 0 = above it */
  width: 100%;
}

.kaw-tlr__inner {
  display: flex;
  flex-direction: row;         /* Arrows Side control flips this to row-reverse */
  align-items: flex-start;
  gap: var(--kaw-tlr-col-gap);
  width: 100%;
}

/* Takes the space the arrows leave; the column inside it is what the width control sizes, so
   Testimonial Position can slide that column around inside the leftover space. */
.kaw-tlr__main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

.kaw-tlr__col {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--kaw-tlr-w);
  min-width: 0;
}

/* ------------------------------------------------------------------ Heading row */
.kaw-tlr__meta {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 0.4em var(--kaw-tlr-meta-x);
  margin: 0 0 var(--kaw-tlr-meta-gap);
}

/* A FLEX ROW WITH A GAP, not `word-spacing`.
   The gaps in "1 of 8" used to be set with `word-spacing`, which widens the space CHARACTERS
   between the three spans — so the result depended on how each engine measures a collapsed
   whitespace node in this font, and the browsers disagree. A value tuned to look right in Chrome
   over-collapsed in Safari and ran the glyphs together. A `gap` is a definite length and renders
   identically everywhere.

   Whitespace-only text nodes between flex items generate no boxes, so the source indentation
   between the spans contributes nothing and the gap is the only spacing. Those nodes are still in
   the DOM, so a screen reader still reads "1 of 8" rather than "1of8" — verified in the browser's
   accessibility tree, because that distinction is the one thing this change could have broken. */
.kaw-tlr__counter {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--kaw-tlr-counter-gap, 4px);
  font-size: 16.65px;
  line-height: 20px;
  font-weight: 750;
  letter-spacing: 0.5px;
  color: rgba(5, 28, 44, 0.5);
  font-variant-numeric: tabular-nums;   /* the number must not shuffle width as it counts up */
}

.kaw-tlr__eyebrow {
  margin: 0;
  font-size: 16.65px;
  line-height: 20px;
  font-weight: 550;
  letter-spacing: 0.5px;
  color: #051C2C;
}

/* ------------------------------------------------------------------ Slides */
.kaw-tlr__list {
  display: grid;               /* every slide in cell 1/1 → height of the tallest, no jump */
  position: relative;
  width: 100%;
}
.kaw-tlr__list:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

.kaw-tlr__item {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.kaw-tlr__item.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The slide is a <div role="group"> and the attributed quote is a <figure> inside it, because a figure
   that has a figcaption may not carry a role. The figure gets the slide's old column layout and loses the
   browser's default figure margin, so the quote, photo and name sit where they did when the slide itself
   was the figure. */
.kaw-tlr__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.kaw-tlr__quote {
  margin: 0;
  width: 100%;
  /* Figma is 33.3px/50 at desktop. clamp() so the untouched default is still sensible on a phone —
     the Quote Typography control overrides this outright the moment it is used, per device. */
  font-size: clamp(22px, 2.6vw, 33.3px);
  line-height: 1.5;
  font-weight: 650;
  letter-spacing: 0.5px;
  color: #051C2C;
  quotes: none;                /* the quote marks are part of the authored copy */
}
.kaw-tlr__quote p { margin: 0; }

/* One split line. Block so each occupies its own row; the transform/filter are what animate. */
.kaw-tlr__line {
  display: block;
  transform-origin: 50% 100%;
}
/* will-change is applied only while a transition runs (JS toggles .is-animating) — leaving it on
   permanently would keep a compositor layer per line for the life of the page. */
.kaw-tlr__list.is-animating .kaw-tlr__line,
.kaw-tlr__list.is-animating .kaw-tlr__avatar { will-change: transform, opacity, filter; }

/* ------------------------------------------------------------------ Attribution */
.kaw-tlr__cite {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--kaw-tlr-avatar-gap);
  margin: var(--kaw-tlr-cite-gap) 0 0;
}

.kaw-tlr__avatar {
  flex: none;
  display: block;
  width: var(--kaw-tlr-avatar);
  height: var(--kaw-tlr-avatar);
  border-radius: 50%;
  overflow: hidden;
}
.kaw-tlr__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
}

.kaw-tlr__who { display: flex; flex-direction: column; gap: 2px; }
.kaw-tlr__name {
  font-size: 16.65px;
  line-height: 20px;
  font-weight: 750;
  letter-spacing: 0.5px;
  color: #051C2C;
}
.kaw-tlr__role {
  font-size: 16.65px;
  line-height: 20px;
  font-weight: 550;
  letter-spacing: 0.5px;
  color: rgba(5, 28, 44, 0.5);
}

/* ------------------------------------------------------------------ Mobile
   JS sets data-mobile from the chosen breakpoint (a media query cannot read a data attribute).
   Order is counter+heading, quote, photo, arrows — the arrows drop underneath the whole testimonial.
   !important because Arrows Side writes `flex-direction` at the same specificity and loads later;
   below the breakpoint the stacked order is not a value the user is choosing. */
.kaw-tlr[data-mobile] .kaw-tlr__inner {
  flex-direction: column !important;
  align-items: stretch;
}
.kaw-tlr[data-mobile] .kaw-tlr__main { order: 1; }
.kaw-tlr[data-mobile] .kaw-arrows { order: var(--kaw-tlr-arrows-order); }
/* NOTE: no `max-width: 100%` override here on purpose. It looks harmless but it out-specifies the
   responsive Testimonial Width control, so a per-device width would silently do nothing — and it was
   never needed anyway, since the column is width:100% and a max-width wider than the screen is inert. */
.kaw-tlr[data-mobile] .kaw-tlr__list { touch-action: pan-y; }   /* swipe sideways, never trap scroll */

/* ------------------------------------------------------------------ No-JS / editor fallback
   Without JS the lines are never split and nothing is animated, so every slide must simply be
   readable and stacked rather than hidden on top of each other. */
.kaw-tlr:not(.is-ready) .kaw-tlr__list { display: block; }
.kaw-tlr:not(.is-ready) .kaw-tlr__item {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.kaw-tlr:not(.is-ready) .kaw-tlr__item + .kaw-tlr__item { margin-top: 3em; }
.kaw-tlr:not(.is-ready) .kaw-arrows { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kaw-tlr__line { filter: none !important; }
}