.AoSProgramHero {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    color: white;
    font-family: var(--sprinter), sans-serif;

    & .AoSProgramHeroData {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-row: 1 / span 4;
        grid-column: 2 / -2;
        margin: 1em 0 2em;

        .AoSProgramHeroImage {
            grid-column: 8 / -1;
            aspect-ratio: 4 / 3;
            grid-row: 2 / span 3;
            margin: 0.5em;

            figure {
                margin: 0;
            }
        }

        h1.page-header {
            grid-row: 2;
            grid-column: 1 / span 7;
        }

        & .degreeType {
            grid-row: 1;
            color: var(--trent-green-greyest);
            margin: 0;
            grid-column: 1 / span 7;
        }

        .AoSProgamInfoContainer {
            container: programInfo / inline-size;
            grid-row: 3;
            grid-column: 1 / span 7;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            font-weight: 300;
            letter-spacing: var(--sprinterSpacing);
            width: fit-content;
            display: flex;
            flex-flow: row wrap;

            & li {
                width: fit-content;
            }
        }

        & .AoSProgramInfo {
            display: grid;
            grid-template-columns: auto auto;
            grid-auto-rows: max-content;
            gap: 0.5em 2em;
            margin: 1em 0;

            &>li {
                display: flex;
                flex-flow: row nowrap;
                column-gap: 0.5em;
                align-items: flex-start;

                &::before {
                    width: 1em;
                    display: block;
                    filter: var(--white-filter);
                    flex-shrink: 0;
                }
            }

            .headerDegree ul {
                display: inline;
            }

            .headerDegree::before {
                content: var(--degree);
            }

            .headerLocation::before {
                content: var(--location);
            }

            .headerCoop::before {
                content: var(--coop);
            }

            .headerStartTerms::before {
                content: var(--terms);
            }
            .humanities::before {
                content: var(--humanities);
            }
            .business::before {
                content: var(--business);
            }
            .environment::before {
                content: var(--environment);
            }
            .forensics::before {
                content: var(--forensics);
            }
            .health::before {
                content: var(--health);
            }
            .indigenous::before {
                content: var(--indigenous);
            }
            .law::before {
                content: var(--law);
            }
            .science::before {
                content: var(--science);
            }
            .social::before {
                content: var(--social);
            }
            .teaching::before {
                content: var(--teaching);
            }

        }

        @container programInfo (width < 31em) {
            .AoSProgramInfo {
                grid-template-columns: 1fr;
            }
        }
    }

    & .AoSCtaButtons {
        grid-column: 2 / 11;
        grid-row: 4;
        align-self: center;
        z-index: 10;

        & ul {
            list-style-type: none;
            margin-top: 1em;
            padding: 0;
            display: flex;
            flex-flow: row wrap;
            gap: 0.5em;
        }
    }

    & .backgroundColourBlock {
        grid-row: 1 / span 3;

        &.trentGreen::before {
            background-color: var(--trent-green-new);
        }
    }

    /* @media screen and (max-width: 64em){
        .AoSProgramHeroData {
            grid-column: ;
        }
    } */
}

