/* CSS Document */
  body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box;}
  
  /* HLAVIČKA */
  .hlavicka {position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 500; padding: 15px;box-sizing: border-box;}
  .hlavicka {background: linear-gradient(to right, rgb(0,0,153) 0%, rgb(0,0,204) 40%, rgb(0,102,255) 66%, rgb(255,255,0) 100%);}
  .hlavicka-top {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
  .hlavicka-text {font-weight: bold; color: rgb(255,255,255); font-size: 2rem; flex: 1; padding: 10px; text-align: center;}
  .hlavicka-logo img { height: 100px; max-width: 100vm; padding-right: 50px;}
  
  /* MENU */
  .hlavicka-menu {background-color: rgb(0,0,120); display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; padding: 15px;}
  .hlavicka-menu a {color: white; text-decoration: none; font-weight: bold; padding: 8px 12px;}
  .hlavicka-menu a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; color: rgb(255,255,0);}

  /* HLAVNÍ OBSAH */
  .hlavni {padding-top: 180px; padding-bottom: 50px; margin: 20px; min-height: 90vh;}
  
  /* AKTUALITY */
  .aktualita {margin-top: 30px;}
  .aktualita h2 {font-size: 1.5rem; color: #3300FF; margin-bottom: 20px;}
  .aktualita-item {display: flex; flex-wrap: wrap; margin-bottom: 15px; border-bottom: 1px solid #ccc; padding-bottom: 10px;}
  .datum {font-weight: bold; color: #3366CC; display: inline-block; width: 100px; text-align: right; margin-right: 15px; white-space: nowrap;}
  .aktualita-item p {flex: 1; margin: 0;}
 
  /* TEXTOVÉ SEKCE */
  .text {margin-top: 30px;}
  .text h2 {font-size: 1.5rem; color: #3300FF; margin-bottom: 20px;}
  .text h3 {font-size: 1.1rem; color: #3300FF; margin-bottom: 0px;}
  .text p {font-size: 1rem; line-height: 1.6;}

  .seznam {list-style: none; padding: 0; margin: 0; max-width: 400px;}
  .seznam li {display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #ccc;}
  .seznam li span:first-child {font-weight: bold; color: #3300FF; width: 100px;}
  .seznam li span:last-child {color: #0077cc;  text-align: left; flex: 1;}
  
  .dlouhyseznam {list-style: none; padding: 0; margin: 0; max-width: 1000px;}
  .dlouhyseznam li {display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #ccc;}
  .dlouhyseznam li span:first-child {font-weight: bold; color: #3300FF; width: 100px;}
  .dlouhyseznam li span:last-child {color: #0077cc;  text-align: left; flex: 1;}

  
  /* TRENÉŘI */
  .trener {display: flex; flex-wrap: wrap; gap: 20px; justify-content: left; align-items: flex-start;}
  .trener-card {display: flex; flex-direction: row; background-color: #fff; border-radius: 8px; 
                box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 5px; max-width: 400px; width: 100%;;border: 1px solid black;}
  .trener-photo {flex-shrink: 0; max-width: 100px; max-height: 100px; border-radius: 20%; object-fit: contain; margin-right: 25px;}
  .trener-info {display: flex; flex-direction: column; justify-content: center;}
  .trener-info h3 {margin: 0; font-size: 1.2em; color: #3300FF;}
  .trener-info p {margin: 0px 0; font-size: 0.95em;}  
  
   /* GALERIE */
  .galerie {display: flex; flex-wrap: wrap; gap: 10px; justify-content: left;}
  .galerie h2 {width: 100%; text-align: left; font-size: 1.3em; margin-bottom: 20px;}
  .galerie img {width: auto; height: 120px; object-fit: cover; transition: transform 0.3s ease; cursor: pointer; gap: 15px;}
  .galerie img:hover {transform: scale(1.05);}
  #fotoBox {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); 
            display: none; justify-content: center; align-items: center; z-index: 9999;}
  #fotoBox img {max-width: 90%; max-height: 90%;}

  /* PATIČKA */
  .paticka {position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgb(192,192,192); text-align: center; padding: 0px; font-size: 0.9rem;}

  /* ?? MOBILNÍ ZOBRAZENÍ */
  @media (max-width: 768px) {
  .hlavicka {position: relative; width: 100%;}
  .hlavicka-text {font-size: 1.2rem; text-align: center;}
  .hlavicka-top {flex-direction: column; align-items: center;}
  .hlavicka-logo img { padding-right: 0px;}
  .hlavicka-menu {flex-direction: column; align-items: center; font-size: 0.8rem; gap: 0px; padding: 0px; display: flex;}
  .hlavni {margin: 10px; padding-top: 10px;}
  .aktualita-item {flex-direction: column;}
  .datum {text-align: left;}
  .text h2 {font-size: 1.2rem; text-align: center;}
  .text p {font-size: 0.95rem; text-align: justify;}
  .seznam li {flex-direction: column;align-items: flex-start;}
  .seznam li span:last-child {margin-top: 4px; width: 100%}
  .dlouhyseznam li {flex-direction: column;align-items: flex-start;}
  .dlouhyseznam li span:last-child {margin-top: 4px; width: 100%}
  .trener-card { flex-direction: column; align-items: center; text-align: center;}
  .trener-photo { margin: 0 0 10px 0;}
  .trener-info {align-items: center;}
  .galerie {flex-direction: column; align-items: center;}
  .galerie img {width: 80vw; height: auto; object-fit: cover; display: block;}  
  .paticka {font-size: 0.8rem; padding: 0px}
}