/* ==========================================================================
   SEKCJA: NAGŁÓWEK STRONY ZGŁOSZENIOWEJ
   --------------------------------------------------------------------------
   Z makiety (21:53): 1440×412, padding 80 / 80 / 40, gap 20, wszystko
   wyśrodkowane. Kolejno: etykieta 13/auto w gradiencie, nagłówek 44/50,
   dwa akapity 18/28 o szerokości 700 (drugi z kryciem 85%).

   Wysokość sprawdza się do wartości z ramki:
   80 + 14 + 20 + 50 + 20 + 84 + 20 + 84 + 40 = 412.
   ========================================================================== */

.fc-franchise-intro {
  padding-top: var(--fc-sp-80);
  padding-bottom: var(--fc-sp-40);
}

.fc-franchise-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-sp-20);
  text-align: center;
}

/* Etykieta nad nagłówkiem: components/eyebrow.css (klasa `fc-eyebrow`).
   Ta sama etykieta wraca na wszystkich podstronach, więc jej wygląd —
   razem z uzasadnieniem `background-clip: text` — mieszka w komponencie. */

/*
 * Etykieta jest w makiecie zapisana wersalikami w samej treści, ale
 * w panelu wpisuje się ją normalnie — wielkość liter robi CSS. Inaczej
 * polskie znaki w CMS-ie zapisywano by niekonsekwentnie (patrz ta sama
 * decyzja w fc_section_marker()).
 */

.fc-franchise-intro__title {
  width: 820px;
  max-width: 100%;
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h2);
  line-height: var(--fc-lh-h1-form);
  letter-spacing: var(--fc-ls-h2);
  color: var(--fc-color-text);
}

.fc-franchise-intro__lead {
  width: 700px;
  max-width: 100%;
  margin: 0;
  font-family: var(--fc-font-body);
  font-weight: var(--fc-fw-regular);
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text-muted);
}

/* Drugi akapit stoi w makiecie na kryciu 85% — to ta sama barwa, tylko
   cofnięta o krok, żeby zbudować hierarchię między dwoma akapitami
   o identycznej wielkości. */
.fc-franchise-intro__lead--soft {
  opacity: var(--fc-opacity-lead-soft);
}

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE

   Makieta istnieje wyłącznie w 1440 px. Poniższe progi to propozycja,
   nie decyzja projektanta — żadna reguła nie działa przy ≥1200.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .fc-franchise-intro {
    padding-top: var(--fc-sp-64);
  }
}

@media (max-width: 899.98px) {
  .fc-franchise-intro {
    padding-top: var(--fc-sp-48);
    padding-bottom: var(--fc-sp-32);
  }

  .fc-franchise-intro__inner {
    gap: var(--fc-sp-16);
  }
}