/* haczewski.pl — spis stron rodziny; ta sama rodzina wyglądu co barbara.haczewska.pl i ireneusz.haczewski.pl */
@font-face { font-family: Inter; src: url(fonty/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Cardo; src: url(fonty/cardo-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Cardo; src: url(fonty/cardo-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root { --granat: #1b2333; --czerwien: #c8102e; --niebieski: #1d4ed8; --szary: #5b6475; --tlo: #f4f6fa; --linia: #dde6f2; --szer: 1000px; --jasny: #eef4fb; --boki: #c4d5ec; }
* { box-sizing: border-box; }
html, body { background: var(--boki); }
body { margin: 0; font: 1.05rem/1.6 Inter, system-ui, sans-serif; color: var(--granat); -webkit-font-smoothing: antialiased; }
/* kartka na środku, boki w mocniejszym błękicie (wariant A3, wybór Marka 10.11.2026) */
.arkusz { max-width: 1180px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--jasny); box-shadow: 0 0 40px -12px #1b233340; }
main { flex: 1; padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem); }
.wrap { max-width: var(--szer); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
:where(a):focus-visible { outline: 3px solid var(--czerwien); outline-offset: 3px; }

.wstep { background: linear-gradient(180deg, #d9e6f7, var(--jasny)); padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(1rem, 3vw, 1.5rem); }
.nad { color: var(--czerwien); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; margin: 0 0 0.4rem; }
h1 { font: 700 clamp(2.8rem, 2rem + 4vw, 4.8rem)/1.05 Cardo, Georgia, serif; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
.lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: var(--szary); margin: 0; }

.karty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.karta { display: flex; flex-direction: column; height: 100%; padding: 1.3rem 1.4rem 1.4rem; background: #fff; border: 1px solid var(--linia); border-top: 4px solid var(--granat); border-radius: 14px; box-shadow: 0 10px 28px -24px #1b233355; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.karta:hover { border-top-color: var(--czerwien); box-shadow: 0 16px 34px -22px #0005; transform: translateY(-2px); }
.karta strong { font: 700 1.45rem/1.2 Cardo, Georgia, serif; margin: 0.25rem 0 0.5rem; }
.karta .adres { color: var(--czerwien); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.karta .opis { color: var(--szary); font-size: 0.97rem; }
.karta:hover strong { color: var(--czerwien); }
@media (prefers-reduced-motion: reduce) { .karta { transition: none; } .karta:hover { transform: none; } }

.stopka { background: var(--granat); color: #c5cede; padding: 1.6rem 0; font-size: 0.9rem; }