/* =====================================================================
   LISTA /blog/: szerokość i siatka. Ładowany tylko przez layouts/blog/list.html,
   PO blog.629c0023d3.css i blog-karty.v1.css.
   Zgłoszenie Marka 2026-10-07: lista „wąska". Pomiar 2026-10-08 na produkcji:
   kolumna 1180px (treść 1116px), karty 359px, na ekranie 1440px po 162px pustego
   tła z każdej strony. Teraz kolumna 1320px (treść 1256px), karty ~402px.
   ===================================================================== */
.wrap{width:min(100%,1320px)}
.pasek-gorny{width:min(100%,1298px)}
/* Nagłówek listy nie ma już własnego limitu szerokości: filtry kategorii
   mieszczą się w jednym rzędzie zamiast zawijać się pod „Agency". */
.naglowek-listy{max-width:none}

/* Siatka 3 kolumn z większym odstępem; 2 i 1 kolumna zostają z arkusza głównego. */
.siatka{gap:24px}

/* Wyróżniony wpis: okładka zajmuje 60% szerokości w stałym formacie 16:9. */
.polecany{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.polecany .opis{padding:36px 40px;align-self:center}
.polecany h2{font-size:clamp(26px,2.4vw,34px)}

@media(max-width:1000px){
  .polecany{grid-template-columns:1fr}
  .polecany .opis{padding:24px}
}

/* Niepełny ostatni rząd siatki nie zostawia dziury. Zgłoszenie Marka 2026-10-08:
   po zmianie listy na dole została jedna samotna karta i puste 2/3 rzędu.
   Reguła liczy karty selektorem, nie w szablonie, więc działa przy każdej
   liczbie wpisów, w każdej siatce i po filtrze kategorii: „of :not([hidden])"
   liczy tylko karty widoczne (filtr w blog.28dd0c41e0.js ukrywa je atrybutem
   hidden). Progi kolumn są dokładnym dopełnieniem arkusza głównego:
   powyżej 1000px 3 kolumny, 901–1000px 2 kolumny, do 900px 1 kolumna (bez sierot).
   - 3 kolumny, 1 sierota: cały rząd, karta pozioma (okładka 16:9 po lewej);
   - 3 kolumny, 2 sieroty: po połowie rzędu (stąd siatka 6 ścieżek, karta = 2);
   - 2 kolumny, 1 sierota: cały rząd, karta pozioma.
   Karta pozioma ma proporcje wyróżnionego wpisu (okładka 60%, tekst 40%).
   Ramka okładki ma co najmniej 16:9 i sięga do dołu karty: gdy tekst jest wyższy
   (wąskie ekrany, długi opis), ramka rośnie, a okładka zostaje cała w 16:9,
   wyśrodkowana na ciemnym tle ramki (object-fit:contain) — bez przycięcia
   i bez pustego paska karty pod okładką. */
@media (width > 1000px){
  .siatka{grid-template-columns:repeat(6,minmax(0,1fr))}
  .siatka>.wpis{grid-column:span 2}
  .siatka>.wpis:nth-child(3n+1 of .wpis:not([hidden])):nth-last-child(2 of .wpis:not([hidden])),
  .siatka>.wpis:nth-child(3n+2 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])){
    grid-column:span 3}
  .siatka>.wpis:nth-child(3n+1 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])){
    grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
  .siatka>.wpis:nth-child(3n+1 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])) .obraz{
    width:100%;align-self:stretch;border-bottom:0;border-right:1px solid var(--obrys-karty)}
  .siatka>.wpis:nth-child(3n+1 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])) .obraz img{
    object-fit:contain}
  .siatka>.wpis:nth-child(3n+1 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])) .opis{
    padding:32px 40px}
}
@media (900px < width <= 1000px){
  .siatka>.wpis:nth-child(2n+1 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])){
    grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
  .siatka>.wpis:nth-child(2n+1 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])) .obraz{
    width:100%;align-self:stretch;border-bottom:0;border-right:1px solid var(--obrys-karty)}
  .siatka>.wpis:nth-child(2n+1 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])) .obraz img{
    object-fit:contain}
  .siatka>.wpis:nth-child(2n+1 of .wpis:not([hidden])):nth-last-child(1 of .wpis:not([hidden])) .opis{
    padding:24px 28px}
}