/**
 * Image Card Component (1:1 with Figma)
 * Desktop: 96x96 image, 96px width
 * Mobile: 64x64 image, 64px width
 * Gap: 7px
 */

.image-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
    width: 96px;
}

/* Ссылка-обёртка для image-card (например, на внешний проект) */
.image-card-link {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.image-card-link .image-card__label {
    color: var(--color-accent);
    transition: color 0.5s ease, text-decoration-color 0.5s ease;
}

/* Hover — как у ссылок: зелёный + подчёркивание subaccent-a30 */
.image-card-link:hover .image-card__label {
    color: var(--color-subaccent);
    text-decoration-line: underline;
    text-decoration-color: var(--color-subaccent-a30);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0s ease, text-decoration-color 0s ease;
}

.image-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background-color: var(--color-card);
    border: 1px solid var(--color-border-a8);
    flex-shrink: 0;
    overflow: hidden;
}

.image-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Без фона и обводки — только картинка (иконки-ссылки) */
.image-card--no-frame .image-card__image {
    background: transparent;
    border: none;
}

.image-card__label {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body-4-desktop); /* Figma: body-4 = 14px */
    font-weight: 300;
    line-height: var(--line-height-body-4-desktop); /* 120% */
    color: var(--color-content-a40);
    width: 100%;
    white-space: pre-wrap;
}

/* On hover, brighten label text to main content color */
.image-card:hover .image-card__label,
.image-card-link:hover .image-card__label {
    color: var(--color-content);
}

@media (max-width: 768px) {
    .image-card {
        width: 64px;
    }

    /* В Projects: ширина = 1.5 колонки (ячейка 2 колонки) */
    .home-projects__item--img .image-card {
        width: calc((100% - var(--grid-gap)) * 1.5 / 2);
        flex-shrink: 0;
    }

    .image-card__label {
        font-size: var(--font-size-body-4-mobile);
        line-height: var(--line-height-body-4-mobile); /* 120% */
    }
}