/* style.css */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Lato',sans-serif;color:#333;line-height:1.6}
a{color:#ffffff;text-decoration:none;transition:all .3s ease}
.container{max-width:1200px;padding:0 1rem;margin:auto}

/* Header */
.sticky-header{position:sticky;top:0;background:#208cff;border-bottom:1px solid #eee;z-index:10}
.sticky-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;position:relative}
.logo {
  height: 70px;
  transition: height 0.3s ease;
}

@media (max-width: 768px) {
  .logo {
    height: 50px;
  }
}
.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}
.hamburger span{width:25px;height:3px;background:#333;border-radius:2px;transition:all .3s}
nav ul{list-style:none;display:flex;gap: 0.5rem}
nav ul li a{padding:.5rem;display:inline-block;transition:all .3s ease}
nav ul li a:hover{transform:scale(1.1);background:#00476a;color:#fff;font-weight:600;border-radius:4px}
.btn-primary{background:#005a8b;color:white;padding:.5rem 1rem;border-radius:4px;transition:background .3s ease, transform .3s ease}
.btn-primary:hover{background:#00476a;transform:scale(1.05)}

/* Mobile Menu */
@media(max-width:768px){
  .hamburger{display:flex}
  nav{position:absolute;top:100%;left:0;width:100%;background:#0075ff;overflow:hidden;max-height:0;transition:max-height .3s ease}
  nav.open{max-height:300px}
  nav ul{flex-direction:column;align-items:center}
}

/* Fullscreen welcome */
#welcome-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,90,139,0.9);display:flex;align-items:center;justify-content:center;z-index:100}
#welcome-overlay .welcome-content{text-align:center;color:#fff;padding:2rem}
#welcome-overlay button{background:#fff;color:#005a8b;padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;transition:transform .3s ease}

/* Hero */
#hero{position:relative}
.hero-bg{width:100%;height:60vh;object-fit:cover}
.hero-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;text-shadow:0 2px 5px rgba(0,0,0,.7)}

/* About */
/* 1) zwolnienie max-width tylko dla tej sekcji */
#about.container {
  max-width: none;
  width: 100%;
  padding: 0 5rem;
}
/* 2) standardowe wyrównanie i siatka */
#about {
  margin: 2rem 0;
  text-align: center;
}
#about h2 {
  text-align: center;
  margin-bottom: 2rem;
}
.about-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}
.about-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 2px 8px rgba(0,0,0,.1);
  transition: transform .3s, box-shadow .3s;
  text-align: center;
}
.about-itemV2:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.about-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.about-item h3 {
  padding: 1rem 0 .5rem;
  font-size: 1.2rem;
}
.about-item p {
  padding: 0 1rem 1rem;
  font-size: 1rem;
  line-height: 1.4;
}

/* Sections */
.services-grid, .team-grid, .gallery-grid{display:grid;gap:1.5rem;margin:2rem 0}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card, .doctor-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s}
.card:hover, .doctor-card:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.card img, .doctor-card img{width:100%;height:300px;object-fit:cover}
.card h3, .doctor-card h3{text-align:center;padding:1rem 0 .5rem}

/* Gallery */
.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.gallery-grid img{width:100%;height:150px;object-fit:cover;border-radius:4px;cursor:pointer;transition:opacity .2s,transform .3s}
.gallery-grid img:hover{opacity:.8;transform:scale(1.05)}

/* Contact */
#contact{background:#f4f4f4;padding:4rem 1rem}
.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0}
.contact-section form{display:flex;flex-direction:column;gap:1rem}
.contact-section input,.contact-section textarea{padding:.75rem;border:1px solid #ccc;border-radius:4px;width:100%}

/* Footer */
.footer{background:#333;color:#fff;padding:4rem 1rem 2rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}
.footer-col h4{margin-bottom:1rem;color:#fff}
.footer-col p,.footer-col ul,.footer-col a{color:#ccc;font-size:.9rem;line-height:1.6}
.footer-col ul{list-style:none;padding:0}
.footer-col ul li{margin-bottom:.5rem}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid #444;padding-top:1rem;text-align:center;font-size:.8rem}
.footer-bottom a{margin:0 0.5rem;color:#ccc}
.footer-bottom a:hover{color:#fff}

/* Naprzemienne ułożenie sekcji ofert */
.about-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.about-item {
  display: flex;
  align-items: center;
  gap: 2rem;
  text-align: left;
}

.about-item:nth-child(even) {
  flex-direction: row-reverse;
  text-align: right;
}

.about-item img {
  width: 50%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.about-item > div {
  flex: 1;
}

.about-item h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.about-item p {
  font-size: 1.4rem;
  line-height: 1.6;
}

/* Responsywność – na telefonie pionowo */
@media (max-width: 768px) {
  .about-item {
    flex-direction: column !important;
    text-align: center !important;
  }

  .about-item img {
    width: 100%;
  }
}

/* Sekcja lekarzy */
/* Sekcja lekarzy */
#doctors {
  margin: 3rem 0;
  text-align: center;
}

#doctors h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-content: center; /* centrum siatki */
  gap: 2.5rem;
  padding: 0 1rem;
  max-width: 1000px;
  margin: 0 auto;
}


.doctor-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.doctor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.doctor-card img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.doctor-card h3 {
  font-size: 1.4rem;
  margin: 1rem 0 0.5rem;
  color: #005a8b;
}

.doctor-card p {
  padding: 0 1.2rem 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
#doctors.container {
  max-width: none;
  width: 100%;
  padding: 0 2rem;
}

.map-container {
  margin-top: 3rem;
  text-align: center;
}

.map-container iframe {
  width: 100%;
  max-width: 1000px;
  height: 400px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.gallery-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}

.language-switcher img {
  width: 24px;
  height: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.language-switcher img:hover {
  transform: scale(1.2);
}

.none {
  color:#333333
}

/* Początkowo menu ukryte na mobilnych */
.nav-menu {
  display: none;
  flex-direction: column;
  background-color: #208cff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 99;
}

/* Po kliknięciu hamburgera – pokazujemy menu */
.nav-menu.open {
  display: flex;
}

@media (min-width: 768px) {
    .nav-menu {
        display: flex !important;
        position: static;
        flex-direction: row-reverse;
        background: none;
        align-content: stretch;
        justify-content: space-evenly;
    }
}

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      padding-top: 60px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
      display: block;
      margin: auto;
      max-width: 90%;
      max-height: 80%;
      border-radius: 8px;
    }

    .modal-caption {
      margin: 20px auto;
      text-align: center;
      color: #fff;
      font-size: 1.2rem;
      max-width: 90%;
    }

    .modal-close {
      position: absolute;
      top: 20px;
      right: 35px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
    }

    .modal-close:hover {
      color: #aaa;
    }