/* ============================================================
   Sekcja 04 — O technologii (Algae Ink™)
   Węzeł Figma: 861:1972 (Home: 861:1769), ramka 1440×~800
   ============================================================ */

.s-o-technologii {
  position: relative;
  /* overflow celowo brak — bloby nachodzą na sąsiednie sekcje (makieta); body ma overflow-x: clip */
  /* ramka Figmy 748px: 27 top, 81 pod kafelkami (sekcje w Home stykają się) */
  padding: 27px 0 81px;
}

/* --- Blobsy tła (dekoracyjne, animowane w JS) ----------------
   Wrapper = obrócony bounding box; img wewnątrz rotate(-90deg).
   Poziomo środki wg projektu: lewy 50%−987, prawy 50%+872.
   Pionowo kotwiczymy do GÓRY sekcji (ramka Figmy ma 748px, a rendero-
   wana wysokość sekcji zależy od treści — 50% by dryfowało):
   lewy blob górną krawędzią bboxu w y=0, prawy w y=−306. */

.s-o-technologii__blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.s-o-technologii__blob img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.s-o-technologii__blob--left {
  left: calc(50% - 1544px);
  top: 0;
  width: 1114px;
  height: 851px;
}

.s-o-technologii__blob--left img {
  width: 851px;
  height: 1114px;
}

.s-o-technologii__blob--right {
  left: calc(50% + 458px);
  top: -306px;
  width: 828px;
  height: 666px;
}

.s-o-technologii__blob--right img {
  width: 666px;
  height: 828px;
}

/* --- Nagłówek sekcji --- */

.s-o-technologii__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin: 0 var(--content-left);
}

.s-o-technologii__tagline {
  font-size: var(--fs-mono-sm);
  line-height: 1;
}

.s-o-technologii__title {
  max-width: 899px;
}

/* --- Lead: dwie kolumny dosunięte do prawej --- */

.s-o-technologii__lead {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  /* 65px = lead na y=280 makiety (27 + 14 tagline + 24 + 150 tytuł + 65) */
  margin: 65px var(--content-left) 0;
}

.s-o-technologii__lead-col {
  flex: 0 1 334px;
}

/* --- Kafelki cech --- */

.s-o-technologii__cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 20px;
  /* makieta: kontener kafelków 1380px na ramce 1440 → marginesy 30px */
  margin: 52px 30px 0;
  list-style: none;
}

.s-o-technologii__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 40px;
  background: var(--c-cream);
  border: var(--border);
  border-radius: 40px;
}

.s-o-technologii__card-label {
  line-height: 1.3;
}

/* --- Ikony 44×44 --- */

.s-o-technologii__icon {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-o-technologii__icon img {
  display: block;
  max-width: none;
}

/* biomasa: faliste plechy + linia podłoża */
.s-o-technologii__icon--biomasa {
  flex-direction: column;
}

.s-o-technologii__icon--biomasa img:first-child {
  width: 33.7px;
  height: 31.1px;
}

.s-o-technologii__icon--biomasa img:last-child {
  width: 36.9px;
  height: 1px;
  margin-top: -1px;
}

/* zamknięty obieg: strzałki z SVG + 2 okręgi dorysowane
   (w Figmie okręgi to osobne obrysy, brak ich w assecie) */
.s-o-technologii__icon--obieg img {
  position: absolute;
  left: 4.2px;
  top: 4.1px;
  width: 37.8px;
  height: 38.9px;
}

.s-o-technologii__icon--obieg::before,
.s-o-technologii__icon--obieg::after {
  content: "";
  position: absolute;
  border: 1px solid var(--c-black);
  border-radius: 50%;
}

.s-o-technologii__icon--obieg::before {
  left: 12.9px;
  top: 12.9px;
  width: 18.2px;
  height: 18.2px;
}

.s-o-technologii__icon--obieg::after {
  left: 19.1px;
  top: 19.1px;
  width: 5.8px;
  height: 5.8px;
}

/* liść (asset ma pełną ramkę 44×44) */
.s-o-technologii__icon--lisc img {
  width: 44px;
  height: 44px;
}

/* VOCs: bąbelki i opary */
.s-o-technologii__icon--vocs img {
  width: 34.6px;
  height: 34.2px;
}

/* PVC: cząsteczka z kółek */
.s-o-technologii__icon--pvc img {
  width: 38.1px;
  height: 33.4px;
}

/* --- Hasła z tooltipem (VOCs, PVC) --- */

.s-o-technologii__term {
  position: relative;
  text-decoration: underline dotted;
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
  cursor: help;
}

.s-o-technologii__term:focus {
  outline: none;
}

.s-o-technologii__tooltip {
  display: block;
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: min(260px, 78vw); /* komponent info-on-hover: 260px */
  padding: 20px;
  background: var(--c-tooltip);
  border: 1px dashed var(--c-black);
  border-radius: 30px;
  color: var(--c-black);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.s-o-technologii__term:hover > .s-o-technologii__tooltip,
.s-o-technologii__term:focus > .s-o-technologii__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* wariant dosunięty do prawej (ostatni kafelek — nie wyjeżdża poza viewport) */
.s-o-technologii__tooltip--right {
  left: auto;
  right: -24px;
  transform: translate(0, 6px);
}

.s-o-technologii__term:hover > .s-o-technologii__tooltip--right,
.s-o-technologii__term:focus > .s-o-technologii__tooltip--right {
  transform: translate(0, 0);
}

/* ============================================================
   Tablet (768–1100): kafelki w 2 rzędach, węższe marginesy
   ============================================================ */

@media (max-width: 1100px) {
  .s-o-technologii__head,
  .s-o-technologii__lead,
  .s-o-technologii__cards {
    margin-left: var(--page-margin);
    margin-right: var(--page-margin);
  }

  .s-o-technologii__cards {
    flex-wrap: wrap;
  }

  .s-o-technologii__card {
    flex: 1 1 calc(33.333% - 14px);
  }
}

/* ============================================================
   Mobile (≤767): pion, kafelki jako poziome rzędy, bez blobów
   ============================================================ */

@media (max-width: 767px) {
  .s-o-technologii {
    padding: 40px 0 60px;
  }

  .s-o-technologii__blob {
    display: none;
  }

  .s-o-technologii__head {
    gap: 16px;
  }

  .s-o-technologii__lead {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  .s-o-technologii__lead-col {
    flex: none;
    width: 100%;
  }

  .s-o-technologii__cards {
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
  }

  .s-o-technologii__card {
    flex: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
  }
}