/* cards.css — card frame, accent bar, image hover lift, tile variants. */

/* ─── Cards ────────────────────────────────────────────────────── */
.card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    color: inherit;
    position: relative;
    /* Spring-out easing on transform gives the hover lift a touch of
       overshoot — feels alive without being noisy. Other props keep
       the smooth standard ease. */
    transition: border-color var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease),
                transform var(--duration-base) var(--ease-spring);
    overflow: hidden;
    min-height: 100%;
}
/* Accent bar — appears on hover, slides in from the left */
.card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-green);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--duration-base) var(--ease);
}
.card:hover, .card:focus-visible {
    border-color: var(--color-green);
    /* Layered hover shadow — close ambient + soft brand-tinted halo.
       The two-tier elevation reads as "lifted off the page" rather
       than the flatter single-shadow look. */
    box-shadow:
        0 1px 2px rgba(24, 32, 26, .06),
        0 12px 28px -8px color-mix(in srgb, var(--color-green) 22%, transparent);
    text-decoration: none;
    transform: translateY(-3px);
}
.card:hover::before, .card:focus-visible::before {
    transform: scaleY(1);
}
/* Image inside a card lifts saturation + scales slightly on hover —
   subtle "look at me" without breaking the card's clean rectangle. */
.card img {
    transition: transform var(--duration-slow) var(--ease),
                filter var(--duration-base) var(--ease);
    will-change: transform;
}
.card:hover img, .card:focus-visible img {
    transform: scale(1.025);
    filter: saturate(1.08);
}
@media (prefers-reduced-motion: reduce) {
    .card:hover img, .card:focus-visible img { transform: none; }
}
/* Don't draw the accent bar on cards-as-tiles where it would distract
   (e.g. category cards already use the image as the visual anchor). */
.card--no-accent::before { display: none; }
.card h2, .card h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg);
}
.card p {
    color: var(--color-muted);
    margin-bottom: 0;
}
.card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    background: var(--color-bg-tint);
}
.card__brand {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin-bottom: var(--space-2);
}
.card__specs {
    margin-top: var(--space-3);
    padding-left: var(--space-4);
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

.card--project {
    border-left: 4px solid var(--color-green);
}
.card--project .project-meta {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
    font-size: var(--fs-sm);
    color: var(--color-muted);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
}
.card--project .project-meta dt { font-weight: var(--fw-semibold); }
.card--project .project-meta dd { margin: 0; }