/* Chatka przy Jatkach — wygląd „Izba”: ciemne belki, tynk, cegła, kłos. Paleta z wnętrza lokalu i malowanego logo. */
:root {
  --drewno: #1b130e;
  --drewno-2: #271b14;
  --drewno-3: #35261c;
  --belka: #4a3020;
  --tynk: #ebe1cf;
  --tynk-2: #ddd0b8;
  --papier: #f6f0e4;
  --karta: #fbf7ee;
  --cegla: #a4472c;
  --cegla-2: #873620;
  --klos: #c9a366;
  --klos-2: #a98347;
  --tekst: #2b1f17;
  --tekst-2: #6a5646;
  --jasny: #efe5d3;
  --jasny-2: #c3b49e;
  --szeryf: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --bez: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --r: 3px;
  --cien: 0 18px 44px -22px rgba(27, 19, 14, .55);
  --przejscie: .45s cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tekst); font: 400 17px/1.7 var(--bez); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--szeryf); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: .005em; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }
sup { font-size: .6em; line-height: 0; position: relative; top: -.15em; vertical-align: super; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--klos); outline-offset: 3px; }
::selection { background: var(--cegla); color: #fff; }

.kont { width: min(1240px, 100% - 48px); margin-inline: auto; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--klos); color: var(--drewno); padding: 10px 16px; border-radius: var(--r); transition: top .2s; }
.pomin:focus { top: 12px; }
.ik { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

.etykieta { font: 500 12.5px/1.4 var(--bez); letter-spacing: .26em; text-transform: uppercase; color: var(--cegla); margin: 0 0 18px; }
.etykieta-klos { color: var(--klos); }

.ozdobnik { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px auto 0; color: var(--klos-2); }
.ozdobnik i { display: block; width: 64px; height: 1px; background: currentColor; opacity: .8; }
.ozdobnik b { display: block; width: 8px; height: 8px; border: 1px solid currentColor; transform: rotate(45deg); }
.ozdobnik-lewy { justify-content: flex-start; margin-inline: 0; }
.ozdobnik-lewy i:first-child { display: none; }
.ozdobnik-lewy i { width: 96px; }

/* ---------- przyciski ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--r); font: 500 13.5px/1.2 var(--bez); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--przejscie), color var(--przejscie), border-color var(--przejscie), transform var(--przejscie), box-shadow var(--przejscie); }
.btn .ik { transition: transform var(--przejscie); }
.btn:hover .ik:last-child { transform: translateX(4px); }
.btn-cegla { background: var(--cegla); color: #fff7ea; box-shadow: 0 10px 24px -14px rgba(164, 71, 44, .9); }
.btn-cegla:hover { background: var(--cegla-2); transform: translateY(-2px); }
.btn-obrys-jasny { border-color: rgba(201, 163, 102, .65); color: var(--jasny); }
.btn-obrys-jasny:hover { background: var(--klos); border-color: var(--klos); color: var(--drewno); }
.btn-obrys { border-color: var(--belka); color: var(--belka); }
.btn-obrys:hover { background: var(--belka); color: var(--jasny); }
.btn-maly { padding: 10px 16px; font-size: 12px; }
.btn-duzy { padding: 16px 30px; }
.btn-pelny { width: 100%; }
.przyciski { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- nagłówek ---------- */
.naglowek { position: sticky; top: 0; z-index: 60; background: var(--drewno) url(../img/drewno.jpg) center/cover; color: var(--jasny); border-bottom: 1px solid rgba(201, 163, 102, .28); }
.naglowek::before { content: ''; position: absolute; inset: 0; background: rgba(27, 19, 14, .55); pointer-events: none; }
.naglowek-wn { position: relative; display: flex; align-items: center; gap: 28px; height: 88px; transition: height var(--przejscie); }
.naglowek.maly .naglowek-wn { height: 68px; }
.logo { display: inline-flex; flex: none; }
.logo img { height: 58px; width: auto; transition: height var(--przejscie), opacity .3s; }
.logo:hover img { opacity: .82; }
.naglowek.maly .logo img { height: 44px; }
.nawigacja { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nawigacja > a, .nav-rozwin { position: relative; background: none; border: 0; padding: 8px 0; font: 500 13px/1 var(--bez); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--jasny); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.nawigacja > a::after, .nav-rozwin::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--klos); transform: scaleX(0); transform-origin: left; transition: transform var(--przejscie); }
.nawigacja > a:hover, .nav-rozwin:hover, .nawigacja > a[aria-current], .nav-rozwin.aktywna { color: var(--klos); }
.nawigacja > a:hover::after, .nav-rozwin:hover::after, .nawigacja > a[aria-current]::after, .nav-rozwin.aktywna::after { transform: scaleX(1); }
.nav-rozwin .ik { transition: transform .3s; }
.nav-grupa { position: relative; }
.podmenu { position: absolute; left: -22px; top: 100%; min-width: 340px; padding: 12px 0; background: var(--drewno-2); border: 1px solid rgba(201, 163, 102, .3); border-top: 2px solid var(--klos); box-shadow: var(--cien); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
.nav-grupa:hover .podmenu, .nav-grupa:focus-within .podmenu, .nav-grupa.otwarte .podmenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-grupa:hover .nav-rozwin .ik, .nav-grupa.otwarte .nav-rozwin .ik { transform: rotate(180deg); }
.podmenu a { display: block; padding: 10px 22px; font: 400 15px/1.35 var(--bez); text-decoration: none; color: var(--jasny); transition: background .25s, color .25s, padding .25s; }
.podmenu a:hover, .podmenu a[aria-current] { background: rgba(201, 163, 102, .1); color: var(--klos); padding-left: 28px; }
.naglowek-social, .stopka-social, .szuflada-social { display: flex; gap: 8px; }
.naglowek-social a, .stopka-social a, .szuflada-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(201, 163, 102, .4); border-radius: 50%; color: var(--jasny); transition: background .3s, color .3s, transform .3s; }
.naglowek-social a:hover, .stopka-social a:hover, .szuflada-social a:hover { background: var(--klos); color: var(--drewno); transform: translateY(-2px); }
.burger { display: none; width: 46px; height: 46px; margin-left: auto; background: none; border: 1px solid rgba(201, 163, 102, .45); border-radius: var(--r); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--jasny); }

