{{!-- 
  通用档案卡片组件
  功能：根据 primary_tag.slug="teacher-profile" 自动切换 Faculty(蓝) 或 Student(绿) 样式
--}}

<a href="{{url}}" class="group relative block bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 h-full flex flex-col">
    
    {{!-- 1. 图片区域 --}}
    <div class="aspect-[3/4] relative overflow-hidden bg-gray-50 flex-shrink-0">
        {{#if feature_image}}
            <img 
                src="{{img_url feature_image size="m"}}" 
                alt="{{title}}" 
                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                loading="lazy"
            />
        {{else}}
            {{!-- 无图时的占位图标 --}}
            <div class="w-full h-full flex items-center justify-center text-5xl opacity-20 bg-gray-200">
                {{#match primary_tag.slug "=" "teacher-profile"}}👨‍🏫{{else}}🎓{{/match}}
            </div>
        {{/if}}

        {{!-- 左上角悬浮身份标签 --}}
        <div class="absolute top-3 left-3 z-10">
            {{#match primary_tag.slug "=" "teacher-profile"}}
                <span class="px-2.5 py-1 bg-blue-600 text-white text-[10px] font-black rounded-lg shadow-md uppercase tracking-wider">Teacher</span>
            {{else}}
                <span class="px-2.5 py-1 bg-emerald-500 text-white text-[10px] font-black rounded-lg shadow-md uppercase tracking-wider">Student</span>
            {{/match}}
        </div>
    </div>

    {{!-- 2. 信息内容区域 --}}
    <div class="p-5 flex-1 flex flex-col {{#match primary_tag.slug "=" "teacher-profile"}}bg-slate-50/50{{else}}bg-white{{/match}}">
        
        {{!-- 姓名标题 --}}
        <div class="mb-2">
            <h4 class="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors truncate">
                {{title}}
            </h4>
        </div>

        {{!-- 摘要/头衔展示 --}}
        <div class="flex-1">
            {{#if custom_excerpt}}
                <p class="text-sm text-gray-500 line-clamp-2 italic leading-relaxed">
                    {{#match primary_tag.slug "=" "teacher-profile"}}
                        <span class="not-italic font-medium text-blue-600/70">Position:</span> 
                    {{else}}
                        “
                    {{/match}}
                    {{custom_excerpt}}
                    {{#match primary_tag.slug "!==" "teacher-profile"}}”{{/match}}
                </p>
            {{/if}}
        </div>

        {{!-- 底部元数据栏 --}}
        <div class="flex items-center justify-between mt-5 pt-4 border-t border-gray-100/80">
            {{!-- 分类/学科标签 --}}
            <span class="text-[11px] font-bold text-gray-400 flex items-center gap-2 uppercase tracking-tight">
                {{#if primary_tag}}
                    <span class="w-2 h-2 rounded-full {{#match primary_tag.slug "=" "teacher-profile"}}bg-blue-500 animate-pulse{{else}}bg-emerald-500{{/match}}"></span>
                    {{primary_tag.name}}
                {{else}}
                    <span class="w-2 h-2 rounded-full bg-gray-300"></span>
                    档案库
                {{/if}}
            </span>
            
            {{!-- 悬浮出现的动作提示 --}}
            <span class="text-[11px] text-blue-600 font-black opacity-0 group-hover:opacity-100 transition-all transform translate-x-2 group-hover:translate-x-0">
                PROFILE →
            </span>
        </div>
    </div>
</a>