programs.sass

//.programs__section
//     .page-with-blocks
//         .hero
//             margin-bottom: 3rem

//     main > article
//         position: relative
//         > aside
//             align-self: flex-start
//             margin-bottom: $spacing5
//             pointer-events: none
//             .toc + p
//                 margin-top: $grid-gutter
//             p:last-of-type
//                 margin-bottom: 0
//             @include media-breakpoint-down(md)
//                 position: relative
//             @include media-breakpoint-up(md)
//                 height: 100%
//                 margin-bottom: 0
//                 position: absolute
//                 width: 100%
//                 ~ *
//                     .container
//                         > *
//                             &:not(.call_to_action)
//                                 padding-left: col(4)
//                             &.call_to_action
//                                 margin-left: col(4)
//                             &:is(picture)
//                                 display: block
//             > div
//                 // @extend .container
//                 // @extend .sticky
//                 padding: 0
//                 > *
//                     // @extend .col-md-3
//                     padding-left: #{$grid-gutter / 2}
//                     padding-right: #{$grid-gutter / 2}
//                     pointer-events: auto
//         [itemprop="articleBody"]
//             margin-bottom: $spacing5
//     article
//         .persons
//             margin-bottom: 3rem
//             margin-top: -2rem
//             @include grid(2, lg)


.program
    @include article

div.programs,
section.programs
    @include grid(2, md)
    @include grid(3, xl)

ol.programs
    @include list-reset
    > li
        border-bottom: 1px solid $main-border-color
        padding-bottom: $spacing1
        padding-top: $spacing1
        > .title
            @extend .h3
        a
            text-decoration: none

        @include media-breakpoint-down(md)
            a, p
                display: block
        @include media-breakpoint-up(md)
            align-items: baseline
            display: flex
            justify-content: space-between
            a:first-child, p:first-child
            > .title
                & + a
                    margin-left: $spacing1
                    text-align: right

.programs__section
    .hero
        display: block
        // .dropdown-share
        //     margin-top: $spacing1
        //     @include media-breakpoint-up(md)
        //         bottom: $spacing1 + $spacing0 
        //         margin-top: 0
        //         position: absolute
        //         right: $grid-gutter
            // > button
            //     @include media-breakpoint-down(md)
            //         width: 100%
        .buttons
            margin-top: $spacing1
            @include media-breakpoint-up(md)
                bottom: 2.25rem
                margin-top: 0
                position: absolute
                right: $grid-gutter
            button, > a
                display: flex
                align-items: center
                justify-content: space-between
                width: 100%
            a[download]
                @include button-icon(download)
                color: $hero-background-color
                background: $hero-color
                border-color: $hero-color
                font-size: $program-share-font-size
                margin-top: $spacing1
                @include media-breakpoint-up(md)
                    font-size: $program-share-font-size-md
    .lead
        padding-top: $spacing4
    aside
        @include container
        @include sticky
        overflow: auto
        background: darken($main-background-color, 3)
        z-index: $program-zindex-toc
    .toc
        max-width: 100%
        ol
            display: flex
            flex-direction: row
            flex-wrap: nowrap
            justify-content: space-between
            white-space: nowrap
            margin: 0 #{-$spacing1}
            li
                padding: $spacing1/2 $spacing1
                margin-bottom: 0
    .blocks
        .block-content
            @include media-breakpoint-up(md)
                padding-left: offset(5)

    @include media-breakpoint-up(md)
        article
            .content
                @include grid(12, md)
                padding-top: $spacing1
                padding-bottom: $spacing4
                border-top: 1px solid $main-color
                position: relative
                > *
                    grid-column: 6/13
                > h2
                    $sticky-top-offset: 90px
                    @include sticky($sticky-top-offset)
                    top: $sticky-top-offset
                    align-self: start
                    grid-column: 1/5
                    margin-bottom: 0

    table 
        caption 
            @include visually-hidden