/*
BARVY
zdroj: https://colorhunt.co/palette/07195208839535a29ff2f7a1
zdroj: https://colorhunt.co/palette/0061998acff8f4eb6cffd444

modrá tmavá   #071952
tyrkysová   #8ACFF8
žlutá   #F4EB6C
žlutá tmavší doplnkova   #FFD444
žlutá bledá doplnkova #fdfacb
*/

body {font-family: "Montserrat", sans-serif; color: #071952;}
h1, h2, h3, h4, h5, h6 {font-weight: 900;}
h1, h2 {text-transform: uppercase;}


#hlavicka {background: #071952; color: #fff;}

.eyebrow {background: #F4EB6C; border-left: 5px solid #FFD444; padding: 3px 20px; display: inline-block; margin-bottom: 10px;}

#motiv .cislo {background: #f4eb6c; font-size: 5rem; font-weight: 900; color: #071952; width: 6.5rem; height: 6.5rem; line-height: 2.5rem; text-align: center; overflow: hidden; /*rotate: 3deg;*/ position: relative; margin-top: -5rem; margin-left: auto; margin-right: 6rem;}
#motiv .cislo .popisek {font-size: 1rem; font-weight: 400;}

.plany {background: #edf8ff;}
.plan {/*background: #f5fafd;*/  /*border-left: 3px solid #8acff8;*/}
.plan h3:before {content: ''; border-left: 5px solid #8acff8; margin-left: -25px; padding-left: 20px;}
.plan li {padding-bottom: 10px;}

.btn-primary {background-color: #8ACFF8; border-color: #8ACFF8; color: #071952; font-weight: 900; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {background-color: #70c8fc; border-color: #70c8fc; color: #071952;}

#kandidati .cislo {background: #8acff8; font-weight: 900; color: #071952; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; overflow: hidden; /*rotate: -3deg;*/ position: relative; margin-top: -2.4rem; font-size: 1.2rem;}
#kandidati h5 {text-transform: none;}

#slogan { margin-top: 30px; position: relative;}
#sloganText {position: absolute; top: 30px; left: 30px; font-size: 4rem; text-shadow: 1px 1px 20px #ffffff; color: #071952; font-weight: 900; line-height: normal;}

#transparentnost p {margin-bottom: 5px;}


/* ------------------------------------------------------------------ */
/* --- HORIZONTAL SLIDER / SCROLL / OVERFLOW SCROLL / PEEK EFFECT --- */
/* ------------------------------------------------------------------ */

/* Hlavní obal pro horizontální rolování */
.horizontal-scroll-container {
  overflow-x: auto; /* Povolí horizontální posun */
  overflow-y: hidden;
  scroll-snap-type: x mandatory; /* Zapne přichytávání karet při rolování */
  -webkit-overflow-scrolling: touch; /* Hladký dojezd na iOS */
  
  /* Volitelné: Skrytí škaredého scrollbaru na mobilu / v prohlížečích (pokud chcete čistý design) */
  scrollbar-width: thin; /* Firefox */
}
/*
.profile-card {
  width: 270px;
  scroll-snap-align: start;
  border-radius: 0.5rem;
  overflow: hidden;
}
.profile-card img {
  height: 270px;
  object-fit: cover;
}
*/

.profile-card {
  scroll-snap-align: start; /* Kde se má karta přichytit při dojezdu */
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 3rem;
}

.card.profile-card {border: none; color: #071952;}

.profile-card img {
  width: 270px;
  height: 270px;
  margin: 0 auto;
  object-fit: cover; /* Zajistí, že si fotky zachovají poměr */
}

.profile-card .card-body {border-top: 1px solid #8acff8; padding-left: 6rem;}
.profile-card .card-title {margin-top: 0.5rem; margin-bottom: 0;}


/* menší profilovky */
.profile-card-sm {
  scroll-snap-align: start; /* Kde se má karta přichytit při dojezdu */
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 3rem;
}

.card.profile-card-sm {border: none; color: #071952;}

.profile-card-sm img {
  width: 170px;
  height: 170px;
  margin: 0 auto;
  object-fit: cover; /* Zajistí, že si fotky zachovají poměr */
}

.profile-card-sm .card-body {border-top: 1px solid #8acff8; padding-left: 3rem;}
.profile-card-sm .card-title {margin-top: 0.5rem; margin-bottom: 0;}




/* ---------------- */
/* --- HP VIDEO --- */
/* ---------------- */
.responsive-video {
  width: 100%; 
  /*height: auto; */
  /*max-width: 800px;*/ 
  aspect-ratio: 16 / 9; /* Nastaví pevný poměr stran */
  object-fit: cover;    /* Zajistí, že video hezky vyplní prostor */
}

/* Video kontejner */
.video-container {
  position: relative;
  width: 100%;
  /*max-width: 1000px;*/ /* Volitelná maximální šířka */
  margin: 0 auto;
  overflow: hidden; /* Aby video nepřečnívalo */
}

/* Video se přizpůsobí šířce */
.background-video {
  width: 100%;
  height: auto;
  display: block;
}

/* Vrstva s textem - pozicovaná absolutně */
.overlay-text {
  position: absolute;
  top: 25%;         /* Posun o 50 % shora */
  left: 5%;        /* Posun o 50 % zleva */
  /*transform: translate(-50%, -50%);*/ /* Přesné vycentrování na střed */
  color: #eaefd8;     /* Barva textu */
  text-align: left;
  width: 90%;       /* Aby text na mobilu nebyl až k okrajům */
  text-shadow: 2px 2px 10px rgba(0,0,0,0.7); /* Stín pro lepší čitelnost */
}

.overlay-text h1, .overlay-text h2 {
  font-size: 3.5rem;
  margin: 0;
  color: #eaefd8;
  font-weight: bold;
}
.overlay-text h1 {text-transform: uppercase; }




/* ---------------------- */
/* --- RESPONSIVNOST ---- */
/* ---------------------- */
@media (min-width: 1200px) {
  .h1, h1 { font-size: 3.5rem; }
  .h2, h2 { font-size: 3rem; }
  .h3, h3 { font-size: 1.5rem; }
}

@media (max-width: 1200px) {
  #sloganText {font-size: 3rem;}
}

@media (max-width: 992px) {
  #sloganText {font-size: 2.5rem;}
}

@media (max-width: 768px) {
  #motiv .cislo {margin-top: -3rem; margin-right: 1rem;}
  .profile-card .card-body {padding-left: 4rem;}
  .profile-card-sm .card-body {padding-left: 2.5rem;}
  .profile-card-sm .card-title {font-size: 0.9rem;}
  .profile-card-sm .card-text {font-size: 0.8rem;}
  .plan {margin-left: 30px;}
  #sloganText {font-size: 1.8rem; top: 20px; left: 20px;}
}

@media (max-width: 540px) {
  #sloganText {font-size: 1.5rem; top: 10px; left: 20px;}
}

@media (max-width: 376px) {
  #sloganText {font-size: 1.2rem; top: 10px; left: 10px;}
}