/*
    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;
        }
    }
}

/*
    COMPONENTS/Dialog: Modal
*/

.body--modal {
    --t-tc--main--padding--top: var(--t-gs--space--l);
    --t-tc--main--padding--bottom: var(--t-gs--space--l);
    --t-tc--grid--laterals: var(--t-gs--space--l);

    @media (max-width: 656px) {
        --t-tc--main--padding--top: var(--t-gs--space--m);
        --t-tc--main--padding--bottom: var(--t-gs--space--m);
        --t-tc--grid--laterals: var(--t-gs--space--m);
    }

    @media (min-width: 657px) {
        .button-bar,
        .ButtonBarField {
            --t-tc--button-bar__buttons--width: auto;
        }
    }
}

/* Dialog modal — uses native <dialog> with showModal().
 * Sizing is controlled via CSS variables; JS overrides them per-instance when needed.
 * --t-tc--modal--transition--duration drives both CSS transitions and JS cleanup timing. */
.dialog-modal {
    --t-tc--modal--width: 80.8rem;
    --t-tc--modal--height: 30rem;
    --t-tc--modal--transition--duration: 0.2s;
    --t-tc--modal__icon--width: 1.4rem;
    --t-tc--modal__icon--height: var(--t-tc--modal__icon--width);

    /* Reset UA dialog styles so the element acts as a transparent full-screen layer */
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100%;
    max-block-size: 100%;
    margin: var(--t-gs--space--0);
    padding: var(--t-gs--space--0);
    border-width: var(--t-gs--border--width--0);
    background-color: var(--t-gs--color--background--transparent);
    overflow: hidden;

    /* Shared backdrop base — color is animated to overlay value by each @supports path below */
    &::backdrop {
        background-color: var(--t-gs--color--background--transparent);
    }

    .dialog-modal__container {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 100%;
        block-size: 100%;
        padding-block: var(--t-tc--grid--laterals);
        padding-inline: var(--t-tc--grid--laterals);
    }

    /* Panel defaults to hidden (opacity: 0) — each @supports path animates it to visible.
     * Sizing reads from CSS variables so JS can override per-instance without inline styles. */
    .dialog-modal__panel {
        position: relative;
        inline-size: var(--t-tc--modal--width);
        max-inline-size: calc(100vw - var(--t-tc--grid--laterals) * 2);
        block-size: var(--t-tc--modal--height);
        max-block-size: calc(100vh - var(--t-tc--grid--laterals) * 2);
        border-width: var(--t-tc--modal--border--width);
        border-style: solid;
        border-color: var(--t-tc--modal--border--color);
        border-radius: var(--t-tc--modal--border--radius);
        background-color: var(--t-tc--modal--background--color);
        box-shadow: var(--t-tc--modal--shadow);
        overflow: hidden;
        opacity: 0;
        transform: scale(0.95);
        transition: opacity var(--t-tc--modal--transition--duration) ease-out, transform var(--t-tc--modal--transition--duration) ease-out;
    }

    /* Auto-height: starts at 10vh, then JS updates --t-tc--modal--height via postMessage
     * from the iframe content. Adds block-size to the transition for smooth resizing. */
    &.dialog-modal--auto-height {
        --t-tc--modal--height: 10vh;

        .dialog-modal__panel {
            transition: opacity var(--t-tc--modal--transition--duration) ease-out, transform var(--t-tc--modal--transition--duration) ease-out, block-size var(--t-tc--modal--transition--duration) ease-out;
        }
    }

    .dialog-modal__close {
        --t-tc--buttons--width--min: var(--t-tc--buttons--height);
        --t-tc--buttons--padding--h: var(--t-gs--space--s);

        position: absolute;
        inset-block-start: var(--t-gs--space--s);
        inset-inline-end: var(--t-gs--space--s);
        z-index: 10;

        svg {
            inline-size: var(--t-tc--modal__icon--width);
            block-size: var(--t-tc--modal__icon--height);
        }
    }

    .dialog-modal__iframe {
        inline-size: 100%;
        block-size: 100%;
        border-width: var(--t-gs--border--width--0);
    }

    /* Fallback: class-based animation for browsers without @starting-style.
     * JS toggles .dialog-modal--open to trigger entry/exit transitions. */
    @supports not (transition-behavior: allow-discrete) {
        &::backdrop {
            transition: background-color var(--t-tc--modal--transition--duration) ease-out;
        }

        &.dialog-modal--open::backdrop {
            background-color: var(--t-tc--modal__overlay--background--color);
        }

        &.dialog-modal--open .dialog-modal__panel {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Modern: native CSS entry/exit animations — no JS class toggling needed.
     * display + overlay transitions on the dialog keep it visible and in the
     * top layer during the exit animation after dialog.close() is called. */
    @supports (transition-behavior: allow-discrete) {
        transition: display var(--t-tc--modal--transition--duration) allow-discrete,
                    overlay var(--t-tc--modal--transition--duration) allow-discrete;

        &:modal .dialog-modal__panel {
            opacity: 1;
            transform: scale(1);

            @starting-style {
                opacity: 0;
                transform: scale(0.95);
            }
        }

        &::backdrop {
            transition: background-color var(--t-tc--modal--transition--duration) ease-out,
                        display var(--t-tc--modal--transition--duration) allow-discrete,
                        overlay var(--t-tc--modal--transition--duration) allow-discrete;
        }

        &:modal::backdrop {
            background-color: var(--t-tc--modal__overlay--background--color);

            @starting-style {
                background-color: var(--t-gs--color--background--transparent);
            }
        }
    }

    @media (max-width: 750px) {
        --t-tc--modal--width: 34.4rem;
    }

    /* Zeroing the variable disables all CSS transitions and makes JS cleanup instant
     * (JS reads this variable via getComputedStyle to determine cleanup timing). */
    @media (prefers-reduced-motion: reduce) {
        --t-tc--modal--transition--duration: 0s;
    }
}