body {
  margin: 0 ;
  padding: 0 ;
  color: #333 ;
  font-family: 'Noto Sans Korean', sans-serif;
  background: #f5f5f5 ;
}

/* ==========================================================================
   Dvojjazycnost - zobraz jen aktivni jazyk (cs vychozi)
   ========================================================================== */
html[lang="cs"] [lang="en"] { display: none ; }
html[lang="en"] [lang="cs"] { display: none ; }

/* prepinac jazyka - vpravo dole v headeru, napravo od fotky */
.lang-switch {
  position: absolute ;
  bottom: 20px ;
  right: 20px ;
  z-index: 100 ;
  display: inline-flex ;
  gap: 6px ;
}
.lang-switch button {
  padding: 8px 12px ;
  background: rgba(255, 255, 255, 0.08) ;
  color: #cbd5e1 ;
  border: 1px solid rgba(255, 255, 255, 0.25) ;
  border-radius: 8px ;
  font-family: inherit ;
  font-size: 13px ;
  line-height: 1 ;
  cursor: pointer ;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) ;
}
.lang-switch button:hover { background: rgba(255, 255, 255, 0.18) ; }
html[lang="cs"] .lang-switch [data-set-lang="cs"],
html[lang="en"] .lang-switch [data-set-lang="en"] {
  background: #fff ;
  color: #1e293b ;
  border-color: #fff ;
  font-weight: bold ;
}

/* ==========================================================================
   Graphite dark header
   ========================================================================== */
header.header--dark {
  background-color: #1e293b ;
  -webkit-print-color-adjust: exact ;
  print-color-adjust: exact ;
}
header.header--dark .name-container { color: #fff ; }
header.header--dark .contact-container .contact-list li { color: #fff ; }
header.header--dark .contact-container .contact-list li a { color: #fff ; }
header.header--dark .contact-container .contact-list li a:hover { color: #93c5fd ; }
header.header--dark .contact-container .contact-list li .contact-ico { color: #94a3b8 ; }
header.header--dark .profile-picture img { border-color: rgba(255, 255, 255, 0.25) ; }

.resume-wrapper {
  position: relative ;
  width: 960px ;
  margin: 30px auto 60px ;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background: #fff ;
}

/* tlacitko tisku - reverzni barvy (bile pozadi) */
.print-btn {
  position: absolute ;
  top: 20px ;
  right: 20px ;
  z-index: 100 ;
  display: inline-flex ;
  align-items: center ;
  gap: 8px ;
  padding: 8px 12px ;
  background: #fff ;
  color: #1e293b ;
  border: 1px solid #fff ;
  border-radius: 8px ;
  font-family: inherit ;
  font-size: 13px ;
  line-height: 1 ;
  font-weight: bold ;
  cursor: pointer ;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) ;
}
.print-btn:hover {
  background: #e2e8f0 ;
}
.print-btn i {
  color: #1e293b ;
  font-size: 15px ;
}


/* header */
header {
  position: relative ;
  padding: 30px ;
  border-bottom: 1px solid #ededed ;
}
header h1 {
  position: absolute ;
  bottom: 60px ;
  right: 180px ;
  z-index: 1 ;
  font-size: 42px ;
}
header .name-container {
  position: absolute ;
  left: 455px ;
  bottom: 20px ;
  z-index: 1 ;
  height: 30px ;
  padding-left: 10px ;
  margin: 0 ;
  font-size: 25px ;
  line-height: 30px ;
}
header .job-container {
  position: absolute ;
  left: 770px ;
  bottom: -20px ;
  z-index: 1 ;
  height: 20px ;
  padding-left: 10px ;
  margin: 0 ;
  color: #666 ;
  font-size: 14px ;
  font-weight: normal ;
  line-height: 20px ;
}
header .profile-picture {
  position: absolute ;
  right : 170px ;
  bottom: -50px ;
  z-index: 2 ;
  width: 140px ;
  height: 140px ;
  border-radius: 50% ;
}
header .profile-picture img {
  width: 140px ;
  height: 140px ;
  border-radius: 50% ;
  object-fit: cover ;
  border: 1px solid rgba(0, 0, 0, 0.1) ;
}
header .contact-container {
  position: relative ;
  top: 0px ;
  left: 30px ;
}
header .contact-container .contact-list li {
  position: relative ;
  height: 25px ;
  padding-left: 25px ;
  color: #666 ;
  font-size: 13px ;
  line-height: 25px ;
  text-align: left ;
}
header .contact-container .contact-list li .contact-ico {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  z-index: 1 ;
  width: 25px ;
  height: 25px ;
  text-align: center ;
}


/* main */
#main {
  position: relative ;
}

#main > .resume-item-wrapper {
  position: relative ;
  top: 0 ;
  left: 0 ;
  width: 720px ;
  padding: 75px 0 40px ;
  border-right: 1px solid #ededed ;
}

#main .resume-item {
  position: relative ;
  padding: 0 60px ;
  margin-bottom: 60px ;
}
#main .resume-item:last-child {
  margin-bottom: 0 ;
}
#main .resume-item:last-child .inner {
  padding-bottom: 0 ;
  border-bottom: none ;
}
#main .resume-item .inner {
  padding-bottom: 30px ;
  border-bottom: 1px solid #ededed ;
}
#main .resume-item h2 {
  position: absolute ;
  top: -10px ;
  right: -240px ;
  z-index: 1 ;
  width: 240px ;
  height: 30px ;
  padding: 0 30px ;
  font-size: 24px ;
  text-align: left ;
  text-transform: capitalize ;
}
#main ul li {
  position: relative ;
  margin: 0 0 30px ;
}

