/* =================================================================
   Michał Rerich: newsletter, landing page
   Kolory i fonty: SPEC.md sekcja 5. Maksymalnie 3 kolory (zmienne niżej).
   Mobile first: bazowe style są dla telefonu w pionie, media queries
   tylko dodają udogodnienia na szerszych ekranach.
   ================================================================= */

/* ---------- Fonty (self-hosted, patrz app/fonts/) ----------
   Pobrane z Google Fonts (fonts.googleapis.com/css2) 2026-09-09 i zapisane
   lokalnie, żeby nie ładować ich z serwerów Google (RODO: adres IP
   odwiedzającego) i żeby działały bez Node/build kroku na hostingu.
   Tylko podzbiory "latin" i "latin-ext" (obejmują polskie znaki), bez
   cyrylicy/wietnamskiego, żeby nie ściągać zbędnych plików. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/anton-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/anton-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat: pliki poniżej są fontami zmiennymi (variable font). Google
   serwuje ten sam plik dla wagi 400 i 700, co potwierdziło porównanie
   adresów w oficjalnym CSS z 2026-09-09. Dlatego 4 reguły, 2 pliki. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/pirata-one-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/pirata-one-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Zmienne: dokładnie 3 kolory z SPEC.md sekcja 5 ---------- */
:root {
  --color-bg: #020d0e;
  --color-text: #e8ede6;
  --color-accent: #34e0a1;

  --font-heading: 'Anton', 'Arial Narrow Bold', Impact, sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-decor: 'Pirata One', 'Brush Script MT', cursive;

  --container-width: 34rem;
}

/* ---------- Reset / bazowe ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: var(--color-accent);
  text-underline-offset: 0.15em;
}
a:hover, a:focus { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 400; /* Anton ma tylko jedną grubość */
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.4em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Utility: tekst tylko dla czytników ekranu */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero: nagłówek, obietnica, formularz ----------
   Ma się zmieścić na ekranie telefonu bez przewijania (SPEC sekcja 6).
   Dlatego odstępy są celowo ciasne i skalują się z wysokością ekranu (vh). */
.hero {
  padding-block: clamp(1rem, 3vh, 1.75rem) clamp(1.25rem, 4vh, 2rem);
}

.hero__title {
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  letter-spacing: 0.01em;
}

.hero__lead {
  font-size: clamp(0.95rem, 3.6vw, 1.05rem);
  margin-bottom: clamp(1rem, 3vh, 1.5rem);
  max-width: 32ch;
}

.hero__below-btn {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: clamp(0.75rem, 2.5vh, 1.1rem);
}

/* ---------- Formularz zapisu ---------- */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 2vh, 0.85rem);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-row label {
  font-size: 0.85rem;
  font-weight: 700;
}

.form-row .optional {
  font-weight: 400;
  opacity: 0.75;
}

.form-row input[type="email"],
.form-row input[type="text"] {
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: rgba(232, 237, 230, 0.06);
  border: 1.5px solid rgba(232, 237, 230, 0.35);
  border-radius: 0.4rem;
  padding: 0.7rem 0.8rem;
  min-height: 3rem; /* wygodny cel dotykowy */
  width: 100%;
}

.form-row input::placeholder {
  color: var(--color-text);
  opacity: 0.55;
}

/* Tylko pola tekstowe: własny fokus (kolor obramowania) zamiast
   domyślnego outline. Checkbox zgody celowo pomijamy tutaj, żeby
   zachował widoczny pierścień fokusu z reguły :focus-visible niżej
   (inaczej znika przy nawigacji klawiaturą, patrz problemy.md). */
.form-row input[type="email"]:focus,
.form-row input[type="text"]:focus {
  border-color: var(--color-accent);
  outline: none;
}

.form-row input[type="email"]:invalid:not(:placeholder-shown) {
  border-color: rgba(52, 224, 161, 0.8);
}

.form-row--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}

.form-row--checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--color-accent);
}

.form-row--checkbox label {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
}

.form-hint {
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 0;
}

/* ---------- Przycisk: jedyne wezwanie do działania na stronie ---------- */
.btn-cta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-bg);
  background: var(--color-accent);
  border: none;
  border-radius: 0.5rem;
  padding: 0.95rem 1.25rem;
  min-height: 3.25rem;
  width: 100%;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
}

.btn-cta:hover { filter: brightness(1.08); }
.btn-cta:active { filter: brightness(0.95); }

.btn-cta__meta {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  margin-top: 0.2rem;
}

/* Druga i trzecia odsłona przycisku (sekcje 4 i 9 w SPEC) to link <a>
   ostylowany jak <button> wyżej: ten sam wygląd, ten sam tekst, zawsze
   przewija do tego samego formularza #zapis. Nadpisujemy tylko to, czym
   <a> różni się domyślnie od <button>: display, kolor tekstu i
   podkreślenie linku. */
a.btn-cta {
  display: inline-block;
  text-decoration: none;
  color: var(--color-bg);
}

