@layer page {
    header:has(#header-menu-toggle:not(:checked)) .logo {
        visibility: hidden;
    }

    section {
        position: relative;

        width: 100%;
        min-height: calc(100vh - 6rem);

        &:last-of-type {
            min-height: calc(100vh - 10rem);
        }

        /* display: flex;
        flex-direction: column;
        align-items: center; */

        & {
            display: grid;
            grid-auto-flow: row;
            justify-items: center;
            align-content: start;

            gap: 2rem;

            scroll-snap-align: start;
        }

        & > .title {
            font-size: 48px;
            padding-top: 4rem;

            @media screen and (max-width: /* $screen-desktop-min */ 1024px) {
                padding-top: 2rem;
            }
        }
    }

    .zig-zag {
        z-index: 5;

        position: absolute;
        width: 100%;

        display: flex;

        &:first-child {
            bottom: 100%;
        }
    }

    section.principal {
        z-index: 2;

        min-height: calc(100vh - 7rem);

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        align-items: center;
        place-content: center;

        gap: 4rem;

        padding: 3rem 2rem 6rem;

        background: var(--homepage-principal-bg);

        position: relative;

        .circuit-layer {
            pointer-events: none;

            z-index: 1;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

            canvas {
                width: 100%;
                height: 100%;
            }
        }

        & > .logo {
            z-index: 2;

            width: 32rem;

            position: relative;

            user-select: none;

            img {
                width: 100%;
                /* filter: drop-shadow(6px 6px 0 var(--palette-black))
                drop-shadow(4px 0 0 var(--palette-black)) drop-shadow(0 4px 0 var(--palette-black))
                drop-shadow(-4px 0 0 var(--palette-black)) drop-shadow(0 -4px 0 var(--palette-black)); */
            }

            max-width: calc(100vw - 3rem);
            @media screen and (max-width: /* $screen-desktop-min */ 1024px) {
            }
        }

        & > .whats-phc {
            z-index: 2;
            background: #e4c5ff;

            --zone-color: color-mix(in lab, #e4c5ff, #000 75%);

            max-width: 37rem;

            .title {
                text-align: center;
            }

            a {
                text-decoration: underline 2px solid;

                &:hover {
                    --zone-color: color-mix(in lab, #e4c5ff, #000 60%);
                }
            }

            span.highlighted {
                background: color-mix(in lab, #e4c5ff, #000 10%);
                cursor: default;
                border-radius: 0.25rem;
                padding: 0.125rem 0.25rem;
            }
        }
    }

    section.news {
        --card-base: color-mix(in lab, var(--news-base), #fff 25%);
        --zone-color: color-mix(in lab, var(--news-base), #000 50%);

        background: var(--homepage-news-bg);

        gap: 3rem;

        padding-bottom: 6rem;

        & > .news-list {
            display: flex;
            flex-direction: row;
            gap: 3rem;

            align-items: flex-start;

            padding: 0 3rem;

            justify-content: center;
            flex-wrap: wrap;
        }

        [role='button'] {
            padding: 0.5rem 2rem;

            &.primary {
                background: #ffdd6e;
                color: #000d;
            }
        }
    }

    section.projects {
        background: var(--homepage-projects-bg);

        padding-bottom: 6rem;

        .project-list {
            /* width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2);
        max-width: calc(100vw - 2rem); */ /* HACK: capire come si propagano le width per bene */

            max-width: calc(20rem * 3 + 1.5rem * 2 + 1rem * 2);

            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
            grid-auto-flow: dense;

            gap: 1.5rem;
            padding: 0 1rem;

            & > * {
                grid-row: span var(--masonry-height);
            }

            .project {
                width: 100%;
                height: 100%;

                /* background: #fcddff;
            background: #ffa89c; */
                background: var(--card-bg, var(--project-card-bg));
                color: var(--card-fg, #000e);

                /* @include neo-brutalist-card($size: 3px, $offset: 9px); */
                border: 3px solid #222;
                border-radius: 6px;
                box-shadow: 9px 9px 0 0 #222;

                padding: 1rem;

                display: grid;
                grid-template-columns: auto 1fr;
                grid-template-rows: auto 1fr;

                gap: 0.25rem 1rem;

                transition: all 128ms ease-out;

                .title {
                    font-size: 32px;

                    @media screen and (max-width: /* $screen-desktop-min */ 1024px) {
                        font-size: 24px;
                    }
                }

                .image {
                    grid-row: span 2;
                    /* place-self: center; */

                    .box {
                        background: #0003;
                        border: 3px solid #0006;
                        border-radius: 6px;
                        width: 4rem;
                        height: 4rem;
                    }

                    img {
                        object-fit: cover;
                        width: 4rem;
                    }

                    /* &.auto {
                    img {
                        width: auto;
                        height: auto;
                    }
                } */
                }

                .description {
                    font-size: 16px;
                }

                &:hover {
                    transform: translate(0, -4px);
                    box-shadow: 9px 13px 0 0 #222;
                }
            }

            @media screen and (max-width: /* $screen-desktop-min */ 1024px) {
                padding: 0 1rem;

                grid-template-columns: 1fr;

                .project {
                    padding: 0.8rem;
                }
            }
        }
    }

    section.wanna-be-macchinista {
        background: var(--homepage-macchinisti-bg);
        color: #fdfdfd;

        padding-bottom: 6rem;

        .card {
            max-width: 40rem;
        }

        /* .content {
            /* @extend .text; 
            /* Placeholder: Assuming .text is a class with common text styles, you might want to define those styles directly here or in a separate CSS rule. 
        } */
    }

    @media screen and (max-width: /* $screen-desktop-min */ 1024px) {
        main {
            padding: 0 !important;
        }

        section.principal {
            padding: 3rem 0 6rem;

            .whats-phc {
                padding: 1.5rem;

                margin: 0 1rem;
            }

            #mobile-whats-phc-read-more {
                &:checked ~ .text {
                    max-height: 7lh;
                    overflow: hidden;

                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        height: 3lh;

                        background: linear-gradient(to bottom, transparent, #e4c5ff);
                    }
                }

                &:not(:checked) ~ * .button span:nth-child(1) {
                    display: none;
                }
                &:checked ~ * .button span:nth-child(2) {
                    display: none;
                }
            }
        }

        section.news {
            & > .news-list {
                padding: 0 1rem;
            }
        }

        section.projects {
            .project-list {
                padding: 0 1rem;
            }
        }

        section.wanna-be-macchinista {
            .content {
                padding: 0 1rem;
            }
        }

        section {
            padding: 1rem 1rem 4rem;
        }
    }
}