/* Block: Portfolio */

.portfolio__grid {
    --grid-min: 320px;
}

.project {
    display:  flex;
    flex-direction: column;
    overflow: hidden;
    color:    var(--color-snow);
}

.project__thumb {
    position:     relative;
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    background:   linear-gradient(135deg, #001a2e, #003366);

    img {
        transition: transform var(--transition-slow);
    }
}

.project:hover .project__thumb img {
    transform: scale(1.04);
}

.project__badge {
    position:       absolute;
    top:            12px;
    left:           12px;
    padding:        5px 12px;
    border-radius:  var(--radius-pill);
    border:         1px solid rgb(255 255 255 / 14%);
    background:     rgb(0 0 0 / 55%);
    backdrop-filter: blur(6px);
    font:           var(--text-10pr);
    font-size:      8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          rgb(255 255 255 / 80%);
}

.project__body {
    padding: 18px 20px 22px;
}

.project__type {
    margin:         0 0 6px;
    font:           var(--text-13ir);
    font-size:      11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--color-grey);
}

.project__title {
    margin: 0 0 var(--space-md);
    font:   var(--text-20ob);
}

.project__visit {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    font:           var(--text-10pr);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-violet);
    transition:     color var(--transition-base), text-shadow var(--transition-base);

    .project:hover & {
        color:       var(--color-cyan);
        text-shadow: 0 0 8px rgb(0 191 255 / 70%);
    }
}