#AoSProgram .content-grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    grid-row: 3 / span 2;
    row-gap: 2em;

    .contentGridColourBlock {
        display: none;
    }

    & .atAGlance {
        grid-column: 11 / -2;
        grid-row: span 4;
        position: relative;
        padding: 0 1em;

        & h2 {
            margin-bottom: 0.5em;
            line-height: 1;
        }

        & .stickyBar {
            position: sticky;
            top: 1em;
            margin: 1em;

            & ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-flow: column nowrap;
                gap: 1.5em;
            }

            li {
                display: flex;
                flex-flow: column nowrap;

                &:last-child {
                    gap: 0.5em;

                    a {
                        width: fit-content;
                    }
                }
            }

            .subCaption {
                font-size: 0.9em;
                color: var(--trent-black);
                opacity: 0.9;
                font-weight: 500;
            }
        }
    }

    & .AoSDegreeHighlights {
        grid-column: 2 / 10;
        container: highlights / inline-size;

        & .subCaption {
            color: var(--trent-green-new);
        }

        & .trentAdvantage {
            font-size: 1.4em;
            margin-bottom: 1.5em;
            font-weight: 500;
        }

        & .programDesc {
            max-width: 42em;
        }
    }

    & .AoSProgramPossibilities {
        grid-column: 2 / 10;
        display: flex;
        flex-flow: column nowrap;

        .AoSSpecializationBlock,
        .AoSOptions {
            margin-bottom: 2em;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding-left: 0;
            display: flex;
            flex-flow: column nowrap;
            gap: 1em;
        }
    }

    & .AoSExperientialLearning {
        grid-column: 2 / 11;
        display: grid;
        grid-template-columns: subgrid;
        row-gap: 2em;

        &>div:nth-child(3) {
            margin-top: 2em;
        }

        hr.divider {
            grid-column: 1 / -2;
        }

        .AoSExpIntro {
            grid-column: 1 / -1;

            & p {
                max-width: 36em;
            }
        }

        .AoSMedia {
            grid-column: 1 / -2;
            margin-bottom: 2em;

            .slides {
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: 42em;
                gap: 1em;
                overflow: scroll;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                scroll-marker-group: after;
                anchor-name: --carousel;

                &::scroll-marker-group {
                    display: flex;
                    justify-content: center;
                    gap: 1rem;
                    margin-top: 1em;
                }

                &::scroll-button(*) {
                    display: none !important;
                    position: fixed;
                    /* set containment on the target */
                    position-anchor: --carousel;
                    /* set the anchor */
                    cursor: pointer;
                    border: 2px solid var(--trent-green-new);
                    background-color: var(--trent-jewel-green-lighter);
                    color: var(--trent-green-new);
                    border-radius: 100%;
                    corner-shape: squircle;
                    font-size: 1em;
                    display: block;
                    text-transform: uppercase;
                    font-family: var(--sprinter);
                    letter-spacing: var(--sprinterSpacingCaps);
                    aspect-ratio: 1;
                }

                &::scroll-button(*):disabled {
                    cursor: default;
                    opacity: 0.55;
                }

                &::scroll-button(left) {
                    content: 'Prev';
                    position-area: center left;
                    margin-right: 1em;
                }

                &::scroll-button(right) {
                    content: 'Next';
                    position-area: center right;
                    margin-left: 1em;
                }
            }

            .mediaScrollButtons {
                display: flex;
                justify-content: center;
                gap: 1rem;
                margin-top: 1em;
                a {
                    display: block;
                    content: "";
                    aspect-ratio: 1;
                    border: 2px solid var(--trent-green-new);
                    border-radius: 100%;
                    width: 1.5em;
                    height: 1.5em;
                    corner-shape: squircle;
                }
            }

            .slides .slide {
                scroll-snap-align: start;
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                transform-origin: center center;
                margin-right: 1em;
                transform: scale(1);
                transition: transform 0.5s;
                position: relative;

                display: flex;
                justify-content: center;
                align-items: center;

                &::scroll-marker {
                    display: block;
                    content: "";
                    aspect-ratio: 1;
                    border: 2px solid var(--trent-green-new);
                    border-radius: 100%;
                    width: 1.5em;
                    height: 1.5em;
                    corner-shape: squircle;
                }

                &::scroll-marker:target-current {
                    background-color: var(--trent-jewel-green);
                }
            }

            .slide iframe {
                width: 100%;
                aspect-ratio: 16/9;
            }
        }

        & .AoSExpPoint {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -2;

            & .AoSExpPointTitle {
                grid-column: 1 / 3;
                /* text-transform: uppercase !important; */
                /* letter-spacing: var(--sprinterSpacingCaps); */
                color: var(--trent-green-new);
                font-size: 0.9em;
            }

            & .AoSExpPointData {
                grid-column: 3 / -1;
                max-width: 36em;
            }
        }
    }
}



.AoSCareer {
    grid-column: 2 / 5;
    grid-row: 5;
    margin: 6em 0;
    color: white;
}



