/* ==========================================================================
   CALLA — Dla kogo (single): Case study (karuzela kart realizacji)
   Nowy komponent (patrz .claude/brief-dla-kogo-single.md, sekcja 5).

   Struktura wg referencji Figmy (korekta Mike'a, 2026-08-25): u góry DWIE
   kolumny tekstu — lewo: eyebrow/H2/CTA/strzałki (.heading-col), prawo:
   opis/pigułki korzyści (.text-col). Karuzela kart (.viewport) jest
   OSOBNYM rzędem PEŁNEJ szerokości sekcji POD tekstem, nie w wąskiej
   kolumnie obok niego — pierwsza wersja komponentu miała to błędnie jako
   dwie kolumny (tekst | karuzela) obok siebie.

   Diagnoza buga "karta ucięta na prawej krawędzi" (brief 5.5): powodował go
   full-bleed (100vw + margin:-50vw) połączony z html{overflow-x:hidden}
   (global.css) — na desktopie z widocznym paskiem przewijania rzeczywisty
   viewport jest węższy niż 100vw, nadmiar jest cicho przycinany. Fix: ten
   komponent NIGDY nie liczy własnej szerokości względem 100vw — .dlakogo-
   case-study__viewport zostaje wewnątrz .container, dokładnie jak
   .solution-carousel__inner / .realizacje-cards__inner. Peek karty poza
   .container jest bezpieczny, bo .container ma stały max-width, nie 100vw.
   ========================================================================== */

.dlakogo-case-study {
  padding-block: var(--section-spacing);
}

.dlakogo-case-study__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.dlakogo-case-study__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.dlakogo-case-study__heading-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.dlakogo-case-study__text-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dlakogo-case-study__heading {
  max-width: 505px;
  /* Jost Light, max 36px @1920px (korekta Mike'a, 2026-08-25: "font w
     nagłówku 36px max, light 300") — ten sam, już istniejący w motywie
     fluid token co .pillar-teaser__title / .audience__heading /
     .realizacje-cards__title / .dlakogo-case-study__caption. */
  font-family: 'Jost', var(--font-heading);
  font-weight: var(--fw-light);
  font-size: clamp(24px, calc(0.78vw + 21.08px), 36px);
}

.dlakogo-case-study__description {
  /* 100% szerokości kolumny (decyzja Mike'a) — bez max-width. Typografia
     (Plus Jakarta Sans Light, clamp 16-20px) już przychodzi z klasy
     .lead-text w markupie, zero zmian tutaj potrzebnych. */
  margin: 0;
}

.dlakogo-case-study__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Styl 1:1 z .pillar-teaser__pill (Rozwiązania pillar) — decyzja Mike'a,
   lokalna kopia zamiast dociągania pillar-teaser.css jako zależności. */
.dlakogo-case-study__benefit {
  display: inline-flex;
  align-items: center;
  font-family: 'Jost', var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-primary-dark);
  background-color: color-mix(in srgb, var(--color-accent-green) 5%, transparent);
  border-radius: 50px;
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}

.dlakogo-case-study__nav {
  display: flex;
  gap: var(--space-3);
}

/* Strzałka w kółku — 1:1 z .solution-carousel__arrow, osobna klasa (nowy
   komponent, zero zależności od pliku solution-carousel.css). */
.dlakogo-case-study__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-primary-dark);
  background: var(--color-bg);
  color: var(--color-primary-dark);
  font-size: var(--fs-body-lg);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, opacity 0.35s ease;
}

.dlakogo-case-study__arrow:hover:not(:disabled),
.dlakogo-case-study__arrow:focus-visible {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.dlakogo-case-study__arrow:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 4px;
}

.dlakogo-case-study__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dlakogo-case-study__nav--bottom {
  justify-content: center;
  margin-top: var(--space-2);
}

@media (min-width: 1140px) {
  .dlakogo-case-study__nav--bottom {
    display: none;
  }
}

@media (max-width: 1139.98px) {
  .dlakogo-case-study__nav--top {
    display: none;
  }
}

