/* sections/results_comparsion.php — dowód skuteczności (33% vs 80%) pod
   "Co otrzymujesz w ramach kursu". Płyta .slab-blue daje kontrast po białej
   ccf nad nią (patrz komentarz w course_corefeatures.css). */
.rc { padding: 40px 0px; }
@media (min-width: 1024px) {
  .rc {
    padding: 56px 20px;
    /* Od 1024px tło płyty ma tę samą maks. szerokość co .container-ms (1320px),
       wycentrowane — bez tego .slab rozlewał się nearly-full-bleed (margin-inline:
       12px), a treść w środku i tak była capowana przez zagnieżdżony .container-ms,
       więc po bokach zostawał szeroki pas koloru. Nie dopisujemy tu klasy .container-ms
       na sekcji — .slab ustawia margin-inline:12px bezwarunkowo (na wszystkich
       breakpointach), więc doklejenie .container-ms wymagałoby dodatkowego resetu
       width/margin na mobile, żeby uniknąć przepełnienia w poziomie; nadpisanie
       tylko od 1024px jest prostsze i nie dotyka mobile. */
    max-width: 1320px;
    margin-inline: auto;
  }
}

/* Mobile: pojedyncza kolumna, elementy w naturalnej kolejności DOM
   (title → lead → graphic → proof → cta) — bez grid-template-areas,
   auto-placement wystarcza. Od 1024px: grafika po lewej (span na 4 wiersze),
   tekst i CTA po prawej — ta sama płaska lista w DOM, zmienia się tylko
   przypisanie do obszarów (wzorzec jak w .csb-inner, sections/course_stickybar.php). */
.rc-grid {
  display: grid;
  gap: 24px;
  text-align: center;
  justify-items: center;
}

.rc-title { text-wrap: balance; }
.rc-lead, .rc-proof { max-width: 640px; }

@media (min-width: 1024px) {
  .rc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "graphic title"
      "graphic lead"
      "graphic proof"
      "graphic cta";
    column-gap: 48px;
    row-gap: 16px;
    align-items: start;
    text-align: left;
    justify-items: start;
  }
  .rc-graphic-wrap { grid-area: graphic; align-self: center; width: 100%; }
  .rc-title  { grid-area: title; }
  .rc-lead   { grid-area: lead; margin: 0; }
  .rc-proof  { grid-area: proof; }
  .rc-cta    { grid-area: cta; }
}

/* Margin ujemny na osi Y ściska tylko odstępy sąsiadujące z grafiką (lead→graphic,
   graphic→proof) bez zmiany .rc-grid gap (24px) między resztą elementów.
   max-width: 596px na każdej szerokości — z aspect-ratio 4/3 z .rc-graphic to
   dokładnie 596×447px, żądany rozmiar renderowania grafiki. */
.rc-graphic-wrap { width: 100%; max-width: 596px; margin-block: calc(-1 * var(--ds-space-2)); }
@media (min-width: 1024px) { .rc-graphic-wrap { margin-block: 0; } }

.rc-graphic {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--ds-radius-lg);
  flex-direction: column;
  gap: 8px;
}
.rc-graphic svg { opacity: 0.85; }

/* Realne zdjęcie wykresu (1600×1000, 8:5) w pudełku 4:3 z .rc-graphic —
   object-fit przycina bez zniekształcenia, tak samo jak reszta grafik na
   stronie. `height: auto` jest konieczne: bez niego atrybut HTML height="1000"
   mapuje się na wysokość w CSS i wygrywa nad aspect-ratio (który wpływa tylko
   na wymiar auto) — obrazek rozciągałby się do 1000px wysokości niezależnie
   od realnej szerokości kolumny. */
.rc-graphic-img { display: block; height: auto; object-fit: cover; }

/* .btn-solar bazowo liczy na jedną linię (typography.button-lg, line-height:1).
   Ten CTA na mobile zajmuje dwie linijki, więc rozluźniamy line-height
   i włączamy zbalansowane łamanie tekstu. */
.rc-cta {
  line-height: 1.25;
  text-wrap: balance;
  white-space: normal;
}