.AoSTestimonial {
    grid-column: 6 / -1;
    grid-template-rows: auto 1fr auto;
    grid-row: 5;
    color: white;
    display: grid;
    grid-template-columns: subgrid;
    margin: 6em 0;
    row-gap: 2em;

    h2 {
        grid-row: 1;
        grid-column: 2 / -1;
    }

    &::before {
        content: var(--left-quote);
        grid-column: 1;
        grid-row: 2;
        width: 75%;
        transform: translateY(-3em);
    }

    &::after {
        content: var(--right-quote);
        grid-column: -1;
        grid-row: 2;
        width: 75%;
        transform: translate(-2em, 4em);
        justify-self: flex-start;
        align-self: flex-end;
    }

    .AoSTestimonialText {
        grid-row: 2;
        grid-column: 2 / -2;
        font-size: 1.2em;
        max-width: 92%;
    }

    .AoSTestimonialImage {
        grid-row: 3;
        grid-column: 2 / 3;
        clip-path: circle();
    }

    .AoSTestimonialImageOverlay {
        grid-row: 3;
        grid-column: 2 / 3;
    }

    .AoSTestimonialAttribution {
        grid-row: 3;
        grid-column: span 7;
        align-self: flex-end;
        margin-left: 1em;

        p {
            margin: 0;
        }

        .tAName {
            font-weight: 500;
            font-size: 1.2em;
        }

        &:not(:has(~ .AoSTestimonialImage)) {
            grid-column: 2 / -1;
            margin: 0;
        }
    }
}

.AoSAdmissionsRequirements {
    grid-column: 2 / -2;
    grid-row: 6;
    display: grid;
    grid-template-columns: subgrid;

    & .AoSAdmissions {
        grid-column: 1 / 5;
    }

    & .AoSRequirements {
        grid-column: 6 / -1;
    }
}

