<template>

    <article class="project-card">
        <div class="project-card__screenshot">
            <a :href="url" target="_blank" title=""></a>
            <img :src="screenshot">
        </div>
        <div class="project-card__content">
            <h3>{{ title }}</h3>
            <p>{{ description }}</p>
        </div>
    </article>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    defineProps({
        title: String,
        url: String,
        screenshot: String,
        description: String
    });

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .project-card {
        display: grid;
        place-items: start;

        &:nth-of-type(odd) {
            align-self: flex-start;
            grid-template-columns: [screenshot-start] 4fr [content-start] 1fr [screenshot-end] 2fr [content-end];
            text-align: end;
        }

        &:nth-of-type(even) {
            align-self: flex-end;
            grid-template-columns: [content-start] 2fr [screenshot-start] 1fr [content-end] 4fr [screenshot-end];
        }

        &__screenshot {
            grid-area: screenshot;
            position: relative;
            display: flex;
            
            a {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 10px;
                // background-color: var(--accent-color-transparent);
                // backdrop-filter: grayscale(100%) contrast(120%);
                backdrop-filter: brightness(90%);
                transition:
                    background-color 200ms ease-in-out,
                    backdrop-filter 200ms ease-in-out;

                &:hover,
                &:focus,
                &:active {
                    // background-color: transparent;
                    backdrop-filter: none;
                }
            }

            img {
                border-radius: 10px;
            }
        }

        &__content {
            grid-area: content;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            position: sticky;
            top: 0;

            p {
                padding: 1rem;
                color: var(--primary-color);
                background-color: var(--secondary-color-transparent);
                border-radius: 5px;
                backdrop-filter: blur(2px);
                box-shadow: var(--regular-box-shadow);
            }
        }
    }

</style>
