/* Zobacz także (K22, task03.23) — blok feuer/zobacz-takze; front i edytor. Punkt wyjścia: makieta K22 (task01.35).
   Wg FeuerDS (stan 2026-09-13): „Zobacz takze" 7:6803 (1441×564), „Zobacz takze mobile" 7:5485 (393×579).
   Sekcja na tle wyróżnionym, padding 64/64, H2 32/44.8 (ramka 34/48 = Page 9 — kanon, rejestr),
   32 do pozycji. Pozycja = link: zdjęcie 380×220 (mobile 320×185) z tagiem A45 w rogu 16/16,
   24, tytuł 20/28 Bold, 16, strzałka ↗ 32. Karuzela Swiper (slidesPerView auto) na obu
   szerokościach wyłącznie na froncie (view.js bloku, CSS Swipera tylko na froncie): desktop 3 pozycje
   w kontenerze, mobile 320 z wystającą kolejną; odstęp między pozycjami w JS (spaceBetween: 32 / 16),
   bez Swipera (edytor, front przed startem skryptu) — w CSS. Kreski pod karuzelą = atom A56
   (.wskazniki-karuzeli) o szerokości z podziału kontenera zamiast 64 (odstępstwo od atomu, rejestr);
   Swiper chowa je, gdy wszystko mieści się w widoku (.swiper-pagination-lock) — reguła „jeden slajd
   bez wskaźników" (task03.03); w edytorze kreski rysuje edit() bloku.
   CSS Swipera i arkusze motywu ładują się po tym pliku — reguły nadpisujące slajdy i paginację mają
   wyższą specyficzność. Wartości px z Figmy zapisane w rem (baza 16). */

.zobacz-takze {
  max-width: 90rem;                       /* stop skali (siatka) */
  margin-inline: auto;
  padding-block: var(--odstep-8);         /* 64 / 64 */
  overflow: hidden;                       /* pozycje spoza kontenera ucina krawędź sekcji */
}

.zobacz-takze-tytul {
  margin: 0 0 var(--odstep-4);            /* H2 32/44.8 ExtraBold; 32 do pozycji */
  font-size: var(--tekst-32);
  line-height: var(--interlinia-32);
  font-weight: var(--waga-najgrubsza);
}

/* Karuzela: pozycje o stałej szerokości, kolejne wystają poza kontener w prawo (jak w ramce mobile). */
.zobacz-takze .swiper { overflow: visible; }

.zobacz-takze .zobacz-takze-pozycje {
  display: flex;                          /* także w edytorze (bez CSS Swipera) */
  margin: 0;
  padding: 0;
  list-style: none;
}

.zobacz-takze .swiper:not(.swiper-initialized) .zobacz-takze-pozycje { gap: 2rem; }   /* 32 */

.zobacz-takze .zobacz-takze-pozycja {
  flex-shrink: 0;
  width: 23.75rem;                        /* 380 */
}

/* Cała pozycja jednym linkiem; stany kolorów jak link akcji A43 (tekst ciemny → hover czerwony,
   wciśnięty ciemniejszy, strzałka zawsze czerwona, przy wciśnięciu dziedziczy). */
.zobacz-takze-link {
  display: block;
  color: var(--kolor-tekstu);
  text-decoration: none;
}

.zobacz-takze-link:hover { color: var(--kolor-marki); }
.zobacz-takze-link:active { color: var(--kolor-marki-wcisniety); }

.zobacz-takze-zdjecie {
  display: block;                         /* span w linku — margines pionowy wymaga bloku */
  position: relative;
  margin: 0 0 var(--odstep-3);            /* 24 do tytułu */
}

.zobacz-takze-zdjecie img,
.zobacz-takze-zdjecie .zdjecie-zastepcze {
  display: block;
  width: 100%;
  height: 13.75rem;                       /* 220 */
  object-fit: cover;
}

.zobacz-takze-zdjecie .tag {              /* tag A45 w lewym górnym rogu zdjęcia, 16 / 16 */
  position: absolute;
  top: var(--odstep-2);
  left: var(--odstep-2);
}

.zobacz-takze-nazwa {
  display: block;
  margin: 0 0 var(--odstep-2);            /* 20/28 Bold; 16 do strzałki */
  font-size: var(--tekst-20);
  line-height: var(--interlinia-20);
  font-weight: var(--waga-gruba);
}

.zobacz-takze-strzalka {                  /* ↗ 32 z wektorem 18 (jak w kaflach) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--kolor-marki);
}

.zobacz-takze-strzalka svg {
  width: 1.125rem;
  height: 1.125rem;
}

.zobacz-takze-link:active .zobacz-takze-strzalka { color: inherit; }

/* Kreski A56, 48 pod pozycjami; szerokość z podziału kontenera (n kresek na 1204 / 361). */
.zobacz-takze .wskazniki-karuzeli { margin-top: var(--odstep-6); }
.zobacz-takze .wskazniki-karuzeli .wskaznik { flex: 1; width: auto; }
.zobacz-takze .wskazniki-karuzeli.swiper-pagination-lock { display: none; }

/* Edytor: brak pozycji do pokazania — komunikat w miejscu pozycji (na froncie blok się nie renderuje). */
.zobacz-takze-brak {
  margin: 0;
  padding: var(--odstep-3);
  background: var(--kolor-tla);
  color: var(--kolor-marki);
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
  font-weight: var(--waga-gruba);
}

/* ---- Tablet i mobile ---- */

@media (max-width: 1023px) {
  .zobacz-takze-tytul {
    font-size: var(--tekst-28);           /* 28/39.2 ExtraBold */
    line-height: var(--interlinia-28);
  }
}

/* ---- Mobile (ramka 7:5485) ---- */

@media (max-width: 639px) {
  .zobacz-takze .zobacz-takze-pozycja { width: 20rem; }                        /* 320 */
  .zobacz-takze .swiper:not(.swiper-initialized) .zobacz-takze-pozycje { gap: 1rem; }   /* 16 */
  .zobacz-takze-zdjecie img,
  .zobacz-takze-zdjecie .zdjecie-zastepcze { height: 11.5625rem; }            /* 185 */
}