/* Fundament wyglądu. Kierunek (kolory, fonty) zmieniaj tylko w :root. */

:root {
  /* Kolory */
  --kolor-tlo: #faf6f0;
  --kolor-powierzchnia: #ffffff;
  --kolor-tekst: #2a2623;
  --kolor-tekst-cichy: #6f6760;
  --kolor-akcent: #b4532a;
  --kolor-akcent-tekst: #ffffff;
  --kolor-linia: #e6ddd2;

  /* Fonty */
  --font-naglowki: Georgia, "Times New Roman", serif;
  --font-tekst: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Skala tekstu (płynna między telefonem a komputerem) */
  --tekst-maly: 0.875rem;
  --tekst: 1.0625rem;
  --tekst-duzy: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --naglowek-3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --naglowek-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --naglowek-1: clamp(2.5rem, 1.6rem + 4.5vw, 5rem);

  /* Odstępy */
  --odstep-1: 0.25rem;
  --odstep-2: 0.5rem;
  --odstep-3: 1rem;
  --odstep-4: 1.5rem;
  --odstep-5: 2.5rem;
  --odstep-6: 4rem;
  --odstep-sekcji: clamp(3rem, 2rem + 5vw, 7rem);

  /* Kształt i ruch */
  --promien: 12px;
  --cien: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --szerokosc-tresci: 68rem;
  --szerokosc-tekstu: 38rem;
  --ruch: 200ms ease-out;
}

/* Podstawy */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-naglowki);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--odstep-3);
  text-wrap: balance;
}
h1 { font-size: var(--naglowek-1); }
h2 { font-size: var(--naglowek-2); }
h3 { font-size: var(--naglowek-3); }

p { margin: 0 0 var(--odstep-3); max-width: var(--szerokosc-tekstu); text-wrap: pretty; }

a { color: var(--kolor-akcent); text-underline-offset: 0.2em; }

:focus-visible {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Układ */

.kontener {
  width: 100%;
  max-width: var(--szerokosc-tresci);
  margin-inline: auto;
  padding-inline: var(--odstep-3);
}

.sekcja { padding-block: var(--odstep-sekcji); }

.cichy { color: var(--kolor-tekst-cichy); }

/* Klocki */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--odstep-2) var(--odstep-4);
  border-radius: 999px;
  background: var(--kolor-akcent);
  color: var(--kolor-akcent-tekst);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--ruch), opacity var(--ruch);
}
.przycisk:hover { opacity: 0.9; }
.przycisk:active { transform: scale(0.98); }

.karta {
  background: var(--kolor-powierzchnia);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  padding: var(--odstep-4);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--odstep-3);
}
.galeria img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--promien);
}

/* Strona tymczasowa */

.powitanie {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--odstep-3);
}

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