/* ==========================================================================
   Bistro Borek — dowóz do firm (/dla-firm)
   Strona ofertowa dla firm, które jeszcze u nas nie zamawiają.

   Cały ten kanał sprzedaży kręci się wokół GODZINY: kierowca jest u firmy
   o stałej porze, a lista zamyka się dwie godziny wcześniej. Dlatego bohaterem
   strony jest tablica kursów, a nie zdjęcie jedzenia — i dlatego godziny mają
   własny krój (mono z cyframi jednakowej szerokości), którego nie używa reszta
   serwisu. Paleta i serif są markowe: butelkowa zieleń, czerń, złoto.
   ========================================================================== */

:root {
  --zielen: #0f3b2d;
  --zielen-ciemna: #082a1f;
  --zielen-glebia: #061f17;
  --zielen-mech: #1d5a45;
  --zielen-mgla: #e5ede7;
  --zloto: #c69a43;
  --zloto-jasne: #e5c982;
  --zloto-ciemne: #8a6727;
  --krem: #f4efe3;
  --papier: #fffdf8;
  --atrament: #20241f;
  --przygaszony: #5d635c;
  --linia: #e4decd;
  --linia-mocna: #cfc7b0;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --tresc: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--krem);
  color: var(--atrament);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.16; margin: 0; }
p { margin: 0 0 14px; }
a { color: var(--zielen-mech); }

/* --- Pasek górny ---------------------------------------------------------- */

.pasek {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: var(--zielen-glebia);
  color: var(--papier);
}
.pasek__marka {
  display: flex; align-items: center; gap: 10px;
  color: var(--papier); text-decoration: none;
  font-family: var(--serif); font-size: 1.08rem; letter-spacing: 0.01em; white-space: nowrap;
}
.pasek__nawigacja { display: flex; align-items: center; gap: 8px; font-size: 0.94rem; }
.pasek__nawigacja a { color: var(--zloto-jasne); text-decoration: none; padding: 8px 10px; border-radius: 999px; white-space: nowrap; }
.pasek__nawigacja a:hover { background: rgba(229, 201, 130, 0.12); }
.pasek__kod {
  border: 1px solid rgba(229, 201, 130, 0.5);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(29, 90, 69, 0.55) 0%, transparent 62%),
    var(--zielen-glebia);
  color: var(--papier);
  padding: clamp(40px, 8vw, 84px) clamp(16px, 4vw, 40px) clamp(46px, 8vw, 80px);
}
.hero__tresc { max-width: var(--tresc); margin: 0 auto; }

.nadtytul {
  font-family: var(--mono);
  font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--zloto); margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(2.15rem, 6vw, 3.85rem);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.hero__lead {
  max-width: 60ch;
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  color: rgba(255, 253, 248, 0.86);
  margin-bottom: 34px;
}

/* Tablica kursów — sygnatura strony. Godziny są prawdziwe: tyle kursów
   robimy dziennie. Nazw firm świadomie NIE pokazujemy. */
.kursy {
  border: 1px solid rgba(198, 154, 67, 0.36);
  border-radius: var(--radius-m);
  background: rgba(6, 31, 23, 0.55);
  padding: clamp(18px, 3vw, 26px);
  margin-bottom: 30px;
}
.kursy__tytul {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 253, 248, 0.62);
  margin-bottom: 16px;
}
/* Oś czasu rysuje KAŻDY kurs osobno (kreska na jego górnej krawędzi), a nie
   lista jako całość — inaczej po zawinięciu na telefonie drugi rząd godzin
   miałby kropki wiszące bez linii. */
