/* Service Cards - Terminal Aesthetic (Tree List) */

.service-cards-section {
  padding: 0 20px 60px 20px;
  position: relative;
  z-index: 5;
}

.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin: 0 auto;
  container-type: inline-size;
}

.service-card-wrapper:last-child .service-card::before {
  content: "\2514\2500\2500 ";
}

.service-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 12px;
  min-height: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
  gap: 8px;
}

.service-card::before {
  content: "\251C\2500\2500 ";
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1.4;
  white-space: pre;
}

.service-card:hover {
  background: rgba(255, 255, 255, 0.03);
}

.service-card:active, .service-card.active {
  background: rgba(255, 255, 255, 0.05);
}

.service-card__icon {
  display: none;
}

.service-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-primary);
  margin: 0 8px 0 0;
  line-height: 1.4;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.service-card__description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.service-card__tags {
  display: none;
}

.service-card__tag {
  display: none;
}

/* Inline expand area */
.service-card__expand {
  display: none;
  padding: 4px 0 16px 48px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  margin-left: 12px;
}

.service-card__expand.active {
  display: block;
}

.service-card__expand a {
  color: var(--accent-secondary, #60a5fa);
  text-decoration: none;
}

.service-card__expand a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .service-cards-section { padding: 0 15px 40px 15px; }
  .service-card { padding: 8px 10px; }
  .service-card__title { font-size: 14px; }
  .service-card__description { font-size: 12px; }
  .service-card__expand { padding-left: 32px; }
}

@media (max-width: 480px) {
  .service-card { padding: 8px 8px; }
  .service-card__title { font-size: 13px; }
  .service-card__description {
    display: none;
  }
  .service-card__expand { padding-left: 24px; margin-left: 8px; }
}