/* ==========================================================================
    LAYOUTS
    -------------------------------------------------------------------------
    Login page

    COMPONENTS
    -------------------------------------------------------------------------
    Button
    Footer

    MODULES
    -------------------------------------------------------------------------
    Banner

    PAGETYPES
    -------------------------------------------------------------------------
    Dashboard
        : Top Section
        : Section with bg
        : Views

    EXTRAS
    -------------------------------------------------------------------------
        : hack
========================================================================== */

/*
    LAYOUTS/XXX
*/

/*
    MARK: Login page
*/

.body--login {
    --t-tc--login__box--border--width: var(--t-gs--border--width--0);
    --t-tc--login__box--border--color: var(--t-gs--color--border--transparent);
    --t-tc--title--font--color: var(--t-gs--swatch--brand);

    .article {
        border-block-start-width: var(--t-gs--border--width--l);
        border-block-start-color: var(--t-gs--swatch--brand);
        box-shadow: var(--t-gs--shadow--l);

        .article__header {
            padding-block: var(--t-gs--space--l) var(--t-gs--space--s);
            padding-inline: var(--t-gs--space--m);
        }

        .article__content {
            padding-block-start: var(--t-gs--space--s);
        }

        *+.form {
            margin-block-start: var(--t-gs--space--l);

            .fieldSpec:has(input[type="hidden"]) {
                display: none;
            }
        }
    }
}


/*
    MARK: Banner
*/
.banner {
    --t-tc--title--font--color: var(--t-tc--banner--font--color);
    --t-tc--title--font--weight: var(--t-gs--font--weight--light);
    --t-tc--title--hero: calc(var(--t-gs--font--size--01) * 5.4);
    --t-tc--title--font--family: var(--t-gs--font--family--emphasis);
}

/*
    MARK: Dashboard / Top Section
*/

.section--welcome {
    margin-block-start: var(--t-gs--space--xl);
    margin-block-end: var(--t-gs--space--m);
}


/*
    MARK: Button
*/

.button {
    --t-tc--buttons--font--family: var(--t-gs--font--family--default);
    --t-tc--buttons--font--size: var(--t-gs--font--size--02);
    text-transform: uppercase;
    line-height: 1;
}

/*
    MARK: Dashboard / Section with bg
*/

