/* === Reset & base === */
* {margin:0;padding:0;box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {
  font-family:"Segoe UI", Roboto, sans-serif;
  background:#0e0e0e;
  color:#e8e8e8;
  line-height:1.6;
}

/* === Hero === */
.hero {
  position:relative;
  height:100vh;
  background:url("../images/welding1.png") center/cover no-repeat;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.hero .overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
}
.hero-content {position:relative;z-index:2;max-width:800px;}
.hero-logo {width:150px;margin-bottom:20px;filter:brightness(0.9);animation:fadeInDown 1.5s ease;}
.hero h1 {font-size:2rem;letter-spacing:1px;margin-bottom:10px;animation:fadeInUp 1.5s ease;}
.hero .contact-top {margin-bottom:20px;font-size:0.95rem;color:#aaa;}
.btn {
  background:#971005;color:#fff;padding:12px 24px;border-radius:6px;
  text-decoration:none;font-weight:bold;transition:0.3s;
}
.btn:hover {background:#ff505f;}

/* === Sections === */
.section {
  padding:80px 20px;
  opacity:0;
  transform:translateY(50px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.section.visible {opacity:1;transform:translateY(0);}
.section.dark {background:#111;}
.section.light {background:#1b1b1b;}
.container {max-width:1100px;margin:0 auto;text-align:center;}
.section h2 {font-size:1.8rem;margin-bottom:20px;color:#971005;}
.section .intro {margin-bottom:40px;color:#ccc;}

/* === Oddělení služeb od galerie (Kovovýroba) === */
#kovovyroba .services {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#kovovyroba .gallery {
  margin-top: 50px;
}

/* === Gallery === */
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-bottom:40px;
}
.gallery img {
  width:100%;
  border-radius:8px;
  cursor:pointer;
  transition:transform 0.3s, box-shadow 0.3s;
}
.gallery img:hover {
  transform:scale(1.05);
  box-shadow:0 0 15px #e6394675;
}

/* === Lightbox === */
.lightbox {
  display:none;
  position:fixed;
  z-index:9999;
  left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,0.9);
  justify-content:center;
  align-items:center;
  animation:fadeIn 0.3s ease;
}
.lightbox-content {
  max-width:90%;
  max-height:90%;
  border-radius:10px;
  box-shadow:0 0 20px rgba(0,0,0,0.8);
}
.lightbox .close {
  position:absolute;
  top:20px;
  right:35px;
  color:#fff;
  font-size:40px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}
.lightbox .close:hover {color:#e63946;}

/* === Services === */
.services {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:20px;
  margin-top:20px;
}
.service {
  background:#1f1f1f;
  border-radius:10px;
  padding:20px;
  transition:0.3s;
}
.service:hover {
  background:#2a2a2a;
  transform:translateY(-4px);
}
.service img {width:50px;margin-bottom:10px;filter: brightness(0) invert(0.8);}
.service p {font-weight:bold;font-size:0.95rem;color:#eee;}

/* === Transport gallery === */
.transport-gallery img {
  border-radius:10px;
  height:220px;
  object-fit:cover;
}

/* === Zemní práce specific === */
/* Oddělení služeb od galerie podobně jako u Kovovýroby */
#zemni-prace .services {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#zemni-prace .gallery {
  margin-top: 50px;
}

/* === OPRAVA PRO JEDNU FOTKU BAGRU === */
/* Specifický styl pro galerii bagru - zvládá i jeden obrázek */
.excavator-gallery {
  /* Měníme auto-fit na auto-fill, aby se položky neroztahovaly, když jich je málo */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Vycentruje obrázek (nebo obrázky), pokud jich není dost na zaplnění řádku */
  justify-content: center;
}

.excavator-gallery img {
  border-radius: 10px;
  height: 250px; /* Výška zůstává sjednocená */
  object-fit: cover;
  /* <--- TOTO JE KLÍČOVÉ: Omezíme maximální šířku jednoho obrázku, */
  /* aby se neroztáhl přes celý web. Nastavil jsem 350px, což odpovídá */
  /* zhruba velikosti fotek v galerii Kovovýroba na desktopu. */
  max-width: 350px;
  width: 100%; /* Zajistí, že menší fotka vyplní prostor daný max-width */
}

/* === Kontakt === */
#kontakt p {margin:8px 0;color:#ddd;}
#kontakt a {color:#971005;text-decoration:none;}
#kontakt iframe {width:100%;margin-top:30px;border-radius:10px;}

/* === Footer === */
footer {
  background:#0a0a0a;
  text-align:center;
  padding:20px;
  color:#666;
  font-size:0.9rem;
}
footer a {color:#aaa;}
footer a:hover {color:#e63946;}

/* === Animace === */
@keyframes fadeInUp {from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInDown {from{opacity:0;transform:translateY(-40px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn {from{opacity:0;}to{opacity:1;}}
.fade-section {opacity:0;transform:translateY(60px);}
.fade-section.visible {opacity:1;transform:translateY(0);}

/* === Mobilní optimalizace === */
@media (max-width: 768px) {
  .section,
  .fade-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .section.visible,
  .fade-section.visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Vypneme i hero animace */
  .hero-logo,
  .hero h1 {
    animation: none !important;
  }
}