/* ai.moja-architektura.pl
   Jeden plik stylu. Bez frameworków, bez zewnętrznych czcionek, bez animacji.

   Kolory wzięte co do odcienia ze sklepu moja-architektura.pl, żeby portfolio
   i produkt wyglądały jak jedna rodzina. Rekruter, który przejdzie z jednego
   na drugie, widzi ciągłość, a nie dwie różne strony. */

:root {
  --tlo: #241533;             /* tło strony, ze sklepu */
  --tlo-gora: #2e1a41;        /* fiolet u góry */
  --tlo-srodek: #1a1a4e;      /* granat w środku */
  --tlo-dol: #2e1a41;         /* fiolet na dole */
  /* Pasy i karty są PÓŁPRZEZROCZYSTE, nie mają własnego koloru. Dzięki temu
     gradient przechodzi przez nie płynnie, zamiast urywać się na krawędzi. */
  --tlo-pas: rgba(0, 0, 0, 0.28);
  --tlo-karta: rgba(0, 0, 0, 0.22);
  --tlo-miekka: rgba(255, 255, 255, 0.05);
  --tekst: #ece8e1;           /* ciepła biel ze sklepu */
  --tekst-przygaszony: #aba7b4;
  --zloto: #e8c98a;           /* akcent, ten sam co w nagłówkach sklepu */
  --fiolet: #534ab7;
  --linia: rgba(255, 255, 255, 0.10);
  /* Szerokość całej kolumny. Obrazki, diagram i liczby zajmują ją w całości. */
  --szerokosc: 66rem;
  /* Szerokość samego tekstu. Węższa celowo: zbyt długie wiersze męczą oko,
     bo trudniej trafić wzrokiem z końca jednego wiersza na początek drugiego. */
  --szerokosc-tekstu: 44rem;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--tlo-srodek);   /* kolor poza stroną, np. przy przewinięciu za daleko */
}

body {
  margin: 0;
  /* Fiolet u góry, granat w środku, fiolet na dole. Gradient rozciąga się
     na całą wysokość dokumentu, więc kolor zmienia się powoli w miarę czytania. */
  background: linear-gradient(180deg,
    var(--tlo-gora) 0%,
    var(--tlo-srodek) 50%,
    var(--tlo-dol) 100%);
  color: var(--tekst);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 1.1875rem;
  line-height: 1.6;
}

.srodek {
  max-width: var(--szerokosc);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- nagłówek ---------- */

.naglowek {
  background: var(--tlo-pas);
  padding: 3.5rem 0 3rem;
  border-bottom: 3px solid var(--zloto);
}

.naglowek-uklad {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.naglowek-tekst { flex: 1 1 auto; min-width: 0; }

.portret {
  flex: 0 0 auto;
  width: 11rem;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--zloto);
}

.nazwisko {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zloto);
  font-weight: 600;
}

h1 {
  margin: 0 0 1.125rem;
  font-size: 2.375rem;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 52rem;
}

.podtytul {
  margin: 0 0 2.25rem;
  font-size: 1.25rem;
  color: var(--tekst-przygaszony);
  max-width: 40rem;
}

/* ---------- przyciski ---------- */

.przyciski { margin: 0; }

.przycisk {
  display: inline-block;
  margin: 0 0.625rem 0.625rem 0;
  padding: 0.875rem 1.625rem;
  border: 2px solid var(--zloto);
  border-radius: 6px;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.przycisk.glowny { background: var(--zloto); color: #241533; }
.przycisk.drugi  { background: transparent; color: var(--zloto); }

/* ---------- sekcje ---------- */

main { padding-bottom: 1rem; }

.dokonanie {
  padding: 3rem 0;
  border-bottom: 1px solid var(--linia);
}

/* Nagłówki ze złotą kreską pod spodem, tak jak w planie prac. */
h2 {
  margin: 0 0 1.75rem;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
  border-bottom: 2px solid var(--zloto);
  padding-bottom: 0.625rem;
}

/* W dokonaniach kreskę nosi podtytuł, żeby nie rozdzielać go od tytułu. */
.dokonanie h2 {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0.25rem;
}

.adres {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  color: var(--tekst-przygaszony);
  border-bottom: 2px solid var(--zloto);
  padding-bottom: 0.625rem;
  max-width: none;
}

h3 {
  margin: 2rem 0 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--zloto);
}

p { margin: 0 0 1rem; }

/* Tekst trzymamy w węższej kolumnie niż obrazki. Obrazki i liczby idą na całą
   szerokość, bo im szerokość służy, a wierszom tekstu szkodzi. */
.dokonanie p,
.dokonanie h3,
.moduly,
.jak-pracuje p,
.stack p,
.dane { max-width: var(--szerokosc-tekstu); }

.dokonanie .adres { max-width: none; }

/* ---------- liczby na wierzchu ---------- */

.liczby {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.liczby li {
  flex: 1 1 8rem;
  background: var(--tlo-miekka);
  border: 1px solid var(--linia);
  border-left: 3px solid var(--zloto);
  border-radius: 0 6px 6px 0;
  padding: 0.875rem 1rem;
}

.liczby b {
  display: block;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--zloto);
}

.liczby span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--tekst-przygaszony);
}

