*,

*::before,

*::after {

  box-sizing: border-box;

}



:root {

  --color-primary: #f39c12;

  --color-secondary: #1f1f1f;

  --color-white: #ffffff;

  --color-gray: #eeeeee;

  --font-main: "Source Sans 3", sans-serif;

  --radius: 10px;

  --transition: 0.3s ease;

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

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  padding: 0;

  font-family: var(--font-main);

  background-color: white;

  min-height: 100vh;

}



header,

footer {

  flex-shrink: 0;

}



header {

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

  color: white;

}



.container {

  max-width: 1300px;

  width: 100%;

  margin: 0 auto;

  padding: 20px;

}



.hlavni-obsah {

  flex: 1;

}



/*----------------------------

          HORNÍ MENU

  ----------------------------*/



.logo img {

  padding-top: 5px;

  height: 50px;

}



.menu-rozlozeni {

  display: flex;

  justify-content: space-between;

  align-items: center;

  height: 80px;

}



nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  gap: 30px;

  align-items: center;

}



nav a {

  text-decoration: none;

  color: white;

  font-weight: 600;

  font-size: 18px;

  position: relative;

  line-height: 1;

  display: block;

}



nav a::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 1.5px;

  margin-bottom: -4px;

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

  transition: width 0.5s ease;

}



nav a:hover::after {

  width: 100%;

}



nav a.btn-registrace::after {

  display: none;

  content: none;

}



.btn-registrace {

  color: var(--color-primary);

  background-color: #ffffff;

  border: 2px solid white;

  padding: 10px 20px;

  border-radius: var(--radius);

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.3s ease;

  line-height: 1;

  height: auto;

}



.btn-registrace:hover {

  transform: scale(1.02);

}



/*----------------------------

         HAMBURGER MENU

  ----------------------------*/



.hamburger {

  display: none;

  flex-direction: column;

  gap: 6px;

  cursor: pointer;

}



.hamburger span {

  width: 28px;

  height: 3px;

  background: white;

  display: block;

}



/*----------------------------

            HERO

  ----------------------------*/



.hero {

  position: relative;

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

  width: 100%;

  min-height: 75vh;

  display: flex;

  align-items: center;

  overflow: hidden;

}



.hero-background {

  position: absolute;

  top: 0;

  left: 0;

  width: 60%;

  height: 100%;

  z-index: 1;

}



.hero-background img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: right center;

}



.hero-container-flex {

  position: relative;

  z-index: 10;

  display: flex;

  justify-content: flex-end; /* Nápis je vpravo */

  align-items: center;

  height: 100%;

}



.hero-content {

  width: 58%;

}



.hero-main-img {

  width: 100%;

  max-width: 900px; /* Podle potřeby upravit */

  height: auto;

  display: block;

}



.mobile {

  display: none;

}



/*----------------------------

          COUNTDOWN

  ----------------------------*/



.countdown {

  z-index: 100;

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

  color: var(--color-primary);



  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  box-shadow: var(--shadow);

  margin-bottom: -10px;

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

}



.countdown-obsah {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 10px 0;

  text-align: center;

  gap: 50px;

}



.cas {

  display: flex;

  align-items: baseline;

  gap: 8px;

  justify-content: center;

  margin-top: -4px;

  padding-bottom: 6px;

}



.cislo {

  font-size: 30px;

  font-weight: 700;

}



.popis {

  font-size: 24px;

  font-weight: 300;

}



/*----------------------------

          HLAVNÍ CENA

  ----------------------------*/



.banner-prize {

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

  color: white;

  width: 100%;

  padding: 40px 0;

  margin: 40px 0;

}



.banner-obsah {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 60px;

}



.pohar-box {

  flex-shrink: 0;

}



.pohar-svg {

  height: 120px;

  width: auto;

  animation: pulzovani 2s infinite ease-in-out;

}



@keyframes pulzovani {

  0% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.1);

  }

  100% {

    transform: scale(1);

  }

}



.text-box {

  display: flex;

  flex-direction: column;

}



.banner-nadpis {

  font-size: 28px;

  margin: 0;

  text-transform: none;

  border-bottom: 2px solid white;

  padding-bottom: 5px;

  display: inline-block;

}



.banner-podnadpis {

  font-size: 36px;

  margin: 10px 0 0 0;

  font-weight: 300;

}



.banner-podnadpis strong {

  font-weight: 700;

}



/*----------------------------

          ÚČASTNÍCI

  ----------------------------*/



.carousel-viewport {

  overflow: hidden;

  cursor: grab;

  user-select: none;

  padding-bottom: 80px;

}



.carousel-viewport:active {

  cursor: grabbing;

}



