/* project-card.css — Project article cards */

.project {
    border: 1px solid var(--rule); border-radius: 16px;
    background: var(--white); margin-bottom: 32px; overflow: hidden;
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
                box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.project.visible { opacity: 1; transform: translateY(0); }

@media (hover: hover) {
    .project:hover {
        box-shadow: 0 16px 48px rgba(26, 26, 24, 0.08);
        border-color: rgba(26, 26, 24, 0.15);
    }
}

.project-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px; border-bottom: 1px solid var(--rule);
    background: var(--surface);
}
.project-bar-left { display: flex; align-items: center; gap: 16px; }

.project-idx {
    font-family: var(--font-mono); font-size: 0.6875rem;
    color: var(--muted); letter-spacing: 0.04em;
}

.project-logo-small { height: 24px; width: auto; display: block; object-fit: contain; }
.project-logo-small.logo-lg { height: 36px; }
.project-logo-small.logo-xl { height: 47px; }
.project-logo-small.logo-2xl { height: 60px; }

.project-name {
    font-size: 0.9375rem; font-weight: 700;
    color: var(--ink); letter-spacing: -0.01em;
}

.project-body { display: grid; grid-template-columns: 1fr 300px; gap: 0; }
.project-info { padding: 32px 28px 28px; }

.project-tagline {
    font-family: var(--font-display); font-size: 1.375rem;
    line-height: 1.4; color: var(--ink);
    font-weight: 400; margin-bottom: 8px;
}

.project-desc {
    font-size: 0.875rem; color: var(--mid); line-height: 1.65;
    max-width: 48ch; margin-bottom: 24px;
}

.project-metrics { display: flex; gap: 32px; margin-bottom: 24px; }
.metric { display: flex; flex-direction: column; gap: 2px; }

.metric-val {
    font-family: var(--font-mono); font-size: 1.125rem;
    font-weight: 500; color: var(--ink);
}

.metric-key {
    font-family: var(--font-mono); font-size: 0.625rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

.project-actions { display: flex; gap: 10px; }

@media (max-width: 900px) {
    .project-body { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .project-bar { padding: 12px 20px; flex-wrap: wrap; gap: 8px; }
    .project-info { padding: 24px 20px 20px; }
    .project-metrics { gap: 20px; flex-wrap: wrap; }
    .project-actions { flex-direction: column; }
}