a.btn-cta:hover,
a.btn-cta:focus {
  color: var(--color-bg);
  text-decoration: none;
}

.cta-link {
  margin-top: 1.5rem;
}

/* Liczby i najważniejsze słowa: akcent, zgodnie z SPEC sekcja 5 */
.accent, strong.accent {
  color: var(--color-accent);
}

/* ---------- Sekcje pod hero: co dostajesz / dla kogo / o autorze ----------
   Wiecej pionowego oddechu i naprzemienne, ledwo widoczne tlo co druga
   sekcje (kolor tekstu na bardzo niskiej przezroczystosci, wiec dalej
   tylko 3 kolory), zeby oko widzialo, gdzie konczy sie jedna mysl, a
   zaczyna druga. Sama zmiana odcienia juz oddziela sekcje, wiec twarda
   kreska miedzy nimi nie jest juz potrzebna.
   Rytm liczymy od sekcji NIEPARZYSTYCH, nie parzystych. Powod: szosta
   sekcja to ".about" ze zdjeciem Michala, ktore musi stac na czystym
   tle strony #020d0e bez rozjasnienia (dolna krawedz zdjecia jest juz
   wtopiona w ten sam kolor w plikach z img/, patrz komentarz przy
   .portrait nizej). Szosta pozycja jest parzysta, wiec przy tej regule
   dostaje czyste tlo automatycznie i nie trzeba dla niej pisac wyjatku.
   Dla pewnosci ".about" dostaje ten sam kolor jeszcze raz, jawnie, zeby
   nie polegac tylko na braku reguly (gdyby kiedys main albo body
   dostaly wlasne tlo, ta linijka i tak wymusi czysty kolor). */
main section {
  padding-block: clamp(2.25rem, 7vh, 3.5rem);
}

main > section:nth-of-type(odd) {
  background: rgba(232, 237, 230, 0.03);
}

main > section.about {
  background: var(--color-bg);
}

.section-title {
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  margin-bottom: 0.75em;
}

/* Lista z akcentowym znacznikiem: wspólna dla kilku sekcji (co dostajesz,
   czego tu nie znajdziesz), stąd jedna ogólna klasa zamiast reguł na
   każdą sekcję osobno. */
.list-marked {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.list-marked li::marker {
  color: var(--color-accent);
}

/* ---------- Czego tu nie znajdziesz: lista rzeczy, ktorych NIE ma ----------
   Zwykle mietowe kropki sugerowalyby zalete, wiec znacznik zamieniamy na
   przygaszony znak "x" i wyrozniamy pierwsza fraze kazdego punktu. */
.list-crossed {
  list-style: none;
  padding-left: 0;
}

.list-crossed li {
  position: relative;
  padding-left: 1.5em;
}

.list-crossed li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(232, 237, 230, 0.45);
  font-weight: 700;
}

.not-included__hook {
  font-weight: 700;
}

.about__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Zdjęcie Michała: szeroki pas na pełną szerokość kolumny treści, nad
   tekstem bio (S-006). Bez obramowania, cienia i zaokrągleń oraz bez
   własnego tła: dolna krawędź zdjęcia jest już wtopiona w tło strony
   w plikach z img/, więc jakakolwiek ramka zepsułaby to przejście. */
.portrait {
  display: block;
  width: 100%;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}

.about__bio {
  font-size: 0.95rem;
}

.signature {
  font-family: var(--font-decor);
  font-size: 1.3em;
  color: var(--color-accent);
}

/* ---------- Dla kogo to jest: trzy karty ---------- */
.audience__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.audience__list li {
  border: 1px solid rgba(232, 237, 230, 0.22);
  border-radius: 0.65rem;
  padding: 1rem 1.1rem;
  background: rgba(232, 237, 230, 0.035);
}

/* Pierwsze zdanie kazdej karty to nazwa sytuacji: wyrozniamy je grubszym
   krojem, zeby dalo sie je wylapac jednym rzutem oka, reszta zostaje
   zwyklym tekstem. */
.audience__hook {
  font-weight: 700;
}

/* ---------- Kto to pisze: kafelki z liczbami (jedyne liczby-kafelki na stronie) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.stats__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}

.stats__number {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  color: var(--color-accent);
  line-height: 1;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(52, 224, 161, 0.35);
}

.stats__desc {
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.75;
}

/* ---------- Mem: TY DZISIAJ kontra TY ZA ROK ----------
   Dwa kafelki z paskiem naglowka u gory, miejscem na zdjecie i punktami
   jako etykietki. "TY DZISIAJ" w przygaszonej szarosci (kolor tekstu na
   niskiej przezroczystosci), "TY ZA ROK" w akcencie: --card-* to jedyna
   roznica miedzy odmianami karty, zeby od razu bylo widac, ktora jest
   "przed", a ktora "po". Jedna kolumna na waskim telefonie, dwie od
   480px (media query przy pozostalych, na koncu pliku). */
