/* ==========================================================================
   css/pages/services.css — Services Page Specific Styles
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   SERVICES INDEX GRID
   ────────────────────────────────────────────────────────────────────────── */
.services-index-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6);
  margin-bottom:         var(--space-16);
}

.service-index-tab {
  display:         flex;
  align-items:     center;
  gap:             var(--space-4);
  padding:         var(--space-5) var(--space-6);
  background:      rgba(255, 255, 255, 0.02);
  border:          1px solid var(--glass-border);
  border-radius:   var(--radius-md);
  text-decoration: none;
  transition:      all var(--transition-base);
  cursor:          pointer;
}

.service-index-tab:hover,
.service-index-tab.active {
  background:   var(--primary-glow-sm);
  border-color: rgba(0, 243, 255, 0.25);
}

.service-index-tab .tab-icon { font-size: 1.5rem; flex-shrink: 0; }

.service-index-tab .tab-label {
  font-family:    var(--font-heading);
  font-size:      var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--text-main);
  transition:     color var(--transition-base);
}

.service-index-tab:hover .tab-label,
.service-index-tab.active .tab-label { color: var(--primary); }

/* ──────────────────────────────────────────────────────────────────────────
   SERVICE DETAIL ENTRIES
   ────────────────────────────────────────────────────────────────────────── */

/* Overrides/extensions for .service-detail-block defined in layout.css */
.service-detail-block + .service-detail-block {
  margin-top: var(--space-6);
}

/* Anchor target offset so fixed nav doesn't cover headings */
.service-detail-block[id] {
  scroll-margin-top: calc(var(--navbar-h) + var(--space-8));
}

/* ──────────────────────────────────────────────────────────────────────────
   TECH STACK TAGS
   ────────────────────────────────────────────────────────────────────────── */
.tech-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  margin-top: var(--space-6);
}

.tech-tag {
  padding:        0.25rem 0.75rem;
  background:     rgba(255, 255, 255, 0.04);
  border:         1px solid rgba(255, 255, 255, 0.08);
  border-radius:  var(--radius-sm);
  font-family:    var(--font-mono);
  font-size:      0.7rem;
  color:          var(--text-muted);
  letter-spacing: 0.5px;
  transition:     all var(--transition-base);
}

.tech-tag:hover {
  background:  var(--primary-glow-sm);
  border-color: rgba(0, 243, 255, 0.2);
  color:       var(--primary);
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .services-index-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .services-index-grid { grid-template-columns: 1fr; }
}