/* Czwartkowy Klub Singli – wygląd jak relatiovera.pl/#/wydarzenia (Tailwind v4: stone / amber) */
:root {
  --stone-50: oklch(98.5% .001 106.423);
  --stone-100: oklch(97% .001 106.424);
  --stone-200: oklch(92.3% .003 48.717);
  --stone-300: oklch(86.9% .005 56.366);
  --stone-400: oklch(70.9% .01 56.259);
  --stone-500: oklch(55.3% .013 58.071);
  --stone-600: oklch(44.4% .011 73.639);
  --stone-700: oklch(37.4% .01 67.558);
  --stone-800: oklch(26.8% .007 34.298);
  --stone-900: oklch(21.6% .006 56.043);
  --amber-50: oklch(98.7% .022 95.277);
  --amber-100: oklch(96.2% .059 95.617);
  --amber-200: oklch(92.4% .12 95.746);
  --amber-300: oklch(87.9% .169 91.605);
  --amber-400: oklch(82.8% .189 84.429);
  --amber-600: oklch(66.6% .179 58.318);
  --amber-700: oklch(55.5% .163 48.998);
  --amber-800: oklch(47.3% .137 46.201);
  --amber-900: oklch(41.4% .112 45.904);
  --orange-100: oklch(95.4% .038 75.164);
  --pomarancz: #fb7810;
  --pomarancz-hover: #e06505;
  --font: "Goudy Oldstyle Pro", "Sorts Mill Goudy", Georgia, serif;
  --shadow-xs: 0 1px 2px 0 #0000000d;
  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  line-height: 1.5;
  color: #1a1a1a;
  background: var(--stone-50);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
svg.ik { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Nagłówek: tylko logo */
.naglowek {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgb(255 255 255 / .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stone-100);
}
.naglowek .wnetrze { height: 128px; display: flex; align-items: center; justify-content: center; }
.naglowek img { height: 96px; width: auto; }

.kontener { max-width: 92rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .kontener { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .kontener { padding: 0 2rem; } }
@media (min-width: 768px) {
  .naglowek .wnetrze { justify-content: flex-start; }
  .naglowek a { margin-left: 60px; }
}

main { padding-top: 128px; min-height: 100vh; background: var(--stone-50); }
.strona { padding-top: 1.5rem; padding-bottom: 3rem; }

/* Hero */
.hero { text-align: center; max-width: 56rem; margin: 0 auto 3rem; }
.odznaka {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .25em;
  color: var(--amber-800); background: color-mix(in oklab, var(--amber-100) 70%, transparent);
  border: 1px solid var(--amber-200); padding: .375rem 1rem; border-radius: 9999px; margin-bottom: 1.5rem;
}
.odznaka svg.ik { width: 14px; height: 14px; color: var(--amber-700); }
h1 {
  font-weight: 400; font-size: 2.25rem; line-height: 1.25; letter-spacing: .025em;
  color: var(--stone-900); margin-bottom: 1.5rem;
}
.podtytul {
  font-size: 1.125rem; line-height: 1.625; color: var(--stone-600);
  max-width: 42rem; margin: 0 auto 2rem;
}
.kreska { width: 4rem; height: 1px; background: color-mix(in oklab, var(--amber-700) 40%, transparent); margin: 0 auto 2.5rem; }
@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  .podtytul { font-size: 1.25rem; }
}

.fakty { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; text-align: left; }
@media (min-width: 768px) { .fakty { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .fakty { grid-template-columns: repeat(6, 1fr); } }
.fakt { background: #fff; padding: 1rem; border-radius: 2px; border: 1px solid var(--stone-200); box-shadow: var(--shadow-xs); }
.fakt .ety { display: flex; align-items: center; gap: .5rem; color: var(--amber-700); margin-bottom: .25rem; }
.fakt .ety span { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--stone-400); line-height: 1.33; }
.fakt .war { font-size: .875rem; line-height: 1.43; font-weight: 500; color: var(--stone-900); }
.fakt .dop { font-size: .75rem; line-height: 1.33; color: var(--stone-500); }
.fakt .dop.amber { color: var(--amber-800); font-weight: 500; }
.fakt.cena { background: color-mix(in oklab, var(--amber-50) 60%, transparent); border-color: var(--amber-200); }
.fakt.cena .ety { color: var(--amber-800); }
.fakt.cena .ety span { color: var(--amber-800); }
.fakt.cena .war { font-size: 1rem; font-weight: 700; }
.fakt.cena .dop { color: var(--amber-800); }

/* Przyciski */
.przyciski { margin-top: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
@media (min-width: 640px) { .przyciski { flex-direction: row; } }
.btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: 2px; cursor: pointer; color: #fff; text-decoration: none; text-align: center;
  text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; line-height: 1.33; font-weight: 600;
  transition: background-color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.95); }
.btn-k { background: var(--pomarancz); }
.btn-k:hover { background: var(--pomarancz-hover); }
.btn-m { background: var(--stone-900); }
.btn-m:hover { background: var(--stone-800); }
.przyciski .btn { padding: 1rem 2rem; box-shadow: var(--shadow-md); }
.przyciski .btn:hover { box-shadow: var(--shadow-lg); }
.btn:focus-visible { outline: 2px solid var(--amber-600); outline-offset: 2px; }

/* Siatki 7/5 */
.siatka { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 5rem; }
.siatka.srodek { align-items: center; }
@media (min-width: 1024px) {
  .siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .siatka > .l { grid-column: span 7 / span 7; }
  .siatka > .p { grid-column: span 5 / span 5; }
}

h2 { font-weight: 400; font-size: 2.25rem; line-height: 1.11; color: var(--stone-900); }

.wstep { background: #fff; padding: 2rem; border-radius: 2px; border: 1px solid var(--stone-200); box-shadow: var(--shadow-xs); }
@media (min-width: 640px) { .wstep { padding: 3rem; } }
.wstep h2 { margin-bottom: 2rem; }
.wstep .tekst { color: var(--stone-600); font-size: 1.125rem; line-height: 1.625; font-weight: 300; }
.wstep .tekst p + p { margin-top: 1rem; }
.wstep .tekst p.mocny { color: var(--stone-900); font-weight: 400; }
.zabawa { margin-top: 2rem; padding: 1.5rem; background: var(--stone-50); border-left: 4px solid var(--amber-600); border-radius: 2px; }
.zabawa h3 { font-weight: 400; font-size: 1.5rem; line-height: 1.33; color: var(--stone-900); margin-bottom: .5rem; }
.zabawa p { color: var(--stone-600); font-size: 1rem; line-height: 1.625; margin-bottom: .75rem; }
.zabawa p.haslo { font-size: .75rem; line-height: 1.33; text-transform: uppercase; letter-spacing: .1em; color: var(--amber-800); font-weight: 600; margin: 0; }

.plakat-box { height: 100%; display: flex; align-items: stretch; }
.plakat {
  position: relative; width: 100%; border-radius: 2px; overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--stone-200); min-height: 380px;
}
.plakat img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .plakat { min-height: 100%; } }

.nadtytul { display: block; font-size: .75rem; line-height: 1.33; text-transform: uppercase; letter-spacing: .2em; color: var(--amber-800); font-weight: 600; }
.sekcja-tytul { margin-bottom: 2rem; }
.sekcja-tytul h2 { margin: .5rem 0 2rem; }

/* Program */
.program { display: flex; flex-direction: column; gap: 1rem; }
.punkt {
  background: #fff; padding: 1.25rem; border-radius: 2px; border: 1px solid var(--stone-200);
  box-shadow: var(--shadow-xs); transition: border-color .15s;
  display: flex; flex-direction: column; gap: .5rem;
}
.punkt:hover { border-color: var(--amber-300); }
@media (min-width: 640px) { .punkt { flex-direction: row; align-items: baseline; gap: 1.5rem; } .punkt .czas { width: 9rem; flex-shrink: 0; } }
.punkt .czas span { display: inline-block; font-size: .75rem; line-height: 1.33; font-weight: 600; color: var(--amber-800); background: var(--amber-50); padding: .25rem .625rem; border-radius: 2px; letter-spacing: .05em; }
.punkt h3 { font-weight: 400; font-size: 1.25rem; line-height: 1.4; color: var(--stone-900); margin-bottom: .25rem; }
.punkt p { font-size: 1rem; line-height: 1.625; color: var(--stone-600); font-weight: 300; }
.warto { margin-top: 1.5rem; padding: 1.25rem; background: color-mix(in oklab, var(--stone-100) 80%, transparent); border: 1px solid var(--stone-200); border-radius: 2px; color: var(--stone-700); font-size: 1rem; line-height: 1.625; }
.warto strong { font-weight: 500; color: var(--stone-900); }

/* Bilet */
.karta-bilet { background: #fff; padding: 2rem; border-radius: 2px; border: 1px solid var(--stone-200); box-shadow: var(--shadow-xs); margin-bottom: 1.5rem; }
.karta-bilet .gora { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--stone-100); }
.karta-bilet .gora .e { font-size: .75rem; line-height: 1.33; text-transform: uppercase; letter-spacing: .05em; color: var(--stone-500); font-weight: 600; }
.karta-bilet .gora .kw { font-size: 2.25rem; line-height: 1.11; color: var(--stone-900); font-weight: 300; margin-top: .25rem; }
.karta-bilet .gora .pill { font-size: .75rem; line-height: 1.33; text-transform: uppercase; letter-spacing: .05em; background: var(--amber-100); color: var(--amber-900); font-weight: 500; padding: .25rem .75rem; border-radius: 9999px; }
.lista { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.lista li { display: flex; align-items: flex-start; gap: .75rem; }
.lista li svg.ik { color: var(--amber-700); margin-top: .25rem; }
.lista li span { color: var(--stone-700); font-size: 1rem; line-height: 1.625; font-weight: 300; }
.lista li span.przyp { color: var(--stone-500); font-style: italic; font-size: .875rem; }
.karta-bilet .dol { padding-top: 1.5rem; border-top: 1px solid var(--stone-100); display: flex; flex-direction: column; gap: .75rem; }
.karta-bilet .dol .btn { width: 100%; padding: .875rem 1rem; box-shadow: var(--shadow-sm); }
.gwarancja { background: var(--stone-900); color: var(--stone-300); padding: 1.5rem; border-radius: 2px; font-size: .75rem; line-height: 1.625; display: flex; align-items: flex-start; gap: .75rem; }
.gwarancja svg.ik { width: 20px; height: 20px; color: var(--amber-400); margin-top: .125rem; }
.gwarancja .t { font-weight: 500; color: var(--stone-100); margin-bottom: .25rem; }

/* Formularz */
.rezerwacja { scroll-margin-top: 9rem; max-width: 56rem; margin: 0 auto 5rem; }
.karta-form { background: #fff; border-radius: 2px; border: 1px solid var(--stone-200); box-shadow: var(--shadow-md); padding: 2rem; }
@media (min-width: 640px) { .karta-form { padding: 3rem; } }
.form-glowa { text-align: center; margin-bottom: 2.5rem; }
.form-glowa .nadtytul { letter-spacing: .25em; margin-bottom: .5rem; }
.form-glowa h2 { margin-bottom: 1rem; }
.form-glowa p { font-size: 1.125rem; line-height: 1.625; color: var(--stone-600); font-weight: 300; max-width: 36rem; margin: 0 auto; }

.wybor { border: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .wybor { grid-template-columns: 1fr 1fr; } }
.wybor legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wybor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wybor label {
  display: block; padding: 1rem; border: 1px solid var(--stone-200); border-radius: 2px; cursor: pointer;
  background: var(--stone-50); color: var(--stone-800); transition: all .15s;
}
.wybor label:hover { background: var(--stone-100); }
.wybor .r1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.wybor .r1 .n { font-size: .75rem; line-height: 1.33; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.wybor .r1 .c { font-size: .875rem; line-height: 1.43; font-weight: 700; color: var(--stone-900); }
.wybor .r2 { font-size: .75rem; line-height: 1.33; color: var(--stone-500); }
.wybor input:focus-visible + label { outline: 2px solid var(--amber-600); outline-offset: 2px; }
#bilet-k:checked + label { border-color: var(--pomarancz); background: var(--pomarancz); color: #fff; box-shadow: var(--shadow-sm); }
#bilet-k:checked + label .c { color: var(--amber-100); }
#bilet-k:checked + label .r2 { color: var(--orange-100); }
#bilet-m:checked + label { border-color: var(--stone-900); background: var(--stone-900); color: #fff; box-shadow: var(--shadow-sm); }
#bilet-m:checked + label .c { color: var(--amber-300); }
#bilet-m:checked + label .r2 { color: var(--stone-300); }

.pola { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .pola { grid-template-columns: 1fr 1fr; } }
form .pole label, .pole-pelne label { display: block; font-size: .75rem; line-height: 1.33; font-weight: 600; color: var(--stone-700); margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .05em; }
form input[type=text], form input[type=number], form input[type=email], form input[type=tel], form textarea {
  width: 100%; padding: .75rem 1rem; background: var(--stone-50); border: 1px solid var(--stone-200);
  border-radius: 2px; font-size: .875rem; line-height: 1.43; outline: none; transition: border-color .15s, background-color .15s;
}
form input:focus, form textarea:focus { border-color: var(--stone-500); background: #fff; }
form input::placeholder, form textarea::placeholder { color: var(--stone-400); }
form textarea { resize: vertical; }
form .blad { display: none; margin-top: .25rem; font-size: .75rem; color: #b91c1c; }
form .pole.zle input { border-color: #dc2626; }
form .pole.zle .blad { display: block; }
.pole-pelne { margin-top: 1.5rem; }
.zgoda { padding-top: 2rem; display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.zgoda input { margin-top: .25rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--stone-900); }
.zgoda span { font-size: .75rem; color: var(--stone-500); line-height: 1.625; }
.zgoda:hover span { color: var(--stone-700); }
.wyslij { padding-top: 1.5rem; }
.wyslij .btn { width: 100%; padding: 1rem; box-shadow: var(--shadow-sm); }
.wyslij .btn:disabled { background: var(--stone-400); cursor: not-allowed; }
.ukryte { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Organizatorzy */
.organizatorzy { text-align: center; padding: 2rem 0; border-top: 1px solid var(--stone-200); max-width: 42rem; margin: 0 auto; }
.organizatorzy .e { font-size: .75rem; line-height: 1.33; text-transform: uppercase; letter-spacing: .2em; color: var(--stone-400); margin-bottom: .5rem; font-weight: 600; }
.organizatorzy h3 { font-weight: 400; font-size: 1.5rem; line-height: 1.33; color: var(--stone-900); }
.organizatorzy .a { font-size: .75rem; line-height: 1.33; color: var(--stone-500); margin-top: .25rem; }

/* Podziękowanie */
.dzieki { max-width: 42rem; margin: 2rem auto 5rem; }
.dzieki .karta-form { text-align: center; }
.dzieki .ok { width: 4rem; height: 4rem; border-radius: 9999px; background: oklch(95% .052 163.051); color: oklch(50.8% .118 165.612); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.dzieki .ok svg.ik { width: 32px; height: 32px; }
.dzieki h1 { font-size: 2.25rem; margin-bottom: 1rem; }
.dzieki .lead { font-size: 1.125rem; line-height: 1.625; color: var(--stone-600); margin-bottom: 2rem; }
.szczegoly { text-align: left; background: var(--stone-50); border: 1px solid var(--stone-200); border-radius: 2px; padding: 1.25rem; font-size: 1rem; line-height: 1.625; color: var(--stone-700); margin-bottom: 2rem; }
.szczegoly p + p { margin-top: .375rem; }
.szczegoly strong { font-weight: 500; color: var(--stone-900); }
.dzieki .btn { display: inline-flex; padding: 1rem 2rem; text-decoration: none; box-shadow: var(--shadow-md); }
.dzieki .powrot { display: inline-block; margin-top: 1.5rem; font-size: .875rem; color: var(--stone-500); }

/* Strona podziękowania: list od Renaty */
.list-renaty { display: flex; gap: 1.5rem; align-items: flex-start; text-align: left; margin: 1.5rem 0 2rem; }
.list-renaty .renata { width: 7.5rem; height: 9.5rem; object-fit: cover; object-position: top; border-radius: 2px; flex: none; box-shadow: var(--shadow-md); }
.list-renaty p { font-size: 1.0625rem; line-height: 1.65; color: var(--stone-700); }
.list-renaty p + p { margin-top: .75rem; }
.list-renaty .podpis { font-style: italic; font-size: 1.25rem; color: var(--stone-900, #1c1917); margin-top: 1rem; }
.list-renaty .podpis span { display: block; font-style: normal; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-500, #78716c); margin-top: .25rem; }
@media (max-width: 520px) { .list-renaty { flex-direction: column; align-items: center; text-align: center; } .list-renaty .renata { width: 9rem; height: 11.5rem; } }
.dzieki .pytania { margin-top: 1.5rem; font-size: .9375rem; color: var(--stone-600); }
.dzieki .pytania a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.dzieki .pozegnanie { margin-top: .75rem; font-style: italic; font-size: 1.125rem; color: var(--stone-700); }

/* Link w zgodzie formularza */
.zgoda a { color: var(--stone-700); text-decoration: underline; text-underline-offset: 2px; }

/* Stopka: polityka i ustawienia cookies */
.stopka { display: flex; justify-content: center; gap: 1.5rem; padding: 1.5rem 1rem 2rem; background: var(--stone-50); font-size: .8125rem; color: var(--stone-500); }
.stopka a, .stopka button { color: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.stopka a:hover, .stopka button:hover { color: var(--stone-800); }

/* Baner cookies */
.baner-cookies { position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem; max-width: 40rem; margin: 0 auto; background: #fff; border: 1px solid var(--stone-200); border-radius: 2px; box-shadow: var(--shadow-lg); padding: 1.25rem; }
.baner-cookies[hidden] { display: none; }
.baner-cookies p { font-size: .875rem; line-height: 1.6; color: var(--stone-700); }
.baner-cookies .baner-tytul { font-size: 1.125rem; font-weight: 600; color: var(--stone-900); margin-bottom: .375rem; }
.baner-cookies p a { color: var(--stone-900); text-underline-offset: 2px; }
.baner-przyciski { display: flex; gap: .75rem; margin-top: 1rem; }
.baner-przyciski .btn { flex: 1; padding: .75rem 1rem; }
.btn-jasny { background: #fff; color: var(--stone-900); border: 1px solid var(--stone-300); }
.btn-jasny:hover { background: var(--stone-100); }

/* Polityka prywatności */
.polityka { max-width: 48rem; margin: 2rem auto 3rem; color: var(--stone-700); line-height: 1.7; }
.polityka h1 { font-size: 2.25rem; font-weight: 400; color: var(--stone-900); }
.polityka .pod { margin: .5rem 0 2rem; font-size: .9375rem; color: var(--stone-500); }
.polityka h2 { font-size: 1.375rem; font-weight: 400; color: var(--stone-900); margin: 2.25rem 0 .75rem; scroll-margin-top: 140px; }
.polityka h3 { font-size: 1.0625rem; font-weight: 600; color: var(--stone-800); margin: 1.25rem 0 .5rem; }
.polityka ol, .polityka ul { padding-left: 1.4rem; }
.polityka li + li { margin-top: .5rem; }
.polityka li > ul { margin-top: .5rem; }
.polityka p + p { margin-top: .75rem; }
.polityka strong { font-weight: 600; color: var(--stone-900); }
.polityka a { color: var(--stone-900); text-underline-offset: 2px; word-break: break-word; }
.polityka code { font-size: .875em; background: var(--stone-100); padding: 0 .25em; border-radius: 2px; }
.uzupelnic { background: #fde68a; padding: 0 .25em; }