@import url("/assets/stylesheets/base.css");

header#infos-pratiques {
    color-scheme: only dark;
    background:
        var(--picture-gradient),
        url("/assets/couverture-formules.jpeg") center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    h1 {
        font-size: 3rem;
        margin: 0;
    }
    p {
        font-size: 1.5rem;
        margin: 0;
        color: var(--on-background-strong);
    }
}

main {
    section {
        display: flex;
        flex-direction: column;
        align-items: center;
        header {
            display: flex;
            flex-direction: column;
            align-items: center;

            h2 {
                font-size: 2.5rem;
                margin: 0;
            }

            p {
                margin: 0;
                color: var(--tertiary);
            }
        }
        &:has(aside) {
            display: grid;
            grid-template-areas:
                "header          aside"
                "calendar        aside";
            grid-template-columns: 1fr auto;

            header {
                grid-area: header;
                align-items: start;
            }
            .calendar {
                grid-area: calendar;
            }
            aside {
                grid-area: aside;
            }
        }
    }
}

section#infos-pratiques-details {
    color-scheme: only dark;
    background: var(--background);
    gap: calc(var(--spacing) * 2);

    .grille-conseils {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr auto;

        figure:first-of-type {
            grid-row: span 2;
        }
    }
    .grille-moyens-paiements {
        grid-template-columns: repeat(3, 1fr);
    }

    hr {
        appearance: none;
        border: none;
        width: 100%;
        background-color: var(--border);
        height: 1px;
    }

    .grille-conseils,
    .grille-moyens-paiements {
        display: grid;
        align-items: stretch;
        justify-items: stretch;
        padding: 0;
        gap: var(--spacing);

        figure {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            border: 2px solid var(--border);
            padding: 0;
            margin: 0;
            border-radius: var(--radius);
            overflow: hidden;

            &:before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1;
                background: linear-gradient(
                    to top,
                    color-mix(in srgb, var(--background) 90%, transparent) 50%,
                    color-mix(in srgb, var(--background) 10%, transparent)
                );
            }

            img {
                width: 100%;
                height: 100%;
                aspect-ratio: 2 / 1;
                object-fit: cover;
                grid-column: 1;
                grid-row: 1;
            }

            figcaption {
                z-index: 2;
                grid-column: 1;
                grid-row: 1;
                display: flex;
                flex-direction: column;
                justify-content: end;
                padding: var(--spacing);
                padding-top: calc(2 * var(--spacing));
                gap: 0.8rem;
                color: var(--on-background);

                font-weight: 600;
                font-size: 1rem;
                align-self: end;

                h3 {
                    font-size: 1.4rem;
                    margin: 0;
                }
                p {
                    margin: 0;
                    font-weight: 600;
                    font-size: 1rem;
                }
                ul {
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 0.8rem;
                    li {
                        margin: 0;
                        list-style: none;
                        &:has(> svg) {
                            display: grid;
                            grid-template-columns: auto 1fr;
                            grid-template-areas: "icon-bullet paragraph";
                            gap: 1rem;
                            .lucide {
                                grid-area: icon-bullet;
                                margin-top: 4px;
                                color: var(--on-background-primary);
                            }
                            p {
                                grid-area: paragraph;
                            }
                        }
                        p {
                            font-size: 1rem;
                            font-weight: 400;
                            color: var(--on-background);
                            strong {
                                display: block;
                                color: var(--on-background-primary-light);
                            }
                        }
                    }
                }
            }
            &:has(> svg) {
                --icon-size: calc(80rem / 16);
                grid-template-rows: var(--icon-size) auto;
                gap: 1rem;
                & > svg {
                    grid-column: 1;
                    grid-row: 1;
                    width: 100%;
                    height: var(--icon-size);
                    aspect-ratio: 1 / 1;
                    z-index: 3;
                    justify-self: center;
                    margin: var(--spacing);
                    display: block;
                    color: var(--on-background-primary);
                }

                figcaption {
                    grid-row: 2;
                }
            }
        }
        &.row {
            grid-template-columns: repeat(3, auto);
            .grille-conseils figure {
                grid-row: span 1;
                aspect-ratio: 2 / 1;
            }
        }
    }
}

section.picture {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: stretch;
    align-items: stretch;
    gap: 4rem;
    background: url("/assets/photos/web/DSC_1239-800.webp") center / cover;
    article {
        background: var(--background);
        padding: var(--spacing);
        border-radius: var(--radius);
    }
}