.carousel-track {

  display: flex;

  gap: 60px;

  width: max-content;

  will-change: transform;

}



.stat-item {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  white-space: nowrap;

}



.carousel-stats {

  font-size: 24px;

  padding: 10px 0;

  overflow: hidden;

  background-color: #fff;

}



.carousel-nadpis {

  text-align: center;

  font-size: 32px;

  font-weight: 800;

}



.carousel-wrapper {

  display: flex;

  width: 100%;

}



.carousel-track:hover {

  animation-play-state: paused;

}



.stat-item .rok {

  color: var(--color-primary);

  font-size: 24px;

  font-weight: 600;

  margin: 0;

}



.stat-item strong {

  font-weight: 800;

}



@keyframes scroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(calc(-50% - 30px));

  }

}



/*----------------------------

      INFO HLAVNÍ STRÁNKA

  ----------------------------*/



.info-kolecka {

  display: grid;

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

  gap: 20px;

  margin: 30px auto;

  max-width: 1200px;

  padding: 30px 30px;

  justify-items: center;

}



.kolecko {

  aspect-ratio: 1 / 1;

  width: 100%;

  max-width: 220px;

  border-radius: 20%;

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



  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;



  text-align: center;

}



.kolecko .cislo {

  font-size: 48px;

  font-weight: 700;

  color: var(--color-primary);

  line-height: 1;

}



.kolecko .cislo span {

  font-size: 24px;

  margin-left: 4px;

}



.kolecko .popis {

  margin-top: 10px;

  font-weight: 700;

  letter-spacing: 1px;

}



.kolecko .doplnek {

  margin-top: 8px;

  font-size: 22px;

  font-weight: 700;

  color: var(--color-primary);

}



/*----------------------------

          SPONZOŘI

  ----------------------------*/



.sponzori-galerie {

  display: grid;

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

  gap: 20px;

  margin-top: 60px;

  margin-bottom: 60px;

}



.sponzor-karta {

  background-color: #eeeeee;

  padding: 20px;

  text-align: center;

  text-decoration: none;

  color: black;

  border-radius: var(--radius);



  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 12px;

  transition:

    transform 0.2s ease,

    box-shadow 0.2s ease;

  break-inside: avoid;

}



.sponzor-karta img {

  height: 70px;

  object-fit: contain;

}



.sponzor-karta-vetsi img {

  height: 120px;

  object-fit: contain;

}



.sponzor-karta:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow);

}



.sponzor-karta p {

  font-size: 14px;

  line-height: 1.4;

}



.sponzori-kontakt {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.kontakt-ikona {

  display: flex;

  align-items: center;

  gap: 8px;

  width: 18px;

  height: 18px;

}



/*----------------------------

          TOUR INFO

  ----------------------------*/



.info-layout {

  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 40px;

  margin-top: 60px;

}



.info-text h1 {

  font-size: 32px;

  margin-bottom: 10px;

}



.info-text h2 {

  font-size: 22px;

  font-weight: normal;

  margin-bottom: 30px;

}



.info-text p {

  line-height: 1.6;

  margin-bottom: 20px;

}



.info-kontakt {

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

  color: white;

  padding: 25px;

  border-radius: var(--radius);

  height: fit-content;

  margin-top: 30px;

}



.info-kontakt h3 {

  margin-top: 0;

  margin-bottom: 20px;

}



.info-kontakt table {

  width: 100%;

  border-collapse: collapse;

  color: #ffffff;

}



.info-kontakt th {

  text-align: left;

  padding-bottom: 10px;

  font-weight: 600;

}



.info-kontakt td {

  padding-bottom: 10px;

}



.info-kontakt a {

  color: #ffffff;

  text-decoration: underline;

}



/*----------------------------

            MAPA

  ----------------------------*/



.mapa {

  margin-top: 20px;

  margin-bottom: 80px;

}



.mapa iframe {

  width: 100%;

  height: 450px;

  border: none;

}



/* --------------------

        Galerie

--------------------- */



.galerie {

  padding-bottom: 50px;

}



.galerie h2 {

  margin: 40px 0 20px;

}



.galerie-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}



.galerie-grid img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  border-radius: var(--radius);

  cursor: pointer;

  transition:

    transform 0.2s ease,

    box-shadow 0.2s ease;

}



.galerie-grid img:hover {

  transform: scale(1.03);

  box-shadow: var(--shadow);

}



.galerie-externi {

  display: flex;

  justify-content: center;

  margin: 60px 0;

}



.video-wrapper {

  max-width: 600px;

  margin: 40px auto;

  aspect-ratio: 16 / 9;

  border-radius: var(--radius);

  overflow: hidden;

  margin-bottom: 50px;

}



.video-wrapper iframe {

  width: 100%;

  height: 100%;

  border: 0;

}