.kursy__lista {
  display: flex; flex-wrap: wrap; gap: 18px 0;
  list-style: none; margin: 0 0 16px; padding: 0;
}
.kursy__lista li {
  position: relative;
  flex: 1 1 92px; min-width: 92px;
  padding-top: 20px;
  border-top: 1px solid rgba(198, 154, 67, 0.28);
}
/* Kropka na osi czasu — kurs jako punkt w dniu, nie jako element listy. */
.kursy__lista li::before {
  content: "";
  position: absolute; top: -5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--zloto);
  box-shadow: 0 0 0 4px rgba(6, 31, 23, 0.9);
}
.kursy__godzina {
  font-family: var(--mono);
  font-size: clamp(1.22rem, 2.6vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  color: var(--papier);
  letter-spacing: -0.02em;
}
.kursy__stopka {
  margin: 0;
  font-size: 0.94rem;
  color: rgba(255, 253, 248, 0.72);
  max-width: 62ch;
}
.kursy__stopka strong { color: var(--zloto-jasne); font-weight: 600; }

.hero__akcje { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Przyciski ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.btn--zloto { background: var(--zloto); color: var(--zielen-glebia); border-color: var(--zloto); }
.btn--zloto:hover { background: var(--zloto-jasne); }
.btn--linia { background: none; color: var(--papier); border-color: rgba(255, 253, 248, 0.38); }
.btn--linia:hover { border-color: var(--zloto); color: var(--zloto-jasne); }
.btn--pelny { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* --- Sekcje --------------------------------------------------------------- */

.sekcja {
  max-width: var(--tresc);
  margin: 0 auto;
  padding: clamp(44px, 7vw, 76px) clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--linia);
}
.sekcja h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom: 18px; }
.sekcja__lead { max-width: 64ch; color: var(--przygaszony); }
.sekcja__nota { margin: 22px 0 0; font-size: 0.94rem; color: var(--przygaszony); }

.kroki {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none; margin: 30px 0 0; padding: 0;
}
.kroki li { border-top: 2px solid var(--zielen); padding-top: 16px; }
.kroki__numer {
  font-family: var(--mono);
  font-size: 0.82rem; letter-spacing: 0.16em;
  color: var(--zloto-ciemne);
  margin-bottom: 8px;
}
.kroki h3 { font-size: 1.24rem; margin-bottom: 8px; }
.kroki p:last-child { margin: 0; color: var(--przygaszony); }

.karty {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 28px;
}
.karta {
  background: var(--papier);
  border: 1px solid var(--linia);
  border-radius: var(--radius-m);
  padding: clamp(20px, 3vw, 28px);
}
.karta--dnia { background: var(--zielen-mgla); border-color: #cfdcd2; }
.karta h3 { font-size: 1.3rem; margin-bottom: 6px; }
.karta__opis { color: var(--przygaszony); font-size: 0.96rem; }

.cennik { margin: 16px 0 0; }
.cennik div {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--linia-mocna);
}
.cennik div:last-child { border-bottom: 0; }
.cennik dt { flex: 1; }
.cennik dd {
  margin: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.02rem; font-weight: 600; color: var(--zielen);
  white-space: nowrap;
}

.sekcja--para {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.lista { margin: 0; padding-left: 20px; color: var(--przygaszony); }
.lista li { margin-bottom: 10px; }
.lista strong { color: var(--atrament); }

/* --- Zgłoszenie ----------------------------------------------------------- */

.sekcja--zgloszenie {
  max-width: none; width: 100%;
  border-bottom: 0;
  background: var(--zielen-glebia);
  color: var(--papier);
  padding: clamp(44px, 7vw, 80px) clamp(16px, 4vw, 40px);
}
.zgloszenie {
  max-width: var(--tresc); margin: 0 auto;
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.zgloszenie h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin-bottom: 14px; }
.zgloszenie__tekst p { color: rgba(255, 253, 248, 0.82); max-width: 46ch; }
.zgloszenie__telefon { font-size: 1.06rem; }
.zgloszenie__telefon a { color: var(--zloto-jasne); font-weight: 600; }

.formularz {
  background: var(--papier);
  color: var(--atrament);
  border-radius: var(--radius-l);
  padding: clamp(20px, 3.4vw, 30px);
  box-shadow: 0 18px 44px rgba(6, 24, 17, 0.28);
}
.pole { display: block; margin-bottom: 14px; }
.pole > span { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; }
.pole em { font-weight: 400; font-style: normal; color: var(--przygaszony); }
.pole input, .pole textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--linia-mocna); border-radius: var(--radius-s);
  background: #fff; color: inherit; font: inherit;
}
.pole textarea { min-height: 86px; resize: vertical; }
.pole input:focus-visible, .pole textarea:focus-visible {
  outline: 2px solid var(--zielen-mech); outline-offset: 1px; border-color: var(--zielen-mech);
}
.pole-para { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.komunikat { margin: 12px 0 0; font-size: 0.95rem; min-height: 1.4em; }
.komunikat--ok { color: var(--zielen-mech); font-weight: 600; }
.komunikat--blad { color: #a63d20; font-weight: 600; }
.formularz__nota { margin: 14px 0 0; font-size: 0.84rem; color: var(--przygaszony); }

/* --- Stopka --------------------------------------------------------------- */

.stopka {
  padding: 30px clamp(16px, 4vw, 40px) 40px;
  text-align: center;
  font-size: 0.92rem; color: var(--przygaszony);
}
.stopka a { color: var(--zielen-mech); }
.stopka__linki { margin: 0; }

:focus-visible { outline: 2px solid var(--zloto); outline-offset: 2px; }
.hero :focus-visible, .sekcja--zgloszenie :focus-visible { outline-color: var(--zloto-jasne); }

/* Wejście strony: hero pojawia się jednym ruchem, kursy z lekkim opóźnieniem —
   godzina ma być tym, co przyciąga wzrok jako drugie, zaraz po nagłówku. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero__lead, .kursy, .hero__akcje { animation: wejscie 620ms cubic-bezier(0.2, 0.65, 0.3, 1) both; }
  .hero__lead { animation-delay: 70ms; }
  .kursy { animation-delay: 150ms; }
  .hero__akcje { animation-delay: 230ms; }
}
@keyframes wejscie {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}