/*
    LAYOUTS/Structures: Section
*/
 
.section__header ~ *:has(>*) { /* TO BE MOVED to 02__layouts.css in next version, replacing .section__header + *:not(templatebuilder-page-dropzone) */
    margin-block-start: var(--t-gs--space--xl);

    /* Media query to target only mobile */
    @media all and (max-width:750px) {
        & {
            margin-block-start: var(--t-gs--space--l);
        }

    }
}

/*
    ELEMENTS/Indicators: Date
*/

:root {
    --t-tc--date--width: calc(var(--t-gs--size--base) * 16);
    --t-tc--date--height: calc(var(--t-gs--size--base) * 16);
    --t-tc--date--border--width: var(--t-gs--border--width--s);
    --t-tc--date--border--color: var(--t-gs--color--border--default);
    --t-tc--date--border--radius: var(--t-gs--border--radius--s);
    --t-tc--date--shadow: none;
    --t-tc--date__month--height: calc(var(--t-gs--size--base) * 5);
    --t-tc--date__month--background--color: var(--t-gs--color--surface--secondary);
    --t-tc--date__month--font--size: var(--t-gs--font--size--03);
    --t-tc--date__month--font--weight: var(--t-gs--font--weight--bold);
    --t-tc--date__month--font--case: uppercase;
    --t-tc--date__month--font--color: var(--t-gs--color--text--default);
    --t-tc--date__day--background--color: var(--t-gs--color--surface--default);
    --t-tc--date__day--font--color: var(--t-gs--color--text--strong);
    --t-tc--date__number--font--size: var(--t-gs--font--size--06);
    --t-tc--date__number--font--weight: var(--t-gs--font--weight--bold);
    --t-tc--date__name--font--size: var(--t-gs--font--size--03);
    --t-tc--date__name--font--weight: var(--t-gs--font--weight--regular);
    --t-tc--date__name--font--case: capitalize;
}

.date {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--t-tc--date--shadow);
    border-radius: var(--t-tc--date--border--radius);
    border-width: var(--t-tc--date--border--width);
    border-style: solid;
    border-color: var(--t-tc--date--border--color);
    inline-size: var(--t-tc--date--width);
    block-size: var(--t-tc--date--height);
    overflow: hidden;

    .date__month,
    .date__day {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        inline-size: 100%;
        text-align: center;
    }

    .date__month {
        border-block-end-width: var(--t-tc--date--border--width);
        border-block-end-style: solid;
        border-block-end-color: var(--t-tc--date--border--color);
        background-color: var(--t-tc--date__month--background--color);
        color: var(--t-tc--date__month--font--color);
        block-size: var(--t-tc--date__month--height);
        font-size: var(--t-tc--date__month--font--size);
        line-height: var(--t-tc--date__month--font--size);
        font-weight: var(--t-tc--date__month--font--weight);
        text-transform: var(--t-tc--date__month--font--case);
    }

    .date__day {
        flex-grow: 1;
        background-color: var(--t-tc--date__day--background--color);
        color: var(--t-tc--date__day--font--color);
    }

    .date__day__number {
        font-size: var(--t-tc--date__number--font--size);
        line-height: var(--t-tc--date__number--font--size);
        font-weight: var(--t-tc--date__number--font--weight);
    }

    .date__day__name {
        font-size: var(--t-tc--date__name--font--size);
        line-height: var(--t-tc--date__name--font--size);
        font-weight: var(--t-tc--date__name--font--weight);
        text-transform: var(--t-tc--date__name--font--case);
    }

    /* Media query to target only desktop */
    @media all and (min-width: 1025px) {
        html[data-animations="default"] .article--card & {
            --t-tc--date--border--color--transition--duration: 0.3s;

            transition-property: border-color;
            transition-duration: var(--t-tc--date--border--color--transition--duration);
            transition-timing-function: ease-in-out;

            .date__month {
                --t-tc--date--border--color--transition--duration: 0.3s;
                --t-tc--date--background--color--transition--duration: 0.3s;
                --t-tc--date--font--color--transition--duration: 0.3s;

                transition-property: border-color, background-color, color;
                transition-duration: var(--t-tc--date--border--color--transition--duration), var(--t-tc--date--background--color--transition--duration), var(--t-tc--date--font--color--transition--duration);
                transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
            }

            .date__day {
                --t-tc--date--font--color--transition--duration: 0.3s;

                position: relative;
                transition-property: color;
                transition-duration: var(--t-tc--date--font--color--transition--duration);
                transition-timing-function: ease-in-out;

                &::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-end-start-radius: var(--t-tc--date--border--radius);
                    border-end-end-radius: var(--t-tc--date--border--radius);
                    background-color: var(--t-tc--date__day--background--color--hover, transparent);
                    opacity: 0;
                    transform: scale(0.9);
                    z-index: 0;
                    transition-property: border-radius, opacity, transform;
                    transition-duration: 0.3s, 0.3s, 0.3s;
                    transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
                }
            }

            .date__day__number,
            .date__day__name {
                position: relative;
                z-index: 1;
            }
        }

        html[data-animations="default"] .article--card:hover & {
            --t-tc--date--border--color: var(--t-gs--swatch--brand--030);
            --t-tc--date__month--background--color: var(--t-gs--swatch--brand--030);
            --t-tc--date__month--font--color: var(--t-gs--color--text--on--fill--brand);
            --t-tc--date__day--background--color--hover: var(--t-gs--color--fill--brand);
            --t-tc--date__day--font--color: var(--t-gs--color--text--on--fill--brand);

            .date__day::before {
                border-end-start-radius: var(--t-gs--border--radius--0);
                border-end-end-radius: var(--t-gs--border--radius--0);
                opacity: 1;
                transform: scale(1);
            }
        }
    }
}