.oddelovac {

  border: 0;

  height: 1px;

  background-color: #e5e5e5;

  margin: 40px 0;

  width: 100%;

}



/*----------------------------

          REGISTRACE

  ----------------------------*/



.registrace-nadpis {

  font-size: 32px;

  font-weight: 800;

  margin-top: 40px;

  margin-bottom: 30px;

}



.registracni-form {

  max-width: 800px;

  margin: 0 auto;

  padding: 0 20px;

}



.form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr; /* Dva sloupce */

  gap: 20px;

}



.form-group {

  display: flex;

  flex-direction: column;

  margin-bottom: 20px;

}



.form-group label {

  font-weight: 600;

  margin-bottom: 8px;

  font-size: 18px;

}



.form-group label span {

  color: red;

  margin-left: 2px;

}



.label-info {

  font-size: 13px;

  margin-bottom: 8px;

  display: block;

}



.registracni-form input[type="text"],

.registracni-form input[type="email"],

.registracni-form input[type="tel"],

.registracni-form textarea {

  background-color: #e0e0e0; /* Šedý podklad dle vzoru */

  border: none;

  padding: 15px;

  font-family: inherit;

  font-size: 16px;

  border-radius: var(--radius);

  width: 100%;

}



.registracni-form textarea {

  height: 120px;

  resize: vertical;

}



.full-width {

  grid-column: span 2;

}



/* Checkbox */

.form-checkbox {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-top: 10px;

  font-size: 14px;

}



.form-checkbox input {

  margin-top: 4px;

}



.form-submit {

  display: flex;

  justify-content: center;

  margin-top: 40px;

  margin-bottom: 80px;

}



.registracni-form input:valid,

.registracni-form textarea:valid {

  background-color: #eeeeee;

}



/*----------------------------

          DĚKOVACÍ STRÁNKA

  ----------------------------*/



/* Specifické styly pro platební bránu */

.startovne-info {

  font-size: 24px;

  font-weight: 700;

  margin-bottom: 5px;

}



.platba-instrukce {

  font-size: 16px;

  color: #333;

  margin-bottom: 20px;

}



.platebni-karta {

  background-color: var(--color-primary); /* Oranžová barva TourDeBeer */

  border-radius: var(--radius);

  padding: 40px;

  display: flex;

  align-items: center;

  justify-content: space-around;

  width: 100%;

  max-width: 800px;

  margin: 0 auto;

  color: white;

  box-shadow: var(--shadow);

}



.cislo-uctu-velke {

  font-size: clamp(30px, 5vw, 48px);

  font-weight: 800;

  letter-spacing: 1px;

}



.qr-kod-kontejner {

  background-color: white;

  padding: 15px;

  border-radius: var(--radius);

  display: flex;

  flex-direction: column;

  align-items: center;

}



#qr-image {

  width: 150px;

  height: 150px;

  margin-bottom: 5px;

}



.qr-popisek {

  color: black;

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

}



.diky-flex-kontejner {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  margin-top: -80px;

  z-index: 10;

  position: relative;

  pointer-events: none;

  margin-bottom: 50px;

}



.diky-obsah {

  padding: 80px 0;

  text-align: center;

}



.text-center {

  margin-top: 60px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}



.diky-obsah h1 {

  font-size: 36px;

  font-weight: 800;

  margin-bottom: 20px;

}



.platba-text {

  font-size: 20px;

  margin-bottom: 0px;

}



.cislo-uctu {

  font-size: 42px;

  font-weight: 800;

  margin: 0 0 30px 0;

  letter-spacing: 1px;

}



.qr-info {

  font-size: 18px;

  margin-bottom: 10px;

}



.tesime-se {

  font-size: 28px;

  font-weight: 800;

  margin: 0;

  white-space: nowrap;

}



.diky-ilustrace img {

  width: 100%;

  max-width: 400px;

  height: auto;

  display: block;

}



.diky-text-vedle {

  margin-top: 60px;

}



.diky-ilustrace img {

  max-width: 350px;

  height: auto;

}



/* --------------------

        BUTTON

--------------------- */



.btn {

  position: relative;

  cursor: pointer;

  border: none;

  background: var(--color-primary);

  color: white;

  text-decoration: none;

  font-size: 20px;

  font-weight: 600;

  padding: 15px 40px;

  border-radius: var(--radius);

  overflow: hidden;

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

  box-shadow: var(--shadow);

}



.btn::before {

  content: "";

  position: absolute;

  top: -50%;

  left: -40%;

  width: 40%;

  height: 200%;

  background: linear-gradient(

    120deg,

    transparent,

    rgba(255, 255, 255, 0.4),

    transparent

  );

  transform: rotate(20deg);

  animation: lesk 3s infinite;

}