.meme__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.meme__card {
  border: 1px solid var(--card-border);
  border-radius: 0.85rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.meme__card--today {
  --card-border: rgba(232, 237, 230, 0.3);
  --card-ink: rgba(232, 237, 230, 0.65);
  --card-head-bg: rgba(232, 237, 230, 0.07);
  --card-tag-bg: rgba(232, 237, 230, 0.06);
  --card-tag-border: rgba(232, 237, 230, 0.3);
}

.meme__card--future {
  --card-border: rgba(52, 224, 161, 0.55);
  --card-ink: var(--color-accent);
  --card-head-bg: rgba(52, 224, 161, 0.12);
  --card-tag-bg: rgba(52, 224, 161, 0.1);
  --card-tag-border: rgba(52, 224, 161, 0.45);
}

.meme__card h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1rem, 4.5vw, 1.25rem);
  letter-spacing: 0.02em;
  color: var(--card-ink);
  background: var(--card-head-bg);
  border-bottom: 1px solid var(--card-border);
  margin: 0;
  padding: 0.5rem 0.9rem;
  text-align: center;
}

/* Miejsce na zdjęcie do mema: obrys przerywaną linią, dopasowany kolorem
   do odmiany karty, i podpis w środku, do czasu aż Michał dostarczy
   właściwe zdjęcia (patrz komentarze w index.html przy każdym miejscu).
   Proporcje 4:3 w poziomie, nie pionowe: przy szerokości karty na wąskim
   telefonie daje to około 239px wysokości zamiast dawnych 426px, więc
   obie karty dają się zobaczyć bez długiego przewijania. Docelowe
   zdjęcia od Michała mają być kadrowane w tych samych proporcjach
   (4:3, poziomo), żeby weszły bez przycinania. Odstępy dookoła celowo
   ciasne, żeby cała karta mieściła się na jednym ekranie telefonu. */
.meme__photo {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--card-border);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  margin: 0.6rem 0.9rem 0;
}

.meme__photo p {
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  color: var(--card-ink);
  margin: 0;
}

/* Punkty jako etykietki (pigulki z tlem i obrysem), nie zwykla lista. */
.meme__card ul {
  list-style: none;
  margin: 0;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
}

.meme__card li {
  color: var(--card-ink);
  background: var(--card-tag-bg);
  border: 1px solid var(--card-tag-border);
  border-radius: 0.8rem;
  padding: 0.35rem 0.6rem;
  line-height: 1.35;
}

/* Karta "TY ZA ROK" jest juz cala w akcencie, wiec samo przebarwienie
   frazy "faktura zamiast nadziei" nic by nie zmienilo: dokladamy tu
   grubszy kroj, zeby wyroznienie bylo naprawde widoczne. */
.meme__card li .accent {
  font-weight: 700;
}

/* ---------- Pytania, które i tak zadasz (FAQ) ---------- */
.faq__item + .faq__item {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(232, 237, 230, 0.1);
}

.faq__item h3 {
  font-size: 1rem;
  margin-bottom: 0.35em;
}

.faq__item p {
  font-size: 0.9rem;
}

/* ---------- Ostatnie wezwanie: ma sie czuc jak zamkniecie strony ---------- */
.final-cta {
  padding-block: clamp(3rem, 10vh, 5rem);
}

.final-cta .section-title {
  font-size: clamp(1.75rem, 8vw, 2.5rem);
}

.final-cta .cta-link {
  margin-top: 2.5rem;
}

/* ---------- Stopka ---------- */
.site-footer {
  padding-block: 1.5rem;
  border-top: 1px solid rgba(232, 237, 230, 0.12);
}

.site-footer p {
  font-size: 0.8rem;
  opacity: 0.75;
}

/* ---------- Strony pomocnicze: dziękuję, polityka prywatności ---------- */
.simple-page {
  min-height: 100vh; /* zapas dla starszych przeglądarek */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.simple-page .container { padding-block: 2.5rem; }

.simple-page h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }

/* Strona treściowa dłuższa niż jeden ekran (np. polityka prywatności):
   bez wyśrodkowania w pionie, zwykły układ od góry. */
.content-page .container { padding-block: 2.5rem; }
.content-page h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }

.back-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.policy-section h2 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
}

.policy-section ul {
  margin: 0 0 1em;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.policy-section li::marker {
  color: var(--color-accent);
}

/* =================================================================
   Większe ekrany: tablet / desktop. Ruch i tak jest głównie mobilny,
   więc to tylko wygładzenie, nie osobny projekt.
   ================================================================= */
@media (min-width: 480px) {
  .meme__cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 640px) {
  .container { padding-inline: 2rem; }

  .hero__title { font-size: clamp(2.1rem, 5vw, 2.75rem); }
}

@media (min-width: 960px) {
  :root { --container-width: 40rem; }

  .hero { padding-block: 4rem 3rem; }
}

/* Ograniczenie animacji dla osób, które o to proszą w systemie */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}