/* Project cards – a three-up grid of photo cards. */

.project-grid {
    display: grid;
    gap: var(--space-lg) var(--space-md);
    grid-template-columns: 1fr;

    @media (min-width: 700px) { grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 1100px) { grid-template-columns: repeat(3, 1fr); }
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    &[hidden] { display: none; }

    /* Shown by the Projects filter. */
    &.is-entering { animation: dg-card-in var(--transition-base) both; }
}

@keyframes dg-card-in {
    from { opacity: 0; transform: translateY(12px); }
}

.project-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-stone);

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
    }

    .project-card:hover & img { transform: scale(1.045); }
}

.project-card__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--color-putty);

    & .icon { width: 64px; height: 64px; }
}

.project-card__body {
    display: grid;
    gap: var(--space-xs);
}

.project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: center;
    margin: 0;
    font: var(--text-12as);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-slate);
}

.project-card__type { color: var(--color-cedar); }

.project-card__place {
    display: inline-flex;
    gap: 4px;
    align-items: center;

    & .icon { width: 14px; height: 14px; }
}

.project-card__title {
    margin: 0;
    font: var(--text-24gm);
    color: var(--color-graphite);
    text-wrap: balance;
}

.project-card__link {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size var(--transition-base);

    .project-card:hover & { background-size: 100% 1.5px; }

    &::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    &:focus-visible { outline: none; }
    &:focus-visible::after {
        outline: 3px solid var(--color-cedar);
        outline-offset: 4px;
        border-radius: var(--radius-md);
    }
}