/* Blog + wpis + generyczna strona — spójne z brandem makiety. */
.wrap--narrow{max-width:760px}

.blog-title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,3rem);line-height:1.1;letter-spacing:-.015em;margin:.2em 0 1.6rem}
.blog-list{display:grid;gap:clamp(30px,4vw,54px)}
@media(min-width:720px){ .blog-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.blog-card{display:flex;flex-direction:column;gap:.45rem}
.blog-thumb{display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:16/10;margin-bottom:.5rem;background:var(--paper-3)}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-out)}
.blog-card:hover .blog-thumb img{transform:scale(1.04)}
/* miniatura = suwak przed/po (gdy wpis ma pole „przed"). Stała proporcja jak zwykły
   kafelek, oba zdjęcia cover. Nie skalujemy na hover — tu się przeciąga, nie klika. */
.blog-thumb--ba{padding:0;background:none}
.ba-wrap--karta{aspect-ratio:16/10;max-width:none;max-height:none;width:100%;margin:0;border-radius:var(--r);cursor:col-resize}
.ba-wrap--karta .ba-grip{width:40px;height:40px}

/* galeria remontu — siatka „po" pod tekstem wpisu ([galeria-remontu]) */
.galo{margin:2.4rem 0 .5rem}
.galo h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:0 0 1rem}
/* Układ kolumnowy, nie siatka ze sztywną proporcją: zdjęcia z remontu bywają i poziome,
   i pionowe. Sztywne 3/2 obcinało pionowym górę i dół (z łazienki zostawał pasek).
   Tutaj każde zachowuje własne proporcje, a pionowe układają się obok siebie. */
.galo-siatka{columns:3;column-gap:12px}
@media(max-width:680px){ .galo-siatka{columns:2} }
.galo-item{margin:0 0 12px;break-inside:avoid;-webkit-column-break-inside:avoid}
.galo-item img{width:100%;height:auto;border-radius:var(--r);display:block;border:1px solid var(--line);transition:transform .3s var(--e-out)}
.galo-item:hover img{transform:translateY(-3px)}
.galo-item figcaption{font-size:.78rem;color:var(--ink-soft);margin-top:.4rem;line-height:1.4}

/* suwak [przed-po] w treści wpisu — odstępy jak figura */
.post-body .ba-wrap--wpis{margin:2rem auto}
/* podpis pod suwakiem przed/po w treści wpisu */
.post-body p.podpis-suwak{text-align:center;font-size:.88rem;color:var(--ink-soft);margin-top:.6rem;line-height:1.5}
.blog-card__title{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.22;letter-spacing:-.01em}
.blog-card__title a{text-decoration:none}
.blog-card__title a:hover{color:var(--amber-deep)}
.blog-card__excerpt{font-size:1rem;margin:.2rem 0 .4rem}

/* wpis */
.post-head{margin-bottom:1.6rem}
.post-title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.1;letter-spacing:-.02em;margin:.3rem 0 0}
.post-cover{border-radius:var(--r);overflow:hidden;margin:0 0 2.2rem;background:var(--paper-3)}
.post-cover img{width:100%;display:block}
.post-body{font-size:1.12rem;line-height:1.75;color:var(--ink)}
.post-body > * + *{margin-top:1.25em}
/* Pierwszy akapit wpisu = lead: cięższy i odrobinę większy. Robione stylem, nie
   pogrubieniem w treści — działa na każdym wpisie (też przyszłym) bez ruszania HTML-a,
   a redaktor nie musi o tym pamiętać. */
.post-body > p:first-of-type{font-weight:600;font-size:1.2rem;line-height:1.6}
.post-body h2{font-family:var(--serif);font-weight:600;font-size:1.7rem;line-height:1.2;margin-top:1.7em}
.post-body h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;margin-top:1.5em}
.post-body a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:3px}
.post-body img,.post-body figure img{border-radius:var(--r);height:auto}
.post-body blockquote{border-left:2px solid var(--amber);padding-left:1.2rem;color:var(--ink-soft);font-style:italic}
.post-body ul,.post-body ol{padding-left:1.4rem}
.post-body li + li{margin-top:.4em}
.post-foot{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-soft)}

/* paginacja (scope, zeby nie zderzyc sie z .nav-links naglowka) */
.navigation.pagination{margin-top:3.2rem}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem}
.pagination .page-numbers{display:inline-block;padding:.45rem .85rem;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;font-size:.9rem;transition:border-color .25s,background .25s}
.pagination .page-numbers:hover{border-color:var(--amber)}
.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}