/* tomekkudelski.com – styl strony (bez frameworka) */
:root {
  --czern: #000;
  --grafit: #111;
  --linia: #2a2a2a;
  --tekst: #dfdfdf;
  --biel: #fff;
  --akcent: #7dff43;   /* zielony z poprzedniej strony */
  --akcent2: #05dfd7;  /* turkus z poprzedniej strony */
  --naglowek: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --tresc: 'Poppins', system-ui, sans-serif;
  --szer: 1240px;
  --margines: clamp(16px, 4vw, 40px);
  --sekcja: clamp(64px, 10vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; overflow-x: clip; background: var(--czern); color: var(--tekst); font: 300 16px/1.7 var(--tresc); letter-spacing: .01em; }
img { max-width: 100%; height: auto; display: block; }
/* elementy siatek nie mogą być szersze niż kolumna (Safari liczy minimalną szerokość z naturalnego rozmiaru obrazka) */
.hero > *, .oplycie > *, .produkty > *, .utwory li, .kafle > *, .tworca > *, .galeria > * { min-width: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
p { margin: 0 0 1em; }
strong { font-weight: 600; color: var(--biel); }
h1, h2, h3 { font-family: var(--naglowek); font-weight: 800; color: var(--biel); text-transform: uppercase; line-height: .9; margin: 0 0 .4em; letter-spacing: -.01em; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--akcent); color: #000; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.wrap { max-width: var(--szer); margin: 0 auto; padding: 0 var(--margines); }
.sekcja { padding: var(--sekcja) 0; }
.etykieta { font: 500 13px/1.2 var(--tresc); letter-spacing: .25em; text-transform: uppercase; color: var(--akcent); margin: 0 0 1em; }
.tytul-strony { font-size: clamp(56px, 12vw, 150px); text-align: center; margin: clamp(32px, 6vw, 72px) 0 clamp(32px, 5vw, 64px); }
.waski { max-width: 720px; margin-left: auto; margin-right: auto; }
.srodek { text-align: center; }

/* przyciski */
.btn { display: inline-block; background: var(--akcent); color: #000; font: 500 14px/1 var(--tresc); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 17px 28px; border: 1px solid var(--akcent); transition: background .2s, color .2s; text-align: center; }
.btn:hover { background: transparent; color: var(--akcent); }
.btn--ramka { background: transparent; color: var(--biel); border-color: var(--biel); }
.btn--ramka:hover { background: var(--biel); color: #000; }
.btn--duzy { padding: 22px 40px; font-size: 15px; }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }

/* nagłówek */
.top { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.przewiniete { border-bottom-color: var(--linia); }
.top__in { max-width: 1400px; margin: 0 auto; padding: 14px var(--margines); display: flex; align-items: center; gap: 24px; }
.logo img { width: 104px; height: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav a, .stopka__nav a { font: 400 12.5px/1 var(--tresc); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--biel); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav a:hover, .stopka__nav a:hover { color: var(--akcent); }
.nav a[aria-current], .stopka__nav a[aria-current] { color: var(--akcent2); border-bottom-color: var(--akcent2); }
.top__kup { padding: 13px 20px; font-size: 12.5px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; padding: 10px 6px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--akcent2); margin: 6px 0; }
@media (max-width: 1080px) {
  .nav { display: none; }
  .top__kup { margin-left: auto; }
  .burger { display: block; margin-left: 0; }
}
@media (max-width: 420px) { .top__kup { display: none; } .burger { margin-left: auto; } }

/* menu pełnoekranowe (zastępuje popup Elementora) */
.menu { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 80px var(--margines) 40px; background: rgba(0,0,0,.97); color: var(--biel); text-align: center; }
.menu[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
.menu::backdrop { background: rgba(0,0,0,.8); }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista a { display: block; font: 800 clamp(34px, 9vw, 56px)/1.15 var(--naglowek); text-transform: uppercase; text-decoration: none; }
.menu__lista a:hover, .menu__lista a[aria-current] { color: var(--akcent); }
.menu__zamknij { position: absolute; top: 14px; right: var(--margines); width: 48px; height: 48px; font-size: 40px; line-height: 1; background: none; border: 0; color: var(--akcent2); cursor: pointer; }

/* ikony społecznościowe */
.social { list-style: none; display: flex; gap: 18px; padding: 0; margin: 0; justify-content: center; }
.social a { display: block; width: 22px; height: 22px; color: var(--biel); transition: color .2s; }
.social a:hover { color: var(--akcent); }
.social svg { width: 100%; height: 100%; fill: currentColor; }

/* HOME: hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; min-height: min(calc(100svh - 72px), 900px); max-width: 1400px; margin: 0 auto; padding: 0 var(--margines) 40px; }
.hero__foto { grid-column: 2; grid-row: 1; position: relative; margin-left: -18%; }
.hero__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.hero__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 30%, transparent 55%); }
.hero__tekst { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(76px, 13vw, 210px); line-height: .82; margin: 0 0 .25em; letter-spacing: -.02em; }
.hero__wysylka { font: 500 13px/1.3 var(--tresc); letter-spacing: .25em; text-transform: uppercase; color: var(--biel); margin: 0 0 28px; display: flex; align-items: center; gap: 10px; }
.hero__wysylka::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--akcent); box-shadow: 0 0 12px var(--akcent); }
@media (max-width: 800px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 0; }
  .hero__foto { grid-column: 1; margin: 0 calc(-1 * var(--margines)); }
  .hero__foto::after { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.2) 45%, transparent 70%); }
  .hero__tekst { grid-row: 2; margin-top: -28vw; }
}

/* HOME: o płycie */
.oplycie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: center; }
.oplycie h2 { font-size: clamp(64px, 10vw, 140px); margin: 0; }
.oplycie__lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--biel); }
.formaty { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 36px; padding: 0; margin: 28px 0 0; }
.formaty a { text-decoration: none; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.formaty b { font: 800 22px/1 var(--tresc); letter-spacing: .02em; color: var(--biel); text-transform: uppercase; }
.formaty small { grid-column: 2; font-size: 12px; color: var(--akcent); letter-spacing: .08em; }
.formaty i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--akcent2); position: relative; }
.formaty i::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--akcent2); }
.formaty a:hover b { color: var(--akcent); }
@media (max-width: 800px) { .oplycie { grid-template-columns: minmax(0, 1fr); } }

