// ==========================================================================
// Project Card component
// Full-bleed photo card: bottom gradient, up to two tag badges + title
// sitting inside the image, small two-line mark bottom-left.
// Used on the homepage (mountain sections) and the projects list page.
// See templates/components/_project-card.html.twig.
// ==========================================================================

@use '../base/variables' as *;

.project-card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    container-type: inline-size;
    flex: 0 0 auto;
    height: clamp(220px, 68%, 620px);
    aspect-ratio: 3 / 2;
    transition: opacity 0.3s ease, transform 0.3s ease;

    &::before,
    &::after {
        content: '';
        position: absolute;
        left: 0;
        background: color-mix(in srgb, $color-neutral 60%, transparent);
        transition: height 0.4s ease, width 0.4s ease;
    }

    &::before {
        left: -4%;
        top: 50%;
        width: 1px;
        height: 60%;
    }

    &::after {
        left: calc(-4% * 2);
        bottom: -4%;
        width: 40%;
        height: 1px;
    }

    &__image {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: color-mix(in srgb, $color-light 8%, transparent);
    }

    &__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    &:hover {

        &::after {
            width: 60%;
        }

        .project-card__img {
            transform: scale(1.04);
        }
    }

    // Bottom gradient so the badges/title stay legible over any photo
    &__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top, color-mix(in srgb, $color-dark 65%, transparent) 0%, color-mix(in srgb, $color-dark 10%, transparent) 45%, transparent 70%);
    }

    // Badges + title sit inside the image, bottom-aligned
    &__info {
        position: absolute;
        z-index: 2;
        left: $spacing-sm;
        right: $spacing-sm;
        bottom: $spacing-sm;
    }

    &__badges {
        display: flex;
        gap: $spacing-xs;
        margin-bottom: $spacing-xs;
    }

    &__title {
        font-family: $font-family-serif;
        font-weight: 400;
        font-size: $font-size-h3;
        line-height: 1.3;
        color: $color-neutral;
        margin: 0;
        max-width: 20ch;
    }

    &__subtitle {
        font-family: $font-family-sans;
        font-weight: 700;
        font-style: bold;
        font-size: $font-size-lg;
        line-height: 160%;
        letter-spacing: 0%;
        color: $color-neutral;
    }

    // Filter fade-out (ProjectsListFilter): opacity/scale transition plays
    // first, then .is-hidden (display:none) is added once it's done so the
    // grid collapses the freed space.
    &.is-hiding {
        opacity: 0;
        transform: scale(0.95);
        pointer-events: none;
    }

    &.is-hidden {
        display: none;
    }
}