/* =========================================================================
   Strona główna Robolux — hero: warstwa kluczowego obiektu (robot).
   Ładowane PO template.css, więc nadpisuje reguły z input.css.

   Model pozycjonowania:
   - Tło (gradient/zdjęcie) idzie z inline background-image sekcji.
   - Kluczowy obiekt (robot) to OSOBNA warstwa .__visual, kotwiczona do
     CAŁEJ sekcji (full-width), NIE do wrap-a 1280px. Dlatego wrap musi
     być position:static, żeby blokiem zawierającym był sam .robolux-home-hero.
   - Szerokość robota: min(72vw, 920px). Powyżej ~1280px utyka na 920px
     (NIE skaluje się w górę), poniżej proporcjonalnie maleje.
   ========================================================================= */

.robolux-home-hero {
  position: relative;
  overflow: hidden;
}

/* Wrap przestaje być blokiem zawierającym dla .__visual — kotwiczymy do sekcji. */
.robolux-home-hero__wrap {
  position: static;
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 28px 60px;
}

.robolux-home-hero__copy {
  max-width: 620px;
  position: relative;
  z-index: 3;
}

/* Warstwa robota — kotwiczona do prawej krawędzi kolumny treści (1280px),
   wyśrodkowana w pionie. Right = margines kolumny (0 gdy viewport < 1280). */
.robolux-home-hero__visual {
  position: absolute;
  top: 50%;
  right: max(0px, calc((100vw - 1280px) / 2));
  transform: translateY(-50%);
  width: min(72vw, 920px);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 1;
}

.robolux-home-hero__key-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: right center;
}

/* Chips pozycjonowane względem warstwy robota. */
.robolux-home-hero__chips {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* --- Próg 1 (≤1040px, wąski desktop / tablet poziomo, np. 1024):
   robot nadal WYŚRODKOWANY w pionie (jak na desktopie) i tylko wygaszony
   maską od góry. NIE zsuwamy go nisko — przy ~1024 zostawiałoby to pustkę
   u góry po prawej i wyglądało dziwnie. --- */
@media (max-width: 1040px) {
  .robolux-home-hero__wrap {
    padding: 64px 24px 110px;
  }

  .robolux-home-hero__copy {
    max-width: 520px;
  }

  .robolux-home-hero__visual {
    top: 50%;                /* wyśrodkowany — wypełnia pion, bez pustki u góry */
    right: -12%;
    transform: translateY(-50%);
    width: 660px;            /* stała szerokość — nie skaluje się z viewportem */
    align-items: center;
  }

  /* Mocny, wysoki gradient biało-przezroczysty: kopuła praktycznie znika,
     robot „wyłania się" z tła, solidne zostają tylko koła/światła na dole. */
  .robolux-home-hero__key-image {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 14%, rgba(0, 0, 0, 0.18) 42%, #000 72%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 14%, rgba(0, 0, 0, 0.18) 42%, #000 72%);
  }

  .robolux-home-hero__chips {
    display: none;
  }
}

/* --- Próg 2 (≤820px, tablet pionowo / duży telefon):
   tu robi się ciasno, więc DOPIERO teraz zsuwamy robota nisko pod tekst
   i przyciski, jak na starej stronie. --- */
@media (max-width: 820px) {
  .robolux-home-hero__visual {
    top: 60%;                /* niżej — solidny korpus pod tekstem/przyciskami */
    right: -20%;
  }
}

/* --- Próg 3 (≤560px, telefon): mocniejszy bleed w prawo --- */
@media (max-width: 560px) {
  .robolux-home-hero__wrap {
    padding: 40px 20px 72px;
  }

  .robolux-home-hero__copy {
    max-width: 100%;
  }

  .robolux-home-hero__visual {
    top: 60%;
    right: -36%;
  }
}