/* ==========================================================================
   CALLA — komponent "Hero współpracy" (ACF flexible content, layout "cooperation_hero")
   ========================================================================== */

.cooperation-hero {
  padding-block: var(--section-spacing);
}

/* Odstęp od menu na mobile ujednolicony na 48px — patrz hero.css. */
@media (max-width: 639px) {
  .cooperation-hero {
    padding-top: 48px;
  }
}

.cooperation-hero__head {
  max-width: 780px;
}

.cooperation-hero__heading {
  /* Jost, nie Plus Jakarta Sans jak reszta nagłówków — spójne z .hero__heading. */
  font-family: 'Jost', var(--font-heading);
  margin-top: var(--space-3);
}

.cooperation-hero__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.cooperation-hero__col-1 {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cooperation-hero__col-1 img {
  width: 100%;
  height: auto;
  max-height: 525px;
  object-fit: cover;
  border-radius: 20px;
}

.cooperation-hero__col-2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cooperation-hero__image-2 {
  width: 100%;
  max-height: 525px;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}

.cooperation-hero__text-2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
}

.cooperation-hero__eyebrow-2 {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
}

@media (min-width: 1140px) {
  .cooperation-hero__columns {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-10);
    align-items: stretch;
  }

  .cooperation-hero__col-1 {
    justify-content: space-between;
  }

  .cooperation-hero__col-2 {
    justify-content: space-between;
  }

  .cooperation-hero__text-2 {
    padding: 0 20px;
  }
}

@media (max-width: 1139px) {
  .cooperation-hero {
    padding-bottom: calc(var(--section-spacing) / 2);
  }

  .cooperation-hero__col-1 img,
  .cooperation-hero__image-2 {
    display: block;
    width: 78%;
    max-width: none;
    max-height: none;
    height: auto;
  }

  /* Asymetryczny podział wspólnej puli wolnej przestrzeni (22% przy width:78%)
     zamiast margin-inline:auto — daje efekt schodkowy/diagonalny: image_1
     przesunięte w lewo, image_2 (nachodzące na nie) przesunięte w prawo. */
  .cooperation-hero__col-1 img {
    margin-left: 4%;
    margin-right: 18%;
  }

  .cooperation-hero__image-2 {
    margin-left: 18%;
    margin-right: 4%;
  }

  /* image_1:image_2 mają wspólną proporcję natywną 796:525 (wysokość ≈ 0.514 × szerokość
     kontenera przy tej samej width w %). margin-top w % liczy się względem szerokości
     .col-2 (kontener flex), więc rośnie 1:1 z wysokością image_2 w całym zakresie — stąd
     jedna wartość bez podziału na breakpointy. -21% ≈ 40% wysokości image_2
     (0.4 × 0.514 ≈ 0.206). Doliczony -var(--space-8): tyle wynosi stały (pikselowy)
     row-gap .cooperation-hero__columns między .col-1 a .col-2 — bez tego offsetu
     margines najpierw "zjadałby" ten gap, więc realny overlap rósłby z szerokością
     zamiast zostać stały (efekt widoczny w pomiarach przed dodaniem tego wyrazu). */
  .cooperation-hero__image-2 {
    margin-top: calc(-21% - var(--space-8));
    box-shadow: 0 20px 40px rgba(38, 64, 69, 0.18);
  }
}