/* logo vlevo od polozky (experience + vzdelani + o mne) */
.experience ul li,
.project ul li,
.about ul li {
  padding-left: 68px ;
  min-height: 48px ;
}
.experience ul li .item-logo,
.project ul li .item-logo,
.about ul li .item-logo {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  z-index: 1 ;
  width: 48px ;
  height: 48px ;
  border-radius: 8px ;
  object-fit: contain ;
  background: #fff ;
  border: 1px solid #ededed ;
}
.experience ul li .item-logo--placeholder,
.project ul li .item-logo--placeholder,
.about ul li .item-logo--placeholder {
  display: flex ;
  align-items: center ;
  justify-content: center ;
  color: #1e293b ;
  font-size: 22px ;
}

/* o mne */
.about h3 {
  font-size: 18px ;
  margin-bottom: 4px ;
}
.about .detail {
  font-size: 14px ;
  color: #333 ;
}

/* profil */
.summary .detail {
  font-size: 14px ;
  color: #333 ;
  line-height: 1.5 ;
  text-align: justify ;
  hyphens: auto ;
}


/* experience */
.experience h3 {
  font-size: 18px ;
}
.experience .company {
  margin: 0 0 10px ;
  color: #959595 ;
  font-size: 13px ;
  font-weight: normal ;
}
.experience .date {
  position: absolute ;
  top: 5px ;
  right: 0 ;
  color: #bbb ;
  font-size: 12px ;
}
.experience .detail {
  font-size: 14px ;
}

/* hezke odrazky v detailu pozice */
.detail-list {
  list-style: none ;
  margin: 6px 0 0 ;
  padding: 0 ;
}
.experience ul li .detail-list li,
#main .detail-list li,
.detail-list li {
  position: relative ;
  padding: 0 0 0 14px ;
  margin: 0 0 10px ;
  min-height: 0 ;
  font-size: 14px ;
  line-height: 1.5 ;
}
.detail-list li:last-child {
  margin-bottom: 0 ;
}
.detail-list li::before {
  content: '' ;
  position: absolute ;
  top: 9px ;
  left: 0 ;
  width: 5px ;
  height: 5px ;
  border-radius: 50% ;
  background: #9bb4d6 ;
}
.detail-list li b {
  color: #2c3e50 ;
}


/* project */
.project ul li {
  font-size: 0 ;
  line-height: 16px ;
}
.project h3 {
  position: relative ;
  display: inline ;
  color: #666 ;
  font-size: 16px ;
}
.project h3::after {
  content: ' - ' ;
}
.project .detail {
  display: inline ;
  font-size: 14px ;
}
.project .tags {
  font-size: 12px ;
  color: #999 ;
}


/* skill */
.skill {
  margin-bottom: 0!important ;
}
.skill ul li {
  height: 15px ;
}
.skill h3 {
  float: left ;
  width: 30% ;
  height: 100% ;
  font-size: 14px ;
  font-weight: normal ;
  line-height: 14px ;
}
.skill .skill-bar {
  float: left ;
  width: 70% ;
  height: 100% ;
  background: #f5f5f5 ;
}
.skill .skill-bar .bar {
  display: block ;
  width: 60% ;
  height: 100% ;
  background: #666 ;
}


/* footer */
footer {
  position: absolute ;
  bottom: -30px ;
  left: 0 ;
  width: 100% ;
  padding: 0 30px ;
  font-size: 12px ;
  text-align: left ;
  color: #bbb ;
}
footer a {
  font-weight: bold ;
}


/* ==========================================================================
   Responsive - tablet a mobilní zařízení
   ========================================================================== */
