/* =====================================================================
   service-cards.css
   Подключать ПОСЛЕ main.css.
   Все цвета берутся из переменных сайта (main.css), поэтому карточки
   сами подстраиваются под тёмную и светлую тему.
   Фирменный фиолетовый: var(--tc-theme-primary-1)  =  #6e4ef2
   ===================================================================== */


/* ---------------------------------------------------------------------
   Общие элементы: фиолетовая метка "01 / AI" и теги
   --------------------------------------------------------------------- */
.service-label {
  color: var(--tc-theme-primary-1);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-tags li {
  margin: 0;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(110, 78, 242, 0.55);
  background: rgba(110, 78, 242, 0.14);
  color: var(--tc-neutral-200);
  font-size: 15px;
  line-height: 1.3;
}


/* ---------------------------------------------------------------------
   ГЛАВНАЯ: строка сервиса + карточка, которая раскрывается при наведении
   --------------------------------------------------------------------- */

/* Строка при наведении: тёмный фон + фиолетовая полоска слева
   (вместо прежней заливки всей строки фиолетовым) */
.section-service-1 .single-service-card-1 {
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.section-service-1 .single-service-card-1:hover,
.section-service-1 .single-service-card-1:focus-within {
  background-color: var(--tc-bg-6);
  box-shadow: inset 3px 0 0 var(--tc-theme-primary-1);
}

/* Цвета текста и стрелки при наведении: светлые, не белые на белом */
.section-service-1 .single-service-card-1:hover .service-card-details .service-card-text,
.section-service-1 .single-service-card-1:focus-within .service-card-details .service-card-text {
  color: var(--tc-neutral-200);
}

.section-service-1 .single-service-card-1:hover .service-card-details .service-card-icon,
.section-service-1 .single-service-card-1:focus-within .service-card-details .service-card-icon {
  color: var(--tc-theme-primary-1);
  border-color: var(--tc-theme-primary-1) !important;
  transform: rotate(45deg);
}

/* Раскрывающаяся панель (по умолчанию свёрнута) */
.service-hover-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
}

.service-hover-panel__inner {
  min-height: 0;
  overflow: hidden;
}

.service-hover-panel__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 14px 0 8px;
}

.section-service-1 .single-service-card-1:hover .service-hover-panel,
.section-service-1 .single-service-card-1:focus-within .service-hover-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Телефоны и планшеты (нет наведения): панель всегда открыта */
@media (hover: none) {
  .service-hover-panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}


/* ---------------------------------------------------------------------
   СТРАНИЦА СЕРВИСОВ: баннер с номером вместо картинки
   --------------------------------------------------------------------- */
.service-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-height: 200px;
  padding: 32px 36px;
  border-radius: 11px;
  border-left: 3px solid var(--tc-theme-primary-1);
  background:
    radial-gradient(circle at 100% 0%, rgba(110, 78, 242, 0.28), transparent 60%),
    var(--tc-bg-4);
}

.service-banner__num {
  color: var(--tc-theme-primary-1);
  font-size: clamp(44px, 8vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .service-banner {
    min-height: 140px;
    padding: 22px 20px;
    gap: 16px;
  }
}