/* ============================================================
   PERSONAL — FANUCAiLeadCV
   Four hobby cards with subtle hover tilt effect.
   ============================================================ */

/* ----------------------------------------------------------
   CARDS GRID — 4 across on desktop, 2×2 tablet, stacked mobile.
---------------------------------------------------------- */

.personal__cards {
  list-style:            none;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-5);
}

@media (max-width: 900px) {
  .personal__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .personal__cards {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------
   PERSONAL CARD
   Hover: subtle lift + faint accent glow.
   Phase 5: add CSS perspective tilt.
---------------------------------------------------------- */

.personal__card {
  background:     var(--color-surface-1);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-xl);
  padding:        var(--space-8) var(--space-6);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  text-align:     center;
  cursor:         default;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-spring);
  /* perspective for Phase 5 tilt */
  perspective: 800px;
}

.personal__card:hover {
  border-color: var(--color-border-accent);
  box-shadow:   var(--shadow-accent), var(--shadow-md);
  transform:    translateY(-4px);
}

/* Icon */
.personal__card-icon {
  font-size:     2.5rem;
  line-height:   1;
  display:       block;
  /* Phase 5: animate scale on hover */
  transition:    transform var(--duration-base) var(--ease-spring);
}

.personal__card:hover .personal__card-icon {
  transform: scale(1.15) rotate(-5deg);
}

/* Card title */
.personal__card-title {
  font-size:   var(--text-base);
  font-weight: var(--font-bold);
  color:       var(--color-text-primary);
  line-height: var(--leading-tight);
}

/* Description */
.personal__card-desc {
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
}

/* Sailing card (last) — visual link to hero accent colour */
.personal__card:last-child .personal__card-title {
  color: var(--color-text-accent);
}