/* Kroky aplikace by hradska 28.8.2026 */


/* ==========================================
   HLAVNÍ KONTEJNER
   ========================================== */

.kroky {
  background-color: #ffffff !important;
  padding: 60px 40px !important;
}


/* ==========================================
   HLAVIČKA
   ========================================== */

.kroky__header {
  max-width: 700px !important;
  margin: 0 0 40px 0 !important;
}

.kroky__title {
  font-size: 42px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  color: #015cac !important;
  margin: 0 0 16px 0 !important;
}

.kroky__subtitle {
  font-size: 16px !important;
  color: #444444 !important;
  margin: 0 !important;
}


/* ==========================================
   MŘÍŽKA – 2 KARTY NA ŘÁDEK
   ========================================== */

.kroky__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}


/* ==========================================
   KARTA
   ========================================== */

.kroky__card {
  position: relative !important;

  background-color: #ffffff !important;
  border: 1px solid #015cac !important;
  border-radius: 6px !important;

  padding: 28px !important;
  box-sizing: border-box !important;

  width: calc((100% - 24px) / 2) !important;
  flex: 0 0 calc((100% - 24px) / 2) !important;

  min-width: 0 !important;
}


/* ==========================================
   HORNÍ ŘÁDEK
   ČÍSLO + ČÁRA + NADPIS
   ========================================== */

.kroky__number {
  position: absolute !important;

  top: 28px !important;
  left: 28px !important;

  display: flex !important;
  align-items: center !important;

  width: 40px !important;
  height: 36px !important;

  border: none !important;
  border-radius: 0 !important;

  color: #015cac !important;

  font-weight: 800 !important;
  font-size: 24px !important;
  line-height: 1 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================
   SVISLÁ ČÁRA
   ========================================== */

.kroky__number::after {
  content: "" !important;

  display: block !important;

  width: 4px !important;
  height: 32px !important;

  background-color: #015cac !important;

  margin-left: 10px !important;
}


/* ==========================================
   NADPIS KARTY
   ========================================== */

.kroky__card-title {
  position: relative !important;

  /* posun nadpisu vedle čísla a čáry */
  left: 48px !important;

  /* nadpis zůstane uvnitř karty */
  width: calc(100% - 48px) !important;

  /* vystředění nadpisu vůči čáře */
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;

  margin: 0 0 26px 0 !important;
  padding: 0 !important;

  font-size: 20px !important;
  font-weight: 800 !important;

  text-transform: uppercase !important;
  line-height: 1.25 !important;

  color: #015cac !important;
}


/* ==========================================
   TEXT KARTY
   ========================================== */

.kroky__card-text {
  font-size: 15px !important;
  line-height: 1.5 !important;

  color: #333333 !important;

  margin: 0 !important;
}

.kroky__card-text strong {
  font-weight: 700 !important;
}


/* ==========================================
   ODKAZY
   ========================================== */

.kroky__link {
  color: #015cac !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.kroky__link:hover {
  color: #074391 !important;
  text-decoration: none !important;
}

.kroky__link--block {
  display: inline-block !important;

  margin-top: 16px !important;

  color: #015cac !important;

  font-weight: 700 !important;
  font-size: 13px !important;

  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;

  text-decoration: none !important;
}

.kroky__link--block:hover {
  text-decoration: underline !important;
}


/* ==========================================
   RESPONZIVITA – TABLETY
   ========================================== */

@media (max-width: 992px) {

  .kroky__card {
    width: calc((100% - 24px) / 2) !important;
    flex: 0 0 calc((100% - 24px) / 2) !important;
  }

}


/* ==========================================
   RESPONZIVITA – MOBILY
   ========================================== */

@media (max-width: 600px) {

  .kroky {
    padding: 40px 20px !important;
  }

  .kroky__title {
    font-size: 30px !important;
  }

  .kroky__card {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  .kroky__card-title {
    font-size: 18px !important;
    width: calc(100% - 48px) !important;
  }

}



/* 12. 8. 2026 by hradska - Departmenent. */
.service-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px;
  margin-bottom: 32px;
}
.service-icon {
  flex-shrink: 0 !important;
  width: 56px !important;
  height: 56px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-icon img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 8px;
}
.service-title {
  color: #015cac;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px 0;
}
.service-content p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}
ul li strong:first-child {
  color: #015cac;
}




/* 26. 4. 2019 by zimmma - zmenseni velikosti log fakult na strance Fakulty, ustavy a pracoviste. */
div#tabs.item.vertical-tabs.ui-tabs div.content.info-box div section.article.block div.content-width div.module div.element.article-item div.item div.content.info-box img.faculty-logo {
    width: 60%;
}