/*
  URBAN TECH — IMAGE CARD COMPONENTS

  Bootstrap відповідає за конструкцію:
  - row / col / g-4;
  - card / card-body / h-100;
  - базову адаптивну сітку.

  Цей файл відповідає тільки за брендове оформлення:
  - фонова картинка;
  - затемнення;
  - border;
  - premium hover;
  - текстова зона;
  - універсальні step-картки з іконкою та номером.
*/

/* =========================================================
   SHARED COMPONENT: IMAGE CARD
========================================================= */

.ut-image-card {
  --ut-card-image: none;
  --ut-card-min-height: clamp(204px, 18vw, 246px);
  --ut-card-padding: 20px 18px 18px;
  --ut-card-border: rgba(248, 181, 0, 0.42);
  --ut-card-border-hover: rgba(248, 181, 0, 0.92);
  --ut-card-overlay-left: rgba(2, 4, 8, 0.68);
  --ut-card-overlay-center: rgba(2, 4, 8, 0.50);
  --ut-card-overlay-right: rgba(2, 4, 8, 0.18);
  --ut-card-overlay-bottom: rgba(2, 4, 8, 0.54);

  position: relative;
  min-height: var(--ut-card-min-height);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-align: left;

  background-image: var(--ut-card-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  border: 0.75px solid var(--ut-card-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30);

  transform: translateY(0);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    filter 0.28s ease;
}

.ut-image-card.card {
  --bs-card-bg: transparent;
  --bs-card-border-width: 0;
  --bs-card-border-color: transparent;
  --bs-card-border-radius: 0;

  display: flex;
}

.ut-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      var(--ut-card-overlay-left) 0%,
      var(--ut-card-overlay-center) 54%,
      var(--ut-card-overlay-right) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2, 4, 8, 0.04),
      var(--ut-card-overlay-bottom)
    ),
    radial-gradient(circle at 16% 0%, rgba(248, 181, 0, 0.12), transparent 38%);
  transition: background 0.28s ease;
}

.ut-image-card::after {
  content: none !important;
  display: none !important;
}

.ut-image-card:hover {
  border-color: var(--ut-card-border-hover) !important;
  transform: translateY(-4px);
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.36);
  filter: saturate(1.06) contrast(1.03);
}

.ut-image-card:hover::before {
  background:
    linear-gradient(90deg, rgba(2, 4, 8, 0.58) 0%, rgba(2, 4, 8, 0.42) 54%, rgba(2, 4, 8, 0.14) 100%),
    linear-gradient(180deg, rgba(2, 4, 8, 0.03), rgba(2, 4, 8, 0.48)),
    radial-gradient(circle at 16% 0%, rgba(248, 181, 0, 0.16), transparent 38%);
}

.ut-image-card > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   BOOTSTRAP CARD CONTENT
========================================================= */

.ut-image-card__content.card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: var(--ut-card-min-height);
  padding: var(--ut-card-padding);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ut-image-card__title {
  margin: 0 0 9px;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 760;
  line-height: 1.22;
  letter-spacing: -0.1px;
}

.ut-image-card__title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 17px;
  margin-right: 9px;
  vertical-align: -3px;
  background: linear-gradient(180deg, #ffd64f, rgba(248, 181, 0, 0.42));
  box-shadow: 0 0 14px rgba(248, 181, 0, 0.24);
}

.ut-image-card__text {
  margin: 0;
  max-width: 96%;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.6px;
  line-height: 1.58;
}

/* =========================================================
   HOME HERO: FIRST 3 CARDS
========================================================= */

.ut-image-card-row {
  row-gap: 14px;
  margin-top: 24px;
}

.ut-image-card--hero {
  --ut-card-min-height: clamp(176px, 17vw, 224px);
  --ut-card-padding: 20px 18px 18px;
}

/* =========================================================
   HOME WORK: «Що ми виконуємо»
========================================================= */

.home-work-card-row {
  row-gap: clamp(12px, 1.4vw, 16px);
  margin-top: clamp(28px, 4vw, 42px);
}

.ut-image-card--work {
  --ut-card-min-height: clamp(214px, 20vw, 260px);
  --ut-card-padding: 22px 19px 19px;
}

.ut-image-card--electro220 {
  --ut-card-image: url("../assets/img/main/cards/electro-220.webp");
}

.ut-image-card--lighting-led {
  --ut-card-image: url("../assets/img/main/cards/lighting-led.webp");
}

.ut-image-card--backup-power {
  --ut-card-image: url("../assets/img/main/cards/backup-power.webp");
}

.ut-image-card--video-surveillance {
  --ut-card-image: url("../assets/img/main/cards/video-surveillance.webp");
}

