:root {

      --blue-light: #eef5fb;

      --blue-main: #2f6fa3;

      --blue-dark: #1f4f78;

      --text-dark: #333;

      --border-light: #d6e4f0;



}



 body {

  margin: 0;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  background-image:

    linear-gradient(

      rgba(247, 245, 242, 0.52),

      rgba(247, 245, 242, 0.52)

    ),

    url('images/header.png');



  background-size: cover;

  background-position: center;

  background-attachment: fixed;

}



.page {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1rem;

}



p {

  font-size: 1.5rem;

  line-height: 1.6;

  margin-bottom: 1rem;

}



a {

      color: var(--blue-main);

      text-decoration: none;

      font-size: clamp(0.8rem, 4vw, 1.6rem);

      line-height: 1.6;

      font-weight: 600;

    }







.header-inner {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1rem;

  display: flex;

  flex-direction: column;

  align-items: center; 

}



   

header {

  background: transparent;

  padding: 2rem 0;

  margin: 0.5rem;

  border-radius: 16px;

  overflow: hidden;

  position: relative;

}



    header h1 {

      margin: 10px;

      text-align: center;

      font-size: 4.0rem;

      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);

      color: var(--blue-dark);

    }







@media (max-width: 600px) {

  header h1 {

    text-align: center;

    font-size: 2.3rem;

    line-height: 1.25;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);



  }

}

    header p {

      max-width: 700px;

      text-align: center;

      margin: 1.2rem auto 0;

      font-size: 1.5rem;

    }



@media (max-width: 600px) {

   body {

    background-image: none;

    background-color: #eef5fb;

  }



  header {

    background-image:

      linear-gradient(

        rgba(238, 245, 251, 0.75),

        rgba(238, 245, 251, 0.75)

      ),

      url('images/header.png');



    background-size: cover;

    background-position: center top;

    background-repeat: no-repeat;

  }

}



@media (max-height: 500px)  {

   body {

    background-image: none;

    background-color: #eef5fb;

  }



  header {

    background-image:

      linear-gradient(

        rgba(238, 245, 251, 0.75),

        rgba(238, 245, 251, 0.75)

      ),

      url('images/header.png');



    background-size: cover;

    background-position: center top;

    background-repeat: no-repeat;

  }

}







    section {

      max-width: 1200px;        

      padding: 0.8rem 1.5rem 1.5rem;

    }



    h2 {

      color: var(--blue-dark);

      font-size: 1.8rem;

      margin-bottom: 0.5rem;

    }



    .card {

      background: rgba(245, 249, 253, 0.9);

      border-radius: 12px;

      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);

      font-size: 1.5rem;

      line-height: 1.6;

      padding: 0.1rem 1.5rem 1.5rem;

      border: 1px solid var(--border-light);

      max-width: 1200px;         

      

    }



    /* SLUŽBY */

    



.services {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

      gap: 1rem;

      max-width: 1200px;

      padding: 0.8rem 1.5rem 1.5rem;  

    }



    .service {

      background: rgba(245, 249, 253, 0.9);

      border-radius: 12px;

      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);

      padding: 0.8rem 1.5rem 1.5rem;

      font-size: 1.5rem;

      line-height: 1.6;

      border-radius: 6px;

      border: 1px solid var(--border-light);

      display: flex;

      align-items: flex-start; /* ← DŮLEŽITÉ */

      gap: 0.6rem;

    }





.service .icon {

  font-size: 1.8rem;

  line-height: 1;

  margin-top: 0.15rem; /* jemný ruční dorovnání */

  flex-shrink: 0;

}



.service .text {

  line-height: 1.4;

}



.icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.icon svg {

  width: 1em;

  height: 1em;

  stroke: currentColor;

  fill: none;

  stroke-width: 2;

}





    /* GALERIE */

    .gallery {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

      gap: 1rem;

      max-width: 1200px;

      padding: 0.8rem 1.5rem 1.5rem;

    }



    .gallery img {

      width: 100%;

      height: auto;

      border: 1px solid rgba(0, 0, 0, 0.04);

      padding: 0.3rem;

      border-radius: 10px;

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

    }



@media (hover: none) {

  .tooltip {

    display: none;

  }

}



    .img-tooltip {

      position: relative;

    }



    .tooltip {

      position: absolute;

      bottom: 80%;

      left: 50%;

      transform: translateX(-50%);

      background: rgba(31, 79, 120, 0.95);

      color: white;

      padding: 0.5rem 0.75rem;

      border-radius: 6px;

      font-size: 0.85rem;

      white-space: nowrap;

      opacity: 0;

      pointer-events: none;

      transition: opacity 0.2s ease;

    }



    .img-tooltip:hover .tooltip {

      opacity: 1;

    } 



   .zoomable {

    cursor: zoom-in;

    }



#lightbox {

  position: fixed;

  inset: 0;

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

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  padding: 1rem;

}



.lightbox-content {

  max-width: 90%;

  max-height: 90%;

  text-align: center;

}



#lightbox img {

  max-width: 100%;

  max-height: 80vh;

  border-radius: 6px;

  background: white;

}



.lightbox-caption {

  margin-top: 0.75rem;

  color: #eaeaea;

  font-size: 0.9rem;

  line-height: 1.4;

}



/* KONTAKT */

    .contact {

      background: white;

      border-radius: 12px;

      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);

      padding: 0.8rem 1.5rem 1.5rem;

      border: 1px solid var(--border-light);

      text-align: center;

      max-width: 800px;

      margin: 0 auto;  

    }

   

    .contact a {

      color: var(--blue-main);

      text-decoration: none;

      font-size: clamp(1.2rem, 4vw, 1.6rem);

      line-height: 1.6;

      font-weight: 600;

    }



.contact-main {

  color: var(--blue-main);

      text-decoration: none;

      font-size: clamp(1.2rem, 4vw, 1.6rem);

      line-height: 1.6;

      font-weight: 600;

    }



.contact-meta {

  font-size: 0.85rem;

  line-height: 1.4;

  color: #555;

  margin-top: 0.8rem;

}





    footer {

      text-align: center;

      padding: 2rem 1rem;

      font-size: 0.9rem;

      color: #666;

    }



   .cenik-link {

    color: var(--blue-main);

    font-weight: 600;

    text-decoration: none;

 }



  .cenik-link:hover {

   text-decoration: underline;

 }



#cenik {

  scroll-margin-top: 20px;

}

#kontakt {

  scroll-margin-top: 20px;

}





.icons {

  color: orange; 

}





.phone {

  color: #B71C1C; 

}



.mail {

  color: #424242; 

}