#millors-diades-wrap {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.millors-diades-table {
    border-collapse: separate;
    border-spacing: 0.25rem;

    @media (width >= 48rem) {
        border-spacing: 0.5rem;
    }

    tbody {
        tr {
            display: flex;
            gap: 0.375rem;
            flex-wrap: wrap;
            margin-bottom: 1.75rem;

            @media (width >= 48rem) {
                display: table-row;
                margin: 0;
            }

            td {
                font-size: 0.75rem;
                line-height: calc(1 / 0.75);

                @media (width >= 40rem) {
                    font-size: 0.875rem;
                    line-height: calc(1.25 / 0.875);
                }

                @media (width >= 64rem) {
                    font-size: 1rem;
                    line-height: 1.5;
                }

                &:not(.castells-group-cell) {
                    padding: 0.25rem 0.5rem;
                }

                &:not(.position-cell):not(.castells-group-cell) {
                    box-shadow: var(--shadow-sm);
                    border-radius: 0.5rem;
                }

                &.position-cell {
                    font-size: 0.75rem;
                    line-height: calc(1 / 0.75);
                    min-width: 3rem;

                    & > span {
                        display: flex;
                        align-items: center;
                        gap: 0.25rem;

                        @media (width >= 48rem) {
                            gap: 0.5rem;
                        }

                        & > span {
                            width: 100%;
                            text-align: right;
                        }

                        .current-season {
                            line-height: 0;
                            cursor: help;

                            svg {
                                font-size: 1.2em;
                            }
                        }
                    }
                }

                &.colla-cell {
                    background-color: var(--color-white);
                    flex: 1;
                    border-left-width: 6px;
                    padding-right: 1rem;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;

                    a.view-diada {
                        line-height: 0;
                        color: var(--color-gray-darker);
                        text-decoration: none;

                        &:hover {
                            svg {
                                opacity: 1;
                            }
                        }

                        svg {
                            font-size: 1.15em;
                            opacity: 0.5;
                        }
                    }

                    .name-long {
                        display: none;

                        @media (width >= 48rem) {
                            display: inline;
                        }
                    }

                    .name-short {
                        display: inline;

                        @media (width >= 48rem) {
                            display: none;
                        }
                    }
                }

                &.score-cell {
                    padding-inline: 1rem;
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    text-align: right;
                    font-weight: 700;
                    letter-spacing: 0.1em;
                    justify-content: center;

                    &.score-cell-full {
                        display: none;

                        @media (width >= 48rem) {
                            display: table-cell;
                        }
                    }

                    &:not(.score-cell-full) {
                        display: table-cell;

                        @media (width >= 48rem) {
                            display: none;
                        }
                    }
                }

                &.castells-group-cell {
                    grid-column: 1 / -1;
                    display: flex;
                    width: 100%;

                    @media (width >= 48rem) {
                        display: table-cell;
                        width: auto;
                    }

                    & > div {
                        display: grid;
                        gap: 0.375rem;
                        width: 100%;
                        grid-auto-flow: column;
                        grid-auto-columns: minmax(0, 1fr);

                        @media (width >= 48rem) {
                            gap: 0.5rem;
                        }

                        & > div {
                            flex: 1;
                            padding: 0.25rem 0.5rem;
                            background-color: var(--color-white);
                            box-shadow: var(--shadow-sm);
                            border-radius: 0.5rem;
                            text-align: center;

                            @media (width >= 48rem) {
                                display: inline-block;
                            }

                            &:empty {
                                background-color: var(--color-gray-normal);
                                opacity: 0.25;
                            }

                            &.carregat {
                                background-color: var(--color-castell-c);
                                font-style: italic;
                            }
                        }
                    }
                }
            }
        }
    }
}