:root {
    --resultats-border-radius: 0.5rem;
    --resultats-nav-spacing: 0.5rem;
}

.resultats-list {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .resultats-day {
        margin-bottom: 3rem;

        .resultats-date-header {
            background-color: var(--color-gray-lighter);
            color: white;
            padding: var(--resultats-nav-spacing) 0 0;
            margin-bottom: 0;
            position: sticky;
            top: var(--nav-height);
            isolation: isolate;
            text-align: center;
            z-index: 10;

            &::before {
                content: '';
                position: absolute;
                top: var(--resultats-nav-spacing);
                left: 0;
                right: 0;
                bottom: 0;
                background-color: var(--color-secondary);
                border-top-left-radius: var(--resultats-border-radius);
                border-top-right-radius: var(--resultats-border-radius);
                z-index: -1;
            }

            > h2 {
                position: relative;
                font-size: 1rem;
                font-weight: 700;
                letter-spacing: 0.05em;
                padding: 0.75rem 1rem;
                margin: 0;
            }
        }

        .resultats-day-body {
            background: var(--color-white);
            border-bottom-left-radius: var(--resultats-border-radius);
            border-bottom-right-radius: var(--resultats-border-radius);
            box-shadow: var(--shadow-sm);

            .resultats-diada-wrap {
                padding: 1.5rem;

                @media (width >= 898px) {
                    padding: 1rem;
                }

                &:not(:last-child) {
                    border-bottom: 2px solid var(--color-gray-normal);
                }

                &:last-child {
                    border-bottom-left-radius: var(--resultats-border-radius);
                    border-bottom-right-radius: var(--resultats-border-radius);
                }

                .resultats-diada-info {
                    margin-bottom: 1.25rem;

                    .resultats-diada-name {
                        display: block;
                        font-size: 1.1rem;
                        font-weight: 700;
                        margin-bottom: 0.5rem;
                        width: fit-content;
                        color: var(--color-black);
                        text-decoration: none;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}