/* ===========================================
   BELOW-PLANSZA (footer area under timeline)

   Spec source: Figma node 50:222 (frame 4096 × 4817 px).
   Wartości typograficzne i pixel-perfekt buttona są 1:1 z Figmy;
   szerokości pigułek i odstępy skalują się proporcjonalnie do
   szerokości viewportu (vw), wzorowane na Figma % of frame.

   Layout (top → bottom):
     vertical b/w stripes background covers the whole area
     ┊  About teaser (black pill with quote + ABOUT button)
     ┊  KPO pill (white pill with KPO text + banner_KPO.png)
   =========================================== */

.below-plansza {
  position: relative;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(72px, 9vw, 200px);
  padding: clamp(96px, 13.7vw, 280px) clamp(20px, 4vw, 80px)
           clamp(48px, 4.8vw, 110px);
  overflow: hidden;
}

.below-plansza-stripes {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    90deg,
    #000 0 14px,
    #fff 14px 28px
  );
  pointer-events: none;
}

.below-plansza > .about-teaser,
.below-plansza > .kpo-pill {
  position: relative;
  z-index: 1;
}

/* ----- About teaser pill (black) -----
   Figma: 2204×911 (53.8% × 22.2% of 4096 frame).
   Skaluje się z viewportem, do max ~2200 px na ultrawide. */
.about-teaser {
  background: #000;
  color: #fff;
  /* border-radius zależny od viewportu: NIE może być 9999px,
     bo gdy tekst urośnie pionowo (mobile), półokrągłe końce
     "zjadają" padding i tekst wyłazi poza czarny obszar.
     Skala daje pełny pill na ultrawide i rounded-rect na mobile. */
  border-radius: clamp(40px, 12vw, 250px);
  width: min(2204px, 53.8vw);
  min-width: 320px;
  padding: clamp(2rem, 3.06vw, 125px) clamp(2.5rem, 6vw, 245px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma: Editorial New Regular (NIE italic), 96 px / line-height 110 px,
   white, center. Skala: 96px na frame 4096 ≈ 2.34vw, max 96 px. */
.about-teaser-quote {
  margin: 0;
  font-family: var(--font-secondary);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.75rem, 2.34vw, 96px);
  line-height: 1.146;
  text-align: center;
  letter-spacing: 0;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Figma exact: 141×51, 1px solid white, transparent fill,
   white text, Oswald Regular 17 px, border-radius 44 px. */
.about-teaser-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 141px;
  height: 51px;
  margin-left: 0.5em;
  padding: 0;
  vertical-align: middle;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 44px;
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.about-teaser-btn:hover {
  opacity: 0.85;
}

.about-teaser-btn:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

/* ----- KPO pill (white) -----
   Figma: 1509×381 (~36.8vw × 9.3vw frame).
   Inner content (text + banner) 1051×302, centered → top/bottom inner = ~40 px ≈ 1vw frame. */
.kpo-pill {
  background: #fff;
  color: #333;
  border-radius: 9999px;
  width: min(1509px, 36.8vw);
  min-width: 320px;
  padding: clamp(1rem, 2vw, 80px) clamp(2rem, 5.6vw, 230px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1vw, 40px);
}

.kpo-pill-text {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(0.5rem, 0.5vw, 0.7rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  color: #333;
}

.kpo-pill-img {
  height: clamp(48px, 5.4vw, 110px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ----- Wide-and-down -----
   Inline button trzyma się tylko na wide (≥1500) i ultrawide.
   Niżej button-pill ma inną wysokość niż linia tekstu, więc
   ostatni wiersz cytatu "łapie inny hejt" (różny line-height).
   Rozwiązanie: button na własną linię, wycentrowany.
   `display: flex` zachowuje wewnętrzne centrowanie z base rule. */
@media (max-width: 1499px) {
  .about-teaser-btn {
    display: flex;
    margin: 0.9rem auto 0;
  }
}

/* ----- Mobile / narrow -----
   Wąsko = pigułka degeneruje się do kółka (h ≈ w), zaokrąglenia zjadają
   tekst po bokach. Dlatego trzymamy radius = "rounded rect", nie 9999px,
   i utrzymujemy proporcje przez większą szerokość + mniejszy font. */
@media (max-width: 768px) {
  .below-plansza {
    gap: 40px;
    padding: 80px 12px 48px;
  }
  .about-teaser {
    width: 94vw;
    border-radius: 28px;
    padding: 1.5rem 1.25rem;
  }
  .about-teaser-quote {
    font-size: clamp(0.9rem, 2.8vw, 1.2rem);
    line-height: 1.25;
  }
  .about-teaser-btn {
    width: 104px;
    height: 36px;
    font-size: 13px;
    margin: 0.75rem auto 0;
  }
  .kpo-pill {
    width: 94vw;
    border-radius: 32px;
    padding: 1rem 1.25rem;
  }
  .kpo-pill-img {
    height: 56px;
  }
}

/* Edge case: bardzo wąskie ekrany — dalsza redukcja fontu + ciaśniejszy
   padding, żeby h ≪ w i kształt pozostał wyraźnie pigułkowy. */
@media (max-width: 480px) {
  .about-teaser {
    width: 96vw;
    border-radius: 24px;
    padding: 1.1rem 0.9rem;
  }
  .about-teaser-quote {
    font-size: clamp(0.78rem, 3.1vw, 0.95rem);
    line-height: 1.2;
  }
  .about-teaser-btn {
    width: 84px;
    height: 30px;
    font-size: 11px;
    margin-top: 0.6rem;
  }
  .kpo-pill {
    border-radius: 28px;
  }
}