/**
 * Team Member Page Styles
 * Social media buttons and layout
 */

/* Social Media Buttons */
.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  color: white;
}

.social-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.social-button--facebook {
  background-color: #1877f2;
}

.social-button--facebook:hover {
  background-color: #0c63d4;
}

.social-button--twitter {
  background-color: #1da1f2;
}

.social-button--twitter:hover {
  background-color: #0d8bd9;
}

.social-button--linkedin {
  background-color: #0a66c2;
}

.social-button--linkedin:hover {
  background-color: #004182;
}

.social-button--youtube {
  background-color: #ff0000;
}

.social-button--youtube:hover {
  background-color: #cc0000;
}

/* Team Member Grid Layout */
.team-member-full {
  /* Inherits from design-system.css utilities */
}

.team-member-full .grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .team-member-full .grid {
    grid-template-columns: 280px 1fr;
  }
}

/* 3:4 Aspect Ratio for Portrait Photos */
.aspect-\\[3\\/4\\] {
  aspect-ratio: 3 / 4;
}

/* =====================================================
   RECENT ARTICLES BY AUTHOR - Card Grid
   ===================================================== */

/* View container - single column layout */
.team-member-full .view-author-articles .view-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  max-width: 800px !important;
}

/* Article Card Wrapper - Updated for new card template */
.team-member-full .article-card {
  height: 100% !important;
}

.team-member-full .article-card .news-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
}

.team-member-full .article-card:hover .news-card {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Image container - consistent 200px height */
.team-member-full .article-card .dest-card-image {
  height: 200px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.team-member-full .article-card .dest-card-image img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Content area - flex grow to fill space */
.team-member-full .article-card .p-6 {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Excerpt text - limit to 3 lines */
.team-member-full .article-card .excerpt-text p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 !important;
}

/* Read More button - push to bottom */
.team-member-full .article-card .p-6 > a:last-child {
  margin-top: auto !important;
}

/* Section title styling */
.team-member-full h2.font-display {
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  color: #1a202c !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 3px solid #0c7e52 !important;
}

/* =====================================================
   CONTACT BUTTON - mailto button styling
   ===================================================== */
.team-member-full .mailto-button,
a.mailto-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #0c7e52 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  font-family: inherit !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(12, 126, 82, 0.25) !important;
}

.team-member-full .mailto-button:hover,
a.mailto-button:hover {
  background: linear-gradient(135deg, #0a6b45 0%, #047857 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(12, 126, 82, 0.35) !important;
  color: #ffffff !important;
}

/* Add email icon before button text */
.team-member-full .mailto-button::before,
a.mailto-button::before {
  content: "\2709" !important; /* Envelope symbol */
  font-size: 1.5em !important;
}

/* Reduce bottom padding on team member page */
.team-member-full {
  padding-bottom: 2rem !important;
}

.team-member-full .view-author-articles {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}