/* hero-patch.css — sizing and styling for hero swiper */
.hero { padding: 0; }
.hero .swiper { width: 100%; height: clamp(360px, 52vw, 560px); }
@media (min-width: 1200px){
  .hero .swiper { height: clamp(520px, 44vw, 640px); }
}

.hero .swiper-slide { position: relative; overflow: hidden; }

/* Obrazek w tle slajdu */
.hero .swiper-slide picture, 
.hero .swiper-slide img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display:block; 
}

/* Subtelny gradient dla lepszej czytelności tekstu */
.hero .swiper-slide::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 50%, transparent 65%);
  z-index: 5;
}

/* Kontener na tekst i przycisk */
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 10%; /* Zwiększony padding z 8% do 10% */
  color: #fff;
  max-width: 50%; /* NOWA, KLUCZOWA REGUŁA */
}

/* Style tekstu */
.hero-copy h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--brand, #1fa5b5); /* Używa koloru z motywu */
}
.hero-copy p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  max-width: 45ch;
  margin: 1.5rem 0 2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Styl przycisku */
.hero-copy .btn {
  border-width: 2px;
  border-color: #fff;
  color: #fff;
  padding: .6rem 1.5rem;
  font-weight: 600;
  background: transparent;
  transition: all .2s ease;
}
.hero-copy .btn:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

/* Paginacja */
.hero .swiper .swiper-pagination { 
  position: absolute; 
  left: 0; right: 0; bottom: 18px; 
}
/* ============================================== */
/* === Poprawki Wizualne Slidera Hero === */
/* ============================================== */

/* 1. Ukrycie strzałek nawigacyjnych */
.hero .swiper-button-prev,
.hero .swiper-button-next {
  display: none;
}

/* 2. Stylizacja kropek paginacji (nieaktywne) */
.hero .swiper-pagination-bullet {
  width: 20px; /* Powiększenie kropki */
  height: 20px; /* Powiększenie kropki */
  
  background: var(--brand); /* Użycie koloru z palety lime */
  opacity: 0.5; /* Sprawia, że nieaktywne kropki są półprzezroczyste */
  transition: opacity 0.2s ease; /* Płynne przejście */
}

/* 3. Stylizacja aktywnej kropki */
.hero .swiper-pagination-bullet-active {
  opacity: 1; /* Aktywna kropka jest w pełni widoczna */
}