/* HOME: pasek zdjęć (zamiast karuzeli) */
.pasek { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pasek::-webkit-scrollbar { display: none; }
.pasek img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; filter: grayscale(1); transition: filter .4s; }
.pasek img:hover { filter: none; }

/* HOME: zamów */
.kup { background: #f4f4f2; color: #222; }
.kup h2 { color: #000; font-size: clamp(56px, 9vw, 120px); text-align: center; }
.kup .etykieta { color: #1a8f00; text-align: center; }
.kup strong { color: #000; }
.produkty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 5vw, 64px); }
.produkt { background: #fff; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 44px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
/* obrazek wypełnia ramkę 4:3 i nie może jej rozepchnąć (Safari liczył szerokość siatki z naturalnego rozmiaru obrazka) */
.produkt { min-width: 0; }
.produkt__foto { position: relative; aspect-ratio: 4 / 3; margin-bottom: 24px; overflow: hidden; }
.produkt__foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
@supports not (aspect-ratio: 1) { .produkt__foto { height: 0; padding-top: 75%; } .produkt__foto img { top: 0; left: 0; } }
.produkt h3 { font-size: clamp(36px, 4vw, 52px); color: #000; margin: 0 0 6px; }
.produkt__meta { font: 500 13px/1.4 var(--tresc); letter-spacing: .14em; text-transform: uppercase; color: #555; margin-bottom: 20px; }
.produkt .przyciski { margin: 4px 0 20px; }
.produkt .btn--ramka { color: #000; border-color: #000; }
.produkt .btn--ramka:hover { background: #000; color: #fff; }
.produkt .btn:not(.btn--ramka):hover { color: #000; background: transparent; border-color: #000; }
.produkt__uwagi { font-size: 13.5px; line-height: 1.65; color: #444; margin-top: auto; }
.produkt__uwagi p { margin-bottom: .8em; }
.kredyty { text-align: center; margin-top: clamp(32px, 5vw, 56px); font: 400 13px/2 var(--tresc); letter-spacing: .16em; text-transform: uppercase; color: #333; }
@media (max-width: 800px) { .produkty { grid-template-columns: minmax(0, 1fr); } }

/* HOME: lista utworów */
.utwory h2 { color: var(--akcent); font: 400 clamp(36px, 5vw, 56px)/1 var(--tresc); text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.utwory ol { list-style: none; counter-reset: u; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.utwory li { counter-increment: u; border-top: 1px solid var(--linia); padding: 26px 0 22px; }
.utwory h3 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; letter-spacing: .06em; margin-bottom: 10px; line-height: 1; }
.utwory h3::before { content: counter(u, decimal-leading-zero); color: var(--akcent); margin-right: 12px; font-weight: 800; }
.utwory h3 small { font: 400 12px/1 var(--tresc); letter-spacing: .14em; color: #888; text-transform: lowercase; margin-left: 6px; vertical-align: middle; }
.utwory p { font-size: 14px; line-height: 1.75; color: #bbb; margin: 0; letter-spacing: .04em; }
.utwory .przypis { font-style: italic; color: #888; margin-top: 8px; font-size: 13px; }
@media (max-width: 800px) { .utwory ol { grid-template-columns: minmax(0, 1fr); } }

/* HOME: kafle */
.utwory { padding-bottom: 24px; }
.utwory + .sekcja { padding-top: clamp(80px, 12vw, 160px); }
.kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: start; }
.kafel { position: relative; display: block; overflow: hidden; text-decoration: none; }
.kafel:nth-child(2) { margin-top: -10%; }
.kafel:nth-child(3) { margin-top: 12%; }
.kafel img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; transition: transform .6s, filter .6s; filter: grayscale(.2); }
.kafel:hover img { transform: scale(1.04); filter: none; }
.kafel--zielony::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #3dff00; mix-blend-mode: multiply; pointer-events: none; }
.kafel span { z-index: 2; position: absolute; left: 20px; bottom: 18px; font: 800 clamp(26px, 3vw, 38px)/1 var(--naglowek); text-transform: uppercase; color: var(--biel); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.kafel span::after { content: ' →'; color: var(--akcent); }
@media (max-width: 700px) { .kafle { grid-template-columns: minmax(0, 1fr); } .kafel:nth-child(n) { margin-top: 0; } .kafel img { aspect-ratio: 4 / 3; object-position: 50% 25%; } }

/* zwykły tekst stron */
.prosa { font-size: 16.5px; line-height: 1.85; }
.prosa p { margin-bottom: 1.2em; }
.cta-dol { text-align: center; padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 100px); }

/* O twórcach */
.tworca { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-bottom: clamp(48px, 7vw, 96px); }
.tworca:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.tworca:nth-of-type(even) .tworca__foto { order: 2; }
.tworca__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1); }
.tworca h2 { font-size: clamp(40px, 5vw, 64px); }
.tworca__rok { font: 500 13px/1 var(--tresc); letter-spacing: .25em; text-transform: uppercase; color: var(--akcent); margin-bottom: 18px; }
.rozmowa { border-top: 1px solid var(--linia); padding-top: clamp(40px, 6vw, 72px); }
.rozmowa h2 { font: 600 italic clamp(22px, 2.4vw, 28px)/1.35 var(--tresc); text-transform: none; letter-spacing: 0; color: var(--biel); margin-bottom: 1em; }
@media (max-width: 800px) { .tworca, .tworca:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); } .tworca:nth-of-type(even) .tworca__foto { order: 0; } }

/* Aktualności */
.wpisy { list-style: none; padding: 0; margin: 0 auto; max-width: 860px; }
.wpis { border-top: 1px solid var(--linia); padding: clamp(28px, 4vw, 48px) 0; }
.wpis time { font: 500 13px/1 var(--tresc); letter-spacing: .2em; text-transform: uppercase; color: var(--akcent); display: block; margin-bottom: 12px; }
.wpis h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1; }
.wpis p { margin: 0; }
.wpis a:not(.yt) { color: var(--akcent); }
.yt { position: relative; display: block; margin-top: 22px; aspect-ratio: 16 / 9; background: #111 center / cover no-repeat; cursor: pointer; border: 0; padding: 0; width: 100%; }
.yt::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.25); transition: background .2s; }
.yt:hover::before { background: rgba(0,0,0,.05); }
.yt::after { content: ''; position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; transform: translate(-50%, -50%); border-radius: 14px; background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 34px no-repeat; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt.gra::before, .yt.gra::after { display: none; }
.yt__info { font-size: 12px; color: #888; margin-top: 8px; }

/* Galeria */
.filtry { display: flex; justify-content: center; gap: 28px; margin-bottom: 32px; }
.filtry button { background: none; border: 0; color: var(--biel); font: 600 14px/1 var(--tresc); letter-spacing: .12em; text-transform: uppercase; padding: 8px 2px; cursor: pointer; border-bottom: 2px solid transparent; }
.filtry button[aria-pressed="true"] { border-bottom-color: var(--akcent); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.galeria a { display: block; overflow: hidden; background: #111; }
.galeria a[hidden] { display: none; }
.galeria img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: transform .5s; }
.galeria a:hover img { transform: scale(1.03); }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.lightbox::backdrop { background: rgba(0,0,0,.94); }
.lightbox img { max-width: 96vw; max-height: 88vh; width: auto; margin: 0 auto; }
.lightbox__pasek { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.lightbox button { background: #111; color: var(--biel); border: 1px solid var(--linia); font: 500 14px/1 var(--tresc); padding: 10px 16px; cursor: pointer; }

/* English */
.en-naglowek { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.en-naglowek p { font: 400 clamp(28px, 3vw, 38px)/1.2 var(--tresc); color: var(--biel); margin: 0; }
.en-naglowek em { display: block; font-size: .7em; color: var(--tekst); margin-top: 6px; }
.kredyty-en { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px clamp(32px, 5vw, 72px); font-size: 14.5px; line-height: 1.75; }
.kredyty-en section { border-top: 1px solid var(--linia); padding: 22px 0 12px; }
.kredyty-en h2, .teksty h2, .podziekowania h2 { font: 600 13px/1 var(--tresc); letter-spacing: .22em; color: var(--akcent); margin-bottom: 14px; }
.kredyty-en p { margin: 0 0 .5em; }
.teksty { margin-top: clamp(56px, 8vw, 100px); }
.teksty details { border-top: 1px solid var(--linia); }
.teksty summary { cursor: pointer; list-style: none; padding: 22px 0; font: 800 clamp(28px, 3.4vw, 40px)/1 var(--naglowek); text-transform: uppercase; color: var(--biel); display: flex; justify-content: space-between; align-items: center; }
.teksty summary::-webkit-details-marker { display: none; }
.teksty summary::after { content: '+'; color: var(--akcent); font-family: var(--tresc); font-weight: 300; }
.teksty details[open] summary::after { content: '–'; }
.teksty .slowa { columns: 2 260px; column-gap: 48px; padding-bottom: 28px; font-size: 15px; line-height: 1.8; }
.teksty .slowa p { break-inside: avoid; margin-bottom: 1.1em; }
.podziekowania { margin-top: clamp(56px, 8vw, 100px); font-size: 14.5px; line-height: 1.8; color: #bbb; }

/* Kontakt */
.formularz { max-width: 640px; margin: 0 auto; display: grid; gap: 18px; }
.formularz label { display: grid; gap: 8px; font: 500 12.5px/1 var(--tresc); letter-spacing: .16em; text-transform: uppercase; color: var(--biel); }
.formularz input, .formularz textarea { font: 300 16px/1.5 var(--tresc); color: var(--biel); background: var(--grafit); border: 1px solid var(--linia); padding: 14px 16px; width: 100%; border-radius: 0; }
.formularz textarea { min-height: 180px; resize: vertical; }
.formularz input:focus, .formularz textarea:focus { border-color: var(--akcent); outline: none; }
.formularz .btn { justify-self: start; cursor: pointer; }
.formularz__rodo { font-size: 12.5px; color: #888; margin: 0; }
.formularz__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.komunikat { max-width: 640px; margin: 0 auto 24px; padding: 16px 20px; border: 1px solid var(--akcent); color: var(--biel); }
.komunikat--blad { border-color: #ff5a5a; }
.komunikat[hidden] { display: none; }

/* stopka */
.stopka { border-top: 1px solid var(--linia); }
.stopka__in { max-width: var(--szer); margin: 0 auto; padding: clamp(48px, 7vw, 80px) var(--margines) 36px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.stopka__nav { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 0; padding: 0; }
.stopka__mini { font-size: 12px; color: #777; margin: 0; }

/* 404 */
.blad404 { text-align: center; padding: clamp(60px, 10vw, 140px) 0; }
.blad404 h1 { font-size: clamp(90px, 20vw, 220px); }

/* wejście sekcji przy przewijaniu (tylko gdy JS działa) */
.js .pojaw { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .pojaw.widoczne { opacity: 1; transform: none; }