/* =========================================================================
   U SZWEJKA — styles.css
   Dark mahogany beer-hall. Committed brand red. See DESIGN.md.
   ========================================================================= */

:root{
  --mahon:#1A0F0D;
  --mahon-2:#221311;
  --deska:#2B1813;
  --deska-2:#382017;
  --line:rgba(247,239,226,.12);
  --line-strong:rgba(247,239,226,.22);

  --piana:#F7EFE2;
  --piana-dim:#DCCDB9;
  --muted:#AE9883;

  --czerwien:#E63247;
  --czerwien-deep:#C42235;
  --bursztyn:#E8A33D;

  --font-display:"Brygada 1918", Georgia, serif;
  --font-sans:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw:1220px;
  --gutter:clamp(20px,5vw,60px);
  --r-card:4px;
  --r-pill:999px;

  --ease:cubic-bezier(.19,1,.22,1);
  --shadow:0 26px 56px -26px rgba(0,0,0,.75);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--mahon);
  color:var(--piana);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--bursztyn);outline-offset:3px;border-radius:2px}
::selection{background:var(--czerwien);color:#fff}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.display{font-size:clamp(2.5rem,6.4vw,5.6rem);line-height:1.02}
h2.tytul{font-size:clamp(1.9rem,4vw,3.2rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:500}
p{max-width:66ch}
.lead{font-size:clamp(1.06rem,1.6vw,1.28rem);color:var(--piana-dim)}
.akcent{color:var(--czerwien)}
.cyfra{font-family:var(--font-display);color:var(--bursztyn)}

.wrap{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto}
section{padding-block:clamp(60px,9vw,128px);position:relative}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--czerwien);color:#fff;
  padding:.95em 1.7em;border-radius:var(--r-pill);
  font-weight:600;font-size:.97rem;
  transition:background .25s,transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{background:var(--czerwien-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(230,50,71,.55)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--ghost{background:transparent;color:var(--piana);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn--ghost:hover{background:rgba(247,239,226,.07);box-shadow:inset 0 0 0 1.5px var(--piana)}
.btn--lg{padding:1.05em 2em;font-size:1.02rem}

/* =========================================================================
   Header
   ========================================================================= */
.naglowek{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);
  transition:background .4s var(--ease),border-color .4s,padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.naglowek.scrolled{
  padding:9px var(--gutter);
  background:rgba(26,15,13,.82);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  border-bottom:1px solid var(--line);
}
.logo img{height:44px;width:auto;filter:brightness(0) invert(1)}
.naglowek.scrolled .logo img{height:38px}

.nawigacja{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.nav-linki{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px)}
.nav-linki a{font-size:.95rem;font-weight:600;color:var(--piana-dim);position:relative;padding:4px 0;transition:color .25s}
.nav-linki a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--czerwien);transition:width .3s var(--ease)}
.nav-linki a:hover,.nav-linki a[aria-current="page"]{color:var(--piana)}
.nav-linki a:hover::after,.nav-linki a[aria-current="page"]::after{width:100%}
.nav-akcje{display:flex;align-items:center;gap:13px}

.lang-toggle{display:inline-flex;gap:2px;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:3px;font-size:.74rem;font-weight:700}
.lang-toggle button{padding:4px 9px;border-radius:var(--r-pill);color:var(--muted);transition:color .2s,background .3s var(--ease)}
.lang-toggle button[aria-pressed="true"]{background:var(--czerwien);color:#fff}

.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:8px;align-items:center;justify-content:center}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--piana);transition:.3s var(--ease);position:relative}
.menu-toggle span::before{position:absolute;top:-6px}
.menu-toggle span::after{position:absolute;top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* =========================================================================
   Hero — image-led, full-bleed
   ========================================================================= */
.hero{min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;padding-bottom:clamp(52px,9vh,110px)}
.hero__tlo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__tlo img{width:100%;height:115%;object-fit:cover;object-position:center 40%;will-change:transform}
.hero__tlo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(26,15,13,.62) 0%,rgba(26,15,13,.15) 38%,rgba(26,15,13,.88) 86%,var(--mahon) 100%),
    radial-gradient(90% 60% at 75% 20%,transparent,rgba(26,15,13,.35));
}
.hero__tresc{position:relative;z-index:2}
.hero .display{max-width:13ch;margin-bottom:.32em}
.hero__lead{max-width:44ch;color:var(--piana-dim)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* =========================================================================
   Red claim band — drenched strip
   ========================================================================= */
.pas-czerwony{background:var(--czerwien);color:#fff;padding-block:clamp(30px,4.5vw,52px)}
.pas-czerwony .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:18px 40px}
.pas-czerwony .haslo{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,2rem);font-weight:600;max-width:24ch}
.pas-czerwony .fakty{display:flex;flex-wrap:wrap;gap:10px 36px;font-size:1.02rem}
.pas-czerwony .fakty b{font-family:var(--font-display);font-size:1.5em;font-weight:700}
.pas-czerwony .fakty span{opacity:.92}

/* =========================================================================
   Split story
   ========================================================================= */
.split{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,6vw,88px);align-items:center}
.split--rev{grid-template-columns:.96fr 1.04fr}
.split__foto{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.split__foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split__tekst .lead{margin-top:18px}
.split__tekst .wiersze{margin-top:24px;display:grid;gap:13px}
.split__tekst .wiersze li{display:flex;gap:13px;color:var(--piana-dim)}
.split__tekst .wiersze li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--bursztyn)}
@media(max-width:860px){.split,.split--rev{grid-template-columns:1fr}}

