/* =========================================================================
   Visszajelző oldalak: hírlevél köszönő (/sikeres-feliratkozas/) és a 404.

   TIPOGRÁFIA: ez a blokk NEM definiál saját betűméretet a szövegekre.
   A globális osztályokat használjuk (.h1, .h2, .lead, .body, .card-title),
   hogy a két oldal ugyanúgy nézzen ki, mint a többi. Kiss Ernő kérése
   2026-09-09: "Normál Szöveg és a kártyás elemek is a globális tipográfiát
   használják."
   ========================================================================= */

.wr-fb {
  padding: 104px 20px 88px;
  background: var(--paper, #fbfaf7);
}

.wr-fb__in {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* --- A piros korong és a FEHÉR pipa ------------------------------------
   A pipa korábban sötét volt, mert a globális SVG-szabály felülírta az
   örökölt színt. Ezért itt EXPLICIT a fehér stroke, nem currentColor. */
.wr-fb__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--coral, #f03a47);
  animation: wr-fb-pop .42s cubic-bezier(.2, .9, .3, 1.2) both;
}

.wr-fb__badge svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A pipa RAJZOLÓ animációját szándékosan elhagytuk. MÉRVE 2026-09-09: a
   stroke-dashoffset 40px-en ragadt (az animáció nem futott le), és ettől a
   fehér pipa LÁTHATATLAN volt, miközben a számított stílus szerint fehér.
   Egy animáció, ami hibás állapotban elrejti a tartalmat, rosszabb, mint ha
   nincs animáció. A megjelenést a korong pop-inja adja, az mérhetően fut. */

@keyframes wr-fb-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* Aki csökkentett mozgást kért az eszközén, annak nincs animáció, de a pipa
   ugyanúgy látszik. */
@media (prefers-reduced-motion: reduce) {
  .wr-fb__badge { animation: none; }
}

/* --- Szövegek: csak szín, térköz és sortörés. Méret a globálisból. ------ */
.wr-fb__title { color: var(--ink, #1b3c6f); margin: 0 0 16px; }
.wr-fb__title .wr-fb__hl { color: var(--coral, #f03a47); font: inherit; }

.wr-fb__lead { color: var(--ink-soft, #3a5480); margin: 0 auto 40px; max-width: 620px; }

.wr-fb__block { text-align: left; margin-bottom: 40px; }
.wr-fb__block h2 { color: var(--ink, #1b3c6f); margin: 0 0 16px; }
.wr-fb__block ol { margin: 0; padding-left: 1.3em; color: var(--ink-soft, #3a5480); }
.wr-fb__block li { margin-bottom: 12px; }
.wr-fb__block strong { color: var(--ink, #1b3c6f); }

/* A KÁRTYÁK a FŐOLDALI komponenst használják (.wr-pipeline__card + __body +
   __code + __cardtitle + __desc). Kiss Ernő kérése 2026-09-09: meglévő
   kártya-méret és tipográfia, ne gyártsunk újat, és minél kevesebb új CSS.
   Ezért itt CSAK az van, ami a fooldali kártyából hiányzik: a kártya nálunk
   LINK, tehát kell a link-viselkedés és a rács felső térköze. */
.wr-fb__grid { margin-top: 0; }
@media (min-width: 1024px) { .wr-fb__grid { grid-template-columns: repeat(3, 1fr); } }

.wr-fb__cardlink {
  display: block;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.wr-fb__cardlink:hover {
  border-color: var(--coral, #f03a47);
  transform: translateY(-2px);
}

.wr-fb__foot { color: var(--ink-soft, #3a5480); opacity: .85; margin: 0; }
.wr-fb__foot a { color: var(--coral, #f03a47); }

@media (max-width: 640px) {
  .wr-fb { padding: 72px 16px 64px; }
}

/* =========================================================================
   A PIPA SZÍNE PIROS KORONGON: FEHÉR.

   MIÉRT KELL EZ A SZABÁLY, ÉS MIÉRT NEM ELÉG A stroke:
   a sections.css-ben van egy site-szintű ikon-egységesítés (Wrike #3):
     main svg:has(> path[d="M20 6 9 17l-5-5"]) { background-color: var(--ink);
                                                 mask: ...; stroke: none; }
   Ez ALAKRA illeszkedik: minden Lucide "check" path erre a szabályra fut,
   CSS-maszkkal rajzolódik, és a színét a background-color adja, NEM a stroke.
   Ezért a mi fehér stroke-unk hatástalan volt: a szabály kioltotta
   (stroke: none), és a pipát sötétkékre festette.

   MÉRVE 2026-09-09: a számított stroke fehér volt, a kirajzolt pipa mégis
   sötétkék. Az ok ez a maszkos festés.

   A javítás nem a szabály megkerülése, hanem a SZÍN felülírása erre az egy
   helyre: a korong piros, azon a sötétkék pipa nem olvasható, fehér kell.
   Az alak marad az egységesített alak, ahogy Kiss Ernő kérte.
   ========================================================================= */
.wr-fb__badge svg:has(> path[d="M20 6 9 17l-5-5"]) {
  background-color: #ffffff;
}

/* A "Készen állsz a kilövésre?" blokk 2026-09-09 óta a köszönő oldalon is ott
   van (Ernő kérése: a blogcikkekből ide került át). Ott a lábléc közvetlenül
   alatta kezdődik, ezért kap alsó térközt. Ez a fájl csak a köszönő és a 404
   oldalon töltődik be, tehát a blogcikkeket nem érinti. */
.wr-blog-cta { margin-bottom: 4rem; }