/* Elements */

main > section {
    container-name: section;

    > header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;

        .action-buttons {
            flex-shrink: 0;
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        @container (width < 50rem) {
            flex-direction: column;
            align-items: start;

            .action-buttons {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.5rem;
                margin: 1rem 0;

                a {
                    flex-grow: 1;
                    flex-shrink: 1;
                    width: auto;

                    &.cta-button, &.secondary-button, &.danger-button {
                        justify-content: center;
                    }
                }
            }

        }
    }
}

*:has(> .card), *:has(> .card-middle), *:has(> .card-top) {
    container-name: card-container;
}

.card, .card-middle, .card-top {
    padding: 1.3rem 2rem;
    border-radius: 1rem;
    corner-shape: squircle;

    &.card-middle {
        background-color: var(--color-bg-middle);
    }

    &.card-top {
        background-color: var(--color-bg-top);
    }

    @container (width < 40rem) {
        padding: 1.3rem 0.5rem;
    }
}


/* Dashboard */

#dashboard {

    .recipe-preview {


    }

}

/* Login */
section.login {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;

    @container (width > 45rem) {
        grid-template-columns: 1fr 1fr;
    }
}

/* Recipe detail */

#recipe-detail {

    .cover-and-ingredients {
        background-color: var(--color-bg-top);
        border-radius: 0 0 1rem 1rem; /* Only bottom corners rounded */
        corner-shape: squircle;
    }

    .cover-image {
        width: 100%;
        height: auto;
        filter: saturate(1.5);
    }

    .ingredients {
        container-name: ingredients;
        background-color: var(--color-bg-top);
        border-radius: 1rem;
        corner-shape: squircle;
        min-height: 4rem;
        padding: 2rem 0;

        ul {
            display: grid;
            grid-template-columns: repeat(3, auto auto 1fr);
            padding: 0;
            list-style: none;
            margin-bottom: 3rem;
            font-size: 1.1rem;


            li {
                display: grid;
                grid-template-columns: subgrid;
                align-items: baseline;

                &:nth-child(3n + 1) {
                    grid-column: 1 / 4;
                }

                &:nth-child(3n + 2) {
                    grid-column: 4 / 7;
                }

                &:nth-child(3n + 3) {
                    grid-column: 7 / 10;
                }

                span {
                    padding: 0.3rem 0.1rem;

                    &.amount {
                        font-weight: bold;
                        text-align: right;
                    }

                    &.unit {
                        font-weight: bold;
                        font-size: 0.7em;
                    }

                    &.ingredient {
                        margin-left: 1rem;
                    }
                }
            }

            @container (width < 50rem) {
                grid-template-columns: repeat(2, auto auto 1fr);

                li {
                    &:nth-child(odd) {
                        grid-column: 1/4;
                    }

                    &:nth-child(even) {
                        grid-column: 4/7;
                    }
                }
            }

            @container (width < 40rem) {
                grid-template-columns: auto auto 1fr;

                li:nth-child(odd), li:nth-child(even) {
                    grid-column: 1/4;
                }
            }
        }
    }

    .steps {
        font-size: 1.1rem;
    }

    .other-actions {
        margin-top: 5rem;

        h2 {
            font-size: 0.8rem;
        }

        dl {
            font-size: 0.8rem;
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: 1rem;
            row-gap: 1.3rem;
            align-items: center;
            margin-bottom: 1rem;

            dt {
                font-weight: bold;

                &:after {
                    content: ":";
                }
            }

            dd.keywords ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.3rem;

                list-style: none;
                padding: 0;

                li:not(:last-child):after {
                    content: ","
                }
            }

            dd.source a {
                word-break: break-all;
            }
        }

        .action-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 3rem;
            border-radius: 100%;
            color: var(--color-primary-dark);
            aspect-ratio: 1 / 1;
            text-decoration: none;

            &:hover {
                color: var(--color-text-light);
                background-color: var(--color-primary);
            }
        }
    }

}