/* ==========================================================================
   Research & academia project cards — the whole card is a link,
   with a vertical "Slides / Video / Read" label on the right.
   ========================================================================== */

.project-card {
    display: flex;
    margin-top: var(--space-md);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: 2px solid var(--accent);
    background: var(--accent-tint-1);
    overflow: hidden;
    transition: background var(--duration-fast) ease;
}
.project-card:hover {
    background: var(--accent-tint-3);
    text-shadow: none; /* don't inherit the global a:hover glow */
}
.project-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.project-card:hover .btn-read-vertical,
.project-card:focus-visible .btn-read-vertical {
    background: var(--accent);
    color: var(--text-on-accent);
}

.project-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--space-md) var(--space-md) var(--space-md) 1.2rem;
}
.project-type {
    font-family: var(--font-mono);
    font-size: var(--font-base);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    opacity: 0.75;
}
.project-title {
    font-size: 1.6rem;
    color: var(--text-main);
    line-height: 1.55;
}
.project-desc {
    font-size: var(--font-base);
    color: var(--text-dim);
    margin: 0;
    line-height: 1.5;
}

.btn-read-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.6rem;
    background: var(--accent-tint-2);
    border-left: 1px solid var(--accent-dim);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--font-tiny);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: all var(--duration-fast) ease;
}