.section--interviews {
    --_section--bg: var(--t-gs--swatch--link--095);
    display: flex;
    flex-direction: column;

    .main__wrapper:has(&:last-of-type) {
        padding-block-end: var(--t-gs--space--0);
    }

    .tabs {
        border-block-end-width: var(--t-gs--border--width--0);

        .tabs__list__item--active {
            color: var(--t-gs--color--border--brand);
        }

        .link  {
            text-decoration: none;

            &:hover {
                color: var(--t-gs--swatch--link--030);
            }
        }

        @media (width < 1024px) {
            position: relative;

            .tabs__placeholder {
                justify-content: end;
                position: relative;

                &::before {
                    content: '';
                    display: block;
                    inline-size: 200vw;
                    block-size: var(--t-gs--space--xs);
                    background-color: var(--t-gs--swatch--brand);
                    inset-block-end: calc(-1 * var(--t-gs--space--xxs));
                    inset-inline-start: -50vw;
                    position: absolute;
                    z-index: 5;
                }
            }

            .tabs__list {
                display: block;
                position: static;
                border-width: var(--t-gs--border--width--0);
                inline-size: 100%;

                .tabs--open & {
                    position: absolute;
                }
            }

            .tabs__list__item {
                display: none;
                padding-block: var(--t-gs--space--m);
                padding-inline: var(--t-gs--space--m);

                &.tabs__list__item--active {
                    display: block;
                    font-weight: var(--t-gs--font--weight--bold);
                    position: absolute;
                    inset-block-start: calc(-1.25 * var(--t-gs--space--xs));
                }

                &:not(.tabs__list__item--active) {
                    border-width: var(--t-gs--border--width--s);
                    border-style: solid;
                    border-color: var(--t-gs--color--border--default);
                    border-block-start-width: var(--t-gs--border--width--0);
                }

                .tabs--open & {
                    display: block;

                    &.tabs__list__item--active {
                        position: absolute;
                        inset-block-start: calc(-1 * var(--t-gs--space--xxxl));
                    }
                }
            }
        }
    }

    .section__content {
        --_shadow-size: clamp(20rem, 50vw, 80rem);
        box-shadow: var(--_shadow-size) 0 var(--_section--bg), calc(-1 * var(--_shadow-size)) 0 var(--_section--bg);
        background-color: var(--_section--bg);
        margin-block-start: var(--t-gs--space--0);
        position: relative;
        flex-grow: 1;

        &::before {
            content: '';
            display: block;
            inline-size: 200vw;
            block-size: .1rem;
            background-color: var(--t-gs--color--border--default);
            inset-block-start: 0;
            inset-inline-start: -50vw;
            position: absolute;
        }

        .table__wrap {
            border-width: var(--t-gs--border--width--0);
        }

        .table--default {
            border-width: var(--t-gs--border--width--0);
            --t-tc--table--background--color: var(--t-gs--color--surface--transparent);
            padding-inline: var(--t-gs--space--xs);
            padding-block: var(--t-gs--space--xxl);

            tbody {
                display: grid;
                gap: var(--t-gs--space--m);
            }

            tr {
                background-color: var(--t-gs--color--surface--default);
                display: grid;
                grid-template-columns: 2fr 2fr 1fr 1fr auto;
                padding-block: var(--t-gs--space--l);
                padding-inline: var(--t-gs--space--xxl);

                &:hover {
                    box-shadow: var(--t-gs--shadow--m);
                }

                td {
                    block-size: initial;
                    border: none;
                    &:last-child {
                        inline-size: auto;
                        align-content: center;
                    }

                    &[class*="event-"] {
                        font-size: var(--t-gs--font--size--04);
                        align-content: center;
                        border-inline-end-width: var(--t-gs--border--width--s);
                        border-inline-end-style: solid;
                        border-inline-end-color: var(--t-tc--table--border--color);
                        margin-inline-end: var(--t-gs--space--m2);
                        white-space: nowrap;

                        strong {
                            margin-inline-start: var(--t-gs--space--m2);
                        }
                    }
                }
            }
        }

        .table--cards {
            --t-tc--table--background--color: var(--t-gs--color--surface--transparent);
            padding-inline: var(--t-gs--space--xs);
            padding-block: var(--t-gs--space--xxl);

            tr {
                padding-inline:var(--t-gs--space--s2);
                border-width: var(--t-gs--border--width--0);
                border-radius: var(--t-gs--border--radius--0);

                &>:first-child {
                    font-weight:400;
                    border-block-end-width: var(--t-tc--card--border--width);
                    border-block-end-style: solid;
                    border-block-end-color: var(--t-tc--card--border--color);

                    strong {
                        margin-inline-start: var(--t-gs--space--m);
                        line-height: 1;
                    }
                }

                td {
                    padding-inline: var(--t-gs--space--0);

                    .table--cards--with-no-subtitle.table--people tbody tr &:nth-child(2) {
                        --t-tc--card--border--width: var(--t-gs--border--width--0);
                        padding-inline-start: var(--t-gs--space--0);

                        &::before {
                            display: none;
                        }
                    }

                    &:last-child:not(:first-child) {
                        --t-tc--card--border--width: var(--t-gs--border--width--0);
                    }

                    &.visibility--mobile-and-tablet {
                        padding-block: var(--t-gs--border--width--0);
                        --t-tc--buttons--height: var(--t-gs--border--width--0);

                        tr:not(.table__row--open):has(&) {
                            --t-tc--card--border--width:var(--t-gs--border--width--0);
                        }
                    }

                    .toggle--card {
                        inset-block-start: var(--t-gs--space--s);
                        inset-inline-end: var(--t-gs--space--0);
                    }
                }
            }

            /* this is a reset to make it look as the desktop version */
            .button {
                --t-tc--buttons--shadow: none;
                --t-tc--buttons--outline--width: var(--t-gs--border--width--0);
                --t-tc--buttons--outline--style: solid;
                --t-tc--buttons--outline--color: var(--t-gs--color--outline--transparent);
                --t-tc--buttons--border--radius: var(--t-gs--border--radius--0);
                --t-tc--buttons--border--width: var(--t-gs--border--width--s);
                --t-tc--buttons--border--color: var(--t-gs--color--border--on--fill--default);
                --t-tc--buttons--padding--v: var(--t-gs--space--s);
                --t-tc--buttons--padding--h: var(--t-gs--space--m);
                --t-tc--buttons--height: calc(var(--t-gs--size--base) * 11);
                --t-tc--buttons--font--family: var(--t-gs--font--family--default);
                --t-tc--buttons--font--size: var(--t-gs--font--size--02);
                --t-tc--buttons--font--color: var(--t-gs--color--text--on--fill--default);
                --t-tc--buttons--border--color: var(--t-gs--color--border--on--fill--primary);
                --t-tc--buttons--background--color: var(--t-gs--color--fill--primary);
                color: var(--t-gs--color--fill--link);
                inline-size:100%;
                text-decoration: none;
            }

        }

        .link {
            font-weight: var(--t-gs--font--weight--regular);

            td:last-child &{
                white-space: normal;
            }
        }

        .table-label {
            display: block;
        }
    }
}