.AoSRequirements {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5em;

    & label {
        cursor: pointer;
        margin: 0;
        font-family: var(--sprinter);
        font-size: 0.85em;
        padding: 1em;
        text-align: center;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        line-height: 1;
        border-radius: 1em;
        corner-shape: squircle;
        border: 1px solid var(--trent-green-new);
        order: 1;
        height: fit-content;
        color: var(--trent-green-new);
        transition: background-color 200ms;

        &:hover,
        &:active {
            background-color: var(--trent-jewel-green-lighter);
        }

        &:has(+ input[name="requirement"]:checked) {
            background-color: var(--trent-jewel-green);

        }
    }

    & input[name="requirement"] {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

    & .AoSTabDetail {
        display: none;
        visibility: hidden;
        opacity: 0;
        width: 100%;
        order: 2;
    }

    & input[name="requirement"]:checked+.AoSTabDetail {
        display: block;
        opacity: 1;
        visibility: visible;
        animation: fade-in 0.5s ease-in 1 forwards;
    }
}

.AoSScholarships {
    grid-column: 2 / -2;
    display: grid;
    grid-template-columns: subgrid;
    grid-row: 7;
    row-gap: 2em;
    margin: 5em 0;

    & .AoSTutition {
        grid-column: 1 / 6;

        .tuitionBlock {
            background-color: Canvas;
            padding: 2em;
            margin-top: 2em;

            .tuitionBlocks {
                display: flex;
                flex-flow: row wrap;
                gap: 0.5em;
            }

            .note.sub {
                font-size: 0.7em;
            }

            label {
                cursor: pointer;
                margin: 0;
                font-family: var(--sprinter);
                font-size: 0.85em;
                padding: 1em;
                text-align: center;
                display: flex;
                flex-flow: column nowrap;
                align-items: center;
                line-height: 1;
                border-radius: 1em;
                corner-shape: squircle;
                border: 1px solid var(--trent-green-new);
                order: 1;
                height: fit-content;
                color: var(--trent-green-new);
                transition: background-color 200ms;
                max-width: 8em;

                &:hover,
                &:active {
                    background-color: var(--trent-jewel-green-lighter);
                }

                &:has(+ input[name="tuition"]:checked) {
                    background-color: var(--trent-jewel-green);
                }
            }

            & input[name="tuition"] {
                position: absolute;
                opacity: 0;
                z-index: -1;
            }

            & .tuitionTabDetail {
                display: none;
                visibility: hidden;
                opacity: 0;
                width: 100%;
                order: 2;
                background-color: white;
                margin-top: 1em;
            }

            & input[name="tuition"]:checked+.tuitionTabDetail {
                display: grid;
                gap: 0.5em;
                grid-template-columns: 1fr auto;
                opacity: 1;
                visibility: visible;
                animation: fade-in 0.5s ease-in 1 forwards;

                .amount {
                    justify-self: flex-end;
                }

                .details-content {
                    font-size: 0.8em;
                }
            }

            .tuitionCallout {
                margin-top: 1em;
                font-size: 0.7em;
            }
        }
    }

    & .scholarships {
        grid-column: 7 / -1;

        .AoSScholarshipTabs {
            display: flex;
            flex-flow: row wrap;
            gap: 0.5em;
        }

        & label {
            cursor: pointer;
            margin: 0;
            font-family: var(--sprinter);
            font-size: 0.85em;
            padding: 1em;
            text-align: center;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            line-height: 1;
            border-radius: 1em;
            corner-shape: squircle;
            border: 1px solid var(--trent-green-new);
            order: 1;
            height: fit-content;
            color: var(--trent-green-new);
            transition: background-color 200ms;

            &:hover,
            &:active {
                background-color: var(--trent-jewel-green-lighter);
            }

            &:has(+ input[name="scholarship"]:checked) {
                background-color: var(--trent-jewel-green);
            }
        }

        & input[name="scholarship"] {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

        & .AoSScholarshipTabDetail {
            display: none;
            visibility: hidden;
            opacity: 0;
            width: 100%;
            order: 2;
            background-color: white;
            padding: 2em;
            margin-top: 1em;
        }

        & input[name="scholarship"]:checked+.AoSScholarshipTabDetail {
            display: block;
            opacity: 1;
            visibility: visible;
            animation: fade-in 0.5s ease-in 1 forwards;
        }
    }
}

.RFI {
    grid-column: 2 / -2;
}

.AoSCTAs {
    grid-column: 2 / -2;

    ul {
        list-style-type: none;
        margin: 1em 0;
        padding: 0;
        display: flex;
        flex-flow: row wrap;
        gap: 0.5em;
    }
}

details {
    summary {
        border-bottom: 2px solid var(--trent-green-greyer);
        list-style: none;
        width: 80%;

        & h3,
        & h4 {
            display: flex;
            flex-flow: row nowrap;
            width: 100%;

            &::after {
                content: var(--chevron);
                align-self: flex-end;
                width: 1em;
                margin-left: auto;
                margin-right: 0.5rem;
                flex-shrink: 0;
            }
        }

        [open] & h3::after,
        [open] & h4::after {
            transform: rotate(180deg) translateY(10px);
        }
    }

    &[open]::details-content {
        max-width: 36em;
        margin-top: 1em;
    }
}

#AoSProgram .backgroundColourBlock.sidebar {
    grid-column: 11 / -1;
    grid-row: 1 / span 5;
    margin-right: 3em;
    z-index: -2;

    &::before {
        background-color: var(--trent-blue-lighter);
    }

}

#AoSProgram .backgroundColourBlock.scholarships {
    grid-column: 1/-1;
    grid-row: 7;

    &::before {
        background-color: var(--trent-blue-lighter);
    }

}

#AoSProgram .backgroundColourBlock.careers {
    grid-column: 1/-1;
    grid-row: 5;

    &::before {
        background-color: var(--trent-green-new);
    }

}

@media screen and (max-width: 64em) {
    :root {
        --grid-margins: 4dvw;
    }

    #AoSProgram div.backgroundColourBlock.sidebar {
        margin-right: 0;
    }

    #AoSProgram .content-grid div.atAGlance {
        grid-column: 11 / -1;
    }
    #AoSProgram .content-grid .AoSExperientialLearning .AoSMedia .slides {
        grid-auto-columns: 33em;
        &::scroll-button(*) {
            display: none;
        }
    }

}

@media screen and (max-width: 57.5em) {
    main>.aosProgramPicker {
        font-size: clamp(15px, 1dvw, 18px);
    }

    .AoSProgramHero {
        .AoSProgramHeroData {

            .degreeType,
            h1.page-header {
                grid-column: 1 / -1;
            }

            .AoSProgamInfoContainer {
                grid-column: 1/ span 6;
            }

            .AoSProgramHeroImage {
                grid-row: 3;
                grid-column: 6 / -1;
                margin-bottom: 1em;
            }
        }
    }

}

