/* =============================================================
   Science Habitat — Card Components
   ============================================================= */

/* ─── Base Card ─── */
.sh-card {
  background: var(--sh-white);
  border: 1.5px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  padding: var(--sh-space-28, 28px);
  transition:
    box-shadow var(--sh-transition-base),
    border-color var(--sh-transition-base),
    transform var(--sh-transition-base);
}
.sh-card:hover {
  box-shadow: var(--sh-shadow-lg);
  border-color: var(--sh-teal);
  transform: translateY(-2px);
}

/* ─── Card Tag ─── */
.sh-card-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--sh-text-xs);
  font-weight: 600;
  font-family: var(--sh-font-mono);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.sh-tag--academic { background: var(--sh-teal-10);             color: var(--sh-teal);   }
.sh-tag--biotech  { background: rgba(255,107,53,0.1);          color: var(--sh-orange); }
.sh-tag--pharma   { background: rgba(10,30,58,0.08);           color: var(--sh-navy);   }
.sh-tag--service  { background: var(--sh-light);               color: var(--sh-muted);  }

/* ─── Audience Card (Homepage pathways) ─── */
.sh-audience-card {
  background: var(--sh-white);
  border: 1.5px solid var(--sh-border);
  border-radius: var(--sh-radius-xl);
  padding: 36px 28px;
  text-align: center;
  cursor: pointer;
  transition: all var(--sh-transition-base);
  position: relative;
  overflow: hidden;
}

.sh-audience-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sh-teal);
  transform: scaleX(0);
  transition: transform var(--sh-transition-slow);
  transform-origin: center;
}

.sh-audience-card:hover {
  border-color: var(--sh-teal);
  transform: translateY(-4px);
  box-shadow: var(--sh-shadow-lg);
}
.sh-audience-card:hover::after { transform: scaleX(1); }

.sh-audience-card__icon {
  width: 64px; height: 64px;
  border-radius: var(--sh-radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
}
.icon--academic  { background: var(--sh-teal-10); }
.icon--biotech   { background: rgba(255,107,53,0.1); }
.icon--pharma    { background: rgba(10,30,58,0.08); }

.sh-audience-card h3 { margin-bottom: 10px; font-size: 1.2rem; }
.sh-audience-card p  { font-size: 0.88rem; color: var(--sh-muted); margin-bottom: 20px; }

/* ─── Domain Panel ─── */
.sh-domain-panel {
  background: var(--sh-white);
  border-radius: var(--sh-radius-xl);
  border: 1.5px solid var(--sh-border);
  padding: var(--sh-space-40, 40px);
  position: relative;
  overflow: hidden;
}

.sh-domain-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
}

.sh-domain-panel--discovery::before {
  background: linear-gradient(90deg, var(--sh-teal), var(--sh-teal-light));
}
.sh-domain-panel--medcomm::before {
  background: linear-gradient(90deg, var(--sh-navy), #1d4a7a);
}

.sh-domain-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--sh-radius-pill);
  font-family: var(--sh-font-mono); font-size: var(--sh-text-xs);
  font-weight: 500; letter-spacing: 0.08em; margin-bottom: 16px;
}
.badge--discovery { background: var(--sh-teal-10); color: var(--sh-teal); }
.badge--medcomm   { background: rgba(10,30,58,0.06); color: var(--sh-navy); }

.sh-domain-panel p {
  font-size: 0.92rem;
  color: var(--sh-muted);
  margin-bottom: 24px;
  line-height: 1.7;
}

.sh-service-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.sh-service-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--sh-radius-sm);
  background: var(--sh-light); text-decoration: none;
  color: var(--sh-navy); font-size: 0.83rem; font-weight: 500;
  transition: all var(--sh-transition-fast);
}
.sh-service-link:hover { background: var(--sh-teal); color: var(--sh-white); }

.sh-turnaround {
  font-family: var(--sh-font-mono);
  font-size: 0.73rem; color: var(--sh-muted);
  display: flex; align-items: center; gap: 6px;
}
.sh-turnaround::before { content: '⏱'; }

/* ─── Testimonial Card ─── */
.sh-testimonial {
  background: var(--sh-white);
  border: 1.5px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  padding: 28px;
  position: relative;
}
.sh-testimonial::before {
  content: '\201C';
  font-family: var(--sh-font-display);
  font-size: 4rem;
  color: var(--sh-teal-10);
  position: absolute;
  top: 10px; left: 18px;
  line-height: 1;
}

