@charset "UTF-8";
/*!
 * Diagnostic CTA band — pairs with template-parts/cta-diagnostic.php.
 * Figma 30867:40428. Desktop frame only; the <=767px cut is ours.
 *
 * The button is the global `.btn.btn-atom.btn-warning` from main.min.css (same
 * face as the implementation LP), so nothing here restates its box.
 */
.rs-ctad {
  background-color: var(--rs-white-pure, #fffffe);
  padding: 60px 20px;
}

/*
 * Figma paint stack, bottom to top: photo, a dark left-to-right fade that makes the
 * copy side solid, a teal wash from the top-left corner at 65% layer opacity (folded
 * into the stop alphas, since a background layer has no opacity of its own).
 * The photo arrives as --rs-ctad-img on the element: its URL is per-install.
 * Sizing is the frame's image transform: full card height, flush right, which puts
 * its left edge ~35% in, under the solid part of the dark fade.
 */
.rs-ctad__card {
  max-width: 1146px; /* site content width; the frame says 1148 (1440 - 2x146) */
  margin: 0 auto;
  padding: 60px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(64, 136, 151, 0.65) 0%, rgba(53, 113, 125, 0.065) 51.61%), linear-gradient(90deg, #34383c 41.08%, rgba(52, 56, 60, 0) 67.13%), var(--rs-ctad-img) right center/auto 100% no-repeat, #34383c;
}

.rs-ctad__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  max-width: 627px;
}

.rs-ctad__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rs-ctad__title {
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* case-study.scss sets `.rs-cs:lang(pl) h2 { hyphens: auto }` (0,2,1), which split
   the PL heading as "ustale-nia" at 1440; three classes (0,3,0) outrank it on any
   host page. Break-word above still guards 375px overflow. */
.rs-ctad .rs-ctad__content .rs-ctad__title {
  hyphens: manual;
}

.rs-ctad__title em {
  font-weight: 400;
}

/* One text node in the frame, two paragraphs: 86px = 3 x 24px lines + 14px apart. */
.rs-ctad__leads {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #ebf2f2;
  font-family: "Hind Madurai", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.rs-ctad__leads p {
  margin: 0;
}

.rs-ctad__leads strong {
  font-weight: 700;
}

/* No mobile frame. The copy covers the photo at this width, so the fade goes
   vertical and the photo becomes texture under a near-solid card. */
@media (max-width: 767px) {
  .rs-ctad {
    padding: 40px 16px;
  }
  .rs-ctad__card {
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(64, 136, 151, 0.65) 0%, rgba(53, 113, 125, 0.065) 51.61%), linear-gradient(180deg, rgba(52, 56, 60, 0.92) 0%, rgba(52, 56, 60, 0.8) 100%), var(--rs-ctad-img) 70% center/cover no-repeat, #34383c;
  }
  .rs-ctad__content {
    gap: 32px;
  }
  .rs-ctad__title {
    font-size: 28px;
  }
}