@media screen and (max-width: 47.5em) {
    :root {
        --grid-margins: 0;
    }

    .AoSProgramHero {
        grid-template-rows: repeat(5, auto);
        grid-column: 2 / -2;

        .backgroundColourBlock {
            grid-row: 1 / span 4;
        }

        .AoSCtaButtons {
            grid-row: 5;
            grid-column: 1 / -1;
            margin: 0 0.5em -2em;
            font-size: 0.9em;

            ul {
                justify-self: center;
            }
        }

        .AoSProgramHeroData {
            .AoSProgamInfoContainer {
                grid-column: 1/ -1;
            }

            .AoSProgramHeroImage {
                grid-row: 4;
                grid-column: 1 / -1;
                margin-bottom: 1em;
            }
        }
    }

    #AoSProgram .content-grid div.atAGlance {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    #AoSProgram div.backgroundColourBlock.sidebar {
        display: none;
    }

    #AoSProgram div.contentGridColourBlock.sidebar {
        grid-row: 1;
        grid-column: 1 / -1;
        display: block;
    }

    #AoSProgram div.contentGridColourBlock.sidebar::before {
        background-color: var(--trent-blue-lighter);
    }

    #AoSProgram .content-grid {
        .atAGlance {
            .stickyBar {
                ul {
                    flex-flow: row wrap;
                }
            }

            .stickyBar li:last-child {
                flex-flow: row wrap;
            }
        }

        .AoSDegreeHighlights,
        .AoSProgramPossibilities,
        .AoSExperientialLearning {
            grid-column: 3 / -3;
        }

        .AoSExperientialLearning {
            .AoSExpPoint {
                grid-column: 1 / -1;
                row-gap: 1em;

                .AoSExpPointTitle,
                .AoSExpPointData {
                    grid-column: 1 / -1;
                }
            }

            hr.divider {
                grid-column: 1/ -1;
            }

            .AoSMedia .slides {
                grid-auto-columns: 75dvw;

                &::scroll-button(*) {
                    display: none;
                }
            }
        }
    }

    #AoSProgram {
        details summary {
            width: 100%;
        }

        table {
            display: flex;
            flex-flow: row nowrap;
            position: relative;
            overflow-x: scroll;
            container-type: scroll-state;
            container-name: my-scroller;

            tbody {
                display: flex;
                flex-flow: row nowrap;

                tr td {
                    width: 10em;
                }
            }

            thead {
                position: sticky;
                left: 0;
                max-width: 12em;
            }

            tr {
                display: inline-grid;
                grid-auto-rows: 1fr;
                height: stretch;
            }
        }

        .AoSCareer {
            grid-column: 3 / -3;
            grid-row: 5;
            margin: 2em 0 0 0;

            ul {
                margin: 0;
            }
        }

        .AoSTestimonial {
            grid-column: 3 / -3;
            grid-row: 6;
            margin: 1em 0 2em 0;

            &::before {
                transform: translateY(0);
            }

            &::after {
                transform: translate(-2em, 0);
            }
        }

        .backgroundColourBlock.careers {
            grid-row: 5 / span 2;
        }

        .AoSAdmissionsRequirements {
            grid-row: 7;
            grid-column: 3 / -3;
            gap: 2em;

            .AoSAdmissions,
            .AoSRequirements {
                grid-column: 1 / -1;
            }
        }

        .AoSScholarships {
            grid-row: 8;
            grid-column: 3 / -3;
            margin: 2em 0;

            .AoSTutition,
            .scholarships {
                grid-column: 1 / -1;
            }
        }

        .backgroundColourBlock.scholarships {
            grid-row: 8 / span 2;
        }

        .RFI {
            grid-column: 3 / -3;
        }

        .AoSCTAs ul {
            justify-self: center;
            margin-left: 0.5em;
            margin-right: 0.5em;
            font-size: 0.9em;
        }
    }

    main>.aosProgramPicker h1 {
        font-size: 3em;
    }

}

/* @container my-scroller scroll-state(scrollable: right){
    #AoSProgram table::after  {
            content: "";
            box-shadow: inset 1px 1px 1px black;
        }
} */