/* RFID Smart Cabinet — technical credibility */

.technical__grid {
  display: grid;
  gap: var(--space-5);
}

/* Architecture: a vertical chain of nodes joined by arrows */
.arch {
  display: grid;
  gap: var(--space-5);
}

.arch__node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Arrow down the icon column */
.arch__node:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--space-4) + 10px - 5px);
  bottom: calc(-1 * var(--space-5) + 2px);
  width: 10px;
  height: calc(var(--space-5) - 6px);
  background-color: var(--color-primary);
  clip-path: polygon(4px 0, 6px 0, 6px 12px, 10px 12px, 5px 18px, 0 12px, 4px 12px);
}

.arch__node .icon {
  margin-top: 0.15em;
  color: var(--color-primary);
}

.arch__name {
  display: block;
  font-weight: var(--weight-semibold);
}

.arch__detail {
  display: block;
  max-width: 34em; /* ~75 characters on tablets */
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.arch__node--core {
  background-color: var(--color-primary-tint);
  border-color: var(--color-primary);
}

.arch__node--ext {
  background-color: var(--color-bg-primary);
  border-style: dashed;
  border-color: var(--color-border-input);
}

/* Desktop: architecture beside network & security */
@media (min-width: 1024px) {
  .technical__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}