/* =========================================================================
   Beer band — full-bleed
   ========================================================================= */
.pas-piwo{min-height:72vh;display:flex;align-items:center;isolation:isolate;overflow:hidden}
.pas-piwo__tlo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.pas-piwo__tlo img{width:100%;height:116%;object-fit:cover;will-change:transform}
.pas-piwo__tlo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,15,13,.92) 10%,rgba(26,15,13,.55) 55%,rgba(26,15,13,.25))}
.pas-piwo__karta{max-width:46ch}
.pas-piwo__karta p{margin-top:16px;color:var(--piana-dim)}
.browary{display:flex;align-items:center;gap:34px;margin-top:30px}
.browary img{height:58px;width:auto;opacity:.92}

/* =========================================================================
   Menu tiles (asymmetric 2-col)
   ========================================================================= */
.kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2vw,24px)}
.kafel{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:300px;border-radius:var(--r-card);overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.kafel:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.kafel img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.kafel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,15,13,.06) 30%,rgba(26,15,13,.88) 92%)}
.kafel__tresc{padding:22px}
.kafel__tresc h3{margin-bottom:4px}
.kafel__tresc p{color:var(--piana-dim);font-size:.94rem;max-width:40ch}
.kafel__tresc .dalej{display:inline-flex;align-items:center;gap:.45em;margin-top:13px;color:var(--bursztyn);font-weight:600;font-size:.92rem}
.kafel:hover .dalej{text-decoration:underline;text-underline-offset:4px}
.kafel--tekst{background:var(--deska);border:1px solid var(--line);justify-content:center;padding:8px}
.kafel--tekst .kafel__tresc h3{font-size:1.7rem}

/* =========================================================================
   Galeria
   ========================================================================= */
.galeria{columns:3 240px;column-gap:14px}
.galeria figure{break-inside:avoid;margin-bottom:14px;border-radius:var(--r-card);overflow:hidden}
.galeria img{width:100%;filter:saturate(.95);transition:filter .5s}
.galeria figure:hover img{filter:saturate(1.1)}

/* =========================================================================
   Info rows + contact + form
   ========================================================================= */
.wiersz-info{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.wiersz-info .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);min-width:96px;padding-top:3px;font-weight:700}
.wiersz-info .v{color:var(--piana);font-size:1.03rem}
.wiersz-info .v a{border-bottom:1px solid var(--line-strong);transition:border-color .25s}
.wiersz-info .v a:hover{border-color:var(--czerwien)}

.siatka-kontakt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:start}
@media(max-width:820px){.siatka-kontakt{grid-template-columns:1fr}}
.pole{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.pole label{font-size:.85rem;color:var(--piana-dim);font-weight:600}
.pole input,.pole textarea{
  background:var(--deska);border:1px solid var(--line-strong);border-radius:var(--r-card);
  color:var(--piana);padding:13px 15px;font:inherit;font-size:.97rem;transition:border-color .25s,background .25s;
}
.pole input::placeholder,.pole textarea::placeholder{color:var(--muted)}
.pole input:focus,.pole textarea:focus{outline:none;border-color:var(--czerwien);background:var(--deska-2)}
.notka{font-size:.85rem;color:var(--muted);margin-top:8px;max-width:52ch}
.mapa{margin-top:26px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.mapa iframe{display:block;width:100%;height:320px;border:0;filter:grayscale(.25) brightness(.9)}

/* =========================================================================
   Footer
   ========================================================================= */
.stopka{background:var(--mahon-2);border-top:1px solid var(--line);padding-block:clamp(46px,7vw,80px)}
.stopka-siatka{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px}
@media(max-width:860px){.stopka-siatka{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stopka-siatka{grid-template-columns:1fr}}
.stopka h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:15px;font-weight:700}
.stopka a{color:var(--piana-dim);display:block;padding:5px 0;transition:color .2s}
.stopka a:hover{color:var(--czerwien)}
.stopka-marka img{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.stopka-marka p{color:var(--muted);font-size:.93rem;margin-top:16px;max-width:36ch}
.spolecznosci{display:flex;gap:10px;margin-top:18px}
.spolecznosci a{width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;color:var(--piana-dim);font-weight:700;font-size:.8rem;transition:.3s var(--ease)}
.spolecznosci a:hover{color:#fff;background:var(--czerwien);border-color:var(--czerwien);transform:translateY(-3px)}
.stopka-dol{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.stopka-dol .zastrzezenie{max-width:72ch}

/* =========================================================================
   Page hero (subpages) + misc
   ========================================================================= */
.naglowek-strony{padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(28px,4vw,54px)}
.naglowek-strony .lead{margin-top:14px;max-width:62ch}

/* Motion: reveals are JS-enhanced only; content fully visible without JS */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero__tlo img,.pas-piwo__tlo img{height:100%!important;transform:none!important}
}

/* Mobile nav */
@media(max-width:880px){
  .menu-toggle{display:flex}
  .nav-linki{
    position:fixed;inset:0 0 0 auto;width:min(82vw,350px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    background:var(--mahon-2);border-left:1px solid var(--line);padding:40px var(--gutter);
    transform:translateX(100%);transition:transform .45s var(--ease);z-index:45;
  }
  .nav-linki a{font-size:1.3rem;color:var(--piana)}
  body.nav-open .nav-linki{transform:translateX(0)}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:44}
}