:root {
     --primary-header-height: 160px; /* Toto se chová jako konstanta */
     --font-stack: 'Arial', sans-serif;


     --carte-max-width: 1100px;   /* Max width of the two-column block 800px*/

     /*--banner-height-ratio: 0.25;    */         /* 0.25 × 100vw = 25vw */
     --image-min-height: 150px;              /* guard rails */
     --image-max-height: 200px;

     --page-min-width: 420px;  

     --min-breakpoint: 420px;
     --content-max: 200000px;
     --font-min: 16px;
     --font-max: 20px;
     --image-min: 410px; /*700*/
     --image-max: 660px; /*1320px;*/

     --gap: 16px;
     --cards-per-view: 3;
     --card-bg: #1c2230;
/*     --bg: #0f1218;
     
     --text: #fff;*/
}


/*.about::before {
     content: '';
     display: block;
     height:     var(--primary-header-height);
     margin-top: calc(var(--primary-header-height)*-1);
     visibility: hidden;
}

.page::before {
     content: "";
     display: block;
     margin-top: var(--primary-header-height);
     visibility: hidden;
}*/

section {
  scroll-margin-top: var(--primary-header-height);
}

html,body
{
/*   min-width: var(--page-min-width);   
     width: 100%;*/
     min-width: var(--page-min-width);
     width: auto !important;
     width: var(--page-min-width);
}

/* Grid layout */
.grid-container {
     display: grid;
     /* Two columns: text grows, image stays around 320px but can shrink */
     grid-template-columns: 1fr minmax(120px, 50%);
     gap: var(--gap);
     align-items: center; /* vertically align items in their row */
     padding: var(--gap);
}

body {
     color: #0c0847;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     line-height: 1.0;
     font-weight: normal;
     margin: 0;

     /*  width: 100%;*/
     min-width: var(--page-min-width);
     width: auto !important;
     width: var(--page-min-width);
}

.context {
    /* background-image: url(../images/backgroundBlue.png);*/
     background-size: cover;
     background-position:center; 
}

     /* Sticky header styling */
