/* =================================================================
   CARD COMPONENT
   ================================================================= */

.card {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

.card--wide {
    grid-column: span 2;
}

.card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.2;
    background: var(--bg-card-image);
    border-radius: var(--card-image-radius);
    overflow: hidden;
}

.card__image:has(> img),
.card__image:has(> video),
.card__image:has(> .project-main-media) {
    background: transparent;
}

.card--wide .card__image {
    aspect-ratio: 16 / 9;
}

.card__image img,
.card__image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}

.card__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.card__tag {
    display: inline-flex;
    align-items: center;
    height: fit-content;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    padding: 4px 6px 3px;
    border-radius: 4px;
    background: var(--tag-bg);
    color: var(--tag-text);
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.2s ease, background 0.2s ease;
    cursor: pointer;
    min-width: 24px;
    outline: none;
}

.card__tag:not(:empty) {
    opacity: 0;
}

.card:hover .card__tag:not(:empty) {
    opacity: 1;
}

.card__tag--skill {
    background: var(--tag-skill-bg);
    color: var(--tag-skill-text);
}

.card__tag--project {
    background: var(--tag-project-bg);
    color: var(--tag-project-text);
}

.card__tag--personal {
    background: var(--tag-personal-bg);
    color: var(--tag-personal-text);
}

.card__tag--experience {
    background: var(--tag-experience-bg);
    color: var(--tag-experience-text);
}

.card__tag--experiment {
    background: var(--tag-experiment-bg);
    color: var(--tag-experiment-text);
}

.card__tag--case-study {
    background: var(--tag-case-study-bg);
    color: var(--tag-case-study-text);
}

.card__description {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
}

.card__description a {
    color: var(--link-color);
    text-decoration-color: var(--link-color);
}

.card__description a:hover {
    color: var(--link-hover);
}

.card__link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--link-color);
    text-decoration: none;
    align-self: flex-start;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.card__link::after {
    content: "\2192";
    margin-left: 0.2em;
    transition: margin-left 0.2s ease;
}

.card__link:hover {
    color: var(--link-hover);
    text-decoration: none;
}

.card__link:hover::after,
.card__link:focus-visible::after {
    margin-left: 0.38em;
}

@media (max-width: 1024px) {
    .card--wide {
        grid-column: auto;
    }

    .card__tag:not(:empty) {
        opacity: 1 !important;
    }

    .card__tag {
        font-size: 14px;
    }
}