.ut-image-card--ops-ps-security {
  --ut-card-image: url("../assets/img/main/cards/ops-ps-security.webp");
}

.ut-image-card--scud-network-smart {
  --ut-card-image: url("../assets/img/main/cards/scud-network-smart.webp");
}

/* =========================================================
   SHARED COMPONENT: STEP CARD
   Загальний шаблон картки з квадратною іконкою та номером.
========================================================= */

.ut-step-card-row,
.ut-process-card-row {
  row-gap: clamp(28px, 3vw, 32px);
  margin-top: clamp(34px, 4.2vw, 48px);
}

.ut-step-card.card,
.ut-process-card.card {
  --ut-step-image: none;
  --ut-step-position: center;
  --ut-step-min-height: clamp(292px, 27vw, 338px);
  --ut-step-border: rgba(248, 181, 0, 0.72);
  --ut-step-border-hover: rgba(248, 181, 0, 0.96);
  --ut-step-icon-size: 52px;
  --ut-step-icon-svg-size: 25px;
  --ut-step-padding-x: clamp(24px, 2.3vw, 28px);
  --ut-step-padding-top: clamp(24px, 2.1vw, 28px);
  --ut-step-padding-bottom: clamp(38px, 3.8vw, 48px);
  --ut-step-top-offset: clamp(20px, 2vw, 26px);
  --ut-step-title-size: clamp(15px, 1.25vw, 18px);
  --ut-step-text-size: 12.6px;

  --bs-card-bg: transparent;
  --bs-card-border-width: 0;
  --bs-card-border-color: transparent;
  --bs-card-border-radius: 0;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: var(--ut-step-min-height);
  color: #fff;
  text-align: left;

  background-image: var(--ut-step-image) !important;
  background-size: cover !important;
  background-position: var(--ut-step-position) !important;
  background-repeat: no-repeat !important;

  border: 0.75px solid var(--ut-step-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);

  transform: translateY(0);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease;
}

.ut-step-card.card::before,
.ut-process-card.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 4, 8, 0.82) 0%, rgba(2, 4, 8, 0.54) 52%, rgba(2, 4, 8, 0.28) 100%),
    linear-gradient(180deg, rgba(2, 4, 8, 0.20) 0%, rgba(2, 4, 8, 0.18) 42%, rgba(2, 4, 8, 0.72) 100%),
    radial-gradient(circle at 0% 0%, rgba(248, 181, 0, 0.13), transparent 34%);
  transition: background 0.28s ease;
}

.ut-step-card.card:hover,
.ut-process-card.card:hover {
  transform: translateY(-4px);
  border-color: var(--ut-step-border-hover) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.46);
  filter: saturate(1.05) contrast(1.03);
}

.ut-step-card.card:hover::before,
.ut-process-card.card:hover::before {
  background:
    linear-gradient(90deg, rgba(2, 4, 8, 0.74) 0%, rgba(2, 4, 8, 0.48) 52%, rgba(2, 4, 8, 0.24) 100%),
    linear-gradient(180deg, rgba(2, 4, 8, 0.16) 0%, rgba(2, 4, 8, 0.16) 42%, rgba(2, 4, 8, 0.66) 100%);
}

