@charset "UTF-8";
/*!
 * Testimonials — template-parts/testimonials.php.
 *
 * Figma "testimonials" 43031:36010 / list 43031:36012. A shared component, so this
 * compiles to its own css/testimonials.min.css and is enqueued on demand by
 * `rs_enqueue_testimonials()` — the same shape as the case-study carousel. It does
 * NOT go in main.scss: nothing should pay for a component it does not render.
 *
 * THE ONE WIDTH
 * The frame is 1440 with 147 side padding, i.e. a 1146 content box — exactly
 * `$container-max-widths.xl`. Bootstrap's `.container` spends 12px of that on its own
 * gutter, so the gutter is zeroed above `lg` here, as on every hand-built section of
 * the Asana Consulting page. Restored below `lg`, where `.container` is a percentage
 * and the gutter is the only thing keeping text off the screen edge.
 *
 * TYPE
 * The quote is Lora 400 — the only weight self-hosted (see css/rs-fonts.css), and the
 * design asks for exactly that, so there is no missing-face problem here. latin-ext is
 * covered, which matters: some of these names and quotes are Polish.
 */
.rs-testimonials {
  /* Figma's own #F9F9F9. Deliberately NOT --rs-white-pure (#FFFFFE): the cards are
     that, and the band has to sit a shade under them or the cards stop reading as
     cards. There is no token for this value — it is the frame's, not the system's. */
  padding: 90px 0;
  background-color: #f9f9f9;
}

.rs-testimonials__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.rs-testimonials__title {
  /* 754 is the frame's own text box, not a wrapping constraint — the string is one
     line at 40px. Kept so a longer title breaks where the design would break it. */
  width: 100%;
  max-width: 754px;
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.rs-testimonials__cols {
  display: flex;
  /* Columns are different heights by design; without this they would stretch to the
     tallest and the cards inside would spread. */
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.rs-testimonials__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}

/* `figure` carries a global `margin: 0 0 1rem` from the parent theme — as does
   `blockquote` below. Both are zeroed here rather than trusted. */
.rs-testimonials__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--rs-white-pure, #fffffe);
}

.rs-testimonials__quote {
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-serif, Lora, ui-serif, Georgia, serif);
  font-size: 16px;
  font-weight: 400;
  /*
   * 26px, NOT the 1.65 (= 26.4px) the extraction reports. All twelve quote boxes in
   * the frame are exact multiples of 26 — 78, 104, 130, 156, 208, 234, 260 — and
   * none is a multiple of 26.4. So 26 is the line box Figma actually laid out with;
   * 26.4 makes every card ~1.5% tall and pushes the longer ones a whole line over.
   */
  line-height: 26px;
}

/*
 * The parent theme's reset.css styles EVERY <figcaption> italic (plus 16px/1.4 and
 * #333). Figma has the name and the role both upright, and italic was inherited by
 * both — Montserrat and Hind Madurai have no italic cut self-hosted, so the browser
 * was synthesising a slanted one. Caught by looking at the render, not by measuring:
 * an oblique of the same face keeps every box the same size, so the geometry checks
 * all passed while it was wrong.
 *
 * `figcaption` is qualified onto the selector for the same reason as the container
 * gutter above — a bare class beats `figcaption` (0,0,1) today, but this component is
 * enqueued on demand and does not get to assume it prints last.
 */
figcaption.rs-testimonials__person {
  display: flex;
  align-items: center;
  gap: 20px;
  font-style: normal;
}

/*
 * 90px circle. Two elements, matching Figma's atom/avatars (a frame and the photo
 * inside it) rather than one image element carrying both:
 *
 * - `flex: 0 0 90px` on the frame, because the theme's global `img { max-width: 100% }`
 *   would otherwise let a narrow column squeeze the avatar into an oval.
 * - `overflow: hidden` clips the photo to the circle, so the radius does not have to be
 *   repeated on the image and a non-square source cannot bleed past the disc.
 *
 * NO FILL ON THE DISC — Raman, 2026-08-27: "on the testimonials section I see an odd
 * redish border around avatar but we do not use any borders around avatars in this
 * section".
 *
 * It was coral (--rs-coral-00), meant as the disc the photo sits on and as the
 * fallback for the one entry in the frame that has no photo. In practice the photos
 * do not quite fill the circle — they are `object-fit: cover` on sources whose edges
 * are soft or not perfectly square — so the fill showed as a thin red ring on EVERY
 * avatar, which reads as a border nobody asked for. One deliberate fallback is not
 * worth a stray outline on all twelve.
 *
 * If a photo-less entry ever needs a visible disc again, give it its own class rather
 * than putting the fill back here.
 */
.rs-testimonials__avatar {
  display: block;
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
  overflow: hidden;
  border-radius: 50%;
}

.rs-testimonials__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-testimonials__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rs-testimonials__name {
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.rs-testimonials__role {
  color: var(--rs-black-second, #5d636a);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* ------------------------------------------------------------------
   The mobile lazy reveal — Figma comment on 29809:25768.

   All twelve cards are always in the DOM. `.is-clamped` is added by
   js/testimonials.js, never by this file: with JS off the wall renders whole,
   which is the right failure. The clamp starts at 1000px and each tap adds
   another 1000.

   The fade is the frame's own — a 180deg gradient that stays transparent to 70%
   and reaches the band colour by 89.7%, over the clamped 1000px. It sits on the
   wrapper, not inside the scroller, so it hugs the cut rather than scrolling with
   the cards.
   ------------------------------------------------------------------ */
.rs-testimonials__reveal {
  position: relative;
}

.rs-testimonials.is-clamped .rs-testimonials__reveal {
  max-height: var(--rs-tm-shown, 1000px);
  overflow: hidden;
}

.rs-testimonials.is-clamped .rs-testimonials__reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(249, 249, 249, 0) 70%, #f9f9f9 89.7%);
}

/*
 * The design system's outlined button: 2px inside stroke, no fill.
 *
 * Pinned to the bottom of the clipped box rather than placed under it — that is
 * where the frame puts it (y=956 of a 1000px viewport), sitting over the fade. It
 * rides the cut as the clamp grows, so it is always exactly where the wall ends.
 */
.rs-testimonials.is-clamped .rs-testimonials__more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.rs-testimonials__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 15px 20px;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #408897;
  background: transparent;
  color: #408897;
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.rs-testimonials__more[hidden] {
  display: none;
}

.rs-testimonials__more i {
  font-size: 14px;
  line-height: 1;
}

@media (min-width: 992px) {
  /*
   * See the header: `.container`'s own 12px gutter is not in the frame.
   *
   * `.container` is qualified onto the selector deliberately. A bare
   * `.rs-testimonials__inner` ties Bootstrap's `.container` at (0,1,0) and the winner
   * is then whichever sheet prints last — which for a component enqueued on demand is
   * not something this file gets to know. It lost that tie on first build: columns
   * measured 354 instead of 362 and every long card wrapped a line early.
   */
  .container.rs-testimonials__inner {
    --bs-gutter-x: 0;
  }
}
/*
 * Below lg the three columns stack. That is a legibility floor, not a design — the
 * 375 frame for this section has not been drawn. The wall becomes one column in
 * source order, which is the order the copy was written in.
 */
@media (max-width: 991.98px) {
  .rs-testimonials {
    padding: 40px 0;
  }
  .rs-testimonials__inner {
    gap: 40px;
  }
  .rs-testimonials__title {
    font-size: 30px;
    line-height: 1.2;
  }
  .rs-testimonials__cols {
    flex-direction: column;
  }
  .rs-testimonials__col {
    gap: 20px;
    width: 100%;
  }
}