/* ============================================================
   Print.Organic — sekcja 08: CTA "Drukuj naturalnie"
   Figma 861:1771 (ramka 1440×800): pattern blobów na całej
   sekcji, nagłówek 128px na środku, goo-button pod spodem.
   ============================================================ */

.s-cta {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-cta__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Statyczne bloby (fallback, pozycje wg ramki 1440×800) --- */

.s-cta__blob {
  position: absolute;
  pointer-events: none;
}

.s-cta__blob img {
  width: 100%;
  height: 100%;
}

/* gdy działa żywe tło (canvas), statyczne bloby SVG chowamy */
.s-cta.is-live .s-cta__blob {
  display: none;
}

.s-cta__blob--duzy {
  left: calc(50% + 90px);
  top: calc(50% - 29px);
  width: 746px;
  height: 1653px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.s-cta__blob--maly {
  left: calc(50% - 102px);
  top: calc(50% - 16px);
  width: 617px;
  height: 980px;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* --- Treść: nagłówek + przycisk --- */

.s-cta__tresc {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 54px; /* wg makiety: spód boxu tekstu → góra przycisku */
  padding: 0 var(--page-margin);
  text-align: center;
  /* w makiecie środek nagłówka = środek sekcji, przycisk wisi niżej */
  transform: translateY(47px);
}

.s-cta__tytul {
  /* makieta: 128px na 1440; niżej płynnie, by jedna linia się mieściła */
  font-size: min(128px, calc((100vw - 2 * var(--page-margin)) / 8.2));
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 767px) {
  .s-cta {
    min-height: 80svh;
  }

  .s-cta__tresc {
    gap: 24px;
    transform: translateY(24px);
  }

  .s-cta__tytul {
    font-size: var(--fs-h1); /* H1 Mob 56px — łamie się na dwie linie */
    white-space: normal;
  }

  .s-cta__blob--maly {
    display: none;
  }

  .s-cta__blob--duzy {
    left: 50%;
    top: 46%;
    width: 470px;
    height: 1041px;
  }
}