/* Prawa kolumna — karuzela kart. .dlakogo-case-study__viewport przycina tor
   (overflow:hidden), bez żadnego 100vw/-50vw — patrz komentarz na górze
   pliku. */
.dlakogo-case-study__viewport {
  overflow: hidden;
}

.dlakogo-case-study__track {
  display: flex;
  gap: 18px;
  transition: transform 0.5s ease;
}

/* Trailing spacer — pusty element na końcu toru, o szerokości równej
   odstępowi między kartami (gap powyżej), żeby ostatnia karta po
   przewinięciu do końca miała ten sam "oddech" po prawej co odstęp między
   kolejnymi kartami, zamiast lądować idealnie przy krawędzi viewportu
   (brief 5.5, punkt 3 — ten sam typ asymetrii co audience/realizacje-cards
   na mobile, tu naprawiony od razu w nowym komponencie, na każdej
   szerokości ekranu). */
.dlakogo-case-study__spacer {
  flex: 0 0 18px;
}

.dlakogo-case-study__card {
  flex: 0 0 78%;
  max-width: 340px;
  display: block;
  color: inherit;
  text-decoration: none;
}

.dlakogo-case-study__media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  /* 750x440 z Figmy = 75:44, skaluje się na tablet/desktop; mobile
     przełącza się na portret 3:4 (decyzja Mike'a, 2026-08-25). */
  aspect-ratio: 3 / 4;
  background-color: var(--color-bg-alt);
}

@media (min-width: 640px) {
  .dlakogo-case-study__media {
    aspect-ratio: 75 / 44;
  }
}

.dlakogo-case-study__card--placeholder .dlakogo-case-study__media {
  border: 1px dashed color-mix(in srgb, var(--color-primary-dark) 30%, transparent);
}

/* Descendant selector, nie klasa — get_the_post_thumbnail() (realne karty) i
   ręczny <img> placeholderów nie dostają dedykowanej klasy na samym <img>,
   ten sam wzorzec co .solution-carousel__media img. */
.dlakogo-case-study__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dlakogo-case-study__card:hover .dlakogo-case-study__media img,
.dlakogo-case-study__card:focus-visible .dlakogo-case-study__media img {
  transform: scale(1.04);
}

/* Pigułka "PRZYKŁAD" — kształt/typografia 1:1 z .realizacje-cards__pill,
   lokalna kopia (ten komponent celowo nie ładuje realizacje-cards.css). */
.dlakogo-case-study__pill {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 8px 0 8px;
  background-color: var(--color-white);
  font-family: 'Jost', var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #333333;
}

.dlakogo-case-study__caption {
  /* Jost Light, max 16px (--fs-body) — korekta Mike'a, 2026-08-25: pierwsza
     wersja (36px) była za duża. Padding (nie margin) — left 12px na
     mobile, 20px od 640px, top 12px na mobile. */
  margin: 0;
  padding: 12px 0 0 12px;
  font-family: 'Jost', var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  color: var(--color-text);
}

@media (min-width: 640px) {
  .dlakogo-case-study__caption {
    padding-left: 20px;
  }
}

@media (min-width: 640px) and (max-width: 1139.98px) {
  .dlakogo-case-study__card {
    flex-basis: 46%;
  }
}

/* Breakpoint podniesiony z 900px na 1140px (korekta Mike'a, 2026-08-25) —
   przy 900px lewa kolumna była za ciasna względem max-width nagłówka
   (505px), co łamało tekst brzydko na tabletach; 1140px to ta sama granica
   co reszta komponentu (strzałki, rozmiar kart). */
@media (min-width: 1140px) {
  .dlakogo-case-study__top {
    grid-template-columns: minmax(260px, 505px) 1fr;
    align-items: start;
    column-gap: var(--space-9);
  }
}

@media (min-width: 1140px) {
  .dlakogo-case-study__card {
    /* 750px dosłownie na desktopie (potwierdzone przez Mike'a, 2026-08-25),
       nie tylko proporcja — fluid do tego maksimum, nie sztywne 750px od
       razu na 1140px (przycięłoby kartę do węższych desktopów). */
    flex-basis: clamp(400px, 44vw, 750px);
    max-width: none;
  }
}