/* ==========================================================================
   CALLA — Usługa (single): nadpisania sekcji 4 (features, .features--cta-layout)
   Scoping wyłącznie przez modyfikator .features--cta-layout, dodawany na
   <section> przez section-features.php TYLKO gdy $args['last_item_cta']
   (czyli wyłącznie template-single-usluga.php) — features.css (bazowy,
   współdzielony ze stroną główną/Rozwiązania/Dla kogo/Realizacje) zostaje
   bez zmian, ten sam wzorzec co solution-features-override.css.
   ========================================================================== */

/* Odstęp nagłówek -> opis: 12px dokładnie (zrzut Mike'a, 2026-08-26) —
   zamiast dzielonego var(--space-5) z features.css. */
.features--cta-layout .features__header {
  margin-bottom: var(--space-3);
}

/* Treść każdego kafelka wyrównana do lewej (2026-08-26, cofnięcie
   wcześniejszego wyśrodkowania z tej samej rundy — zostaje tylko szerokość
   315px i odstęp 12px wyżej). Domyślne wyrównanie z features.css
   (align-items:flex-start/text-align:left) wystarcza, więc nie trzeba tu
   nic nadpisywać poza usunięciem poprzednich reguł center. */

/* Tablet/desktop (≥640px): .features__carousel istnieje tylko jako nośnik
   [data-carousel-track] na mobile — tu wraca do display:contents, żeby jego
   dzieci (pierwsze 3 kafelki) weszły bezpośrednio do siatki, dokładnie tak
   jakby wrappera nie było.
   Kafelki dostają stałą szerokość 315px (wartość z Figmy, celowo bez clamp —
   to stały punkt referencyjny, nie fluid wymiar). grid-template-columns
   zamieniony z repeat(4,1fr)/repeat(2,1fr) (rozciągane kolumny) na
   repeat(auto-fit, 315px) + justify-content:center — ten sam wzorzec co
   solution-features-override.css (kafelki "Rozwiązanie"): liczba kolumn w
   rzędzie wynika z dostępnej szerokości zamiast sztywnych breakpointów, więc
   4 kafelki o stałej szerokości NIGDY nie powodują poziomego przepełnienia.
   Świadomy kompromis: w wąskim zakresie ok. 640-1400px może się pojawić
   przejściowy układ 2+2 lub 3+1 zamiast "4 w jednym rzędzie" z pierwotnego
   briefu — do potwierdzenia z Mikem, jeśli ten konkretny zakres szerokości
   ma znaczenie priorytetowe (patrz podsumowanie sesji). */
@media (min-width: 640px) {
  .features--cta-layout .features__carousel {
    display: contents;
  }

  .features--cta-layout .features__grid {
    grid-template-columns: repeat(auto-fit, 315px);
    justify-content: center;
  }

  .features--cta-layout .features__item {
    width: 315px;
    max-width: 315px;
  }

  /* Kafelek CTA ma własny padding-top (var(--space-6), features.css) —
     przesuwa jego nagłówek/tytuł w dół względem zwykłych, bezramkowych
     kafelków, które nie mają żadnego paddingu przed nagłówkiem. Ujemny
     margin-top o dokładnie tę samą wartość podciąga CAŁY kontener CTA w
     górę, więc tytuł ląduje na tej samej linii co pozostałe 3 tytuły — bez
     zmiany rozmiaru/paddingu samego boxa (dolna krawędź CTA zostaje niżej
     niż pozostałych kafelków, bo ma więcej treści + link w rogu, co jest
     zamierzone). Tylko desktop/tablet (siatka), na mobile (karuzela + CTA
     pod spodem) problem nie występuje — każdy kafelek ma osobną pozycję w
     pionie, więc reguła zostaje w tym samym bloku ≥640px. */
  .features--cta-layout .features__item--cta {
    margin-top: calc(-1 * var(--space-6));
  }
}

/* Mobile (<640px): pierwsze 3 kafelki (bez ikon) w .features__carousel —
   pozioma karuzela ze scroll-snap sterowana dotykiem (ten sam JS/CSS wzorzec
   co bazowa karuzela .features__grid z features.css, tylko przeniesiony na
   wewnętrzny wrapper). Świadomie NIE reużyto techniki auto-scroll @keyframes
   z .pillar-gallery (mobile marquee bez przystanku/paginacji) — ta technika
   sprawdza się przy zdjęciach, ale treść tekstowa (tytuł+opis do przeczytania)
   wymaga kontroli użytkownika nad tempem, stąd scroll-snap + gest dotykowy +
   kropki (carousel.js), bez zmian w JS. Ostatni kafelek (CTA) zostaje POZA
   .features__carousel — na stałe widoczny pod karuzelą, nie do przewijania. */
@media (max-width: 639px) {
  .features--cta-layout .features__grid {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: var(--space-6);
  }

  .features--cta-layout .features__carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .features--cta-layout .features__carousel::-webkit-scrollbar {
    display: none;
  }

  .features--cta-layout .features__carousel .features__item {
    flex: 0 0 100%;
    max-width: 420px;
    scroll-snap-align: center;
  }

  .features--cta-layout .features__item--cta {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    scroll-snap-align: none;
  }
}