/* ============================================================
   css/cards.css — Team Cards, Blog Cards
   ============================================================ */

/* ── TEAM ── */
.team-section { padding: 6rem 0; }

.team-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2rem;
  margin-top:            4rem;
}

.team-card {
  background: var(--bg-card);
  border:     1px solid var(--border);
  overflow:   hidden;
  transition: all var(--transition);
}

.team-card:hover {
  border-color: var(--yellow);
  transform:    translateY(-6px);
}

.team-img {
  width:        100%;
  aspect-ratio: 1;
  background:   var(--bg-surface);
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    4rem;
  position:     relative;
  overflow:     hidden;
}

.team-info { padding: 1.5rem; }

.team-info h3 {
  font-family:    var(--font-cond);
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom:  0.25rem;
  color:          var(--text-primary);
}

.team-info .role {
  font-family:    var(--font-cond);
  font-size:      0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--yellow);
  margin-bottom:  1rem;
}

.social-links {
  display: flex;
  gap:     0.75rem;
}

.social-link {
  width:       30px;
  height:      30px;
  border:      1px solid var(--border);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   0.75rem;
  color:       var(--text-muted);
  transition:  all var(--transition);
}

.social-link:hover {
  background:  var(--yellow);
  border-color: var(--yellow);
  color:       var(--black);
}

/* ── BLOG ── */
.blog-section { padding: 6rem 0; }

.blog-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2rem;
  margin-top:            4rem;
}

.blog-card {
  background: var(--bg-card);
  border:     1px solid var(--border);
  overflow:   hidden;
  transition: all var(--transition);
}

.blog-card:hover { border-color: var(--yellow); }

.blog-thumb {
  width:        100%;
  aspect-ratio: 16 / 9;
  background:   var(--bg-surface);
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    3rem;
  overflow:     hidden;
}

.blog-body { padding: 1.5rem; }

.blog-meta {
  display:       flex;
  gap:           1rem;
  margin-bottom: 1rem;
}

.blog-cat {
  font-family:    var(--font-cond);
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--yellow);
}

.blog-date {
  font-family:    var(--font-cond);
  font-size:      0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.blog-card h3 {
  font-family:    var(--font-cond);
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom:  0.75rem;
  color:          var(--text-primary);
  line-height:    1.4;
}

.blog-card p {
  font-size:     0.875rem;
  color:         var(--text-secondary);
  line-height:   1.6;
  margin-bottom: 1.5rem;
}

.blog-link {
  font-family:    var(--font-cond);
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--yellow);
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  transition:     gap var(--transition);
}

.blog-link:hover { gap: 0.75rem; }