.header {
     background-color: #0088cc !important;
     background-size: cover;   
     /* background-image: url(../images/bannerSmall.jpg);*/
     /*background-repeat: no-repeat;*/
       

     color: black;
     padding: 12px 20px;
     position: sticky;
     top: 0;
     z-index: 999;
     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

     /* STACK LOGO ABOVE MENU */
.header-inner {
     height: var(--primary-header-height);
     background-image: url("../images/circuit-bg.png");
     display: flex;
     flex-direction: column;  
     justify-content: center;
     align-items: center;
     margin-bottom: 0;
     padding-bottom: 0;
     /*  gap: 12px;*/
}

/* Logo */
.logo {
     position: absolute;
     /*vertical-align: top;*/

     margin-top: 1px;
     left: calc(50% - 400px);  /* 40vmin; calc(50% - 55vmin) */
     z-index: 9; 
     max-width: 240px;
     max-height: 80px;
     /* padding: 4px 4px 4px 4px; 
     border: #fff solid 2px; */
}

.titlepage {
     margin-top: 30;
     margin-bottom: 30px;
     font-size: clamp(2em, 3vw, 3rem);
     font-weight: bold;
     justify-content: top;
     align-items: center;
     color: white;
}

     /* Navigation menu */
.nav ul {
     list-style: none;
     margin-bottom: 0;
     padding-bottom: 0;
     display: flex;         /* keep menu items horizontal */
     padding-left: 0px; 
     /*gap: 24px;*/
     color: white;
     justify-content: bottom;
     align-items: center;
}

.nav a {
     text-decoration: none;
     padding-left: 2vh;
     padding-right: 2vh;
     padding-top: 10px;
     padding-bottom: 10px;
     font-size: 24px;
     font-weight: bold;
     color: white;
/*      border-top: solid 2px  rgb(2, 21, 128);
     border-left: solid 2px  rgb(2, 21, 128);
     border-right: solid 2px  rgb(2, 21, 128); */
     border: solid 4px  rgb(2, 21, 128);
     /**border-radius: 0.5rem;**/

}

.nav a:hover {
     color: black;
     border: solid 1px  white;
    /* border-radius: 0.5rem;*/
     text-decoration: none;
}

     /** start about section **/
.about {
     width: 100%; 
     padding-top: calc(2 * var(--gap));

     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     line-height: 1.0;
     font-weight: normal;

     /* margin-bottom: calc(var(--primary-header-height)*-1); */
     /**    border: 2px solid #000; **/
}

.about h5  {
     font-size: 17px;
     font-family: 'Poppins', sans-serif;
     line-height: 1.0;
     font-weight: normal;

}

/** about section **/
.about .titlepage {
     background: #fff;
     color: #2a2a2c;
     font-size: 17px;
     line-height: 32px;
     /*max-width:30%; 
     min-width: 10%; */
     margin: 0px auto 20px auto;
     padding: 20px;
     align-items: center; 
     /**    margin-top: 20px;
     margin-bottom: 20px;**/
     width: min(100vw, var(--carte-max-width));
     /* box-shadow: 32px 32px 32px 32px black;  */
     box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
     
     /**     border: 2px solid #f00;**/
}

.about ul {
     list-style: none;
}
/** end about section **/
.about .text {
     padding-left: 16%;
     place-items: center;    /* centers content both H/V */
}

.page {
     display: grid;
     place-items: center;    /* centers content both H/V */
     min-height: 60vh;      /* fill the viewport */
     padding-top: var(--gap);
     padding-bottom: var(--gap);
     width: 100%;    
}

.carte {
     display: grid;
     grid-template-columns: 1fr 1fr; /* equal widths */
     gap: var(--gap);
     width: min(100vw, var(--carte-max-width));
     background: #fff;
     border-radius: 12px;
     box-shadow: 0px 18px 32px black;
     align-items: stretch;          /* equal heights for both cells */
     overflow: hidden;              /* clip child overflow (nice for image) */
     margin-top: 20px; 
     /* Optional: Keep a balanced shape for the whole carte */
     aspect-ratio: 3 / 1;           /* two columns side-by-side, half as tall */
}

.text-area {
     padding: 0px; /* inner padding so text doesn't touch edges */
}

.text-content {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center; /* vertical center */
     align-items: center;     /* horizontal center */
     text-align: center;
     font-size: 17px;
}

.text-content .h2 {
     color: #000000;
     font-size: 30px;
     font-weight: bold;
     padding: 0;
     margin-bottom: 0;

}

.text-content ul {
     color: #000000;
     padding: 0;
     margin-top: 0;
     list-style: none;

     text-decoration: none !important;
     outline: none !important;
     overflow: hidden;
}
/* Replace the image styles with this block for no-crop centering */
.image-area {
     display: grid;
     place-items: center;   /* centers the img inside the cell (both axes) */
     padding-left: 5px;     /* optional: remove padding for true centering */
     padding-right: 5px;
     padding-top: 5px;
}

.image-area img {
     max-width: 100%;
     max-height: 100%;
     width: auto;           /* keep natural aspect ratio */
     height: auto;          /* keep natural aspect ratio */
     object-fit: contain;   /* ensure no cropping; letterbox may appear */
     border-radius: 15px;
}

/* Optional: Make it stack on small screens */
@media (max-width: 400px) {
  .grid-container {
    grid-template-columns: 1fr;  /* Single column layout */
  }

  /* Place text first, image second in stacked layout */
  .text-area {
    grid-column: 1;
    grid-row: 1;
  }

  .image-area {
    grid-column: 1;
    grid-row: 2; /* Ensures image shows below text on mobile */
  }

  /* If you prefer image above text, swap the row numbers:
     .text-area  { grid-row: 2; }
     .image-area { grid-row: 1; }
  */
}

/* =========================
   Optional: quick theme tweaks
   ========================= */
/* Example: narrower gap on very small screens */
@media (max-width: 700px) {
  .carte {
    grid-template-columns: 1fr; /* single column */
    aspect-ratio: auto;         /* let height flow naturally on mobile */
  }

  /* Order: keep text above image on mobile; swap if you prefer */
  .text-area  { grid-row: 1; }
  .image-area { grid-row: 2; }
}

.con_bg {
     display: grid;
     padding-top: calc(2*var(--gap));
     background-color: #0088cc;
    /* display: grid;*/
}

.con_bg_in {
     background-color: #0088cc;
     display: grid;
}

.contact {
     margin-bottom: 40px;
     background: #0088cc;
     color: #ffffff;
     z-index: 99;
     /*margin-top: calc(var(--primary-header-height)*1);*/
     
}

.contact .titlepage {
     text-align: center;
     padding-top: 10px;
     color: #ffffff;
     z-index: 99;
}

.contact .titlepage p {
     font-size: 17px;
     font-weight: 400;
     padding-top: 10px;
     color: #ffffff;
     z-index: 99;
}

.padding_right2 {
     padding-right: 0;
}

#map {
     height: 100%;
   /*  min-height: 732px;*/
}

.map_section {
     max-width: 553px;
}

.main_form {
     margin-top: 30px;
     font-family: 'Roboto', sans-serif;
     max-width: 553px;
     width: 100%;
     float: right;
     padding-left: 15px;
     color: black;
     z-index: 99;
}

.main_form .contactus {
     border-bottom: #ffffff solid 1px;
     margin-bottom: 25px;
     width: 100%;
     height: 30px;
     color: black;
     font-size: 18px;
     font-weight: normal;
     border-top: inherit;
     border-left: inherit;
     border-right: inherit;
}

.main_form .contactusmess {
     border: #000000 solid 1px;
     margin-bottom: 25px;
     width: 100%;
     height: 200px;
     padding-top: 0px;
     padding-bottom: 4px;
/**     background: transparent;**/
     color: #000000;
     font-size: 18px;
     font-weight: normal;
     border-top: inherit;
     border-left: inherit;
     border-right: inherit;
}

