.castell-no-assolit {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0 2rem;

    .castell-no-assolit-header {
        text-align: center;

        .castell-no-assolit-notacio {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .castell-no-assolit-title {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .castell-no-assolit-summary {
            color: var(--color-gray-darkest);
            margin: 0;
        }
    }

    /* A timeline by temporada */
    .castell-no-assolit-intents {
        width: 100%;
        max-width: 48rem;
        margin: 0 auto;

        .castell-no-assolit-temporada {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--color-gray-darker);
            margin: 1rem 0 0.5rem;
        }

        ul {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            list-style: none;
            margin: 0;
            padding: 0 0 0 1.25rem;
            border-left: 2px solid var(--color-gray-light);
        }

        .castell-no-assolit-intent {
            position: relative;
            display: grid;
            grid-template-columns: 4.5rem 6rem auto 1fr;
            align-items: center;
            gap: 0.25rem 0.75rem;

            &::before {
                content: '';
                position: absolute;
                top: calc(50% - 5px);
                left: calc(-1.25rem - 6px);
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: var(--color-castell-if-dark);
            }

            &.desmuntat::before {
                background: var(--color-castell-id-dark);
            }

            @media (width < 36rem) {
                grid-template-columns: 4.5rem 6rem 1fr;

                &::before {
                    top: 0.45rem;
                }

                .castell-no-assolit-diada {
                    grid-column: 2 / -1;
                }
            }
        }

        .castell-no-assolit-data {
            font-size: 0.8rem;
            color: var(--color-gray-darker);
        }

        .castell-no-assolit-colla {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0.1rem 0.5rem;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 600;
            text-align: center;
            text-decoration: none;
        }

        .castell-no-assolit-castells {
            display: flex;
            flex-wrap: wrap;
            gap: 0.15rem 0.5rem;
            font-weight: 700;
        }

        .castell-no-assolit-diada {
            font-size: 0.9rem;
            color: var(--color-black);
            text-decoration: none;
        }
    }
}