.btn:hover {

  transform: scale(1.07);

  box-shadow: var(--shadow);

}



@keyframes lesk {

  0% {

    left: -40%;

  }

  60% {

    left: 140%;

  }

  100% {

    left: 140%;

  }

}



/* --------------------

        LIGHTBOX

--------------------- */



.lightbox {

  position: fixed;

  inset: 0;

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

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 3000;

  padding: 20px;

}



.lightbox.open {

  display: flex;

}



.lightbox img {

  max-width: 100%;

  max-height: 90vh;

  border-radius: var(--radius);

}



/*----------------------------

           PATIČKA

  ----------------------------*/

footer {

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

  color: #ffffff;

  padding-bottom: 20px;



  padding-top: 30px;

}



.footer-obsah {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.footer-text p {

  margin: 0 0 20px 0;

  line-height: 1.4;

  font-size: 16px;

  font-weight: 400;

}



.footer-text p:last-child {

  margin-bottom: 0;

}



.footer-text a {

  color: white;

  text-decoration: none;

}



.footer-text a:hover {

  text-decoration: underline;

}



.footer-logo img {

  height: 100px;

  width: auto;

  padding-bottom: 10px;

}



/* --------------------

        TABLET

--------------------- */



@media (max-width: 900px) {

  nav {

    display: block; /* Aby se ul mohlo roztáhnout */

    position: fixed;

    top: 80px;

    left: 0;

    width: 100%;

    background: var(--color-primary);

    transform: translateY(-150%); /* Schované nahoře */

    transition: transform 0.4s ease-in-out;

    z-index: 1000;

    padding: 20px 0;

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

  }



  nav.open {

    transform: translateY(0);

  }



  nav ul {

    flex-direction: column; /* Položky pod sebou */

    align-items: center;

    gap: 30px;

  }



  .btn-registrace {

    width: 200px;

  }



  .hamburger {

    display: flex;

  }



  .hero-obsah {

    flex-direction: column;

    text-align: center;

  }



  .footer-obsah {

    flex-direction: column-reverse;

    text-align: center;

  }



  .hero {

    min-height: 60vh;

    padding: 40px 0;

  }



  .hero-background {

    width: 100%;

    max-width: none;

    opacity: 0.3;

  }



  .hero-container-flex {

    justify-content: center;

  }



  .hero-background img {

    object-position: center;

    width: 100%;

    object-fit: cover;

  }



  .desktop {

    display: none;

  }



  .mobile {

    display: block;

  }



  .hero-content {

    margin-left: 0;

    width: 95%;

    display: flex;

    justify-content: center;

    padding: 20px 20px 20px;

  }



  .hero-main-img {

    max-width: 100%;

    max-width: 800px;

    min-width: 90%;

  }



  .galerie-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



/* --------------------

        MOBIL

--------------------- */



@media (max-width: 768px) {

  .countdown-obsah {

    flex-wrap: wrap;

    gap: 0px;

  }



  .cas {

    width: 45%;

  }



  .cislo {

    font-size: 28px;

  }



  .popis {

    font-size: 18px;

  }

  .carousel-nadpis {

    font-size: 26px;

    text-align: center;

  }

  .stat-item {

    font-size: 20px;

  }

  .banner-obsah {

    flex-direction: column;

    text-align: center;

    gap: 20px;

  }



  .banner-nadpis {

    font-size: 22px;

  }



  .banner-podnadpis {

    font-size: 28px;

  }



  .pohar-svg {

    height: 100px;

  }

  .info-layout {

    grid-template-columns: 1fr;

  }



  .info-kontakt {

    margin-top: 40px;

  }



  .mapa iframe {

    height: 500px;

  }

  .cislo-uctu {

    font-size: 30px;

  }

  .diky-ilustrace img {

    max-width: 80%;

  }

  .platebni-karta {

    flex-direction: column;

    gap: 30px;

    padding: 30px 15px;

  }



  .form-grid {

    grid-template-columns: 1fr; /* Na mobilu pod sebou */

  }

  .full-width {

    grid-column: span 1;

  }

  .odeslat-btn {

    width: 100%;

  }



  .diky-flex-kontejner {

    flex-direction: column;

    margin-top: -50px;

    gap: 10px;

  }

  .diky-text-vedle {

    margin-top: 0;

  }

  .tesime-se {

    font-size: 22px;

  }

  .galerie-btn {

    font-size: 20px;

    padding: 14px 40px;

  }

  .galerie-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .galerie-grid img {

    height: 160px;

  }

  .footer-obsah {

    flex-direction: column-reverse;

    text-align: center;

    gap: 40px;

  }

}