@charset "UTF-8";
/*!
 * Case-study carousel — the rules Swiper and Bootstrap do not supply.
 *
 * template-parts/case-study-carousel.php is shared markup (About, the homepage,
 * and the quiz thank-you page all render it), so its CSS lives here instead of
 * being copy-pasted per consumer — same pattern as logo-marquee.scss and
 * cta-two-path.scss. Enqueued by rs_enqueue_case_study_carousel() in
 * functions.php, which every consuming template calls.
 *
 * Unscoped on purpose: `.caseStudySwiper` only ever appears inside this one
 * partial, so there is no other page content for a page-level id/class to
 * protect against.
 *
 * What deliberately stays OUT of this file: arrow/pagination-bullet colour.
 * Both default to white — main.scss's own unscoped `.caseStudySwiper` rule sets
 * the bullet fill, and the partial's inline SVGs hardcode `fill="#FFFFFE"` — which
 * reads fine on About's dark/yellow band. Home repaints both to charcoal in its
 * own page.scss because its band is light. That is a real per-page difference
 * driven by each page's surrounding background, not duplication, so it is not
 * pulled in here.
 */
.caseStudySwiper {
  /* Pins the card's own type scale to the root rem, independent of whatever
     ambient body font-size the host page happens to set. About and Home's
     body is already 16px (root rem) so this is a no-op there. Where a host
     page's <body> is larger (e.g. 20px), the same 5-line clamp on
     .case-excerpt would render 1.25x taller purely from inherited font-size,
     which is exactly the height mismatch this file exists to prevent. `rem`, not a
     literal `16px`: the root <html> element is 16px on every page that has
     been checked (including quiz-thank-you), so it is the stable anchor —
     `body`'s own font-size is what drifts.

     line-height needs the same treatment and for the same reason: an
     inherited line-height in a unit anchored to root rem does not shrink
     back down just because font-size above was pinned. 1.5 is Bootstrap's own unmodified $line-height-base —
     what About/Home's line-height already resolves to at their 16px body
     font, so this is a no-op for them too. */
  font-size: 1rem;
  line-height: 1.5;
  /* Cards are all the same height, as in production (uniformly 725px at 1440).
     Swiper sets an explicit height per slide only when told to; with
     `height:auto` the slides shrink to their own content and the row goes
     ragged, because one excerpt is much longer than the others.
     `align-items:stretch` on the wrapper makes every slide take the tallest
     card's height, and the card then fills its slide so the "Read the Case
     Study" button stays pinned to the bottom. */
  /* The nav arrows are <button>s here (they were <div>s in the mockup) so that
     they are focusable and announced. Strip the UA button chrome Swiper does
     not expect. */
  /* These are bare <button>s, styled by base.css's button reset and the UA.
     Neutralise all of it here — including `color`, which is otherwise
     inherited and would surface the moment any child glyph used
     currentColor. */
  /* Swiper's own vendor CSS stretches the arrow: it declares
     `.swiper-button-next svg { width: 100%; height: 100% }` against a button
     sized from --swiper-navigation-size (44px). Our arrow is a 61x15 line glyph,
     so it came out 179x44 — roughly 3x its intrinsic size, and the "why are they
     so huge?" in Raman's 2026-08-12 review. Figma draws it at 60px wide
     (34905:31504), i.e. the SVG's own dimensions.

     Both the custom property and the explicit width are needed: the property is
     what Swiper's own `margin-top: calc(0px - var(--swiper-navigation-size)/2)`
     uses to centre the button on top:50%, so setting it keeps the arrow on the
     same centre line it sits on today, while the width overrides the too-narrow
     9px that the same property would otherwise compute.

     The button is 31px tall, not 15: the glyph is a 15px line, and a 15px-tall
     control is under the 24px minimum target size (WCAG 2.2 2.5.8). 8px of
     padding above and below buys a 61x31 hit area without moving the glyph —
     box-sizing is border-box, so the content box stays exactly 15px, and the
     navigation-size above is the padded height so Swiper's own centring maths
     still lands the visible arrow on the same line. */
  --swiper-navigation-size: 31px;
  /* Card text is clamped, exactly as production does it (-webkit-line-clamp 5 on
     the excerpt, 4 on the testimonial). Without this one long excerpt sets the
     height of every card in the row — the cards stay equal, but all six get
     taller than the design allows. */
  /* Italic inside an italic quote reverts to upright — see the same rule and the
     same reason in pages/case-studies.scss. This card also sets .fst-italic on the
     whole quote, so the <em> instytut's copy now carries would otherwise compute
     italic against italic and show nothing. */
  /* ---- The three-dot indicator ------------------------------------------
   *
   * Raman's ruling, 2026-08-27, agreed by Oskar: always three dots, as a POSITION
   * indicator rather than a count — left means start of the queue, middle means
   * cards both sides, right means end. Six case studies today and maybe ten
   * later, and ten dots in a row is not a control anybody can read.
   *
   * It is a MARQUEE, not three static dots — Raman's comment asks for dots that
   * travel ("passive left dot → slightly move left and disappear … new passive
   * dot shows on the right side"), and three fixed dots cannot show that: from
   * slide 2 to slide 3 both states are "middle" and nothing would move.
   *
   * So js/case-study-carousel.js builds one dot per snap position on a strip, and
   * `.rs-cs-dots` is a three-slot window over it. The JS writes `--start`; the
   * transition below does the rest. The full reasoning is in that file.
   *
   * Geometry from Figma `molecula/nav-slider` 43109:36842: three 24px slots (72px
   * total), active dot 12px, passive 10px at 0.3 opacity.
   *
   * Colour is deliberately absent. Each consumer paints these for its own band
   * (main.scss for the white default, home.scss for teal on Home's light one) and
   * this file must not overrule them — same reasoning as the arrow colour note at
   * the top of the file.
   */
  /*
   * The row itself. `left`/`width` have to be stated HERE, and this is the whole
   * of the "dots collapsed to the left" bug Raman caught on 2026-08-27.
   *
   * Swiper only supplies `left: 0; width: 100%` through
   * `.swiper-horizontal > .swiper-pagination-bullets` — classes it adds when IT
   * owns the pagination. Dropping the `pagination` config (see the JS) dropped
   * those classes with it, so the element kept `position: absolute` from the base
   * rule with no width, shrank to its 72px content and parked at the container's
   * left edge instead of centring across the row.
   *
   * `bottom` and `translateY(50%)` are deliberately NOT restated — they live in
   * main.scss and are the arrow/dot centre line Raman signed off on 2026-08-12.
   */
  /*
   * The window. `overflow: hidden` is what makes the strip a three-dot control at
   * any number of case studies — everything past the third slot is simply not
   * shown, and the dot sliding in from the right emerges from this edge.
   *
   * `inline-block` so the `text-align: center` above centres it.
   */
  /*
   * The strip. One slot of travel per advance — `--start` is an integer slot
   * index, so the 24px here and the 24px slot below can never disagree.
   *
   * `flex` rather than inline-block children: it kills the whitespace gaps
   * between inline elements, which would otherwise make the real pitch 24px plus
   * a space and drift the window out of step with `--start`.
   */
  /*
   * The size difference is `scale`, NOT width/height: the box stays 12px so each
   * slot stays exactly 24px and the strip's translation maths stays integral.
   * 0.8333 is 10/12, so the passive dot measures the frame's 10px.
   */
}
.caseStudySwiper .swiper-wrapper {
  align-items: stretch;
}
.caseStudySwiper .swiper-slide {
  height: auto;
  display: flex;
}
.caseStudySwiper .swiper-slide > .bg-white {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.caseStudySwiper .swiper-slide > .bg-white > div:last-child {
  margin-top: auto;
}
.caseStudySwiper .case-logo {
  max-height: 50px;
  width: auto;
}
.caseStudySwiper .swiper-button-next,
.caseStudySwiper .swiper-button-prev {
  width: 61px;
  height: 31px;
  /* This replaces the `padding: 0` that used to strip the UA button chrome —
     it still states the padding explicitly, it just states a hit area. */
  padding: 8px 0;
  background: none;
  border: 0;
  appearance: none;
  color: inherit;
}
.caseStudySwiper .swiper-button-next svg,
.caseStudySwiper .swiper-button-prev svg {
  width: 61px;
  height: 15px;
}
.caseStudySwiper .swiper-button-next::after,
.caseStudySwiper .swiper-button-prev::after {
  content: none;
}
.caseStudySwiper .case-excerpt,
.caseStudySwiper .case-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.caseStudySwiper .case-excerpt {
  -webkit-line-clamp: 5;
}
.caseStudySwiper .case-quote {
  -webkit-line-clamp: 4;
}
.caseStudySwiper .case-quote em {
  font-style: normal;
}
.caseStudySwiper .swiper-pagination {
  left: 0;
  width: 100%;
  text-align: center;
}
.caseStudySwiper .rs-cs-dots {
  display: inline-block;
  width: calc(var(--slots, 3) * 24px);
  overflow: hidden;
  vertical-align: middle;
  /* Three dots cannot address six positions, so this is an indicator and not
     a control. See the note in the JS. */
  pointer-events: none;
}
.caseStudySwiper .rs-cs-dots__strip {
  display: flex;
  transform: translateX(calc(var(--start, 0) * -24px));
  transition: transform 260ms ease-out;
}
.caseStudySwiper .swiper-pagination-bullet {
  flex: 0 0 12px;
  /* 12 + 6 + 6 = the frame's 24px slot. */
  margin: 0 6px;
  opacity: 0.3;
  transform: scale(0.8333);
  transition: transform 260ms ease-out, opacity 260ms ease-out;
}
.caseStudySwiper .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------------------------
   The mobile peek carousel — Figma `proof` mobile, 43109:36828.

   Its `cs-line` is a row of three cards, each the full 335 content column,
   `gap: 8`, centred, with the section clipping at the frame edge. Three 335s
   plus two 8s is 1021px of content in a 335px row, so the neighbours overflow
   and get cut — leaving exactly 12px of each one showing, at 50% opacity. That
   sliver is the affordance: it says "there is another card sideways" without
   shrinking the active one.

   The desktop config (two whole cards, no centring) is untouched above 992.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .caseStudySwiper {
    /*
     * The peek needs the track WIDER than its column, and the column here is a
     * Bootstrap `.container` whose padding is the only thing between the card
     * and the screen edge. Cancelling that padding with its own gutter variable
     * — rather than a literal 12px — is what makes this correct inside any
     * consumer's wrapper, and the fallback covers a wrapper that sets none.
     */
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  }
  /*
   * `slidesPerView: 'auto'`, so this width IS the card width. `100% - 40px`
   * rather than a literal 335: 100% is the full-bleed track, so the card is
   * always 20px in from each edge and the peek is always 20 - 8 = 12px, at 375
   * and at 320 alike. At 375 it resolves to exactly the frame's 335.
   */
  .caseStudySwiper .swiper-slide {
    width: calc(100% - 40px);
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
  }
  .caseStudySwiper .swiper-slide-active {
    opacity: 1;
  }
  /*
   * The frame's nav component is the `arrow: "no"` variant — both chevrons are
   * present but at opacity 0. Hidden rather than transparent: a 61px invisible
   * button over a card you are meant to swipe is a tap target that does
   * something unexpected. Swiping and the dots both still work.
   *
   * Confirmed as the intended mobile behaviour by Raman, 2026-08-27 — the frame
   * specifies it and the peek sliver plus swipe is the affordance. Do not add
   * mobile arrows back without a frame that draws them.
   */
  .caseStudySwiper .swiper-button-next,
  .caseStudySwiper .swiper-button-prev {
    display: none;
  }
  /* ---- The card, built to its 375 frame -----------------------------------
   *
   * Figma `CS card - minimal - mobile` (43109:36840), 335x587. Raman, 2026-08-27:
   * rebuild it accordingly, precise on text styles and gaps, everything from the
   * design system.
   *
   * The height was never a text-length problem. The card rendered 690 against the
   * frame's 587 because it carried DESKTOP type and Bootstrap's spacing utilities
   * at 375 — the logo alone was 50px against the frame's 24, and the testimonial
   * box 24px of padding against 16. An earlier pass clamped the excerpt to 3 lines
   * to buy room; that is reverted here, because the frame asks for FIVE and gets
   * them once the real numbers are in.
   *
   * Every rule below is one number from that frame. It is scoped to
   * `.caseStudySwiper` and lives inside this media query, so the desktop card the
   * utilities render is untouched.
   *
   * SPACING IS PER-ELEMENT, not one `gap`. The frame nests two groups — `title`
   * (gap 16) and `text` (gap 10) with 10 between them — and the markup is flat, so
   * the sequence is 16 / 8 / 10 / 10 / 10 and a single gap cannot express it.
   * Bootstrap's own margins are zeroed and restated rather than fought.
   *
   * WHY SO MUCH `!important`, WHICH IS NOT USUALLY THE ANSWER
   * Bootstrap 5 ships its spacing and typography utilities WITH `!important` —
   * `p-3` is `padding: 1rem !important`, and so are `fs-5`, `fw-semibold`, `my-3`,
   * `mb-2`, `mb-3`, `mb-4`, `px-3`, `py-1`, `py-2`, `fs-6`, `lh-sm`, `ms-3` and
   * `rounded-3`. The first pass at this block was written without it and half the
   * rules silently lost: measured on staging, the card still had 16px padding, an
   * 8px radius and an 18.4px/600 title. No amount of extra specificity beats
   * `!important`, so the only alternatives are to match it or to strip the
   * utilities out of the markup — and stripping them would change the desktop card,
   * which is signed off.
   *
   * So it is here on exactly the declarations that collide with one, and nowhere
   * else. Anything without it (gap, height, colour, radius on the quote box) had no
   * competing utility and works on specificity alone. If a utility ever comes off
   * the markup, the matching `!important` should come off with it.
   *
   * SELECTORS ARE ONE LEVEL DEEPER THAN THEY NEED TO LOOK, also on purpose.
   * main.scss carries `.container .fs-5 { font-size: 1.15rem !important }` inside a
   * `(max-width: 991px)` query — the same 0,2,0 specificity a bare
   * `.caseStudySwiper .cs-card__title` would have, and `!important` too, so the
   * winner came down to stylesheet order and this file lost: the title measured
   * 18.4px with a 15px `!important` rule sitting right there. Qualifying every
   * child with `.cs-card` takes them to 0,3,0 and the tie disappears. Do not
   * "simplify" them back to one class.
   */
  .caseStudySwiper .cs-card {
    /* Frame: pad 20, radius 12. `p-3` is 16 and `rounded-3` is 8. */
    padding: 20px !important;
    border-radius: 12px !important;
  }
  /* Frame `title` gap: 16 between the logo row and the heading. */
  .caseStudySwiper .cs-card .cs-card__logo {
    margin: 0 0 16px !important;
  }
  /* Frame: the logo row is 24 tall and the image fills it. 50px was the desktop
     cap and the single biggest contributor to the overshoot. */
  .caseStudySwiper .cs-card .cs-card__logo .case-logo {
    max-height: none;
    height: 24px;
    width: auto;
  }
  /* Card title: 700 15px/1.4 Montserrat, black-prime. `fs-5` + `fw-semibold` was
     18.4px at 600. Frame `heading` gap: 8 below it. */
  .caseStudySwiper .cs-card .cs-card__title {
    margin: 0 0 8px;
    color: var(--rs-black-prime, #34383c);
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4;
  }
  /*
   * The tag row. The frame wraps its pills with gap 4 on BOTH axes; the markup
   * leaned on `mb-2` per pill for the second row, which is 8 and only vertical.
   * A real flex row with one gap replaces it, and the per-pill margin is zeroed.
   */
  .caseStudySwiper .cs-card .cs-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 10px !important;
  }
  /* Frame: pad 4/12, fill grey/light/50, pill radius, label 400 12px/1.4.
     `bg-light` is Bootstrap's #f8f9fa, one step off the frame's #f9f9f9, and it
     is a utility so it needs the same weapon it was declared with. */
  .caseStudySwiper .cs-card .cs-card__tag {
    margin: 0 !important;
    padding: 4px 12px !important;
    background-color: var(--rs-grey-light-50, #f9f9f9) !important;
    color: var(--rs-black-prime, #34383c);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
  }
  /* Excerpt: 400 14px/1.5 Hind Madurai, black-second. Five lines is the frame's
     own 105px box, restored. */
  .caseStudySwiper .cs-card .case-excerpt {
    margin: 0 0 10px !important;
    color: var(--rs-black-second, #5d636a);
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 5;
  }
  /* Frame `testimon`: pad 16, gap 8, fill #F0F8F9, radius 4. `p-4` is 24 — the
     other big contributor — and `bg-info bg-opacity-10` is a Bootstrap tint. */
  .caseStudySwiper .cs-card .cs-card__quotebox {
    margin: 0 0 10px !important;
    padding: 16px !important;
    border-radius: 4px;
    background-color: #f0f8f9 !important;
  }
  /* Frame: avatar and name sit 8 apart, not `ms-3`'s 16. */
  .caseStudySwiper .cs-card .cs-card__who {
    gap: 8px;
    margin: 0 0 8px !important;
  }
  .caseStudySwiper .cs-card .cs-card__whotext {
    margin-left: 0 !important;
  }
  /* Frame: 48px, 1px white stroke. The markup asks for 60 and `border-2`. */
  .caseStudySwiper .cs-card .cs-card__avatar img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-width: 1px !important;
  }
  /* Frame `name` gap: 2. Both lines are Hind Madurai, NOT Montserrat — the
     markup's `font-montserrat` on the name is a desktop choice. */
  .caseStudySwiper .cs-card .cs-card__name {
    margin: 0 0 2px !important;
    color: var(--rs-black-prime, #34383c);
    font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5;
  }
  .caseStudySwiper .cs-card .cs-card__role {
    color: var(--rs-black-prime, #34383c);
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.5 !important;
  }
  /* Quote Card Text: 400 14px/1.65 Lora, black-prime. `fst-italic` in the markup
     supplies the italic — only Lora 400 normal and italic are self-hosted, so do
     not ask this for 700. Five lines is the frame's 115px cap. */
  .caseStudySwiper .cs-card .case-quote {
    color: var(--rs-black-prime, #34383c);
    font-family: var(--rs-font-serif, Lora, ui-serif, Georgia, serif);
    font-size: 14px;
    line-height: 1.65;
    -webkit-line-clamp: 5;
  }
  /*
   * The CTA. 44px is the frame's height AND the mobile button atom's — Raman's
   * 2026-08-17 ruling, so the two agree here and neither has to bend.
   * `margin-top: auto` from the base rule still pins it to the bottom of a card
   * stretched by a taller sibling, which is what `align-items: stretch` does to
   * every slide and what the frame draws too (all three cards are 587).
   */
  .caseStudySwiper .cs-card .cs-card__cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0 10px 0 20px !important;
    border-radius: 4px;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1;
  }
  /* The span carries `py-1` and the icon `ms-3`; the flex gap above owns the
     spacing now, so both are neutralised rather than left to add to it. */
  .caseStudySwiper .cs-card .cs-card__cta .btn > span {
    padding: 0 !important;
  }
  .caseStudySwiper .cs-card .cs-card__cta .btn > i {
    margin-left: 0 !important;
    font-size: 14px !important;
    line-height: 1;
  }
}