/* ---------- lista modułów ---------- */

.moduly {
  margin: 1rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.moduly li {
  margin: 0 0 0.5rem;
  padding-left: 1.125rem;
  position: relative;
}

.moduly li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zloto);
}

.moduly b { font-weight: 650; color: #fff; }

/* ---------- diagram ---------- */

.diagram {
  margin: 2rem 0;
  padding: 1.75rem 1rem 1.25rem;
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  border-top: 3px solid var(--zloto);
  border-radius: 8px;
}

.diagram svg { display: block; width: 100%; height: auto; }

.diagram .klocki rect {
  fill: rgba(255, 255, 255, 0.05);
  stroke: var(--zloto);
  stroke-width: 1.5;
}

.diagram .podpisy text {
  fill: var(--tekst);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-anchor: middle;
}

.diagram-pionowy .podpisy text { font-size: 19px; }

.diagram .strzalki path {
  stroke: var(--zloto);
  stroke-width: 2;
  fill: none;
}

.diagram figcaption {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--tekst-przygaszony);
  text-align: center;
}

svg.diagram-pionowy { display: none; }

/* ---------- zrzuty ekranu ---------- */

.zrzut { margin: 2rem 0; }

.zrzut img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linia);
  border-radius: 8px;
}

.zrzut figcaption {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: var(--tekst-przygaszony);
  text-align: center;
}

/* ---------- „Jak pracuję": wyróżniona karta ---------- */

.jak-pracuje {
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  border-top: 3px solid var(--zloto);
  border-radius: 8px;
  padding: 2.25rem 1.75rem 1.5rem;
  margin: 3rem 0;
}

.jak-pracuje h2 { margin-bottom: 1.25rem; }

.motto {
  margin: 0 0 1.5rem;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--zloto);
}

/* ---------- stack ---------- */

.stack {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--linia);
}

.stack p { color: var(--tekst-przygaszony); }

/* ---------- kontakt ---------- */

.kontakt { padding: 3rem 0; }

.dane {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.3125rem;
}

.dane li { margin: 0 0 0.75rem; }

/* ---------- odsyłacze ---------- */

a { color: var(--zloto); }

a:focus-visible,
.przycisk:focus-visible {
  outline: 2px solid var(--zloto);
  outline-offset: 3px;
}

/* ---------- stopka ---------- */

.stopka {
  background: var(--tlo-pas);
  border-top: 1px solid var(--linia);
  color: var(--tekst-przygaszony);
  padding: 1.75rem 0;
  font-size: 0.9375rem;
}

.stopka p { margin: 0; }

/* ---------- telefon ---------- */

@media (max-width: 46rem) {
  .naglowek { padding: 2.5rem 0 2.25rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  .podtytul { font-size: 1.125rem; }
  .dokonanie { padding: 2.25rem 0; }
  .przycisk { display: block; margin-right: 0; text-align: center; }
  svg.diagram-poziomy { display: none; }
  svg.diagram-pionowy { display: block; max-width: 17rem; margin: 0 auto; }
  .liczby li { flex: 1 1 100%; }
  .jak-pracuje { padding: 1.75rem 1.25rem 1rem; margin: 2.25rem 0; }
  /* Na telefonie zdjęcie idzie nad tekst i jest mniejsze, żeby nie zjadało
     pierwszego ekranu. Zdanie o tym, co robisz, ma być widoczne od razu. */
  .naglowek-uklad { flex-direction: column-reverse; align-items: flex-start; gap: 1.5rem; }
  .portret { width: 7.5rem; }
}

/* ---------- szeroki ekran ---------- */

@media (min-width: 62rem) {
  h1 { font-size: 2.75rem; }
  body { font-size: 1.25rem; }
}

/* ---------- wydruk: ciemne tło zjadłoby tusz ---------- */

@media print {
  html, body, .naglowek, .jak-pracuje, .stopka, .diagram, .liczby li {
    background: #fff;
    color: #000;
  }
  h1, h2, .moduly b { color: #000; }
  h3, .motto, .liczby b, .nazwisko, a { color: #6b4e00; }
  .diagram .klocki rect { fill: #fff; stroke: #000; }
  .diagram .podpisy text { fill: #000; }
  .diagram .strzalki path { stroke: #000; }
  .przyciski { display: none; }
  body { font-size: 11pt; }
  .dokonanie, .jak-pracuje, .stack, .kontakt { page-break-inside: avoid; }
}