@import url("urban-tech.css");
@import url("home-work-grid.css");

/* ============================================================================
   SERVICES: ELECTRO 220V — REAL HERO CARD GRID 3×2
   HTML-шаблон карток має бути ut-image-card, без маскування старих service-info-card.
============================================================================ */

body.services-body [data-service-panel="electro"] .services-electro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

body.services-body [data-service-panel="electro"] .services-electro-grid .services-premium-grid__head {
  grid-column: 1 / -1;
}

body.services-body [data-service-panel="electro"] .services-electro-card {
  --ut-card-min-height: clamp(176px, 17vw, 224px);
  --ut-card-padding: 20px 18px 18px;
  --ut-card-overlay-left: rgba(0, 0, 0, 0.92);
  --ut-card-overlay-center: rgba(0, 0, 0, 0.84);
  --ut-card-overlay-right: rgba(0, 0, 0, 0.66);
  --ut-card-overlay-bottom: rgba(0, 0, 0, 0.92);
  background-color: #05070b !important;
  box-shadow:
    inset 0 0 0 999px rgba(0, 0, 0, 0.08),
    0 18px 46px rgba(0, 0, 0, 0.30);
}

body.services-body [data-service-panel="electro"] .services-electro-card::before {
  z-index: 1;
  background:
    linear-gradient(90deg, var(--ut-card-overlay-left) 0%, var(--ut-card-overlay-center) 52%, var(--ut-card-overlay-right) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.52) 44%, var(--ut-card-overlay-bottom) 100%),
    radial-gradient(circle at 18% 0%, rgba(248, 181, 0, 0.10), transparent 38%);
}

body.services-body [data-service-panel="electro"] .services-electro-card:hover {
  box-shadow:
    inset 0 0 0 999px rgba(0, 0, 0, 0.04),
    0 26px 62px rgba(0, 0, 0, 0.36);
}

body.services-body [data-service-panel="electro"] .services-electro-card:hover::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.78) 52%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.46) 44%, rgba(0, 0, 0, 0.88) 100%),
    radial-gradient(circle at 18% 0%, rgba(248, 181, 0, 0.14), transparent 38%);
}

body.services-body [data-service-panel="electro"] .services-electro-card > * {
  position: relative;
  z-index: 2;
}

body.services-body [data-service-panel="electro"] .services-electro-card--01 { --ut-card-image: url("../assets/img/services/cards/electro-01.webp"); }
body.services-body [data-service-panel="electro"] .services-electro-card--02 { --ut-card-image: url("../assets/img/services/cards/electro-02.webp"); }
body.services-body [data-service-panel="electro"] .services-electro-card--03 { --ut-card-image: url("../assets/img/services/cards/electro-03.webp"); }
body.services-body [data-service-panel="electro"] .services-electro-card--04 { --ut-card-image: url("../assets/img/services/cards/electro-04.webp"); }
body.services-body [data-service-panel="electro"] .services-electro-card--05 { --ut-card-image: url("../assets/img/services/cards/electro-05.webp"); }
body.services-body [data-service-panel="electro"] .services-electro-card--06 { --ut-card-image: url("../assets/img/services/cards/electro-06.webp"); }

@media (max-width: 991.98px) {
  body.services-body [data-service-panel="electro"] .services-electro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.services-body [data-service-panel="electro"] .services-electro-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.services-body [data-service-panel="electro"] .services-electro-card {
    min-height: 190px;
  }
}

/* ============================================================================
   LOGO: forced spacing between URBAN and TECH
   Fixes cases where HTML whitespace is collapsed/removed around the highlighted T.
============================================================================ */

.logo-text .highlight,
.brand-logo-text .highlight {
  display: inline-block;
  margin-left: 0.32em;
}

.brand-logo-text--inline .highlight {
  margin-left: 0.24em;
}

/* ============================================================================
   SERVICES: image-card typography balance
   Title is locked to one vertical line across cards; description sits tightly below it.
============================================================================ */

body.services-body .services-template-image-row .ut-image-card {
  position: relative !important;
  min-height: clamp(226px, 18vw, 260px) !important;
  display: block !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

body.services-body .services-template-image-row .ut-image-card::before {
  z-index: 0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(2, 4, 8, 0.08) 0%,
      rgba(2, 4, 8, 0.14) 32%,
      rgba(2, 4, 8, 0.54) 54%,
      rgba(2, 4, 8, 0.88) 74%,
      rgba(2, 4, 8, 0.99) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 4, 8, 0.36) 0%,
      rgba(2, 4, 8, 0.24) 52%,
      rgba(2, 4, 8, 0.18) 100%
    ),
    radial-gradient(circle at 18% 6%, rgba(248, 181, 0, 0.13), transparent 42%) !important;
}

body.services-body .services-template-image-row .ut-image-card:hover::before {
  background:
    linear-gradient(
      180deg,
      rgba(2, 4, 8, 0.06) 0%,
      rgba(2, 4, 8, 0.12) 32%,
      rgba(2, 4, 8, 0.48) 54%,
      rgba(2, 4, 8, 0.84) 74%,
      rgba(2, 4, 8, 0.98) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 4, 8, 0.30) 0%,
      rgba(2, 4, 8, 0.20) 52%,
      rgba(2, 4, 8, 0.14) 100%
    ),
    radial-gradient(circle at 18% 6%, rgba(248, 181, 0, 0.17), transparent 42%) !important;
}

