@layer compositions, blocks, utilities, exceptions;

@layer compositions {
    .c-project-index {       
        display: grid;
        gap: 1rem var(--block-unit);

        @media (min-width: 1366px) {
            grid-template-rows: auto 1fr;
            grid-template-columns: 1fr 4fr;

            & > *:first-child {
                grid-row: span 2;
            }

            &:has(*:nth-child(4)) {
                grid-template-rows: auto auto 1fr;

                & > *:first-child {
                    grid-row: span 3;
                }
            }
        }
    }

    .c-project-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
    }
}

@layer blocks {
    .checkboxes, .checkboxes div {
        display: flex;
        flex-wrap: wrap;
        gap: .25em;
        font-size: .875rem; /* REVISAR */
    }

    .checkboxes { /* REVISAR */
        user-select: none;

        span {
            label {
                display: inline-block;
                padding: .5em;
                line-height: 1;
                text-box: trim-both cap alphabetic;
                border: 1px solid hsl(0 1% 7% / .125);
                border-radius: .25em;
            }

            input:checked {
                + label {
                    color: var(--white);
                    background-color: var(--blue);
                }
            }
        }

        details {
            display: block;
            width: 100%;

            summary {
                display: flex;
                align-items: center;
                gap: .5em;
                margin-block: .25em .5em;
                padding-inline: .5em;
                font-weight: 500;
                cursor: pointer;

                span {
                    color: var(--gray);
    
                    &:first-child {
                        display: inline;
                    }

                    &:last-child {
                        display: none;
                    }
                }

                &:after {
                    flex: 1;
                    content: '';
                    display: block;
                    margin-block-end: -0.5cap;
                    height: 0;
                    border-block-start: 1px dotted hsl(0 1% 7% / .25);
                }

                &::marker {
                    content: '';
                    display: none;
                }
            }

                &[open] {

                    summary {
                        span {
                            color: hsl(9, 100%, 42%);

                            &:first-child {
                                display: none;
                            }

                            &:last-child {
                                display: inline;
                            }
                        }

                        &:after {
                            border-block-start: 1px dotted hsl(9, 92%, 65%);
                        }
                    }
                }
        }
    }

    .project-filters {
        @media (max-width: 1365px) {
            padding: 1rem;
            background-color: var(--white);
        }
    }

    .range {
        width: 100%;

        [data-track-fill], [data-thumb] {
            background-color: var(--blue);
        }
        
        [data-thumb] {
            margin-inline-start: calc(var(--thumb-size) / 2 * -1);
        }

        & + output {
            display: block;
            text-align: center;
            font-size: .875rem; /* REVISAR */
            font-weight: 500;
            color: var(--gray);
        }
    }


    .project-legacy { /* REVISAR */
        display: inline-flex;
        align-items: center;
        gap: .5em;
        padding: .5em;
        line-height: 1;
        text-box: trim-both cap alphabetic;
        text-decoration: none;
        font-size: .875rem;
        color: hsl(9, 100%, 42%);
        border-radius: .25em;
        border: 1px solid hsl(9, 92%, 65%);
        transition: color .5s, border .5s;

        &:hover, &:active {
            color: var(--black);
            border: 1px solid var(--black);
        }
    }















    .project-gallery {
        width: 100%;
        height: auto;
        aspect-ratio: 32 / 9;
        border-radius: var(--border-radius);
        overflow: hidden;

        a {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;

            picture {
                position: absolute;
                width: 100%;
                height: 100%;
                transition: transform .5s;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            &:hover, &:active {
                picture {
                    transform: scale(1.1);
                }
            }
        }
    }

    .project-video + .project-gallery  {
        aspect-ratio: 16 / 9;
    }

    .project-details {
        dt {
            font-weight: 500;
            font-size: 1rem;
            color: var(--gray);
        }

        dd {
            font-size: 1.25rem;
        }
    }

    .project-badges {
        .badge {
            font-size: 1rem;
        }
    }

    .project-title {
        line-height: 1.2;
        text-wrap: balance;
        font-family: 'Stag', serif;
        font-weight: 500;
        font-size: 2.5rem;
    }

    .project-video {
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    .project-media {
        margin-block-end: var(--block-unit);
    }
}

@layer exceptions {

}