/**
 * Technology Map page — MasterKis V2
 */

.tech-map-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 8px 0 36px;
}

@media (min-width: 720px) {
  .tech-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .tech-map-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tech-map-card {
  padding: 20px;
  border: 1px solid var(--mk-border, var(--line));
  border-radius: var(--mk-radius, var(--radius));
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--mk-secondary, #7f9fd6) 10%, transparent), transparent 45%),
    var(--mk-surface, var(--surface));
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.tech-map-card:hover,
.tech-map-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mk-primary, #e0b45c) 55%, var(--mk-border, #333));
  outline: none;
}

.tech-map-card__layer {
  margin: 0 0 8px;
  font-size: var(--mk-fs-xs, 0.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-muted, var(--muted));
}

.tech-map-card h2 {
  font-family: var(--mk-font-display, Syne, sans-serif);
  font-size: 1.35rem;
  margin: 0 0 8px;
}

.tech-map-card p:last-child {
  margin: 0;
  color: var(--mk-muted, var(--muted));
}

@media (prefers-reduced-motion: reduce) {
  .tech-map-card {
    transition: none;
  }
  .tech-map-card:hover,
  .tech-map-card:focus-visible {
    transform: none;
  }
}