/* ─────────────────────────────────────────────────────────────────────────────
   WYGLĄD WEDŁUG MAKIETY z 21.09.2026 — warstwa wierzchnia.

   Osobny plik, nie dopisek do `fundacja.css`, z jednego powodu: nad stroną
   pracuje równolegle kilka rąk i wspólny plik byłby nadpisywany. Ten
   wczytuje się PO `fundacja.css`, więc nadpisuje ją bez walki o wagę
   selektorów — wystarczy ta sama waga, nie trzeba `!important`.

   Źródło: web/fundacja/materialy/zrodlo/makieta-zrodlo-21-09-2026.png
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · SZEROKOŚĆ KOLUMNY
   Makieta trzyma treść na 1582 z 1672 px, czyli na 94,6 % szerokości płótna.
   Dotychczasowe 1180 px ściskało sześć kart do 157 px i łamało napis
   „DOWIEDZ SIĘ WIĘCEJ" na dwa wiersze. 1280 px zbliża proporcje do makiety
   i nie rozjeżdża podstron, które i tak liczą szerokość w procentach.
   ═══════════════════════════════════════════════════════════════════════════ */
.f-szer { max-width: 1280px; }
.f-szer-waska { max-width: 860px; }


/* ═══════════════════════════════════════════════════════════════════════════
   2 · BARWY
   Makieta ma jeden granat — #0B1D40 — i ten sam w pasach, panelach i pismie.
   Ciemne pasy chodziły na #001529, czyli o dwa tony głębiej niż reszta
   strony; na zrzucie widać to jako dwa różne granaty jeden pod drugim.
   Biel na #0B1D40 daje 16,4:1, bursztyn #F5A01A — 7,8:1, więc oba zostają.
   ═══════════════════════════════════════════════════════════════════════════ */
