/* ==========================================================================
   services.css — Services page specific enhancements
   ========================================================================== */

/* --------------------------------------------------------------------------
   Service Pillar — enhanced layout and hover
   -------------------------------------------------------------------------- */
.service-pillar {
  position: relative;
  transition: border-color var(--transition-base);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  margin-bottom: var(--space-sm);
}

.service-pillar:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding-inline: 0;
}

.service-pillar:last-child {
  padding-inline: 0;
}

/* Accent left bar on hover */
.service-pillar::before {
  content: '';
  position: absolute;
  left: -var(--space-lg);
  top: var(--space-xl);
  bottom: var(--space-xl);
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
  opacity: 0;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-base);
}

/* --------------------------------------------------------------------------
   Icon wrap — hover glow
   -------------------------------------------------------------------------- */
.service-pillar__icon-wrap {
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.service-pillar:hover .service-pillar__icon-wrap {
  box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.2);
  transform: scale(1.05);
}

.service-pillar:hover .service-pillar__icon-wrap--orange {
  box-shadow: 0 0 20px rgba(var(--color-accent-red-rgb), 0.2);
}

/* --------------------------------------------------------------------------
   Pillar title — accent on hover
   -------------------------------------------------------------------------- */
.service-pillar__title {
  transition: color var(--transition-fast);
}

.service-pillar:hover .service-pillar__title {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Tags — slightly more visible on hover
   -------------------------------------------------------------------------- */
.service-pillar:hover .tag {
  border-color: rgba(var(--color-accent-rgb), 0.2);
  color: var(--color-text);
}