body.services-body .services-template-image-row .ut-image-card__content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 18px 17px 15px !important;
}

body.services-body .services-template-image-row .ut-image-card__title {
  position: absolute !important;
  left: 17px !important;
  right: 17px !important;
  top: 57% !important;
  min-height: 26px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.97) !important;
  font-size: clamp(13px, 0.96vw, 14.8px) !important;
  line-height: 1.08 !important;
  font-weight: 780 !important;
  letter-spacing: -0.18px !important;
}

body.services-body .services-template-image-row .ut-image-card__title::before {
  flex: 0 0 auto !important;
  width: 3px !important;
  height: 15px !important;
  margin-right: 8px !important;
  vertical-align: 0 !important;
}

body.services-body .services-template-image-row .ut-image-card__text {
  position: absolute !important;
  left: 17px !important;
  right: 17px !important;
  top: calc(57% + 14px) !important;
  bottom: 14px !important;
  max-width: none !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.70) !important;
  font-size: 10.9px !important;
  line-height: 1.38 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

@media (max-width: 991.98px) {
  body.services-body .services-template-image-row .ut-image-card {
    min-height: 236px !important;
  }
}

@media (max-width: 575.98px) {
  body.services-body .services-template-image-row .ut-image-card {
    min-height: 216px !important;
  }

  body.services-body .services-template-image-row .ut-image-card__title {
    left: 15px !important;
    right: 15px !important;
    top: 56.5% !important;
    font-size: 13.6px !important;
  }

  body.services-body .services-template-image-row .ut-image-card__text {
    left: 15px !important;
    right: 15px !important;
    top: calc(56.5% + 14px) !important;
    font-size: 10.9px !important;
    line-height: 1.36 !important;
  }
}

/* ============================================================================
   HOME: image-card typography balance
   Same title/description layout as services cards for the homepage image cards.
============================================================================ */

body:not(.services-body) .ut-image-card {
  position: relative !important;
  min-height: clamp(226px, 18vw, 260px) !important;
  display: block !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

body:not(.services-body) .ut-image-card::before {
  z-index: 0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(2, 4, 8, 0.08) 0%,
      rgba(2, 4, 8, 0.14) 32%,
      rgba(2, 4, 8, 0.54) 54%,
      rgba(2, 4, 8, 0.88) 74%,
      rgba(2, 4, 8, 0.99) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 4, 8, 0.36) 0%,
      rgba(2, 4, 8, 0.24) 52%,
      rgba(2, 4, 8, 0.18) 100%
    ),
    radial-gradient(circle at 18% 6%, rgba(248, 181, 0, 0.13), transparent 42%) !important;
}

body:not(.services-body) .ut-image-card:hover::before {
  background:
    linear-gradient(
      180deg,
      rgba(2, 4, 8, 0.06) 0%,
      rgba(2, 4, 8, 0.12) 32%,
      rgba(2, 4, 8, 0.48) 54%,
      rgba(2, 4, 8, 0.84) 74%,
      rgba(2, 4, 8, 0.98) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 4, 8, 0.30) 0%,
      rgba(2, 4, 8, 0.20) 52%,
      rgba(2, 4, 8, 0.14) 100%
    ),
    radial-gradient(circle at 18% 6%, rgba(248, 181, 0, 0.17), transparent 42%) !important;
}

body:not(.services-body) .ut-image-card__content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 18px 17px 15px !important;
}

body:not(.services-body) .ut-image-card__title {
  position: absolute !important;
  left: 17px !important;
  right: 17px !important;
  top: 57% !important;
  min-height: 26px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.97) !important;
  font-size: clamp(13px, 0.96vw, 14.8px) !important;
  line-height: 1.08 !important;
  font-weight: 780 !important;
  letter-spacing: -0.18px !important;
}

body:not(.services-body) .ut-image-card__title::before {
  flex: 0 0 auto !important;
  width: 3px !important;
  height: 15px !important;
  margin-right: 8px !important;
  vertical-align: 0 !important;
}

body:not(.services-body) .ut-image-card__text {
  position: absolute !important;
  left: 17px !important;
  right: 17px !important;
  top: calc(57% + 14px) !important;
  bottom: 14px !important;
  max-width: none !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.70) !important;
  font-size: 10.9px !important;
  line-height: 1.38 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

@media (max-width: 991.98px) {
  body:not(.services-body) .ut-image-card {
    min-height: 236px !important;
  }
}

@media (max-width: 575.98px) {
  body:not(.services-body) .ut-image-card {
    min-height: 216px !important;
  }

  body:not(.services-body) .ut-image-card__title {
    left: 15px !important;
    right: 15px !important;
    top: 56.5% !important;
    font-size: 13.6px !important;
  }

  body:not(.services-body) .ut-image-card__text {
    left: 15px !important;
    right: 15px !important;
    top: calc(56.5% + 14px) !important;
    font-size: 10.9px !important;
    line-height: 1.36 !important;
  }
}