/* ============================================================
   STEEL HOG — hero slider (builder)
   Grafika edge-to-edge; gradient mocny z LEWEJ -> zanika w prawo
   (tylko slajdy z treścią). Cały slajd klikalny (warstwa-link),
   przyciski ponad warstwą.
   ============================================================ */

.hero-slider{position:relative;overflow:hidden;background:var(--ink)}

.hero-slide{position:relative}
.hero-slide__img{
  width:100%;
  /* Proporcja grafiki (1920x900) zamiast sztywnej wysokości. Przy `height`
     + `object-fit:cover` kadr był docinany w pionie na KAŻDEJ szerokości:
     na 1920px wychodziło 750px zamiast 900, czyli 150px w plecy. Teraz od
     ok. 1066px w górę widać całą grafikę, poniżej dociera się z boków
     (przy kadrze 2.13:1 mniej boli niż ścięcie góry i dołu). */
  aspect-ratio:1920 / 900;
  min-height:500px;   /* poniżej ~1066px zamiast kurczyć się w dół, przycina boki */
  max-height:850px;   /* sufit wysokości hero na desktopie */
  object-fit:cover;
  object-position:center;
  display:block;
}
.hero-slide__img--mobile{display:none}

/* tryb "sam obraz": bez gradientu, obraz czysty */
.hero-slide--image-only .hero-slide__img{cursor:pointer}

/* gradient tylko przy treści: mocny z lewej, zero po prawej */
.hero-slide--content::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(12,10,8,.66) 0%,
    rgba(12,10,8,.48) 36%,
    rgba(12,10,8,.18) 60%,
    rgba(12,10,8,0) 82%);
}

/* warstwa-link całego slajdu (nad obrazem, pod treścią) */
.hero-slide__cover{position:absolute;inset:0;z-index:2;display:block}

/* treść: nad linkiem; kontener przepuszcza kliki (pointer-events:none),
   przyciski je łapią (pointer-events:auto) */
.hero-slide__content{position:absolute;inset:0;z-index:3;display:flex;align-items:center;pointer-events:none}
/* kontener pełnej szerokości -> treść wyrównana do LEWEJ krawędzi kontenera
   (bez tego .wrap jako flex-item z margin:auto zwężał się i centrował) */
.hero-slide__content > .wrap{width:100%}
.hero-slide__box{max-width:560px;text-align:left}
.eyebrow--hero{color:var(--brand);margin-bottom:12px}
.hero-slide__title{
  font-size:clamp(42px,5.6vw,76px);font-weight:800;text-transform:uppercase;
  letter-spacing:1px;color:#fff;margin:0 0 16px;
}
.hero-slide__lead{font-size:17px;line-height:1.55;color:#e9e5e0;max-width:460px;margin:0 0 26px}
.hero-slide__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-slide__cta .btn{pointer-events:auto}

/* ---------- strzałki ---------- */
.hero-slider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.85);
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;transition:.18s;
}
.hero-slider__arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.hero-slider__arrow svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-slider__arrow--prev{left:18px}
.hero-slider__arrow--next{right:18px}
.hero-slider__arrow.swiper-button-disabled{opacity:.4;pointer-events:none}

/* ---------- kropki (styl z mockupu) ---------- */
.hero-slider .swiper-pagination{bottom:20px}
.hero-slider .swiper-pagination-bullet{
  width:30px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);opacity:1;transition:.2s;
}
.hero-slider .swiper-pagination-bullet-active{background:var(--brand);width:44px}

/* ---------- responsywnie ---------- */
@media(max-width:900px){
  .hero-slide__img{min-height:440px}
  .hero-slide--content::before{
    /* na wąskim ekranie gradient szerszy, żeby tekst był czytelny */
    background:linear-gradient(90deg,
      rgba(12,10,8,.72) 0%,
      rgba(12,10,8,.5) 45%,
      rgba(12,10,8,.2) 75%,
      rgba(12,10,8,.05) 100%);
  }
  .hero-slide__title{font-size:clamp(36px,9vw,56px)}
  .hero-slider__arrow{display:none} /* na mobile swipe + kropki */
}
/* Grafika mobilna ma 768x900, więc przełączamy się dokładnie na jej szerokości —
   powyżej i tak byłaby skalowana w górę. */
@media(max-width:768px){
  /* jeśli slajd ma wersję mobilną, chowamy desktopową */
  .hero-slide__img--desktop:has(+ .hero-slide__img--mobile){display:none}
  .hero-slide__img--mobile{
    display:block;
    aspect-ratio:768 / 900;   /* pionowy kadr mobilny, na 768px 1:1 bez przycięcia */
    min-height:0;
  }
  /* slajd BEZ wersji mobilnej: kadr 1920x900 na telefonie trzeba przyciąć tak czy
     inaczej, więc trzymamy niską wysokość, żeby zabierał z boków jak najmniej */
  .hero-slide__img--desktop{min-height:380px}
}