/**
 * Služby
 *
 * Pôvodne WPCode snippet #289 (STYLE).
 */

.asp-service-single .asp-case-hero{
  padding-top: 8px !important;
}

.asp-service-single__hero-header{
  max-width: 1160px !important;
}

.asp-service-single__hero-meta{
  margin: 26px auto 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  max-width: 980px !important;
}

.asp-service-single__hero-meta-chip{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(255, 54, 0, 0.08), rgba(19, 73, 108, 0.08)) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,0.2) !important;
}

.asp-service-single__hero-meta-chip strong{
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.asp-service-single__hero-meta-chip span{
  font-size: 13px !important;
  line-height: 1 !important;
  color: rgba(255,255,255,0.6) !important;
}

.asp-service-single__hero-media{
  margin-top: 34px !important;
  min-height: 320px !important;
}

.asp-service-single__description-section{
  padding-top: 100px !important;
}

.asp-service-single__description{
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.asp-service-single__projects-section{
  padding-top: 110px !important;
}

.asp-service-single__projects-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
}

.asp-service-single__project{
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

.asp-service-single__project:hover{
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--asp-service-project-color, #ff3600) 34%, rgba(255,255,255,0.08)) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,0.28),
    0 12px 30px color-mix(in srgb, var(--asp-service-project-color, #ff3600) 14%, transparent) !important;
}

.asp-service-single__project-link{
  display: block !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

.asp-service-single__project-media{
  position: relative !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #0a0a0a !important;
}

.asp-service-single__project-media img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: top center !important;
  transition: transform .5s ease !important;
}

.asp-service-single__project:hover .asp-service-single__project-media img{
  transform: scale(1.04) !important;
}

.asp-service-single__project-overlay{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.1)),
    linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,0.46) 100%) !important;
}

.asp-service-single__project-pill{
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
}

.asp-service-single__project-pill span{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: var(--asp-service-project-color, #ff3600) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--asp-service-project-color, #ff3600) 45%, rgba(255,255,255,0.14)) !important;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--asp-service-project-color, #ff3600) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

.asp-service-single__project[style*="#ffbccb"] .asp-service-single__project-pill span{
  color: #111 !important;
}

.asp-service-single__project-fallback{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 20px !important;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--asp-service-project-color, #ff3600) 22%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    linear-gradient(135deg, #111, #050505) !important;
}

.asp-service-single__project-fallback span{
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #fff !important;
}

.asp-service-single__project-content{
  padding: 18px 18px 20px !important;
}

.asp-service-single__project-client{
  margin: 0 0 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: color-mix(in srgb, var(--asp-service-project-color, #ff3600) 72%, #fff 28%) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

.asp-service-single__project-content h3{
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: .96 !important;
  font-weight: 400 !important;
  text-wrap: balance !important;
}

.asp-service-single__project-content p{
  margin: 0 !important;
  color: rgba(255,255,255,0.68) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.asp-service-single__empty{
  border-radius: 30px !important;
  padding: 30px !important;
  color: rgba(255,255,255,0.72) !important;
}

.asp-service-single__empty p{
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.72) !important;
}

@media (max-width: 1180px){
  .asp-service-single__projects-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px){
  .asp-service-single__hero-meta{
    margin-top: 20px !important;
    gap: 10px !important;
  }

  .asp-service-single__hero-meta-chip{
    min-height: 42px !important;
    padding: 10px 14px !important;
  }

  .asp-service-single__hero-meta-chip strong{
    font-size: 14px !important;
  }

  .asp-service-single__hero-meta-chip span{
    font-size: 12px !important;
  }

  .asp-service-single__description-section{
    padding-top: 78px !important;
  }

  .asp-service-single__projects-section{
    padding-top: 86px !important;
  }

  .asp-service-single__projects-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .asp-service-single__project-content{
    padding: 16px 16px 18px !important;
  }

  .asp-service-single__project-content h3{
    font-size: 24px !important;
  }

  .asp-service-single__empty{
    border-radius: 24px !important;
  }
}


.asp-service-single__back-button{
  margin: 22px auto 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 50px !important;
  padding: 12px 18px 12px 14px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    linear-gradient(135deg, rgba(19, 73, 108, 0.16), rgba(255, 54, 0, 0.10)) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: all .22s ease !important;
}

.asp-service-single__back-button:hover{
  color: #fff !important;
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    linear-gradient(135deg, rgba(255, 54, 0, 0.16), rgba(255, 132, 3, 0.12)) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,0.28),
    0 10px 30px rgba(255, 54, 0, 0.12) !important;
}

.asp-service-single__back-button span:last-child{
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  color: inherit !important;
}

.asp-service-single__back-button-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  color: inherit !important;
}

.asp-service-single__back-button-icon svg{
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

@media (max-width: 820px){
  .asp-service-single__back-button{
    margin-top: 18px !important;
    min-height: 46px !important;
    padding: 10px 16px 10px 12px !important;
  }

  .asp-service-single__back-button span:last-child{
    font-size: 13px !important;
  }

  .asp-service-single__back-button-icon{
    width: 24px !important;
    height: 24px !important;
  }

  .asp-service-single__back-button-icon svg{
    width: 13px !important;
    height: 13px !important;
  }
}