.f-pas-ciemny { background: #0B1D40; }
.f-pas-jasny  { background: #F5F6F8; }
.f-pas-kart   { background: #FFFFFF; }
.f-karta      { background: #F5F6F8; border: 0; border-radius: 6px; }


/* ═══════════════════════════════════════════════════════════════════════════
   3 · CZOŁO STRONY — CAŁA FOTOGRAFIA, BEZ PRZYCINANIA

   BYŁO: zdjęcie stało jako słup na 62 % szerokości z `object-fit: cover`,
   więc przy 1440 px pokazywało 54,6 % kadru — z lewej znikał chłopak, z
   prawej połowa grupy, a maska zjadała jeszcze 26 % lewej krawędzi.

   PRÓBOWANO PO DRODZE: zdjęcie na całą szerokość pasa, napis na rozbielonym
   lewym brzegu. Kadr wychodził cały, ale biel przykrywała dziewczynę, czyli
   to, co na zdjęciu najważniejsze. Odrzucone.

   JEST: dwie kolumny jak na makiecie — napis po lewej na bieli, fotografia
   po prawej, dosunięta do krawędzi okna, we własnych proporcjach 1496 × 608.
   Szerokość kolumny ze zdjęciem (58 %) dobrana tak, żeby jego wysokość
   (58 vw ÷ 2,461 = 23,6 vw) wypadła równo z wysokością napisu — wtedy nie
   ma ani przycięcia, ani białej dziury nad i pod zdjęciem.
   ═══════════════════════════════════════════════════════════════════════════ */
.f-czolo-foto {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  padding: clamp(1.6rem, 2.6vw, 2.6rem) 0;
  min-height: 23.6vw;
  display: block;
}
/* Skos domu GOTÓW schodzi z czoła — na makiecie go tu nie ma, a pod
   fotografią robił szarą przekątną przez twarze. */
.f-czolo-foto::before { content: none; }

.f-czolo-obraz {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 58%;
  max-width: none;
  height: auto;                  /* własne proporcje — zero kadrowania */
  object-fit: fill;
  -webkit-mask-image: none;
          mask-image: none;
  border-radius: 0;
  z-index: 0;
}
.f-czolo-foto > .f-szer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: calc(23.6vw - 2 * clamp(1.6rem, 2.6vw, 2.6rem));
}
/* Napis nie ma prawa wejść na fotografię. Lewa krawędź zdjęcia stoi na
   42 % szerokości okna, kolumna tekstu zaczyna się na rynnie siatki —
   ten rachunek pilnuje, żeby między nimi zostały co najmniej 3 rem. */
.f-czolo-foto .f-czolo-tresc {
  max-width: min(480px, calc(42vw - (100vw - min(1280px, 100vw)) / 2 - 3rem));
}

/* Rysunek pisma z makiety: GOTÓW duże, „siła we wspólnocie" jednym wierszem. */
/* Przyciski czoła: na makiecie są wyraźnie mniejsze niż domyślne na stronie
   — dzięki temu oba mieszczą się w jednym rzędzie obok fotografii. */
.f-czolo-przyciski .f-akcja { font-size: .76rem; padding: .8em 1.25em; gap: .5em; }

@media (min-width: 1041px) {
  .f-czolo-foto .f-czolo-tytul    { font-size: clamp(3.4rem, 6.3vw, 5.9rem); margin: 0; }
  .f-czolo-foto .f-czolo-podtytul { font-size: clamp(1.5rem, 2.55vw, 2.4rem);
                                    white-space: nowrap; margin: .06em 0 .5rem; }
  .f-czolo-foto .f-czolo-lid      { font-size: 1.05rem; margin: 0 0 1.3rem; }
  .f-czolo-foto .f-czolo-tresc > p:last-child { margin: 1.3rem 0 0 !important; }
}

/* ── czoło na wąskim ekranie ──────────────────────────────────────────────
   Napis u góry, całe zdjęcie pod nim na pełną szerokość okna. Przy 380 px
   pas ma 154 px wysokości — niewiele, ale kadr jest cały; przycięcie do
   wyższego pasa zjadłoby chłopaka z lewej i chłopaka w okularach z prawej. */
@media (max-width: 1040px) {
  .f-czolo-foto {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(1.8rem, 5vw, 2.6rem) 0 0;
  }
  .f-czolo-foto > .f-szer {
    position: static;
    order: 0;
    display: block;
    min-height: 0;
  }
  .f-czolo-foto .f-czolo-tresc { max-width: none; }
  .f-czolo-obraz {
    position: static;
    order: 1;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: clamp(1.2rem, 4vw, 2rem) 0 0;
    align-self: stretch;
  }
  .f-czolo-foto .f-czolo-podtytul { white-space: normal; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · SZEŚĆ KART
   Makieta: znak karminowy 34 px, oddech pod nim, nagłówek granatowy,
   opis szary, a odnośnik przyklejony do dołu karty — wszystkie sześć
   odnośników w jednej linii poziomej. Karty bez obwódki, na #F5F6F8.
   ═══════════════════════════════════════════════════════════════════════════ */
.f-pas-kart { padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.1rem, 2vw, 1.5rem); }
.f-pas-kart .f-naglowek-srodek { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

.f-karty { gap: clamp(.7rem, 1.1vw, 1rem); }
.f-karta { padding: 1.5rem 1.35rem 1.35rem; gap: 0; }
.f-karta-znak { margin: 0 0 1.15rem; color: #9E1119; }
.f-karta-znak svg { width: 34px; height: 34px; }
.f-karta h3 { font-size: 1.08rem; line-height: 1.22; margin: 0 0 .55rem; color: #0B1D40; }
.f-karta p { font-size: .93rem; line-height: 1.5; color: #4c556b; }
.f-karta-wiecej {
  margin-top: 1.4rem; padding: 0; color: #0B1D40;
  font-size: .72rem; letter-spacing: .05em; gap: .7em;
}

@media (min-width: 1181px) {
  .f-karta { padding: 1.4rem 1.15rem 1.2rem; }
  .f-karta h3 { font-size: 1.02rem; }
  .f-karta p  { font-size: .875rem; line-height: 1.48; }
  .f-karta-wiecej { font-size: .665rem; letter-spacing: .03em; white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5 · TRZY PANELE
   Szerokości kolumn odmierzone z makiety: 565 : 545 : 453 px. Odstęp nad
   rzędem zszedł z 80 px na 22 px, bo na makiecie panele idą tuż pod kartami.

   RÓŻNICA WOBEC MAKIETY, ŚWIADOMA. Na makiecie fotografia „Wspieramy KSM"
   jest tłem panelu i nagłówek leży na niej — panel ma tam 164 px wysokości,
   a zdjęcie jest przycięte do paska. Tu zdjęcie leży całe (770 × 736), więc
   panel musi być wyższy, a nagłówek schodzi pod zdjęcie. Wybór między
   „wysokość jak na makiecie" a „całe zdjęcie" rozstrzygnięty na korzyść
   drugiego, bo taka była treść polecenia.
   ═══════════════════════════════════════════════════════════════════════════ */
.f-sekcja-panele { padding-block: clamp(.9rem, 1.8vw, 1.4rem) clamp(2.4rem, 5vw, 3.6rem); }
.f-trzy-panele {
  grid-template-columns: 1.15fr 1.2fr 1fr;
  gap: clamp(.7rem, 1.1vw, 1rem);
  margin-top: 0;
}
.f-trzy-panele .f-panel {
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 1.5rem 1.4rem;
}
.f-trzy-panele .f-panel > * { flex: 0 0 auto; }
/* Było `justify-content: space-between` — wolna przestrzeń rozkładała się
   po równo między WSZYSTKIE wiersze, więc nagłówek panelu odrywał się od
   zdania pod nim. Teraz treść trzyma się góry, a to, co ma iść na dół
   (okładki, dopisek), schodzi tam własnym `margin-top: auto`. */
.f-trzy-panele .f-panel { justify-content: flex-start; }
.f-panel-akcja { margin: .8rem 0 0 !important; }
.f-trzy-panele .f-panel h3 { font-size: 1.24rem; line-height: 1.26; margin: 0 0 .5rem; }
.f-trzy-panele .f-panel p  { margin: 0 0 .9rem; }
.f-trzy-panele .f-panel .f-karta-wiecej { margin: 0; padding: .35rem 0; }

/* ── panel granatowy: fotografia na pełną szerokość panelu ─────────────────
   Zdjęcie leży we własnych proporcjach 770 × 736 — widać cały kadr, bez
   kadrowania i bez napisu położonego na twarzach. Napis i odnośniki
   dosunięte do dołu panelu, tak jak na makiecie. */
.f-trzy-panele .f-panel-granat { background: #0B1D40; padding: 0 0 1.4rem; }
.f-trzy-panele .f-panel-granat > * { margin-inline: 1.4rem; }
.f-panel-foto {
  width: 100%; height: auto; object-fit: fill;
  border-radius: 0; margin: 0 0 1.2rem;
}
.f-trzy-panele .f-panel-granat > .f-panel-foto { margin-inline: 0; }
.f-trzy-panele .f-panel-granat > h3 { margin-top: auto; }
.f-trzy-panele .f-panel-granat .f-karta-wiecej { color: #FFFFFF; }
.f-trzy-panele .f-panel-granat > .f-panel-akcja { margin: .9rem 1.4rem 0 !important; }

/* ── panel jasny: okładki duże, przy dolnej krawędzi, jak na makiecie ────── */
.f-trzy-panele .f-panel-jasny { background: #F5F6F8; }
.f-trzy-panele .f-panel-jasny h3 { color: #0B1D40; }
/* Okładki mają w pliku białe tło, a panel jest szary (#F5F6F8) — bez tego
   białego podestu górna krawędź zdjęcia rysowała się jak przypadkowa
   kreska w połowie panelu. Podest jest też miejscem, w którym zdjęcie
   może stać całe, bez przycinania do formatu panelu. */
.f-trzy-panele .f-panel-jasny > .f-panel-okladki {
  display: flex; align-items: flex-end; justify-content: center;
  margin: auto 0 1rem;
  background: #FFFFFF; border-radius: 4px; padding: .7rem .7rem 0;
}
.f-okladki {
  width: 100%; max-width: 340px; height: auto;
  margin: 0 auto; border-radius: 0;
}

/* ── panel karminowy ──────────────────────────────────────────────────────── */
.f-trzy-panele .f-panel-karmin { background: #9E1119; justify-content: center; }
.f-panel-serce { margin: 0 0 1rem; }
.f-panel-serce svg { width: 40px; height: 40px; }

.f-panel-dopisek { margin: 1.8rem 0 0 !important; text-align: right; }
.f-panel-dopisek .f-dopisek { color: #FFFFFF; transform: rotate(-7deg); }
.f-panel-dopisek .f-dopisek u { border-bottom-color: #F5A01A; }

/* Dwie kolumny (tablet): panel karminowy jest najniższy, więc kładzie się
   na całą szerokość zamiast zostawiać pustą połowę rzędu, a odręczny
   dopisek przechodzi na prawą stronę, obok przycisku — jak na makiecie. */
@media (max-width: 1020px) {
  .f-trzy-panele { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) and (min-width: 681px) {
  .f-trzy-panele .f-panel-karmin {
    grid-column: 1 / -1; position: relative; padding-right: 13rem;
  }
  .f-trzy-panele .f-panel-karmin .f-panel-dopisek {
    position: absolute; right: 1.6rem; top: 50%;
    transform: translateY(-50%); margin: 0 !important;
  }
}
@media (max-width: 680px) {
  .f-panel-dopisek { text-align: left; }
}
@media (max-width: 680px) {
  .f-trzy-panele { grid-template-columns: 1fr; }
  .f-okladki { max-width: 300px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · ZNAKI I FOTOGRAFIE — NIGDZIE ŻADNEGO PRZYCINANIA
   Reguła zbiorcza: każdy obraz na stronie mieści się w ramce w całości.
   Gdyby ktoś dołożył `object-fit: cover`, ta linia go cofa.
   ═══════════════════════════════════════════════════════════════════════════ */
.f-boks-znak img, .f-akcent img, .f-stopka-znak img, .f-logo img {
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · JEDEN GRANAT NA CAŁEJ STRONIE
   Stopka i pasek nad nagłówkiem chodziły na #001529, pasy treści na
   #0B1D40 — na zrzucie widać dwa różne granaty stykające się krawędzią.
   Makieta ma jeden. Biel na #0B1D40 daje 16,4:1, więc nic nie traci.
   ═══════════════════════════════════════════════════════════════════════════ */
.f-stopka { background: #0B1D40; }
.f-pasek  { background: #0B1D40; }