/* ========================================= */
/* --- SYSTEMY WIZUALNE I GALERIE --- */
/* ========================================= */

/* ========================================= */
/* --- CZYSTA, PROSTA RAMKA NA ZDJĘCIA --- */
/* ========================================= */

.image-frame {
  position: relative;
  background: #ffffff; /* Czysta, biała ramka ("passe-partout") */
  padding: 12px; /* Równa ramka wokół zdjęcia/kolażu */
  border-radius: 12px; /* Delikatne zaokrąglenie całości */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); /* Klasyczny, miękki cień pod ramką */

  /* Resetujemy ułożenie - żadnych rotacji 3D, prosto i solidnie */
  transform: none;
  transition: var(--transition);
}

/* Subtelny hover - tylko unosi się do góry, nie obraca */
.image-frame:hover {
  transform: translateY(-5px);
  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.35);
}

.image-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px; /* Wewnętrzne, mniejsze zaokrąglenie samego zdjęcia */

  /* Zabezpieczenie przed "brzydkimi" krawędziami starych zdjęć */
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========================================= */
/* --- KOLAŻ (Jeśli wrzucasz więcej zdjęć) --- */
/* ========================================= */
/* Upewniamy się, że jeśli to jest grid ze zdjęciami, mają równe odstępy */
.hero-visual .image-frame {
  /* Jeśli chcesz, by ta ramka trzymała 4 zdjęcia jako jeden obraz */
  overflow: hidden;
}

/* --- NOWOCZESNY SLIDER BEZ RAMEK Z GŁĘBOKIM CIENIEM --- */
.image-slider {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  border-radius: 20px; /* Mocniejsze zaokrąglenie dla nowoczesnego wyglądu */
  overflow: hidden; /* To jest kluczowe: przycina zdjęcia do zaokrąglonych rogów */

  /* "Fajny cień" - wielowarstwowy, nadający głębię i masę */
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.5),
    0 18px 36px -18px rgba(0, 0, 0, 0.6);

  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: transparent; /* Brak białego tła */
}

/* Subtelny efekt uniesienia przy najechaniu myszką */
.image-slider:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.6);
}

.image-slider img.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Zdjęcie wypełnia całą przestrzeń bez zniekształceń */

  opacity: 0;
  z-index: 1;
  transition: opacity 1.5s ease-in-out;
}

.image-slider img.slide.active {
  opacity: 1;
  z-index: 2;
}

/* ========================================= */
/* --- SEKCJA HERO (WIZUALIZACJA I UKŁAD) --- */
/* ========================================= */

/* --- PANCERNY KONTENER HERO (Z TŁEM) --- */
.hero {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  /* 👇 TUTAJ WRACA TWOJE TŁO 👇 */
  background: var(--primary-navy); /* Przywracamy główny granat */
  /* Alternatywa premium (gradient): background: linear-gradient(135deg, #0a192f 0%, #172a45 100%); */

  /* Upewniamy się, że cały tekst bazowy jest biały */
  color: var(--white);

  /* Techniczne parametry trzymające układ w ryzach */
  min-height: 100vh;
  height: auto !important;
  box-sizing: border-box;
  padding: 160px 8% 100px;
  gap: 50px;

  /* Ważne: overflow: hidden ukrywa ewentualne wylewanie się "poświaty" z ::before za ekran */
  overflow: hidden;
}

/* Subtelne tło technologiczne */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(
    circle at 70% 50%,
    rgba(0, 180, 219, 0.1),
    transparent
  );
  z-index: 0;
  pointer-events: none;
}

/* --- LEWA STRONA: TREŚĆ --- */
.hero-content {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Wyśrodkowuje tekst w pionie (góra-dół) */
  align-items: center; /* Wyśrodkowuje w poziomie (lewo-prawo) */
  text-align: center; /* Środkuje same litery w akapitach */
  z-index: 2;
  position: relative;
  padding-right: 40px; /* Zabezpieczenie, by tekst nie dotykał zdjęć po prawej */
}

/* Usuwamy stare align-self, bo kontener nadrzędny już wszystko środkuje */
.hero-pre-title,
.hero-content h1,
.hero-content p,
.hero-btns {
  align-self: auto;
  width: 100%;
}

.hero-pre-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--light-blue);
  margin-bottom: 20px;
}

.hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  max-width: 800px;
  margin-bottom: 25px;
  color: var(--white);
  line-height: 1.1;
}

.hero-content p {
  max-width: 600px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  line-height: 1.6;
}

.hero-btns {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btn-outline {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}

.btn-outline:hover {
  border-color: var(--light-blue) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* --- PRAWA STRONA: WIZUALIZACJA --- */
.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
  max-width: 650px;
}

/* --- RESPONSYWNOŚĆ (Mobile i Tablety) --- */
@media (max-width: 992px) {
  .hero {
    flex-direction: column; /* Dopiero na małych ekranach zmieniamy na układ pionowy */
    padding: 150px 5% 60px;
  }

  .hero-content .hero-logo {
    align-self: center; /* Na komórce logo też centrujemy, żeby było symetrycznie */
    margin-bottom: 30px;
  }

  .hero-visual {
    margin-top: 40px;
    width: 100%;
  }
}

/* --- TRUST BADGES --- */
.hero-badges {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 8%;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  z-index: 1;
  flex-wrap: wrap;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 0.9rem;
}

.badge-icon {
  font-size: 1.2rem;
  color: var(--light-blue);
}

.hero-content .hero-logo {
  display: inline-flex; /* Tło dopasuje się do szerokości logo */
  align-items: center;
  justify-content: center;
  background: #ffffff; /* Czysta biel */
  padding: 15px 25px; /* Mały, zgrabny margines */
  border-radius: 12px; /* Nowoczesne, niezbyt duże zaokrąglenie */
  margin-bottom: 30px; /* Odstęp od tekstu pod spodem */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Odcięcie od granatowego tła */
  width: auto; /* Blokujemy rozciąganie na całą szerokość */
}

.hero-content .hero-logo img {
  max-height: 80px; /* Logo nie może być za wielkie */
  width: auto;
  display: block;
}

/* ========================================= */
/* --- TOTALNY RESET MOBILNY (PONIŻEJ 992px) --- */
/* ========================================= */

/* 1. BLOKADA ROZJEŻDŻANIA SIĘ NA BOKI (Kluczowe dla sekcji Hero) */
html,
body {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* --- Koniec pliku visuals.css --- */