/*
    MARK: Dashboard / Views
*/

.article--details .article__content__view__field .article__content__view__field__value > .title--h7 {
    text-wrap: inherit;
    margin-block-end: var(--t-gs--space--m)
}
.article--details .article__content__view__field:not(.article__content__view__field--not-format,.tf_skills) .article__content__view__field__value>:not(.table)  .title--h9 ,
.article--details .article__content__view__field:not(.article__content__view__field--not-format,.tf_skills) .article__content__view__field__value>:not(.table) * .title--h9 {
    font-family: var(--t-gs--font--family--emphasis) !important;
    text-transform: uppercase;
}

.bg-plain {
    background-color: var(--t-gs--swatch--link--095);
    padding-block: var(--t-gs--space--m);
    padding-inline: var(--t-gs--space--m);
    margin-block-end: var(--t-gs--space--m);

    &.bg-gradient {
        background-color: var(--t-gs--swatch--emphasis--030);
        background-image: linear-gradient(90deg, var(--t-gs--swatch--emphasis--050), var(--t-gs--swatch--emphasis--030));
        color: var(--t-gs--swatch--brand--100);

        .article--details &.article__content__view__field .article__content__view__field__value > .title--h7 {
            color: var(--t-gs--swatch--brand--100);
        }
    }
}

/*
    MARK: Footer
*/

.footer {
    --t-tc--footer--font--size: var(--t-gs--font--size--01);
    --t-gs--color--text--link: var(--t-tc--footer--font--color);

    .paragraph {
        --t-tc--paragraph--font--size: var(--t-tc--footer--font--size);
        --t-gs--color--text--link: var(--custom--pacific-blue);

        line-height: 1.5;

        .link {
            font-weight: var(--t-gs--font--weight--regular);
        }
    }

    .footer__nav {
        margin-block-end: var(--t-gs--space--m);

        .list {
            --t-tc--footer--font--size: var(--t-gs--font--size--02);
            display: flex;
            flex-wrap: wrap;
            gap: var(--t-gs--space--s2);
            text-transform: uppercase;

            .list__item:not(:last-child)::after {
                content: '|';
                margin-inline-start: var(--t-gs--space--s2);
            }

            @media (width <= 750px) {
                justify-content: center;
            }
        }
    }
}


/*
    MARK: Header
*/

.header {
    box-shadow: var(--t-gs--shadow--xl);
}

/*
    MARK: EXTRAS Hack
*/
.form--login {
    .labelRequiredIcon,
    #requiredFieldsCaption {
        display: none;
    }
    .button-bar {
        padding-block-end: var(--t-gs--space--0);
    }
}