.sh-testimonial__text {
  font-size: 0.92rem;
  color: var(--sh-text);
  line-height: 1.7;
  margin-bottom: 20px;
  padding-top: 20px;
}

.sh-testimonial__author {
  display: flex; align-items: center; gap: 12px;
}

.sh-avatar {
  width: 40px; height: 40px; border-radius: var(--sh-radius-full);
  background: linear-gradient(135deg, var(--sh-teal), var(--sh-navy));
  display: flex; align-items: center; justify-content: center;
  color: var(--sh-white); font-weight: 700; font-size: 0.85rem;
  flex-shrink: 0;
}

.sh-testimonial__name { font-weight: 600; font-size: 0.9rem; color: var(--sh-navy); }
.sh-testimonial__role { font-size: 0.78rem; color: var(--sh-muted); }

/* ─── Team Card ─── */
.sh-team-card {
  background: var(--sh-white);
  border: 1.5px solid var(--sh-border);
  border-radius: var(--sh-radius-xl);
  overflow: hidden;
  transition: all var(--sh-transition-base);
}
.sh-team-card:hover {
  box-shadow: var(--sh-shadow-lg);
  transform: translateY(-3px);
}

.sh-team-card__photo {
  background: linear-gradient(135deg, var(--sh-navy), var(--sh-teal));
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sh-font-display);
  font-size: 3rem; color: rgba(255,255,255,0.25);
}

.sh-team-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
}

.sh-team-card__body { padding: 24px; }
.sh-team-card__body h3 { margin-bottom: 4px; font-size: 1.2rem; }
.sh-team-role { color: var(--sh-teal); font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.sh-team-card__body p { font-size: 0.86rem; color: var(--sh-muted); line-height: 1.6; }

.sh-expertise-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
}
.sh-expertise-tag {
  background: var(--sh-light); color: var(--sh-navy);
  padding: 3px 9px; border-radius: 4px;
  font-size: var(--sh-text-xs); font-weight: 500;
}

/* ─── Partner Logo ─── */
.sh-partner-logo {
  background: var(--sh-light); border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-md); padding: 20px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; transition: all var(--sh-transition-fast);
  min-height: 80px;
}
.sh-partner-logo:hover { border-color: var(--sh-teal); background: var(--sh-teal-10); }
.sh-partner-logo span { font-weight: 700; font-size: 0.82rem; color: var(--sh-navy); }

/* ─── Case Study Card ─── */
.sh-case-study-card {
  background: var(--sh-white);
  border: 1.5px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  overflow: hidden;
  transition: all var(--sh-transition-base);
  cursor: pointer;
}
.sh-case-study-card:hover {
  box-shadow: var(--sh-shadow-lg);
  border-color: var(--sh-teal);
  transform: translateY(-2px);
}
.sh-case-study-card__img {
  height: 180px; background: var(--sh-light);
  display: flex; align-items: center; justify-content: center;
}
.sh-case-study-card__body { padding: 24px; }
.sh-case-study-card__summary { font-size: 0.87rem; color: var(--sh-muted); margin: 10px 0; }

/* ─── Engagement Model ─── */
.sh-engagement {
  background: var(--sh-light); border-radius: var(--sh-radius-lg);
  padding: 28px; border-top: 3px solid var(--sh-teal);
}
.sh-engagement h4 { margin-bottom: 10px; }
.sh-engagement > p { font-size: 0.88rem; color: var(--sh-muted); margin-bottom: 16px; }
.sh-engagement ul { list-style: none; }
.sh-engagement ul li {
  padding: 5px 0; font-size: 0.85rem;
  display: flex; align-items: flex-start; gap: 8px;
}
.sh-engagement ul li::before {
  content: '◆'; color: var(--sh-teal);
  font-size: 0.5rem; margin-top: 6px; flex-shrink: 0;
}

/* ─── Differentiator ─── */
.sh-differentiator {
  background: var(--sh-white); border: 1.5px solid var(--sh-border);
  border-radius: var(--sh-radius-lg); padding: 32px;
  display: flex; gap: 20px;
}
.sh-diff-num {
  font-family: var(--sh-font-display); font-size: 3rem;
  color: var(--sh-light); line-height: 1; flex-shrink: 0; min-width: 60px;
}
.sh-diff-content h4 { margin-bottom: 10px; }
.sh-diff-content p  { font-size: 0.9rem; color: var(--sh-muted); line-height: 1.7; }