﻿/**前端，外部查看*/

.doctors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.5rem; }

/* 咨询师卡片 - 包含头像、名称、专业领域等信息 */
.doctor-card { background: rgb(245 245 245 / 35%); border: 1px solid #e5e5e5; border-radius: 10px; padding: 2.5rem 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }

.doctor-card:hover { /* 咨询师卡片悬停效果 - 轻微上浮并增强阴影 */ transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }

.doctor-avatar { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow:hidden;background-color:#eee;}
.doctor-avatar i { font-size: 2.2rem; }
.doctor-avatar img { width:80px;height:80px;}

.doctor-blue { background-color: #E8F0FE; }
.doctor-blue i { color: #4285F4; }

.doctor-green { background-color: #E6F4EA; }
.doctor-green i { color: #0F9D58; }

.doctor-orange { background-color: #FEF7E0; }
.doctor-orange i { color: #F4B400; }

.doctor-purple { background-color: #F3E8FF; }
.doctor-purple i { color: #8E24AA; }

.doctor-red { background-color: #FEE; }
.doctor-red i { color: #DB4437; }

.doctor-teal { background-color: #E0F2F1; }
.doctor-teal i { color: #00897B; }

.doctor-name { font-size: 1.5rem; margin-bottom: 0.5rem; color: #333333; }
.doctor-title { font-size: 1rem; color: #666666; margin-bottom: 1.2rem; font-weight: 400; }
.doctor-bio { color: #555555; line-height: 1.6; margin-bottom: 1.5rem; font-size: 0.95rem; }



.doctor-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }


.doctor-rating { color: #F4B400; margin-bottom: 1.5rem; font-size: 0.9rem; display: flex; align-items: center; }
.doctor-rating i { margin-right: 0.3rem; }



/* 星级心理咨询师区域 */
.star-counselors-section { padding: 4rem 0; background-color: #ffffff; }

/* 最新入驻心理咨询师区域 */
.latest-counselors-section { padding: 4rem 0; background-color: var(--neutral-50); }

/* 星级咨询师卡片样式 */
.star-counselor { border: 2px solid #FFD700; position: relative; }

.star-counselor::before { content: '★ 星级咨询师'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: #FFD700; color: #333; padding: 2px 10px; border-radius: 10px; font-size: 0.8rem; font-weight: bold; }

.star-rating { color: #FFD700; margin-bottom: 1rem; font-size: 1.2rem; }

/* 最新入驻咨询师列表 */
.latest-counselors-list { display: flex; flex-direction: column; gap: 2rem; }
.latest-counselor-item { display: flex; align-items: center; background: #ffffff; border-radius: var(--card-border-radius); padding: 1.75rem; box-shadow: var(--card-shadow); transition: var(--transition-custom); border: 1px solid var(--neutral-200); }
.latest-counselor-item:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); border-color: var(--primary-light); }

.counselor-info { flex: 1; margin: 0 1.5rem; display: flex; /* flex-direction: row;    flex-wrap: wrap; */ align-items: center; gap: 1.5rem; }
.counselor-info h3 { font-weight: 600; margin-bottom: 0; color: var(--neutral-800); flex: 0 0 auto; }
.counselor-info p { color: var(--neutral-600); margin-bottom: 0; line-height: 1.5; flex: 0 0 auto; }
.counselor-info .doctor-tags { flex-basis: 100%; margin-bottom: 0; }
.counselor-info .join-date { margin-left: auto; }

.latest-counselor-item .doctor-avatar { width: 90px; height: 90px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);overflow:hidden; }
.latest-counselor-item .doctor-avatar img { width: 90px; height: 90px; }

@media (max-width: 768px) { .doctors-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 768px) {
    .latest-counselor-item { flex-direction: column; align-items: flex-start; }
    .counselor-info { margin: 1rem 0 0 0; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .join-date { margin-top: 0.5rem; }
}
