/* Ustawienia kontenera i głównej sekcji */
.main-bg-wrapper {
  width: 100%;
  background:
    linear-gradient(rgba(231, 230, 230, 0.35), rgba(136, 136, 136, 0.35)),
    url('../images/tlo.png') no-repeat center center;
  background-size: cover;
  padding: 80px 40px;
  box-sizing: border-box;
}

main.main-content {
  max-width: 1100px;
  margin: 0 auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  position: relative;
  z-index: 1;
  padding: 0;
  min-height: calc(100vh - 140px);
}

/* Wrapper kontaktowy - info i mapa obok siebie */
.contact-wrapper {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1; /* nad tłem */
  padding-bottom: 40px;
}

/* Sekcja z danymi firmy */
.contact-infos {
  flex: 1 1 400px;
  color: #f0f0f0; /* jaśniejszy tekst na ciemniejszym tle */
  line-height: 1.8;
  background: rgba(18, 40, 61, 0.85); /* ciemne, półprzezroczyste tło */
  padding: 35px 40px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(18, 40, 61, 0.5);
  font-size: 1.3rem; /* większa czcionka */
  font-weight: 600;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

/* Usuwamy border-bottom i marginesy z paragrafów i h3 */
.contact-infos p,
.contact-infos h3 {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* Podkreślenie tylko pod tekstem nagłówków h2 i h3 */
.contact-infos h2,
.contact-infos h3 {
  color: #b0d4ff;
  font-weight: 700;
  margin-bottom: 20px;
  padding-left: 35px;
  font-size: 1.8rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);

  border-bottom: 2px solid rgba(176, 212, 255, 0.6);
  display: inline-block; /* podkreślenie pod tekstem */
  padding-bottom: 5px;
  position: relative;
}

/* Ikonki w nagłówkach */
.icon-building::before,
.icon-phone::before,
.icon-email::before,
.icon-regon::before,
.icon-nip::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: #9ecfff;
}

/* Konkretnie każda ikona (dla jasności, można też zgrupować powyżej) */
.icon-building::before {
  content: "🏢";
}

.icon-phone::before {
  content: "📞";
}

.icon-email::before {
  content: "✉️";
}

.icon-regon::before {
  content: "🆔";
}

.icon-nip::before {
  content: "💼";
}

/* Linki jaśniejsze */
.contact-infos a {
  color: #a8d1ff;
  font-weight: 700;
  text-decoration: none;
}

.contact-infos a:hover,
.contact-infos a:focus {
  text-decoration: underline;
  color: #5fa8ff;
}

/* Sekcja z mapą */
.contact-map {
  flex: 1 1 600px;
  min-width: 450px;
  position: relative;
  z-index: 1; /* nad tłem */
}

.contact-map h2 {
  color: #12283d;
  font-weight: 700;
  margin-bottom: 25px;
  font-size: 1.8rem;
}

/* Styl iframe mapy - dopasowanie do kontenera */
.contact-map iframe {
  width: 100%;
  height: 550px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(18, 40, 61, 0.15);
}

.company-scope {
  text-align: center;
  margin: 15px  auto;
  max-width: 900px;
  font-size: 1.3rem;
  padding-bottom: 50px;
  font-weight: 600;
  color: #1e1e1e;
  border-radius: 8px;
  line-height: 1.6;
}

/* Hero section */
.hero {
  position: relative;
  background-image: url('../images/kontakt.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 45vh;
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-bottom: 20px;
  z-index: 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero h1 {
  position: relative;
  z-index: 2;
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 800;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.05em;
  margin: 0;
}

/* Responsywność */
@media (max-width: 768px) {
  .contact-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  main.main-content {
    max-width: 100%;
    padding: 0 20px;
  }

  .contact-infos {
    flex: 1 1 100%;
    font-size: 1.1rem;
    padding: 25px 30px;
  }

  .contact-infos h2,
  .contact-infos h3 {
    font-size: 1.4rem;
    padding-left: 30px;
  }

  .contact-map {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .contact-map h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  .contact-map iframe {
    height: 320px;
  }
}

/* --- MOBILE FIRST (poniżej 576px) --- */
@media (max-width: 575.98px) {
  .main-bg-wrapper {
    padding: 60px 20px;
  }

  .contact-infos {
    font-size: 1rem;
    padding: 20px 20px;
    text-align: left;
  }

  .contact-infos h2,
  .contact-infos h3 {
    font-size: 1.2rem;
    padding-left: 28px;
  }

  .contact-map h2 {
    font-size: 1.2rem;
    text-align: center;
  }

  .contact-map iframe {
    height: 280px;
  }

  .company-scope {
    font-size: 1rem;
    padding: 0 10px 30px;
  }

  .hero {
    height: 30vh;
    min-height: 180px;
    padding-bottom: 15px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  /* Fix ikon w nagłówkach */
  .contact-infos h2::before,
  .contact-infos h3::before {
    font-size: 1.3rem;
    top: 0.6em;
  }
}

/* --- TABLETY (576px - 767.98px) --- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .main-bg-wrapper {
    padding: 70px 30px;
  }

  .contact-infos {
    font-size: 1.1rem;
    padding: 25px 30px;
  }

  .contact-infos h2,
  .contact-infos h3 {
    font-size: 1.4rem;
    padding-left: 30px;
  }

  .contact-map iframe {
    height: 320px;
  }

  .company-scope {
    font-size: 1.1rem;
    padding: 0 15px 40px;
  }

  .hero {
    height: 35vh;
  }

  .hero h1 {
    font-size: 2.4rem;
  }
}

/* --- LAPTOPY MAŁE (768px - 991.98px) --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .contact-infos {
    font-size: 1.2rem;
    padding: 30px 35px;
  }

  .contact-infos h2,
  .contact-infos h3 {
    font-size: 1.6rem;
  }

  .contact-map iframe {
    height: 400px;
  }

  .company-scope {
    font-size: 1.2rem;
    padding: 0 20px 40px;
  }

  .hero h1 {
    font-size: 2.8rem;
  }
}

/* --- DESKTOP HD (ponad 1200px) --- */
@media (min-width: 1200px) {
  .main-content {
    padding: 0;
  }

  .contact-infos {
    font-size: 1.3rem;
  }

  .contact-map iframe {
    height: 550px;
  }
}

@media (max-width: 576px) {
  .icon-building::before,
  .icon-phone::before,
  .icon-email::before,
  .icon-regon::before,
  .icon-nip::before {
    font-size: 1.2rem;
  }
}