/* About history section: reusable tags, project items, and focus cards. */

.history-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #d1fae5;
    border-radius: 9999px;
    background: #f0fdf4;
    color: #047857;
    font-size: 0.75rem;
    font-weight: 600;
}

.history-project {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.history-project i {
    color: #059669;
    font-size: 1rem;
}

.history-project:hover {
    transform: translateY(-3px);
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.history-focus {
    display: flex;
    min-height: 90px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.history-focus i {
    color: #059669;
    font-size: 1.25rem;
}

.history-focus:hover {
    transform: translateY(-4px);
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #064e3b;
}