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%
            
    .dropdown-share
        position: relative
        > button
            @include button-icon(social)
            color: $hero-color
            border-color: $hero-color
            font-size: $program-share-font-size
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
            &:hover,
            &:active,
            &:focus
                background: $main-background-color
                color: $main-color
            // a11y
            &:active,
            &:focus
                box-shadow: 0 0 0 0.25rem rgba(white, .5)
            @include media-breakpoint-up(md)
                font-size: $program-share-font-size-md
        .dropdown-menu
            background: $hero-color
            padding: 0
            position: absolute
            width: 100%
            bottom: 100%
            .share
                display: flex
                li
                    margin: 0
                    flex: 1 1
                    text-align: center
            a
                display: block
                color: invert($hero-color)
    .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: $spacing2
    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}
            padding: px2rem(20) 0
            li
                padding: calc(#{$spacing1}/3) calc(#{$spacing1}/2)
                margin-bottom: 0
    // .blocks
    //     .container
    //         padding-left: 0
    //         padding-right: 0
        // .block-content
            // @include media-breakpoint-up(md)
                // padding-left: offset(5)

    article
        .content
            padding-top: $spacing1
            padding-bottom: $spacing2

    @include media-breakpoint-up(md)
        article
            .content
                @include grid(12, md)
                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