@media (max-width: 980px) {
  .resume-wrapper {
    width: auto ;
    max-width: 720px ;
    margin: 0 auto ;
    box-shadow: none ;
  }

  /* header */
  header {
    padding: 70px 20px 30px ;
    text-align: center ;
  }
  header .name-container,
  header .job-container {
    position: static ;
    left: auto ;
    right: auto ;
    bottom: auto ;
    height: auto ;
    padding: 0 ;
    line-height: normal ;
    text-align: center ;
  }
  header .name-container {
    font-size: 24px ;
    margin-top: 10px ;
  }
  header .job-container {
    font-size: 15px ;
    margin: 4px 0 0 ;
  }
  header .profile-picture {
    position: static ;
    right: auto ;
    bottom: auto ;
    width: 120px ;
    height: 120px ;
    margin: 0 auto ;
  }
  header .profile-picture img {
    width: 120px ;
    height: 120px ;
  }
  header .contact-container {
    top: auto ;
    left: auto ;
    margin-top: 20px ;
    display: inline-block ;
    text-align: left ;
  }

  /* main */
  #main > .resume-item-wrapper {
    width: 100% ;
    padding: 40px 0 ;
    border-right: none ;
  }
  #main .resume-item {
    padding: 0 20px ;
    margin-bottom: 40px ;
  }
  /* nadpisy sekcí ze sidebaru nad obsah */
  #main .resume-item h2 {
    position: static ;
    top: auto ;
    right: auto ;
    width: auto ;
    height: auto ;
    padding: 0 0 15px ;
    font-size: 22px ;
  }

  /* experience - datum pod nadpis, ne absolutně vpravo */
  .experience .date {
    position: static ;
    top: auto ;
    right: auto ;
    display: block ;
    margin: 4px 0 8px ;
  }

  /* footer */
  footer {
    position: static ;
    bottom: auto ;
    padding: 20px ;
    text-align: center ;
  }
}

@media (max-width: 480px) {
  header .name-container {
    font-size: 21px ;
  }
  #main .resume-item h2 {
    font-size: 20px ;
  }
  /* skill bary - popisek nad lištu, ať se nemačká */
  .skill ul li {
    height: auto ;
    overflow: hidden ;
  }
  .skill h3 {
    float: none ;
    width: 100% ;
    margin-bottom: 6px ;
  }
  .skill .skill-bar {
    float: none ;
    width: 100% ;
    height: 12px ;
  }
}


/* ==========================================================================
   Print - desktopovy vzhled na papire (A4)
   ========================================================================== */
@page {
  margin: 8mm ;
}
@media print {
  body {
    background: #fff ;
    color: #000 ;
    font-size: 11px ;
  }
  .no-print,
  .print-btn {
    display: none !important ;
  }
  .resume-wrapper {
    width: 100% ;
    max-width: 100% ;
    margin: 0 ;
    box-shadow: none ;
  }

  /* hlavicka - zachovat barevne pozadi */
  header {
    -webkit-print-color-adjust: exact ;
    print-color-adjust: exact ;
    padding: 18px 30px ;
    text-align: left ;
  }
  header .name-container {
    position: absolute ;
    left: 35% ;
    right: auto ;
    bottom: 10px ;
    height: 30px ;
    padding-left: 10px ;
    margin: 0 ;
    font-size: 22px ;
    line-height: 30px ;
    text-align: left ;
  }
  header .profile-picture {
    position: absolute ;
    right: calc(18% - 45px) ;
    bottom: -50px ;
    width: 90px ;
    height: 90px ;
    margin: 0 ;
  }
  header .profile-picture img {
    width: 90px ;
    height: 90px ;
  }
  header .contact-container {
    position: relative ;
    top: 0 ;
    left: 30px ;
    margin-top: 0 ;
    display: block ;
    text-align: left ;
  }

  /* obnovit desktopovy vzhled sekci - nadpisy vpravo */
  #main > .resume-item-wrapper {
    width: 82% ;
    padding: 45px 0 20px ;
    border-right: 1px solid #ededed ;
  }
  #main .resume-item {
    padding: 0 40px ;
    margin-bottom: 16px ;
  }
  #main .resume-item .inner {
    padding-bottom: 16px ;
  }
  #main ul li {
    margin: 0 0 14px ;
  }
  #main .resume-item h2 {
    position: absolute ;
    top: -8px ;
    right: -22% ;
    width: 22% ;
    height: 30px ;
    padding: 0 16px 0 34px ;
    font-size: 19px ;
    text-align: left ;
  }
  .experience h3,
  .about h3,
  .project h3 {
    font-size: 14px ;
  }
  .experience .company {
    margin-bottom: 5px ;
  }
  .summary .detail,
  .experience .detail,
  .about .detail,
  .project .detail {
    font-size: 11px ;
    line-height: 1.35 ;
  }

  /* odrazky v detailu pozice - stejne radkovani i rozestupy jako bezny text */
  #main .detail-list {
    margin: 1px 0 0 ;
  }
  #main .detail-list li {
    padding: 0 0 0 12px ;
    margin: 0 0 2px ;
    font-size: 11px ;
    line-height: 1.35 ;
  }
  .detail-list li::before {
    top: 6px ;
    width: 4px ;
    height: 4px ;
    -webkit-print-color-adjust: exact ;
    print-color-adjust: exact ;
  }

  /* datum zpet vpravo */
  .experience .date {
    position: absolute ;
    top: 5px ;
    right: 0 ;
    display: inline ;
    margin: 0 ;
  }

  /* nelamat jednotlive polozky pres stranky, sekce plynou za sebou */
  #main ul li {
    break-inside: avoid ;
    page-break-inside: avoid ;
  }

  /* vetsi odsazeni pred polozkou zacinajici na druhe strance */
  #main .print-page-break-pad {
    border-top: 28px solid transparent ;
  }

  /* patka */
  footer {
    display: none !important ;
  }

  a {
    color: #000 ;
  }
}