.szuflada { position: fixed; inset: 0; z-index: 120; }
.szuflada-tlo { position: absolute; inset: 0; background: rgba(12, 8, 5, .6); opacity: 0; transition: opacity .35s; }
.szuflada-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 90vw); background: var(--drewno); color: var(--jasny); padding: 26px 26px 34px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); border-left: 1px solid rgba(201, 163, 102, .3); }
.szuflada.otwarta .szuflada-tlo { opacity: 1; }
.szuflada.otwarta .szuflada-panel { transform: none; }
.szuflada-x { position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; background: none; border: 0; font-size: 32px; line-height: 1; cursor: pointer; color: var(--jasny); }
.logo-szuflada img { height: 62px; margin-bottom: 18px; }
.szuflada-etykieta { font: 500 11.5px/1 var(--bez); letter-spacing: .26em; text-transform: uppercase; color: var(--klos); margin: 6px 0 6px; }
.szuflada-panel > a:not(.btn):not(.logo) { padding: 11px 0; font: 600 23px/1.2 var(--szeryf); text-decoration: none; border-bottom: 1px solid rgba(201, 163, 102, .14); }
.szuflada-panel > a.szuflada-pod { font: 400 16px/1.35 var(--bez); padding: 9px 0 9px 14px; color: var(--jasny-2); }
.szuflada-panel > a[aria-current] { color: var(--klos); }
.szuflada-kreska { height: 14px; }
.szuflada-panel .btn { margin-top: 14px; }
.szuflada-social { margin-top: 20px; }

/* ---------- hero ---------- */
.hero { background: var(--drewno); color: var(--jasny); padding: clamp(28px, 4vw, 56px) 0 0; }
.hero-wn { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-zdj { order: 2; margin: 0; }
.hero-zdj img { width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 30px 60px -30px #000; }
.hero-tekst { order: 1; }
.hero h1 { font-size: clamp(34px, 3.5vw, 52px); font-weight: 600; color: #f6ecda; }
.hero h1 span { display: block; margin-top: 18px; font-size: clamp(20px, 1.7vw, 25px); font-weight: 500; font-style: italic; line-height: 1.35; color: var(--jasny-2); }
.hero .przyciski { margin-top: 34px; }
.hero-pasek { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid rgba(201, 163, 102, .3); }
.hero-pasek li { display: flex; gap: 14px; align-items: flex-start; padding: 22px 28px 26px; font-size: 16.5px; line-height: 1.45; border-left: 1px solid rgba(201, 163, 102, .18); }
.hero-pasek li:first-child { border-left: 0; padding-left: 0; }
.hero-pasek .ik { width: 22px; height: 22px; margin-top: 3px; color: var(--klos); }
.hero-pasek small { display: block; font: 500 11.5px/1.5 var(--bez); letter-spacing: .24em; text-transform: uppercase; color: var(--klos); margin-bottom: 3px; }
.hero-pasek a { text-decoration: none; border-bottom: 1px solid rgba(201, 163, 102, .4); transition: color .3s, border-color .3s; }
.hero-pasek a:hover { color: var(--klos); border-color: var(--klos); }

.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--jasny-2); margin: 0; }
.hero-pasek .status { display: flex; margin-top: 4px; }
.status:empty { display: none; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9a8873; flex: none; }
.status.otwarte::before { background: #8fbf7a; box-shadow: 0 0 0 4px rgba(143, 191, 122, .18); }

/* rama: cienka linia przesunięta względem zdjęcia */
.rama { position: relative; margin: 0; }
.rama::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--klos); border-radius: var(--r); opacity: .7; pointer-events: none; transition: inset var(--przejscie), opacity var(--przejscie); }
.rama > img, .rama > a { position: relative; }
.rama:hover::before { inset: 8px -8px -8px 8px; opacity: 1; }
.rama-ciemna::before { border-color: var(--klos-2); }
.rama img { border-radius: var(--r); width: 100%; }

