/*
 * Strona glowna — arkusz sekcyjny (patrz komentarz o `$css` w layout_v2.php).
 * Ladowany tylko na „/". Reguly bazowe (.series, .serie, .guides, .guide)
 * zostaja w style-v2.css; tutaj tylko to, co doszlo 10 pazdziernika 2026:
 * zdjecia na kafelkach serii i czterokolumnowa siatka poradnikow.
 */

/* Kafelek serii ze zdjeciem: obraz na gorze, na bialym polu (zdjecia
   katalogowe maja biale tlo, wiec ciemny panel pod nimi dawalby biala
   plame w nierownym miejscu). Zdjecie wpasowane, nie przyciete — zestaw
   ma byc widoczny w calosci. Kropki serii schodza na dol, obok nazwy,
   zeby nie lezaly na zdjeciu. */
/* Bazowy .serie ma justify-content:flex-end (tekst przy dolnej krawedzi,
   bo kafelek bez zdjecia jest pusty u gory). Ze zdjeciem to daje dziure
   NAD obrazem, gdy sasiad w rzedzie ma dwuwierszowa nazwe (Super Heroes
   Marvel) — siatka rozciaga wszystkie kafelki do jego wysokosci. Dlatego
   tu od gory: obraz, nazwa, liczba, a kropki dociskane do dolu, zeby
   dolna krawedz rzedu tez byla rowna. */
.serie--img{padding-top:0;min-height:0;justify-content:flex-start}
.serie__img{display:block;margin:0 -16px 10px;aspect-ratio:4/3;background:#fff;
  border-bottom:1px solid var(--line-soft);border-radius:5px 5px 0 0;overflow:hidden}
.serie__img img{display:block;width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}
.serie--img .serie__studs{position:static;order:1;grid-template-columns:repeat(8,10px);gap:4px;margin-top:auto;padding-top:6px}
.serie--img .serie__studs i{width:10px;height:10px}
.serie--img:hover .serie__img img{transform:scale(1.03);transition:transform .25s ease}

/* Cztery poradniki w jednym rzedzie na szerokim ekranie; nizej siatka
   sama schodzi do dwoch i jednej kolumny. */
.guides--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.guides--4 .guide__title{font-size:17px}
.guides--4 .guide__lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .serie--img:hover .serie__img img{transform:none;transition:none}
}