/*
    ELEMENTS/Indicators: Partial save
*/

/*
    ELEMENTS/Indicators: Partial save (Within COMPONENTS/Cards: Table rows as cards)
*/

.table--cards tr.partially-saved  > *:nth-child(1) { /* TO BE MOVED to 03__elements__indicators__partial-save.css in next version */
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--t-gs--space--s);
}

.table--cards tr.partially-saved > *:nth-child(1) .badge { /* TO BE MOVED to 03__elements__indicators__partial-save.css in next version */
    order: 1;
}

/*
    ELEMENTS/Indicators: Partial save (Within COMPONENTS/Tables: Default)
*/

.table--default tr.partially-saved > *:nth-child(1) { /* TO BE MOVED to 03__elements__indicators__partial-save.css in next version */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    row-gap: var(--t-gs--space--s);
}

/*
    ELEMENTS/Typography: Labels
*/

.tc_formLabel { /* TO BE MOVED to 03__elements.css in next version */
    .banner & {
        color: inherit;
    }
}

.tc_formSublabel { /* TO BE MOVED to 03__elements.css in next version */
    .banner & {
        color: inherit;
    }
}

/*
    ELEMENTS/Typography: Links
*/

.CheckBoxListFormField_more,
.RadioButtonListFormField_more,
.tc_formDescription a,
.tc_formSublabel a,
.link { /* TO BE MOVED to 03__elements.css in next version */
    transition: text-decoration 0.3s ease, color 0.3s ease;

    .footer & {
        color: var(--t-tc--footer--link--color);
    }

    &:hover {
        .footer & {
            color: var(--t-tc--footer--link--color--hover);
        }
    }

    &:focus {
        .footer & {
            color: var(--t-tc--footer--link--color--focus);
        }
    }

    &:active {
        .footer & {
            color: var(--t-tc--footer--link--color--active);
        }
    }

    &:visited,
    &[aria-selected="true"] {
        .footer & {
            color: var(--t-tc--footer--link--color--selected);
        }
    }

    &[disabled],
    &[aria-disabled="true"] {
        .footer & {
            color: var(--t-tc--footer--link--color--disabled);
        }
    }
}

/*
    ELEMENTS/Typography: Titles
*/

.title,
.tc_formTitle { /* TO BE MOVED to 03__elements.css in next version */
    .banner & {
        color: inherit;
    }
}

/*
    COMPONENTS/Lists: Compact
*/

.list--view-more .list__item__text__title { /* TO BE DELETED - in next version */
    font-weight: initial;
    white-space: initial;
    text-overflow: initial;
    overflow: initial;
}

.list--view-more .list__item__text__title { /* TO BE MOVED to 04__components__lists__compact.css in next version */
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--t-gs--space--s);
    inline-size: 100%;
}

.list--view-more .list__item__text__title__name { /* TO BE MOVED to 04__components__lists__compact.css in next version */
    font-weight: var(--t-gs--font--weight--bold);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.list--view-more a .list__item__text__title,
.list--view-more a .list__item:hover .list__item__text__title { /* TO BE DELETED - in next version */
    color: inherit;
}

.list--view-more a .list__item__text__title__name,
.list--view-more a .list__item:hover .list__item__text__title__name { /* TO BE MOVED to 04__components__lists__compact.css in next version */
    color: var(--t-gs--color--text--link);
}

/*
    MODULES/Slider
*/

.swiper-horizontal { /* TO BE MOVED to 06__modules.css in next version - ensure the .swiper-controls selector (lines 485 to 566) gets nested inide the new .swiper-horizontal one */
    .swiper-wrapper { /* TO BE MOVED to 06__modules.css in next version */
        padding-block-end: var(--t-gs--space--s);
    }

    .swiper-controls { /* TO BE MOVED to 06__modules.css in next version */
        padding-block-end: var(--t-gs--space--s);

        .swiper-navigation-icon {
            display: none;
        }

        .swiper-button-next,
        .swiper-button-prev { /* TO BE DELETED - in next version */
            margin-block-start: var(--t-gs--space--0);
        }

        .swiper-pagination { /* TO BE DELETED - in next version */
            inline-size: auto;
        }
    }
}