.ut-step-card__body.card-body,
.ut-process-card__body.card-body {
  position: relative;
  z-index: 1;
  min-height: var(--ut-step-min-height);
  padding: var(--ut-step-padding-top) var(--ut-step-padding-x) var(--ut-step-padding-bottom);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ut-step-card__top,
.ut-process-card__top {
  position: absolute !important;
  top: var(--ut-step-top-offset) !important;
  left: var(--ut-step-padding-x) !important;
  right: var(--ut-step-padding-x) !important;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 !important;
  pointer-events: none;
}

.ut-step-card__icon,
.ut-process-card__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ut-step-icon-size);
  height: var(--ut-step-icon-size);
  flex: 0 0 var(--ut-step-icon-size);
  border: 0.75px solid rgba(248, 181, 0, 0.58);
  background: rgba(5, 7, 11, 0.58);
  color: #f8b500;
  transform: none !important;
  box-shadow:
    0 0 20px rgba(248, 181, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.ut-step-card__icon i,
.ut-process-card__icon i {
  color: currentColor;
  font-size: calc(var(--ut-step-icon-svg-size) - 2px);
  line-height: 1;
}

.ut-step-card__icon::before,
.ut-process-card__icon::before {
  content: "";
  display: none;
  width: var(--ut-step-icon-svg-size);
  height: var(--ut-step-icon-svg-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ut-step-card__number,
.ut-process-card__number {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  color: rgba(255, 255, 255, 0.07);
  font-size: clamp(56px, 5.6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.105em;
  line-height: 0.86;
  transform: none !important;
  pointer-events: none;
}

.ut-step-card__title,
.ut-process-card__title {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  color: rgba(255, 255, 255, 0.96);
  font-size: var(--ut-step-title-size);
  font-weight: 760;
  line-height: 1.22;
  letter-spacing: -0.1px;
}

.ut-step-card__title::before,
.ut-process-card__title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 17px;
  margin-right: 9px;
  vertical-align: -3px;
  background: linear-gradient(180deg, #ffd64f, rgba(248, 181, 0, 0.42));
  box-shadow: 0 0 14px rgba(248, 181, 0, 0.24);
}

.ut-step-card__text,
.ut-process-card__text {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: min(94%, 470px);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--ut-step-text-size);
  line-height: 1.58;
}

/* =========================================================
   HOME PROCESS: «Як ми працюємо»
========================================================= */

.ut-step-card-row > div:nth-child(1) .ut-step-card,
.ut-process-card-row > div:nth-child(1) .ut-process-card {
  --ut-step-image: url("../assets/img/main/cards/consultation.webp");
  --ut-step-position: center;
}

.ut-step-card-row > div:nth-child(2) .ut-step-card,
.ut-process-card-row > div:nth-child(2) .ut-process-card {
  --ut-step-image: url("../assets/img/main/cards/site-inspection.webp");
  --ut-step-position: center;
}

.ut-step-card-row > div:nth-child(3) .ut-step-card,
.ut-process-card-row > div:nth-child(3) .ut-process-card {
  --ut-step-image: url("../assets/img/main/cards/solution-selection.webp");
  --ut-step-position: center;
}

.ut-step-card-row > div:nth-child(4) .ut-step-card,
.ut-process-card-row > div:nth-child(4) .ut-process-card {
  --ut-step-image: url("../assets/img/main/cards/turnkey-implementation.webp");
  --ut-step-position: center;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
  .ut-image-card--hero,
  .ut-image-card--work {
    --ut-card-min-height: 214px;
  }

  .ut-image-card::before {
    background:
      linear-gradient(90deg, rgba(2, 4, 8, 0.72) 0%, rgba(2, 4, 8, 0.56) 62%, rgba(2, 4, 8, 0.30) 100%),
      linear-gradient(180deg, rgba(2, 4, 8, 0.05), rgba(2, 4, 8, 0.58)),
      radial-gradient(circle at 16% 0%, rgba(248, 181, 0, 0.12), transparent 38%);
  }

  .ut-step-card.card,
  .ut-process-card.card,
  .ut-step-card__body.card-body,
  .ut-process-card__body.card-body {
    --ut-step-min-height: 300px;
  }
}

@media (max-width: 767.98px) {
  .ut-image-card-row {
    margin-top: 20px;
  }

  .ut-image-card--hero {
    --ut-card-min-height: 190px;
    --ut-card-padding: 18px 15px 16px;
  }

  .ut-image-card--work {
    --ut-card-min-height: 220px;
    --ut-card-padding: 22px 18px 18px;
  }

  .ut-image-card::before {
    background:
      linear-gradient(90deg, rgba(2, 4, 8, 0.74) 0%, rgba(2, 4, 8, 0.60) 68%, rgba(2, 4, 8, 0.34) 100%),
      linear-gradient(180deg, rgba(2, 4, 8, 0.06), rgba(2, 4, 8, 0.60)),
      radial-gradient(circle at 16% 0%, rgba(248, 181, 0, 0.12), transparent 38%);
  }

  .ut-image-card__text {
    font-size: 12.2px;
    line-height: 1.52;
  }

  .ut-image-card--work .ut-image-card__title,
  .ut-image-card--work .ut-image-card__text {
    max-width: min(88%, 360px);
  }

  .ut-step-card.card,
  .ut-process-card.card,
  .ut-step-card__body.card-body,
  .ut-process-card__body.card-body {
    --ut-step-min-height: 300px;
    --ut-step-padding-top: 24px;
    --ut-step-padding-x: 20px;
    --ut-step-padding-bottom: 34px;
    --ut-step-top-offset: 18px;
    --ut-step-icon-size: 48px;
    --ut-step-icon-svg-size: 22px;
    --ut-step-title-size: 15px;
    --ut-step-text-size: 12.2px;
  }

  .ut-step-card__number,
  .ut-process-card__number {
    font-size: 56px;
  }
}

/* =========================================================
   HOME MENU FIX
   Повертає компактний mobile drawer для головної сторінки.
   HTML лишається в index.html, стилі — тільки в CSS.
========================================================= */

html body.hero-wrap #ut-main-nav {
  background: rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

html body.hero-wrap #ut-main-nav .col-md-12 {
  width: min(392px, 100vw) !important;
  max-width: 392px !important;
  padding: 34px 30px 30px !important;
  background:
    linear-gradient(180deg, rgba(8, 10, 13, 0.96), rgba(2, 3, 6, 0.98)),
    rgba(4, 5, 8, 0.96) !important;
  border-left: none !important;
  box-shadow:
    -26px 0 70px rgba(0, 0, 0, 0.68),
    inset 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

html body.hero-wrap #ut-main-nav .col-md-12::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(248, 181, 0, 0.14) 0%,
    rgba(248, 181, 0, 0.90) 18%,
    rgba(255, 214, 79, 0.98) 50%,
    rgba(248, 181, 0, 0.90) 82%,
    rgba(248, 181, 0, 0.14) 100%
  );
  box-shadow:
    0 0 12px rgba(248, 181, 0, 0.52),
    0 0 28px rgba(248, 181, 0, 0.30),
    0 0 52px rgba(248, 181, 0, 0.16);
  pointer-events: none;
  z-index: 2;
}

html body.hero-wrap #ut-main-nav .logo-text {
  width: fit-content !important;
  margin: 0 52px 16px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 20px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: 3px !important;
}

