/* Styles for Disciplines component */
@layer components {
    .disciplines {
        overflow: hidden;

        & .disciplines__watermark {
            position: absolute;
            inset-block-start: 50%;
            inset-inline-start: 50%;
            translate: -50% -50%;
            inline-size: min(120%, 78rem);
            block-size: 115%;
            fill: none;
            stroke: var(--color-accent);
            stroke-width: 0.18;
            opacity: 0.16;
            pointer-events: none;
        }

        & .disciplines__inner {
            position: relative;
        }

        & .disciplines__heading {
            margin-block-end: var(--space-xl);
        }

        & .disciplines__list {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-l);
            padding: 0;
            list-style: none;
        }

        /* Thin vertical rules between the columns, exactly as in the reference -
           no boxes, no cards, just separation. */
        & .disciplines__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-s);
            padding-block-end: var(--space-l);
            border-block-end: 1px solid var(--color-border);
            text-align: center;

            &:last-child {
                padding-block-end: 0;
                border-block-end: none;
            }
        }

        & .disciplines__icon {
            font-size: clamp(3.5rem, 8vw, 5rem);
            color: var(--color-accent);
            transition: scale var(--duration-base) var(--ease-punch);
        }

        & .disciplines__item:hover .disciplines__icon {
            scale: 1.06;
        }

        & .disciplines__name {
            font-size: var(--size-step-2);
        }
    }

    @media (width >= 48rem) {
        .disciplines .disciplines__list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-xl) var(--space-l);
        }

        .disciplines .disciplines__item {
            padding-block-end: 0;
            border-block-end: none;
        }

        /* Divider on the inline start of every item except the first in a row. */
        .disciplines .disciplines__item:nth-child(2n) {
            border-inline-start: 1px solid var(--color-border);
            padding-inline-start: var(--space-l);
        }
    }

    @media (width >= 64rem) {
        .disciplines .disciplines__list {
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-m);
        }

        .disciplines .disciplines__item {
            padding-inline: var(--space-s);
            border-inline-start: 1px solid var(--color-border);

            &:first-child {
                border-inline-start: none;
            }

            &:nth-child(2n) {
                padding-inline-start: var(--space-s);
            }
        }
    }
}