.send_btn {
     background: lab(53.22% 6.44 59.17);
     font-weight: 500;
     font-size: 18px;
     width: 198px;
     color: #fff;
     height: 52px;
     /*margin-top: 0px;
     transition: ease-in all 0.5s;*/
     text-transform: uppercase;
     align-items: center; 
}

.send_btn:hover {
     background: #4b4b4c;
     transition: ease-in all 0.5s;
}

#request *::placeholder {
     color: black;
     opacity: 1;
}

ul.location_form li {
     font-size: 17px;
     color: #fff;
     text-align: left;
     margin-top: 35px;
     line-height: 26px;
     display: inline-block;
     padding-right: 10px;
}

ul.location_form li a {
     font-size: 30px;
     color: #fff;
     line-height: 30px;
     padding-right: 9px;
}

.main_form ul.social_icon li a:hover {
     background-color: #fcc10e;
}
/** end contact section **/

/** start carousel section **/
/*
:root {
     --gap: 16px;
     --cards-per-view: 3;
     --bg: #0f1218;
     --card-bg: #1c2230;
     --text: #fff;
}

body {
     margin: 0;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
     background: var(--bg);
     color: var(--text);
     display: grid;
     place-items: center;
     min-height: 100vh;
}
*/

.gallery {
     display: grid;
     place-items: center;   
     /*min-height: 60vh;    */  
     padding: var(--gap);
     width: 100%;
}

.slider {
     width: min(var(--carte-max-width), 92vw);
     padding: 12px;
     background: var(--bg);
     color: var(--text);
     display: grid;
     place-items: center;
     border-radius: 12px;
     box-shadow: 0px 18px 32px black;
}

.viewport {
     overflow-x: auto;               /* horizontal scrolling */
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     scroll-snap-type: x mandatory;  /* snap per card */
     scrollbar-width: none;
     scroll-behavior: auto;        /* smooth scroll on JS scrollLeft changes */
}
.viewport::-webkit-scrollbar { display: none; }

.track {
     display: flex;
     gap: var(--gap);
     padding-bottom: 2px;
}

.card {
     flex: 0 0 calc((100% - (var(--gap) * (var(--cards-per-view) - 1))) / var(--cards-per-view));
     /*flex: 0 0 calc((var(--viewport-width) - (var(--gap) * (var(--cards-per-view) - 1))) / var(--cards-per-view));*/
     scroll-snap-align: start;
     background: var(--card-bg);
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

.card img {
     width: 100%;
     height: 300px; /* 300*/
     object-fit: cover;
     display: block;
}

.card .caption {
     padding: 12px 14px;
     font-size: 0.95rem;
}

@media (max-width: 800px) {
     :root { --cards-per-view: 2; }
     .card img { height: 180px; }
}

@media (max-width: 600px) {
     :root { --cards-per-view: 1; }
     .card img { height: 180px; }
}
  
/** footer **/
.footer {
     background: #3d3d3df1;
     padding-top: 20px;
     margin-top: 0px;
     text-align: center;
     width: 100%;
}

.footer h3 {
     color: #fff;
     font-size: 30px;
     font-family: 'Noto Serif', serif;
     line-height: 40px;
     text-align: left;
     padding-bottom: 20px;
}

.footer p {
     font-family: 'Open Sans', sans-serif;
     color: #fff;
     font-size: 17px;
     line-height: 28px;
     text-align: left;
     padding-right: 60px;
}

ul.location_icon {
     font-family: 'Open Sans', sans-serif;
     text-align: center;
}

ul.location_icon li {
     font-size: 17px;
     color: #fff;
     text-align: left;
     padding: 9px 0px;
     display: flex;
     align-items: left;
     line-height: 26px;
     padding-left: 0px;
     margin-left: -35px;
}

ul.location_icon li a {
     font-size: 30px;
     color: #fff;
     line-height: 30px;
     padding-right: 0px;
}

.news_form {
     text-align: left;
     margin-top: 15px;
}

.news_form .letter_form {
     font-family: 'Open Sans', sans-serif;
     height: 45px;
     width: 46%;
     padding: 0 13px;
     font-size: 17px;
     border: inherit;
}

.news_form .sumbit {
     padding: 7px 15px;
     margin-left: -4px;
     font-size: 18px;
     background: #37139a;
     color: #fff;
}

.news_form .sumbit:hover {
     background-color: #000;
}

ul.social_icon {
     padding-top: 30px;
     float: left;
     text-align: center;
}

ul.social_icon li {
     display: inline-block;
}

ul.social_icon li a {
     background: transparent;
     border: #fff solid 1px;
     width: 47px;
     height: 47px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 25px;
     border-radius: 60px;
     margin: 0 4px;
     color: #fff;
}

ul.social_icon li a:hover {
     background-color: #37139a;
}

.copyright {
     margin-top: 80px;
     padding-bottom: 20px;
     background: #fbfdfd;
}

.copyright p {
     color: #292929;
     font-size: 18px;
     line-height: 22px;
     text-align: center;
     padding-top: 25px;
     font-weight: normal;
     padding-right: 0 !important;
}

.copyright a {
     color: #292929;
}

.copyright a:hover {
     color: #37139a;
}


/** end footer **/