/* ---------- sekcje ---------- */
.sekcja { padding: clamp(60px, 8vw, 116px) 0; }
.sekcja-tynk { background: var(--tynk); }
.sekcja-papier { background: var(--papier); }
.sekcja-drewno { background: var(--drewno) url(../img/drewno.jpg) center/cover; color: var(--jasny); position: relative; }
.sekcja-drewno::before { content: ''; position: absolute; inset: 0; background: rgba(27, 19, 14, .62); }
.sekcja-drewno > .kont { position: relative; }
.naglowek-sekcji { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.naglowek-sekcji h2 { font-size: clamp(34px, 4vw, 54px); }
.naglowek-sekcji.z-linkiem { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; text-align: left; }
.duzy { font-size: 19px; line-height: 1.7; }
.dwie { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(36px, 6vw, 88px); align-items: center; }

/* ---------- strona główna: Menu / Historia Jatek ---------- */
.wejscia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.wejscie { display: flex; flex-direction: column; background: var(--drewno-2); color: var(--jasny); text-decoration: none; border-radius: var(--r); overflow: hidden; box-shadow: var(--cien); }
.wejscie-zdj { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.wejscie-zdj img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.wejscie:hover .wejscie-zdj img { transform: scale(1.05); }
.wejscie-tekst { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(24px, 3vw, 40px); border-top: 2px solid var(--klos); }
.wejscie-tytul { font: 600 clamp(34px, 3.6vw, 48px)/1.1 var(--szeryf); color: #f6ecda; }
.wejscie-tekst p { margin: 0; color: var(--jasny-2); }
.wejscie-tekst .btn { margin-top: auto; }
a.wejscie .wejscie-tekst { flex: none; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
a.wejscie .wejscie-tekst .btn { margin-top: 0; }
a.wejscie:hover .btn { background: var(--klos); border-color: var(--klos); color: var(--drewno); }
a.wejscie .wejscie-zdj { flex: 1; aspect-ratio: auto; min-height: 280px; }

/* ---------- o restauracji ---------- */
.o-nas-zdj { position: relative; padding: 0 14px 70px 0; }
.o-nas-b { position: absolute; right: -6px; bottom: 0; width: 38%; margin: 0; border: 6px solid var(--papier); border-radius: var(--r); box-shadow: var(--cien); overflow: hidden; }
.o-nas-b img { width: 100%; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.o-nas-b:hover img { transform: scale(1.05); }
.o-nas-tekst p:last-child { margin-bottom: 0; }

.sale { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(44px, 6vw, 80px); border-block: 1px solid var(--tynk-2); }
.sale li { display: flex; flex-direction: column; align-items: center; padding: 30px 12px 28px; text-align: center; border-left: 1px solid var(--tynk-2); }
.sale li:first-child { border-left: 0; }
.sale em { order: -1; font: 500 12px/1.4 var(--bez); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--tekst-2); }
.sale b { font: 600 clamp(48px, 5vw, 68px)/1.05 var(--szeryf); color: var(--cegla); }
.sale span { font-size: 15px; color: var(--tekst-2); }
.sale-razem { background: rgba(201, 163, 102, .14); }
.sale-bok { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
.sale-bok b { font-size: 40px; }
.sale-bok li { padding: 18px 6px; }
.sale-bok em { font-size: 10.5px; letter-spacing: .14em; }
.sale-bok span { font-size: 12.5px; line-height: 1.3; }

.czytaj { margin-top: clamp(32px, 4vw, 52px); }
.czytaj summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin-inline: auto; padding: 13px 26px; border: 1px solid var(--belka); border-radius: var(--r); font: 500 13.5px/1.2 var(--bez); letter-spacing: .16em; text-transform: uppercase; color: var(--belka); cursor: pointer; transition: background var(--przejscie), color var(--przejscie); }
.czytaj summary::-webkit-details-marker { display: none; }
.czytaj summary:hover { background: var(--belka); color: var(--jasny); }
.czytaj summary .ik { transition: transform .3s; }
.czytaj[open] summary .ik { transform: rotate(180deg); }
.czytaj-tresc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px); margin-top: clamp(32px, 4vw, 52px); }
.czytaj-tresc h2 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 16px; padding-top: 18px; border-top: 2px solid var(--klos); }
.czytaj-tresc p:last-child { margin-bottom: 0; }
.czytaj[open] .czytaj-tresc { animation: wjazd .6s both; }
@keyframes wjazd { from { opacity: 0; transform: translateY(14px); } }

/* ---------- oferta ---------- */
.oferta-siatka { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 28px); }
.oferta-siatka-5 > * { grid-column: span 2; }
.oferta-siatka-5 > :nth-child(-n+2) { grid-column: span 3; }
.oferta-siatka-4 { grid-template-columns: repeat(4, 1fr); }
.oferta-kafel { display: flex; flex-direction: column; background: var(--karta); border: 1px solid var(--tynk-2); border-radius: var(--r); overflow: hidden; text-decoration: none; transition: transform var(--przejscie), box-shadow var(--przejscie), border-color var(--przejscie); }
.oferta-kafel:hover { transform: translateY(-5px); box-shadow: var(--cien); border-color: var(--klos); }
.oferta-kafel-zdj { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.oferta-siatka-5 > :nth-child(-n+2) .oferta-kafel-zdj { aspect-ratio: 16 / 9; }
.oferta-kafel-zdj img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.oferta-kafel:hover .oferta-kafel-zdj img { transform: scale(1.06); }
.oferta-kafel-nazwa { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; font: 600 clamp(20px, 1.7vw, 24px)/1.2 var(--szeryf); border-top: 2px solid var(--klos); }
.oferta-kafel-nazwa .ik { color: var(--cegla); transition: transform var(--przejscie); }
.oferta-kafel:hover .oferta-kafel-nazwa .ik { transform: translateX(5px); }

.oferta-blok { background: var(--drewno) url(../img/drewno.jpg) center/cover; color: var(--jasny); position: relative; padding: clamp(56px, 7vw, 104px) 0; }
.oferta-blok::before { content: ''; position: absolute; inset: 0; background: rgba(27, 19, 14, .62); }
.oferta-blok-wn { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.oferta-blok-zdj { margin-right: 14px; }
.oferta-blok-zdj img { box-shadow: 0 30px 60px -30px #000; }
.oferta-blok h1, .oferta-blok h2 { font-size: clamp(34px, 3.8vw, 54px); color: #f6ecda; }
.oferta-blok-pod { margin: 24px 0 30px; font: 500 italic clamp(21px, 2vw, 26px)/1.35 var(--szeryf); color: var(--jasny-2); }
.oferta-blok-logo { width: 104px; height: 104px; margin-bottom: 22px; opacity: .92; }

/* ---------- galeria ---------- */
.zajawka-siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gal-el { display: block; overflow: hidden; border-radius: var(--r); cursor: zoom-in; background: var(--drewno-3); }
.gal-el img { width: 100%; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.gal-el:hover img { transform: scale(1.05); filter: brightness(1.06); }
.zajawka-siatka .gal-el { aspect-ratio: 1; }
.zajawka-siatka .gal-el img { height: 100%; object-fit: cover; }
.galeria-zajawka .naglowek-sekcji h2 { color: #f6ecda; }

.gal-nawigacja { position: sticky; top: 68px; z-index: 40; background: var(--drewno-2); border-bottom: 1px solid rgba(201, 163, 102, .3); }
.gal-nawigacja-wn { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.gal-nawigacja-wn::-webkit-scrollbar { display: none; }
.gal-nawigacja a { flex: none; padding: 9px 16px; border: 1px solid transparent; border-radius: 100px; font: 500 12.5px/1 var(--bez); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--jasny); transition: border-color .3s, color .3s; }
.gal-nawigacja a:hover { border-color: var(--klos); color: var(--klos); }
.gal-nawigacja small { color: var(--klos); letter-spacing: 0; margin-left: 4px; }
.gal-mur { columns: 4; column-gap: 14px; }
.gal-mur .gal-el { margin-bottom: 14px; break-inside: avoid; }
.gal-mur-maly { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; max-width: 1000px; margin-inline: auto; }
.gal-mur-maly .gal-el { margin: 0; }

.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(14, 9, 6, .95); display: grid; place-items: center; padding: 20px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; }
.lightbox img { max-width: min(1200px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); width: auto; border-radius: var(--r); box-shadow: 0 30px 80px #000; }
.lb-x, .lb-nav { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; background: rgba(27, 19, 14, .7); border: 1px solid rgba(201, 163, 102, .5); border-radius: 50%; color: var(--jasny); font-size: 30px; line-height: 1; cursor: pointer; transition: background .3s, color .3s; }
.lb-x:hover, .lb-nav:hover { background: var(--klos); color: var(--drewno); }
.lb-x { right: 18px; top: 18px; }
.lb-wst { left: 18px; top: 50%; margin-top: -26px; }
.lb-dal { right: 18px; top: 50%; margin-top: -26px; }
.lightbox.jedno .lb-nav { display: none; }

/* ---------- baner podstrony ---------- */
.baner { background: var(--drewno) url(../img/drewno.jpg) center/cover; color: var(--jasny); position: relative; }
.baner::before { content: ''; position: absolute; inset: 0; background: rgba(27, 19, 14, .6); }
.baner-wn { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 5vw, 68px); }
.baner-foto .baner-wn { grid-template-columns: 6fr 5fr; }
.baner h1 { font-size: clamp(38px, 4.6vw, 66px); color: #f6ecda; }
.baner-zdj { margin: 0; aspect-ratio: 16 / 8; overflow: hidden; border-radius: var(--r); border: 1px solid rgba(201, 163, 102, .45); box-shadow: 0 30px 60px -30px #000; }
.baner-zdj img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- treść artykułów ---------- */
.proza { max-width: 72ch; }
.proza h2 { font-size: clamp(27px, 2.6vw, 36px); margin: 1.5em 0 .6em; padding-top: .7em; border-top: 2px solid var(--klos); }
.proza ul { margin: 0 0 1.1em; }
.proza li { position: relative; padding: 5px 0 5px 28px; }
.proza li::before { content: ''; position: absolute; left: 4px; top: .95em; width: 7px; height: 7px; border: 1px solid var(--cegla); transform: rotate(45deg); }
.inicjal::first-letter { float: left; font: 600 4.3em/.82 var(--szeryf); color: var(--cegla); padding: .08em .12em 0 0; }
.artykul-wn { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(36px, 6vw, 88px); align-items: start; }
.artykul-bok { position: sticky; top: 110px; padding-right: 14px; }
.historia-wn { display: grid; grid-template-columns: minmax(0, 6fr) 4fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.historia-zdj { position: sticky; top: 110px; margin-right: 14px; }
.historia-zdj .gal-el { background: none; }

/* ---------- karta dań ---------- */
.karta-sekcja { padding-top: clamp(32px, 4vw, 52px); }
.jezyki { display: flex; justify-content: center; gap: 0; width: fit-content; margin: 0 auto clamp(24px, 3vw, 36px); border: 1px solid var(--belka); border-radius: var(--r); overflow: hidden; }
.jezyk { padding: 11px 24px; background: none; border: 0; border-left: 1px solid var(--belka); font: 500 13px/1 var(--bez); letter-spacing: .2em; color: var(--belka); cursor: pointer; transition: background .3s, color .3s; }
.jezyk:first-child { border-left: 0; }
.jezyk:hover { background: rgba(74, 48, 32, .1); }
.jezyk.aktywny { background: var(--belka); color: var(--jasny); }
.karta-zakladki { position: sticky; top: 68px; z-index: 30; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -24px clamp(28px, 4vw, 44px); padding: 10px 24px; background: var(--papier); border-block: 1px solid var(--tynk-2); }
.karta-zakladki::-webkit-scrollbar { display: none; }
.karta-zakladki a { flex: none; padding: 8px 14px; border-radius: 100px; font: 500 12px/1 var(--bez); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--tekst-2); white-space: nowrap; transition: background .3s, color .3s; }
.karta-zakladki a:hover { color: var(--cegla); }
.karta-zakladki a.aktywna { background: var(--cegla); color: #fff7ea; }
.karta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 32px); }
.karta-grupa { background: var(--karta); border: 1px solid var(--tynk-2); border-top: 3px solid var(--belka); border-radius: var(--r); padding: clamp(24px, 3vw, 44px); box-shadow: 0 14px 34px -28px rgba(27, 19, 14, .5); }
.karta-grupa-szeroka { grid-column: 1 / -1; }
.karta-naglowek { margin-bottom: 22px; }
.karta-naglowek h2 { font-size: clamp(30px, 3vw, 42px); }
.karta-naglowek h2 small { font: 500 italic .5em/1.2 var(--szeryf); color: var(--tekst-2); margin-left: 8px; }
.karta-naglowek .ozdobnik { margin-top: 14px; }
.karta-wstep { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--tekst-2); max-width: 78ch; }
.karta-cena-dzialu { margin: 8px 0 0; }
.karta-podgrupa h3 { font: 500 12.5px/1.3 var(--bez); letter-spacing: .24em; text-transform: uppercase; color: var(--cegla); margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--tynk-2); }
.karta-podgrupa + .karta-podgrupa { margin-top: 30px; }
.karta-grupa-szeroka .pozycje { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.karta-grupa-dzielona .karta-kolumny { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.karta-grupa-dzielona .pozycje { columns: 1; }
.karta-grupa-dzielona .karta-podgrupa { break-inside: avoid; margin: 0 0 30px; }
.poz { padding: 11px 0; break-inside: avoid; border-bottom: 1px dotted rgba(74, 48, 32, .22); }
.pozycje .poz:last-child { border-bottom: 0; }
.poz-gora { display: flex; align-items: baseline; gap: 10px; }
.poz-nazwa { font: 600 21px/1.25 var(--szeryf); }
.poz-nr { font-style: italic; font-weight: 500; color: var(--klos-2); margin-right: 2px; }
.poz-lisc { display: inline-block; color: #5f9a47; vertical-align: -2px; }
.poz-lisc .ik { fill: none; width: 17px; height: 17px; }
.poz-kropki { flex: 1; min-width: 14px; }
.poz-ceny { display: flex; gap: 6px 16px; flex: none; text-align: right; white-space: nowrap; }
.poz-ceny-stos { flex-direction: column; align-items: flex-end; }
.poz-cena { display: inline-flex; align-items: baseline; gap: 6px; }
.poz-cena + .poz-cena { padding-left: 16px; border-left: 1px solid var(--tynk-2); }
.poz-ceny-stos .poz-cena + .poz-cena { padding-left: 0; border-left: 0; }
.poz-cena small { font: 400 13.5px/1.2 var(--bez); color: var(--tekst-2); }
.poz-cena b { font: 700 21px/1.2 var(--szeryf); color: var(--cegla); }
.poz-opis { margin: 3px 0 0; max-width: 56ch; font-size: 14.5px; line-height: 1.5; color: var(--tekst-2); }
.karta-stopka { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--tynk-2); font-size: 15px; color: var(--tekst-2); }
.karta-stopka b { font: 600 19px/1.3 var(--szeryf); color: var(--tekst); display: block; }
.karta-jezyk[hidden] { display: none; }
.karta-plansze { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); align-items: start; }
.plansza { background: #fff; border: 1px solid var(--tynk-2); box-shadow: 0 14px 34px -24px rgba(27, 19, 14, .5); }
.plansza img { width: 100%; }
.plansza:hover img { transform: none; filter: none; }

.pas-rezerwacja { background: var(--drewno-2); color: var(--jasny); border-top: 2px solid var(--klos); }
.pas-rezerwacja-wn { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-block: clamp(36px, 4vw, 56px); }
.pas-rezerwacja .etykieta { margin-bottom: 10px; }
.pas-godziny { display: flex; gap: 6px 40px; flex-wrap: wrap; }
.godz { margin: 0; font: 600 clamp(22px, 2.2vw, 28px)/1.3 var(--szeryf); }
.godz-sniad { font-weight: 500; font-style: italic; color: var(--jasny-2); }
.pas-godziny .godz-sniad br { display: none; }

/* ---------- kontakt ---------- */
.kontakt-karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.kontakt-karta { background: var(--karta); border: 1px solid var(--tynk-2); border-top: 3px solid var(--belka); border-radius: var(--r); padding: clamp(26px, 3vw, 40px); transition: transform var(--przejscie), box-shadow var(--przejscie), border-color var(--przejscie); }
.kontakt-karta:hover { transform: translateY(-4px); box-shadow: var(--cien); border-top-color: var(--cegla); }
.kontakt-ik { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--klos); border-radius: 50%; color: var(--cegla); margin-bottom: 20px; }
.kontakt-ik .ik { width: 20px; height: 20px; }
.kontakt-karta h2 { font-size: 30px; margin-bottom: 14px; }
.kontakt-karta p { margin: 0 0 10px; }
.kontakt-karta .godz { font-size: 22px; color: var(--tekst); }
.kontakt-karta .godz-sniad { font-size: 19px; color: var(--tekst-2); margin-top: 10px; }
.kontakt-karta .status { color: var(--tekst-2); margin-top: 14px; }
.kontakt-linki { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kontakt-linki a { text-decoration: none; border-bottom: 1px solid rgba(164, 71, 44, .35); overflow-wrap: anywhere; transition: color .3s, border-color .3s; }
.kontakt-linki a:hover { color: var(--cegla); border-color: var(--cegla); }
.kontakt-akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: clamp(32px, 4vw, 52px) 0; }
.mapa { position: relative; aspect-ratio: 21 / 9; margin-right: 14px; background: var(--drewno-2); }
.mapa-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapa-zaslona { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(27, 19, 14, .66); color: var(--jasny); text-align: center; padding: 20px; border-radius: var(--r); }
.mapa-zaslona .ik { width: 34px; height: 34px; color: var(--klos); }
.mapa-zaslona p { margin: 0; }
.mapa-zaslona b { display: block; font: 600 30px/1.2 var(--szeryf); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r); }
.mapa.zaladowana .mapa-zaslona { display: none; }

/* ---------- stopka ---------- */
.stopka { background: #150e0a url(../img/drewno.jpg) center/cover; color: var(--jasny-2); position: relative; font-size: 16px; }
.stopka::before { content: ''; position: absolute; inset: 0; background: rgba(18, 12, 8, .78); pointer-events: none; }
.stopka > * { position: relative; }
.stopka a { text-decoration: none; transition: color .3s; }
.stopka a:hover { color: var(--klos); }
.stopka-cta { border-top: 2px solid var(--klos); border-bottom: 1px solid rgba(201, 163, 102, .2); background: rgba(39, 27, 20, .7); }
.stopka-cta-wn { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-block: clamp(34px, 4vw, 52px); }
.stopka-cta .etykieta { margin-bottom: 8px; }
.stopka-cta-tel { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 600 clamp(26px, 3vw, 40px)/1.2 var(--szeryf); color: #f6ecda; }
.stopka-cta-tel span { color: var(--klos); }
.stopka-cta-przyciski { display: flex; flex-wrap: wrap; gap: 14px; }
.stopka-siatka { display: grid; grid-template-columns: 1.1fr 1.5fr 1.1fr 1.4fr .7fr; gap: clamp(28px, 3vw, 40px); padding-block: clamp(48px, 6vw, 80px) clamp(36px, 4vw, 52px); }
.logo-stopka img { height: 96px; }
.stopka-nazwa { margin: 18px 0 20px; font: 500 italic 20px/1.3 var(--szeryf); color: var(--jasny); }
.stopka h3 { font: 500 12px/1.4 var(--bez); letter-spacing: .26em; text-transform: uppercase; color: var(--klos); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(201, 163, 102, .25); }
.stopka-lista li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.stopka-lista .ik { margin-top: 5px; color: var(--klos); }
.stopka-lista a[href^=mailto] { font-size: 15px; }
.stopka-trasa { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 12.5px/1 var(--bez); letter-spacing: .18em; text-transform: uppercase; color: var(--klos); }
.stopka-trasa .ik { transition: transform var(--przejscie); }
.stopka-trasa:hover .ik { transform: translateX(4px); }
.stopka-godziny .godz { font-size: 21px; color: var(--jasny); }
.stopka-godziny .godz-sniad { font-size: 17.5px; color: var(--jasny-2); margin-top: 8px; }
.stopka .status { margin-top: 14px; }
.stopka-menu li { margin-bottom: 9px; line-height: 1.4; }
.stopka-menu a { display: inline-block; transition: color .3s, transform .3s; }
.stopka-menu a:hover { transform: translateX(4px); }
.stopka-pfr { padding-bottom: clamp(28px, 3vw, 40px); }
.stopka-pfr img { width: min(760px, 100%); background: #fff; padding: 10px 16px; border-radius: var(--r); margin-inline: auto; }
.stopka-dol { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px 26px; border-top: 1px solid rgba(201, 163, 102, .2); font-size: 14.5px; }
.stopka-dol p { margin: 0; }
.stopka-prawne { display: flex; align-items: center; gap: 18px; }
.do-gory { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(201, 163, 102, .4); border-radius: 50%; color: var(--jasny); transition: background .3s, color .3s, transform .3s; }
.stopka a.do-gory:hover { background: var(--klos); color: var(--drewno); transform: translateY(-3px); }

/* ---------- ruch (tylko gdy JS doda .ruch i użytkownik nie ogranicza animacji) ---------- */
.ruch .odslon { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.ruch .odslon.widoczne { opacity: 1; transform: none; }
.ruch .grupa-ruch > * { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), box-shadow var(--przejscie), border-color var(--przejscie); transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s; }
.ruch .grupa-ruch.widoczne > * { opacity: 1; transform: none; }
.ruch .grupa-ruch.widoczne > .oferta-kafel:hover, .ruch .grupa-ruch.widoczne > .kontakt-karta:hover { transform: translateY(-5px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- mniejsze ekrany ---------- */
@media (max-width: 1180px) {
  .nawigacja { gap: 22px; }
  .naglowek-social { display: none; }
  .stopka-siatka { grid-template-columns: 1fr 1fr 1fr; }
  .stopka-marka { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .stopka-nazwa { margin: 0; flex: 1; }
  .gal-mur { columns: 3; }
}
@media (max-width: 980px) {
  html { scroll-padding-top: 120px; }
  .nawigacja, .naglowek-rez { display: none; }
  .burger { display: flex; }
  .naglowek-wn { height: 72px; }
  .naglowek.maly .naglowek-wn { height: 64px; }
  .logo img { height: 48px; }
  .gal-nawigacja, .karta-zakladki { top: 64px; }
  .hero { padding-top: 0; }
  .hero .hero-wn { grid-template-columns: 1fr; gap: 0; width: 100%; }
  .hero-zdj { order: 0; }
  .hero-zdj.rama::before { display: none; }
  .hero-zdj img { border-radius: 0; box-shadow: none; }
  .hero-tekst { width: min(1240px, 100% - 48px); margin-inline: auto; padding-top: 32px; }
  .hero-pasek { grid-template-columns: 1fr; margin-top: 32px; }
  .hero-pasek li, .hero-pasek li:first-child { border-left: 0; padding: 16px 0; border-top: 1px solid rgba(201, 163, 102, .16); }
  .hero-pasek li:first-child { border-top: 0; }
  .dwie, .artykul-wn, .historia-wn, .oferta-blok-wn, .baner-foto .baner-wn { grid-template-columns: 1fr; }
  .wejscia { grid-template-columns: 1fr; }
  a.wejscie .wejscie-zdj { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .artykul-bok { position: static; }
  .historia-zdj { position: relative; top: auto; }
  .historia-zdj { max-width: 420px; }
  .artykul-bok { max-width: 520px; }
  .czytaj-tresc { grid-template-columns: 1fr; }
  .oferta-siatka, .oferta-siatka-4 { grid-template-columns: repeat(2, 1fr); }
  .oferta-siatka-5 > *, .oferta-siatka-5 > :nth-child(-n+2) { grid-column: auto; }
  .oferta-siatka-5 > :last-child { grid-column: 1 / -1; }
  .oferta-siatka-5 > :last-child .oferta-kafel-zdj { aspect-ratio: 16 / 7; }
  .oferta-siatka-5 > :nth-child(-n+2) .oferta-kafel-zdj { aspect-ratio: 4 / 3; }
  .karta { grid-template-columns: 1fr; }
  .karta-plansze { grid-template-columns: repeat(2, 1fr); }
  .kontakt-karty { grid-template-columns: 1fr; }
  .mapa { aspect-ratio: 4 / 3; }
  .baner-zdj { aspect-ratio: 16 / 7; }
}
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .kont { width: calc(100% - 40px); }
  .hero-tekst { width: calc(100% - 40px); }
  .duzy { font-size: 17.5px; }
  .naglowek-sekcji.z-linkiem { flex-direction: column; align-items: flex-start; }
  .rama::before { inset: 10px -10px -10px 10px; }
  .o-nas-zdj { padding: 0 10px 56px 0; }
  .sale { grid-template-columns: 1fr 1fr; }
  .sale li:nth-child(3) { border-left: 0; }
  .sale li:nth-child(n+3) { border-top: 1px solid var(--tynk-2); }
  .sale-bok { grid-template-columns: repeat(3, 1fr); }
  .sale-bok li:nth-child(3) { border-left: 1px solid var(--tynk-2); border-top: 0; }
  .oferta-siatka, .oferta-siatka-4 { grid-template-columns: 1fr; }
  .oferta-siatka-5 > :last-child .oferta-kafel-zdj, .oferta-kafel-zdj { aspect-ratio: 16 / 9; }
  .zajawka-siatka { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gal-mur { columns: 2; column-gap: 10px; }
  .gal-mur .gal-el { margin-bottom: 10px; }
  .gal-mur-maly { grid-template-columns: 1fr 1fr; gap: 10px; }
  .karta-zakladki { margin-inline: -20px; padding-inline: 20px; }
  .karta-grupa-szeroka .pozycje, .karta-grupa-dzielona .karta-kolumny { columns: 1; }
  .karta-plansze { grid-template-columns: 1fr; }
  .poz-nazwa { font-size: 19.5px; }
  .poz-cena b { font-size: 19.5px; }
  .poz-ceny { flex-direction: column; align-items: flex-end; }
  .poz-cena + .poz-cena { padding-left: 0; border-left: 0; }
  .poz-kropki { min-width: 6px; }
  .jezyk { padding: 11px 18px; }
  .stopka-siatka { grid-template-columns: 1fr 1fr; }
  .stopka-siatka > :nth-child(2), .stopka-siatka > :nth-child(4) { grid-column: 1 / -1; }
  .stopka-cta-wn, .pas-rezerwacja-wn { flex-direction: column; align-items: flex-start; }
  .stopka-dol { flex-direction: column; align-items: flex-start; }
  .stopka-prawne { width: 100%; justify-content: space-between; }
  .lb-nav { top: auto; bottom: 18px; margin: 0; }
  .mapa { margin-right: 10px; }
  .artykul-bok { padding-right: 10px; }
  .historia-zdj { margin-right: 10px; }
  .inicjal::first-letter { font-size: 3.6em; }
}
@media (max-width: 420px) {
  .btn-duzy { padding: 15px 22px; }
  .przyciski .btn, .stopka-cta-przyciski .btn, .kontakt-akcje .btn { flex: 1 1 100%; }
  .stopka-cta-przyciski, .kontakt-akcje { width: 100%; }
  .stopka-siatka { grid-template-columns: 1fr; }
}

/* ---- WordPress (motyw „Chatka”) ---- */
.admin-bar .naglowek { top: 32px; }
@media (max-width: 782px) { .admin-bar .naglowek { top: 46px; } }
@media (max-width: 600px) { .admin-bar .naglowek { top: 0; } }
.tresc-wp img { max-width: 100%; height: auto; }
.tresc-wp figure { margin: 1.2em 0; }
.tresc-wp .aligncenter { display: block; margin-inline: auto; }
.tresc-wp .alignleft { float: left; margin: .3em 1.2em 1em 0; }
.tresc-wp .alignright { float: right; margin: .3em 0 1em 1.2em; }
.tresc-wp .wp-caption, .tresc-wp .wp-caption-text { max-width: 100%; font-size: 14px; }
.tresc-wp table { width: 100%; border-collapse: collapse; }
.tresc-wp td, .tresc-wp th { border: 1px solid rgba(74, 48, 32, .2); padding: 6px 10px; }
.tresc-wp a { color: var(--cegla); }
.kontakt-tresc { max-width: 72ch; margin: 0 auto clamp(28px, 4vw, 48px); }
.karta-wstep-strony { margin: 0 auto 28px; }
/* Galeria: równa siatka kafli (zamiast „muru” kolumn) — odporna na <p>, <br>, figure, srcset, width/height i klasy WP */
.gal-mur, .gal-mur-maly { columns: auto !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; max-width: none; }
.gal-mur-maly { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); max-width: 1000px; margin-inline: auto; }
.gal-mur > :not(.gal-el) { display: none !important; }
.gal-mur .gal-el, .gal-mur-maly .gal-el { position: relative; display: block; margin: 0 !important; aspect-ratio: 4 / 5; width: 100%; min-width: 0; height: auto; break-inside: auto; }
.gal-mur .gal-el img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; margin: 0; float: none; }
@media (max-width: 1000px) { .gal-mur { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .gal-mur, .gal-mur-maly { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.przyciski-404 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kont-waski { width: min(860px, 100% - 48px); }
.karta-dalej { text-align: center; margin: 36px 0 0; }
.karta-plansze-jedna { justify-content: center; }
/* Adres „Gdzie jesteśmy?” (17.10, prośba klienta): linia nad ulicą i dopisek o dwóch wejściach */
.hero-pasek .adres-przed, .hero-pasek .adres-po { display: block; }
.hero-pasek .adres-po, .sz-kafel-t .adres-po { font-size: .92em; opacity: .8; }
.kontakt-karta .adres-przed { font-weight: 500; color: var(--tekst); }
.kontakt-karta .adres-po { color: var(--tekst-2); }
.sz-kafel-t .adres-po { display: block; color: #e9dcc6; }
.artykul-pdf { margin: 2em 0 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }