/* Globální a základní styly */

:root {

    --primary-color: #e10000; /* Rudá pro CTA */

    --secondary-color: #333; /* Tmavá pro pozadí/text */

    --text-color: #444;

    --light-bg: #f8f9fa;

    --max-width: 1200px;

}



body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    margin: 0;

    padding: 0;

    line-height: 1.6;

    color: var(--text-color);

    background-color: white;

}



html {

  scroll-padding-top: 110px;

  scroll-behavior: smooth;

}







:target::before {

  content: "";

  display: block;

  height: 110px;       /* výška hlavičky */

  margin-top: -110px;

}





#portfolio,

#proces,

#poptavka,

#kontakt {

  scroll-margin-top: 100px;

}





.container {

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 20px;

}



h1, h2, h3 {

    color: var(--secondary-color);

    line-height: 1.2;

}



/* --- Header a Navigace --- */

.main-header {

    background-color: white;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    position: sticky; /* Zajištění, že menu zůstane nahoře */

    top: 0;

    z-index: 1000;

}







.social-icons a {

    font-size: 24px; /* ⬅️ bylo 18px */

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: #f2f2f2;

  display: flex;

  align-items: center;

  justify-content: center;

}



.header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 20px;

}



.logo img {

  height: 150px;          /* ideální výška do headeru */

  width: auto;

  display: block;

}

.main-nav ul {

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 25px;

  list-style: none;

  margin: 0;

  padding: 0;

}





.main-nav a {

    text-decoration: none;

    color: var(--secondary-color);

    font-weight: 500;

    padding: 10px 0;

    transition: color 0.3s;

}



.main-nav a:hover {

    color: var(--primary-color);

}



.contact-info .phone {

    color: var(--secondary-color);

    text-decoration: none;

    margin-right: 20px;

    font-weight: bold;

}



/* --- CTA Tlačítka --- */

.cta-button {

    text-decoration: none;

    padding: 10px 20px;

    border-radius: 5px;

    font-weight: bold;

    display: inline-block;

    transition: background-color 0.3s, transform 0.2s;

}



.cta-button.primary {

    background-color: var(--primary-color);

    color: rgb(255, 255, 255);

    border: 2px solid var(--primary-color);

}



.cta-button.primary:hover {

    background-color: #ffffff;

    transform: translateY(-2px);

    color: rgb(255, 0, 0);

  

}



.cta-button.secondary {

    background-color: transparent;

    color: var(--primary-color);

    border: 2px solid var(--primary-color);

}



.cta-button.secondary:hover {

    background-color: var(--primary-color);

    color: rgb(255, 0, 0);

}



.large-cta {

    padding: 15px 30px;

    font-size: 1.1em;

    margin-top: 20px;

}



.portfolio-section {

  padding: 40px 20px;

}



.portfolio-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

}



.portfolio-folder, .portfolio-subfolder {

  text-align: center;

  cursor: pointer;

}



.portfolio-folder img, .portfolio-subfolder img {

  width: 200px;

  border-radius: 6px;

  transition: transform 0.3s;

}



.portfolio-folder img:hover, .portfolio-subfolder img:hover {

  transform: scale(1.05);

}



.portfolio-subfolder {

  display: none;

}



.portfolio-top {

  margin-bottom: 12px;   /* malá mezera k fotkám */

}



.backBtn {

  margin-bottom: 0;      /* zrušíme velký odsazení */

}





/* ===== BACK BUTTON (PORTFOLIO) ===== */



.backBtn {

  display: inline-flex;      /* vždy viditelné */

  align-items: center;

  gap: 8px;



  margin-bottom: 24px;

  padding: 10px 18px;



  font-size: 15px;

  font-weight: 600;

  text-decoration: none;



  border-radius: 6px;

  border: 1px solid #000000;

  background: transparent;

  color: #100606;



  cursor: pointer;

  transition: all 0.25s ease;

}



/* Skryjeme tlačítko pokud jsme na hlavní stránce portfolio */

.backBtn.hidden {

  display: none !important;

}



.backBtn:hover {

  background: #ff0000;

  color: #fff;

}





.backBtn i {

  font-size: 14px;

}





/* --- Lightbox Základ --- */

#lightbox {

  position: fixed;

  display: none;

  top: 0; left: 0;

  width: 100%; height: 100%;

  background: rgba(0, 0, 0, 0.95);

  justify-content: center;

  align-items: center;

  z-index: 10000;

  touch-action: none; /* Důležité: vypne gesta prohlížeče, aby fungoval náš swipe */

}



/* --- Obrázek a jeho stavy pro animaci --- */

#lightbox-img {

  position: relative;

  left: 0;

  top: 0;



  

  /* Základní plynulost */

  transition: transform 0.3s ease, opacity 0.3s ease;

  opacity: 1;

  transform: translateX(0);

  will-change: transform, opacity;

}



/* 1. Stará fotka odjíždí (směr určí JS) */

.slide-out-left { 

  opacity: 0 !important; 

  transform: translateX(-150px) !important; 

}

.slide-out-right { 

  opacity: 0 !important; 

  transform: translateX(150px) !important; 

}



/* 2. Nová fotka se teleportuje na opačnou stranu bez animace */

.slide-prepare-next { 

  opacity: 0 !important; 

  transform: translateX(150px) !important; 

  transition: none !important; 

}

.slide-prepare-prev { 

  opacity: 0 !important; 

  transform: translateX(-150px) !important; 

  transition: none !important; 

}



/* 3. Nová fotka plynule přijíždí na střed */

.slide-in-active { 

  opacity: 1 !important; 

  transform: translateX(0) !important; 

  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease !important; 

}



/* --- Ovládací prvky --- */

.nav {

  position: absolute;

  top: 50%;

  color: #fff;

  font-size: 50px;

  cursor: pointer;

  user-select: none;

  z-index: 11000;

  padding: 20px; /* Větší plocha pro kliknutí na mobilu */

}

.prev { left: 10px; transform: translateY(-50%); }

.next { right: 10px; transform: translateY(-50%); }



.close {

  position: absolute;

  top: 20px; right: 20px;

  color: #fff;

  font-size: 40px;

  cursor: pointer;

  z-index: 11000;

}



#lightbox-counter {

  position: absolute;

  bottom: 20px;

  color: #fff;

  background: rgba(0,0,0,0.5);

  padding: 5px 15px;

  border-radius: 20px;

}



.nav {

  position: absolute;

  top: 50%;

  color: #fff;

  font-size: 40px;

  cursor: pointer;

  user-select: none;

}



.prev { left: 20px; transform: translateY(-50%);}

.next { right: 20px; transform: translateY(-50%);}

.close {

  position: absolute;

  top:20px; right:20px;

  color:#fff;

  font-size: 36px;

  cursor:pointer;

}



/* Mobile */

@media (max-width: 768px) {

  .portfolio-folder img, .portfolio-subfolder img {

    width: 140px;

  }

}



/* --- Footer --- */

.main-footer {

    background-color: var(--secondary-color);

    color: white;

    padding: 40px 0;

}



.footer-content {

    display: flex;

    justify-content: space-between;

    gap: 30px;

}



.footer-block {

    flex: 1;

}



.footer-block h4 {

    color: white;

    margin-top: 0;

    border-bottom: 2px solid var(--primary-color);

    padding-bottom: 5px;

    margin-bottom: 15px;

}



.footer-block ul {

    list-style: none;

    padding: 0;

}



.footer-block a {

    color: #ccc;

    text-decoration: none;

}







/* --- ZÁKLADNÍ NASTAVENÍ (PC) --- */

.menu-toggle {

  display: none;

}





/* --- MOBILNÍ NASTAVENÍ (pouze pro obrazovky pod 768px) --- */

@media (max-width: 768px) {



  .menu-toggle {

    display: block;

    font-size: 1.8rem;

    cursor: pointer;

    z-index: 1001;

  }



  .main-nav {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: #fff;

    box-shadow: 0 10px 20px rgba(0,0,0,0.1);

  }



  .main-nav.active {

    display: block;

  }



  .main-nav ul {

    flex-direction: column;

    padding: 20px;

    gap: 15px;

  }



  .logo img {

    height: 35px;

  }

}



@media (min-width: 769px) {

  .main-nav ul {

    flex-direction: row;

  }

}





@media (max-width: 768px) {

  .contact-info,

  .social-icons {

    display: none !important;

  }

}





/* --- Sekce sociálních sítí --- */

.portfolio-social {

  padding: 40px 20px 60px;

  background-color: #f8f9fa;

}



.portfolio-social .social-title {

  font-size: 1.8rem;

  margin-bottom: 10px;

  color: var(--secondary-color);

}



.portfolio-social p {

  font-size: 1rem;

  margin-bottom: 25px;

  color: var(--text-color);

}



.social-links {

  display: flex;

  justify-content: center;

  gap: 20px;

  margin-bottom: 25px;

}



.social-btn {

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #fff;

  font-size: 1.2rem;

  transition: transform 0.2s, background-color 0.2s;

}



.social-btn.fb { background-color: #3b5998; }

.social-btn.ig { background-color: #E1306C; }



.social-btn:hover {

  transform: scale(1.1);

  filter: brightness(1.1);

}



.cta-button.secondary.mt-20 {

  margin-top: 20px;

}