html body.hero-wrap #ut-main-nav .col-md-12::after {
  margin: 0 0 24px !important;
  padding-bottom: 24px !important;
  color: rgba(255, 255, 255, 0.60) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

html body.hero-wrap #ut-main-nav ul {
  width: calc(100% + 30px) !important;
  margin: 0 0 0 -30px !important;
}

html body.hero-wrap #ut-main-nav ul li {
  border-left: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.095) !important;
  box-shadow: none !important;
  transform: translateX(12px);
}

html body.hero-wrap #ut-main-nav ul li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.095) !important;
}

html body.hero-wrap #ut-main-nav ul li.active {
  border-left: none !important;
  box-shadow: none !important;
}

html body.hero-wrap #ut-main-nav ul li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0;
  transform: translateY(-50%);
  background: #ffd64f;
  opacity: 0;
  box-shadow:
    0 0 12px rgba(255, 214, 79, 1),
    0 0 28px rgba(248, 181, 0, 0.82),
    0 0 54px rgba(248, 181, 0, 0.52),
    0 0 84px rgba(248, 181, 0, 0.30);
  transition: height 0.22s ease, opacity 0.22s ease;
  pointer-events: none;
  z-index: 4;
}

html body.hero-wrap #ut-main-nav ul li:hover::after,
html body.hero-wrap #ut-main-nav ul li.active::after {
  height: 48px;
  opacity: 1;
}

html body.hero-wrap #ut-main-nav ul li a {
  min-height: 68px !important;
  padding: 0 0 0 30px !important;
  justify-content: flex-start !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: clamp(19px, 1.7vw, 23px) !important;
  font-weight: 360 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.15px !important;
}

html body.hero-wrap #ut-main-nav ul li a::after {
  content: none !important;
  display: none !important;
}

html body.hero-wrap #ut-main-nav ul li a:hover,
html body.hero-wrap #ut-main-nav ul li.active a {
  color: #ffd64f !important;
  padding-left: 34px !important;
  text-shadow:
    0 0 12px rgba(255, 214, 79, 0.60),
    0 0 26px rgba(248, 181, 0, 0.32),
    0 0 46px rgba(248, 181, 0, 0.16) !important;
}

html body.hero-wrap #ut-main-nav > .ut-nav-toggle {
  top: 26px !important;
  right: 22px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}

html body.hero-wrap #ut-main-nav > .ut-nav-toggle::after {
  content: "×" !important;
  display: block !important;
  color: rgba(255, 255, 255, 0.86) !important;
  background: transparent !important;
  border: none !important;
  font-family: Arial, sans-serif !important;
  font-size: 31px !important;
  font-weight: 200 !important;
  line-height: 1 !important;
}

html body.hero-wrap #ut-main-nav > .ut-nav-toggle i,
html body.hero-wrap #ut-main-nav > .ut-nav-toggle i::before,
html body.hero-wrap #ut-main-nav > .ut-nav-toggle i::after {
  display: none !important;
}

@media (max-width: 420px) {
  html body.hero-wrap #ut-main-nav .col-md-12 {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    padding: 31px 30px 30px !important;
  }

  html body.hero-wrap #ut-main-nav .logo-text {
    font-size: 20px !important;
  }

  html body.hero-wrap #ut-main-nav ul li a {
    min-height: 69px !important;
    font-size: 23px !important;
  }
}