/* ============================================================
   tutejsza · style bazowe
   ============================================================ */

/* --- Fonty ---
   Krój marki: Overused Grotesk.
   [DO UZUPEŁNIENIA: pliki Overused Grotesk .woff2 w katalogu /fonts]
   Do czasu dostarczenia plików strona ładuje Hanken Grotesk z Google Fonts,
   czyli ten sam krój zastępczy, którego używa brand book w Figmie.
   Po wgraniu plików Overused Grotesk można usunąć <link> do Google Fonts w HTML. */
@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-Roman.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: var(--c-red); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: var(--fw-medium); }
hr { border: 0; border-top: var(--border); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* --- Fokus --- */
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* --- Typografia --- */
h1, h2, h3, h4 {
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-red);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); }
.measure { max-width: var(--measure); }
.muted { color: var(--c-ink-2); }
.small { font-size: var(--fs-small); }
.num { font-variant-numeric: tabular-nums; }

/* Etykieta: Medium 20 / +4%, wersaliki, tylko do krótkich oznaczeń */
.label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-red);
  line-height: 1.2;
}

/* Logo: maska SVG, kolor dziedziczony z currentColor */
.logo-mark {
  display: inline-block;
  aspect-ratio: 1100 / 222.688;
  background: currentColor;
  -webkit-mask: url("../img/brand/logo.svg") no-repeat center / contain;
          mask: url("../img/brand/logo.svg") no-repeat center / contain;
}

/* --- Placeholdery do uzupełnienia przez klienta ---
   Wyszukaj ".todo" lub "DO UZUPEŁNIENIA", żeby znaleźć wszystkie. */
.todo {
  display: inline;
  padding: 0 0.3em;
  background: #F2DDB0;
  outline: 1px dashed #B88A3A;
  outline-offset: -1px;
  color: #5A3E12;
  font-size: 0.9em;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
}
.todo-block {
  display: grid; place-items: center; text-align: center;
  padding: var(--sp-6);
  background: repeating-linear-gradient(-45deg, var(--c-cream-2) 0 10px, #E0D7C3 10px 11px);
  outline: 1px dashed #B88A3A; outline-offset: -1px;
  color: #5A3E12; font-size: var(--fs-small);
  min-height: 160px;
}

/* --- Dostępność --- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: var(--sp-4); z-index: 100;
  padding: var(--sp-2) var(--sp-4); background: var(--c-red); color: var(--c-cream);
}
.skip-link:focus { top: 0; }