/*
  Tavashta Digital visual refinements
  The switch is intentionally drawn as a neutral 2D system diagram. It
  communicates the architecture without making the hero look like a single
  manufacturer's product page.
*/

.switch-device .device-shell {
  inset: 18% 5% 17%;
  background: #0a2637;
  border: 1px solid #b5e7dfd9;
  box-shadow: inset 0 0 0 1px #1ac8a733,
    0 22px 34px rgba(0, 0, 0, .28);
  filter: drop-shadow(0 10px 13px rgba(18, 75, 86, .22));
}

.switch-device .device-shell > * {
  display: block;
}

.switch-device .device-face {
  background:
    linear-gradient(90deg, transparent 49.8%, #7bd9ca55 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, #7bd9ca55 50%, transparent 50.2%);
  border: 1px dashed #8edbd0b3;
  border-radius: 2px;
}

.switch-device .device-face::before,
.switch-device .device-face::after {
  position: absolute;
  color: #8edbd0c7;
  letter-spacing: .12em;
  font-size: .48rem;
}

.switch-device .device-face::before {
  content: "SW-01";
  top: -17px;
  left: 0;
}

.switch-device .device-face::after {
  content: "FIELD ETHERNET / REV. 01";
  right: 0;
  bottom: -17px;
}

.switch-device .device-leds {
  display: flex;
  gap: 7px;
  top: 18%;
  left: 11%;
}

.switch-device .device-ports {
  display: grid;
  gap: 5px;
  bottom: 22%;
  left: 11%;
  right: 11%;
}

.switch-device .device-port {
  position: relative;
  border-color: #a9ded5c7;
  border-radius: 1px;
}

.switch-device .device-port::after {
  content: counter(port);
  counter-increment: port;
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  color: #8edbd0b3;
  font-size: .42rem;
  transform: translateX(-50%);
}

.switch-device .device-ports {
  counter-reset: port;
}

.switch-device .device-layer {
  display: grid;
  background: #0d5361e6;
  border: 1px dashed #6ee2d0d0;
  border-radius: 2px;
  box-shadow: none;
}

.switch-device::before {
  content: "SCHEMATIC 01  /  INDUSTRIAL ETHERNET";
  position: absolute;
  top: -2%;
  left: 5%;
  z-index: 4;
  color: hsl(var(--secondary));
  letter-spacing: .13em;
  font-size: .56rem;
  font-weight: 700;
}

.switch-device::after {
  content: "NET-A  ·  5 × FE  ·  DC 9–57 V";
  position: absolute;
  right: 6%;
  bottom: -2%;
  z-index: 4;
  color: hsl(var(--muted-foreground));
  letter-spacing: .045em;
  font-size: .58rem;
}

.device-plate {
  display: block;
  font-size: 0;
}

.device-plate::after {
  content: "TSW202  ·  5-PORT ETHERNET";
  font-size: .57rem;
}

.vertical-card {
  cursor: default;
  transition: transform .28s ease, border-color .28s ease,
    background-color .28s ease, box-shadow .28s ease;
}

.vertical-card:hover {
  background: #0a2d49;
  border-color: hsl(var(--secondary));
  box-shadow: 0 18px 42px rgba(1, 12, 25, .34);
  transform: translateY(-6px);
}

.vertical-card:hover .vertical-line {
  opacity: 1;
  width: 2px;
}

.vertical-card:hover .vertical-index {
  letter-spacing: .08em;
}

.vertical-card:first-child:hover {
  background: #082a43;
}

@media (max-width: 900px) {
  .vertical-card:hover {
    transform: none;
  }
}

@media (max-width: 560px) {
  .switch-device::before {
    top: 1%;
    left: 0;
  }

  .switch-device::after {
    right: 0;
    bottom: 1%;
  }
}