:root {
    --water-mist: #d6e4e6;
    --paper: #fbf9f4;
    --sand: #f4ede0;
    --shadow-sm: 0 1px 2px rgba(28, 37, 48, 0.06), 0 2px 6px rgba(28, 37, 48, 0.04);
    --shadow: 0 4px 12px rgba(28, 37, 48, 0.08), 0 12px 32px rgba(28, 37, 48, 0.06);
    --shadow-lg: 0 8px 24px rgba(28, 37, 48, 0.10), 0 24px 60px rgba(28, 37, 48, 0.10);
}

.page-node-type-sub-section .layout-content {
    padding-bottom: 0;
}

.node--type-sub-section {
    &.node--view-mode-full {
        background-color: var(--paper);

        div.subtitle,
        div.headline {
            font-size: 0.875rem;
            font-weight: 700;
            display: block;
            margin-bottom: 1em;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            opacity: 0.5;
        }

        .paragraph.beige {
            border-top: 4px solid var(--highlightBeige);
            background: var(--sand);
            padding-top: 4em;
            padding-bottom: 4em;
            > .para-section {
                h2, h3, a {
                    color: var(--text);
                }

                h2 em {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C30,5 55,10 80,7 S110,6 118,8' fill='none' stroke='%237c6858' stroke-width='7' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
                    background-size: 100% 0.5em;
                    background-blend-mode: color-burn;
                }
            }
        }

        .paragraph.green + .paragraph.green {
            padding-bottom: 2em;
        }
        /* Banner */
        .paragraph--type--banner {
            background: radial-gradient(ellipse at 20% 30%, rgba(64, 120, 125, 0.18) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(45, 85, 96, 0.22) 0%, transparent 55%), linear-gradient(180deg, var(--water-mist) 0%, #c4d8db 100%);
            padding: 5em 0 6em;

            .banner-content {
                max-width: 85rem;
                padding: 0 2rem;
                margin: 0 auto;
                width: 100%;

                h1 {
                    max-width: 14ch;
                    
                    em {
                        font-weight: 900;
                        font-family: serif;
                        font-size: 1.25em;
                        display: inline;
                        padding-bottom: 0.25rem;
                        background-repeat: no-repeat;
                        background-position: 0 100%;
                          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C30,5 55,10 80,7 S110,6 118,8' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
                        background-size: 100% 0.5em;
                        background-blend-mode: soft-light;
                    }
                }

                .field p {
                    max-width: 45ch;
                }

                .field--name-field-banner-links {
                    @media screen and (min-width: 60em) {
                        display: flex;
                        gap: 1rem;
                    }
                    margin-top: 3em;

                    .field__item a {
                        display: inline-block;
                        border: 2px solid var(--highlightBlue);
                        background-color: var(--highlightBlue);
                        color: white;
                        padding: 0.75rem 2.5rem;
                        border-radius: 2.5rem;
                        font-weight: 700;
                        text-decoration: none;
                        margin-bottom: 1em;
                    }

                    .field__item + .field__item a {
                        border: 2px solid var(--highlightBlue);
                        background-color: white;
                        color: var(--highlightBlue);
                    }
                }
            }
        }

        /* TOC */
        .paragraph--type-table-of-contents {
            .view-table-of-contents {
                max-width: fit-content;
                background-color: transparent;
                padding: 0;
                box-shadow: none;
                border-radius: 0;

                h2 {
                    border: 0;
                    font-weight: 700;
                }

                ul li {
                    min-width: 20ch;
                    border-bottom: 1px solid  var(--backgroundAlt);
                    padding-left: 0;

                    a {
                        text-decoration: none;
                        display: block;
                        font-weight: 500;
                        font-size: 1rem;
                        padding-bottom: 0.5em;
                        padding-right: 1.5em;
                        padding-left: 0.5em;
                    }

                    &:before {
                        left: calc(100% - 1.25em);
                        opacity: 0.4;
                        transition: all 0.333s ease-out;
                    }

                    &:hover,
                    &:has(a:hover) {
                        &:before {
                           left: calc(100% - 0.75em);
                            opacity: 0.85;
                            transition: all 0.333s ease-in;
                        }
                    }
                }
            }

            @media screen and (min-width: 60em) {
                &.one {
                    ul {
                        column-count: 1;
                    }
                }

                &.two {
                    ul {
                        column-count: 2;
                    }
                }

                &.three {
                    ul {
                        column-count: 3;
                    }
                }

                &.four {
                    ul {
                        column-count: 4;
                    }
                }

                &.five {
                    ul {
                        column-count: 5;
                    }
                }
            }
        }

        /* Split content */
         .paragraph--type-split-content {
            .primary-content {
                @media screen and (min-width: 60em) {
                    width: 50%;
                    margin: 0 auto;
                    text-align: center;
                }


                h2 {
                    font-size: 2em;
                    max-width: 20ch;
                    margin-left: auto;
                    margin-right: auto;

                    em {
                        display: inline;
                        padding-bottom: 0.15em;
                        background-repeat: no-repeat;
                        background-position: 0 100%;
                        background-size: 100% 0.4em;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,7 C20,4 35,8 55,6 C75,4 95,9 118,5 C100,8 70,6 50,8 C30,9.5 15,7 2,7 Z' fill='%23ffffff'/%3E%3C/svg%3E");
                        background-size: 100% 0.45em;
                        background-blend-mode: soft-light;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C30,5 55,10 80,7 S110,6 118,8' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
                        background-size: 100% 0.5em;
                    }
                }
            }
         }

         .paragraph:has(div.headline) {
            padding-top: 4em;
            padding-bottom: 2em;
        }

        .paragraph--type-split-content:has(.paragraph--type-card) {
            > .para-section {
                @media screen and (min-width: 60em) {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 2rem;
                }

                .primary-content {
                    @media screen and (min-width: 60em) {
                        width: 50%;
                    }
                    margin: 0;
                    text-align: left;

                    h2 {
                        margin-left: 0;
                        margin-right: 0;
                    }
                }
                
                .field--name-field-cards {
                    @media screen and (min-width: 60em) {
                        width: calc(50% - 2rem);
                    }

                    .paragraph--type-card {
                        background-color: white;
                        padding: 1.5em 0;
                        border-radius: 2em;
                        border: 2px solid var(--backgroundAlt);

                        .field--name-field-card-title {
                            font-weight: 600;
                            font-size: 1.5rem;
                            color: var(--highlightBeige);
                            margin-bottom: 0.5rem;
                        }

                        blockquote {
                            border: 0;
                            margin: 0;
                            padding: 0;
                            color: var(--text);
                            font-size: 1rem;
                            font-weight: 700;
                            position: relative;
                            padding-left: 1em;

                            &:before {    
                                content: '"';
                                font-size: 4em;
                                font-family: var(--fontBold);
                                color: var(--highlightBeige);
                                font-family: serif;
                                font-style: italic;
                                position: absolute;
                                left: -0.333em;
                                top: -0.5em;
                            }

                            p:last-child {
                                margin: 0;
                            }
                        }
                    }

                    .paragraph--type-card + .paragraph--type-card {
                        margin-top: 1rem;
                    }
                }
            }
        }

        /* Flip Cards */
        .paragraph--type-split-content:has(.paragraph--type-flip-card) {
            .primary-content {
                max-width: 60ch;
                text-align: left;
                margin: 0;

                h2 {
                    margin-left: 0;
                    margin-right: 0;
                }
            }
            .field--name-field-cards {
                display: flex;
                gap: 1rem;
                margin-bottom: 2em;
                flex-wrap: wrap;
                justify-content: flex-start;

                .paragraph--type-flip-card {
                    width: calc(25% - 0.75em);
                    min-width: 280px;

                    .para-section {
                        padding: 0;

                        .flip-card {
                            background: transparent;
                            border: none;
                            padding: 0;
                            perspective: 1200px;
                            cursor: pointer;
                            font-family: inherit;
                            text-align: left;
                            width: 100%;
                            display: block;
                            transition: transform 0.15s;
                            
                            .flip-inner {
                                display: block;
                                position: relative;
                                width: 100%;
                                min-height: 220px;
                                transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
                                transform-style: preserve-3d;

                                .flip-face {
                                    box-sizing: border-box;
                                    backface-visibility: hidden;
                                    -webkit-backface-visibility: hidden;
                                    border-radius: 1em;
                                    padding: 26px 22px;
                                    display: flex;
                                    flex-direction: column;
                                }

                                .flip-front {
                                    position: relative;
                                    min-height: 220px;
                                    background: rgba(255, 255, 255, 0.12);
                                    border: 1px solid rgba(255, 255, 255, 0.2);
                                    color: var(--white);
                                }

                                .flip-back {
                                    position: absolute;
                                    inset: 0;
                                    transform: rotateY(180deg);
                                    background: var(--white);
                                    color: var(--ink-soft);
                                }

                                .initial {
                                    font-weight: 700;
                                    font-size: 4rem;
                                    line-height: 1;
                                    color: var(--white);
                                    margin-bottom: 0.25rem;
                                    font-family: var(--fontBold);
                                }

                                .subtitle {
                                    text-transform: uppercase;
                                    letter-spacing: 0.12em;
                                    font-size: 0.75rem
                                }

                                .flip {
                                    margin-top: auto;
                                    font-size: 0.75rem;
                                    letter-spacing: 0.12em;
                                    text-transform: uppercase;
                                    font-weight: 700;
                                    display: inline-flex;
                                    align-items: center;
                                    gap: 6px;
                                    opacity: 0.7;
                                }

                                .detail-header {
                                    font-size: 0.75rem;
                                    letter-spacing: 0.12em;
                                    text-transform: uppercase;
                                    font-weight: 700;
                                    color: var(--primary);
                                    margin-bottom: 0.5rem;
                                }

                                .detail-content {
                                    font-size: 1.25rem;
                                    font-weight: 700;
                                    line-height: 1.35;
                                }

                                .back {
                                    margin-top: auto;
                                    font-size: 0.75rem;
                                    letter-spacing: 0.12em;
                                    text-transform: uppercase;
                                    font-weight: 700;
                                    display: inline-flex;
                                    align-items: center;
                                    gap: 6px;
                                    opacity: 0.7;
                                    color: var(--primary);
                                }
                            }
                        }

                        .flip-card:hover {
                            transform: translateY(-4px);
                            box-shadow: var(--shadow);
                        }

                        .flip-card:focus-visible .flip-inner, 
                        .flip-card.flipped .flip-inner {
                            transform: rotateY(180deg);
                        }
                    }
                }
            }
        }

        .paragraph--type-split-content.invert:has(.paragraph--type-flip-card) {
            .field--name-field-cards {
                .paragraph--type-flip-card {
                    .para-section {
                        .flip-card {
                            .flip-inner {
                                .flip-front {
                                    min-height: 240px;
                                    background: var(--white);
                                    color: var(--ink);
                                    align-items: flex-start;
                                }

                                .flip-back {
                                    background: var(--primaryDark);
                                    color: rgba(255, 255, 255, 0.95);
                                }

                                .initial {
                                    color: var(--primary);
                                }

                                .subtitle {
                                    text-transform: uppercase;
                                    letter-spacing: 0.06em;
                                    font-size: 1rem
                                }

                                .detail-header {
                                    color: var(--white);
                                    opacity: 0.5;
                                }

                                .detail-content {
                                    font-size: 0.875rem;
                                    font-style: normal;
                                    line-height: 1.5;
                                    font-weight: 500;
                                }

                                .back {
                                    opacity: 0.7;
                                    color: var(--white);
                                }
                            }
                        }

                        .flip-card:focus-visible .flip-inner, 
                        .flip-card.flipped .flip-inner {
                            transform: rotateY(180deg);
                        }
                    }
                }
            }
        }

        /* Static Cards */
        .paragraph--type-static-cards {
            h2 {
                    font-size: 2em;
                    max-width: 30ch;
                    margin-left: 0;
                    margin-right: 0;

                    em {
                        display: inline;
                        padding-bottom: 0.15em;
                        background-repeat: no-repeat;
                        background-position: 0 100%;
                        background-size: 100% 0.4em;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,7 C20,4 35,8 55,6 C75,4 95,9 118,5 C100,8 70,6 50,8 C30,9.5 15,7 2,7 Z' fill='%23ffffff'/%3E%3C/svg%3E");
                        background-size: 100% 0.45em;
                        background-blend-mode: soft-light;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C30,5 55,10 80,7 S110,6 118,8' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
                        background-size: 100% 0.5em;
                    }
            }

            .field--name-field-introduction {
                max-width: 60ch;
            }

            .list {
                gap: 1rem;
                justify-content: space-between;
                flex-wrap: wrap;
                display: block;
                @media screen and (min-width: 60em) {
                    display: flex;
                }

                li {
                    
                    .paragraph {
                        border-top: 4px solid var(--highlightBeige);
                    }

                    &:first-child .paragraph{
                        border-top: 4px solid var(--highlightRed);
                    }

                    &:last-child .paragraph{
                        border-top: 4px solid var(--highlightBlue);
                    }
                }

                .paragraph {
                    transition: transform 0.2s, box-shadow 0.2s;
                    height: 100%;
                    background-color: white;
                    padding: 1.5em 0;
                    border-radius: 1em;
                    border: 2px solid var(--backgroundAlt);

                    .field--name-field-card-title {
                        font-weight: 600;
                        font-size: 1.25rem;
                        color: var(--text);
                        margin-bottom: 0.5rem;
                    }

                    .field--name-field-content {
                        font-size: 1rem;
                    }

                    &:hover {
                        box-shadow: var(--shadow);
                    }
                }
            }

            .field--name-field-footer {
                .paragraph {
                    background-color: var(--backgroundGreenDark);
                    border-left: 8px solid var(--primary);
                    padding: 1rem 0;
                    max-width: 90ch;

                    h2 {
                        font-size: 1.25rem;
                        max-width: 50ch;
                        margin: 0 0 0.5rem;
                    }

                    p:last-child {
                        margin: 0;
                    }
                }
            }

            @media screen and (min-width: 60em) {
                &.one {
                .list {
                    display: block;
                    li {
                        width: 60ch;
                    }
                }
                }

                &.two {
                    .list li {
                        width: calc(50% - 0.5rem);
                    }
                }

                &.three {
                    .list li {
                        width: calc(33.333% - 1rem);
                    }
                }

                &.four {
                    .list li {
                        width: calc(25% - 0.75rem);
                    }
                }

                &.five {
                    .list li {
                        width: calc(20% - 0.8rem);
                    }
                }
            }

            &.green {
                .list {
                    li {
                        .paragraph {
                            border: 1px solid rgba(255, 255, 255, 0.2);
                        }
                    }

                    .paragraph {
                        transition: transform 0.2s, box-shadow 0.2s;
                        height: 100%;
                        padding: 1.5em 0;
                        border-radius: 1em;
                        background: rgba(255, 255, 255, 0.12);
                        color: var(--white);

                        img {
                            border: 1px solid rgba(255, 255, 255, 0.2);
                            border-radius: 50%;
                            padding: 0.5em;
                            float: right;
                            margin-top: -1em;
                            margin-right: -1.25em;
                            background: var(--primaryDark);
                        }

                        .field--name-field-card-title {
                            font-weight: 600;
                            font-size: 1.5rem;
                            margin-bottom: 0.5rem;
                            color: white;
                        }

                        .field--name-field-content {
                            font-size: 1rem;

                            h3 {
                                font-weight: 500;
                            }
                        }

                        &:hover {
                            box-shadow: var(--shadow);
                        }
                    }
                }
            }

            &.green + .green {
                padding-bottom: 2em;
            }
        }

        /* CTAs */
        .paragraph--type-call-to-action {
            padding-left: 1rem;
            padding-right: 1rem;
            .para-section {
                max-width: 80ch;
                margin: 3rem auto;
                background-color: #ffffff;
                color: var(--text);
                padding: 1.5rem 2rem 2rem;
                border-radius: 1.5em;

                h2 {
                    margin-bottom: 1rem;
                }

                p:last-child {
                    margin: 0;
                }

                img {
                    float: right;
                    max-width: 4rem;
                }

                .cta-link {
                    margin-top: 1rem;
                    a {
                        color: var(--primary);
                    }
                }
            }

            &.red {
                background-color: var(--paper);

                .para-section {
                    border: 2px solid var(--highlightRed);
                }

                h2 {
                    color: var(--highlightRedDark);
                    color: var(--highlightRed);
                }

                .cta-link a {
                    color: var(--highlightRed);
                }
            }
        }

        /* Library */
        .paragraph--type-library {
            h2 {
                    font-size: 2em;
                    max-width: 30ch;
                    margin-left: 0;
                    margin-right: 0;

                    em {
                        display: inline;
                        padding-bottom: 0.15em;
                        background-repeat: no-repeat;
                        background-position: 0 100%;
                        background-size: 100% 0.4em;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,7 C20,4 35,8 55,6 C75,4 95,9 118,5 C100,8 70,6 50,8 C30,9.5 15,7 2,7 Z' fill='%23ffffff'/%3E%3C/svg%3E");
                        background-size: 100% 0.45em;
                        background-blend-mode: soft-light;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C30,5 55,10 80,7 S110,6 118,8' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
                        background-size: 100% 0.5em;
                    }
            }

            .field--name-field-content {
                max-width: 60ch;
            }

            .views-exposed-form {
                background-color: white;
                border-radius: 1em;
                padding: 1em 2em;
                max-width: fit-content;
                margin-bottom: 2em;

                .form--inline {
                    margin: 0;
                    display: block;
                    @media screen and (min-width: 60em) {
                        display: flex;
                    }

                    fieldset {
                        border: 0;
                        margin: 0;
                        padding: 0;

                        legend {
                            display: none;
                        }
                    }

                    a.bef-toggle {
                        margin: 0;
                        background-color: var(--backgroundGreenDark);
                        color: var(--primary);
                        padding: 0.5em 1.5em 0.5em 1.5em;
                        border-radius: 2em;
                        text-decoration: none;
                        font-weight: 500;
                        line-height: 1;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        border: 2px solid var(--borderGrey);

                        &:hover,
                        &:focus-visible {
                            color: var(--highlightBlue);
                            background-color: var(--paper);
                            border-color: var(--highlightBlue);
                        }

                        &.bef-toggle--deselect-all {
                            background-color: var(--highlightBlue);
                            color: white;
                        }
                    }

                    .form-checkboxes {
                        @media screen and (min-width: 60em) {
                            display: flex;
                            gap: 1rem;
                        }
                        color: var(--text);

                        .form-item {

                            background-color: var(--backgroundGreenDark);
                            color: var(--primary);
                            padding: 0.5em 1.5em 0.5em 1em;
                            border-radius: 2em;
                            display: flex;
                            @media screen and (min-width: 60em) {
                                margin: 0;
                                display: block;
                            }

                            label.option {
                                margin-left: 0.5em;
                                background-color: transparent;
                            }

                            &:hover,
                            &:focus-visible {
                                border-color: var(--highlightBlue);
                                color: var(--highlightBlue);
                                background-color: var(--paper);
                                cursor: pointer;
                            }

                            &:has(input:checked) {
                                background-color: var(--highlightNavy);
                                color: white;
                                border-color: var(--highlightBlue);

                                label.option {
                                    color: white;
                                    font-weight: 600;
                                }

                                input:checked {
                                    background-color: var(--highlightBlue);
                                }
                            }
                        }
                    }

                    .form-actions {
                        display: none;
                    }
                }
            }

            .view-library-filter {
                .list {
                    @media screen and (min-width: 60em) {
                        display: flex;
                        gap: 2rem;
                        flex-wrap: wrap;
                    }

                    li.views-row {
                        width: 100%;
                        margin-bottom: 1em;
                        @media screen and (min-width: 60em) {
                            max-width: calc(50% - 1rem);
                            margin-bottom: 0;
                        }

                        &:first-child {
                            @media screen and (min-width: 60em) {
                                max-width: 67%;
                            }

                            .paragraph .field--name-field-content {
                                max-width: 100%;
                            }
                        }
                    }
                }
            }
        }

        /* Exercise card */
        .paragraph--type-exercise {
            overflow: hidden;
            border-radius: 2rem;
            height: 100%;
            transition: all ease-out 0.3s;

            .para-section {
                padding: 0.1rem 2rem 2rem;
                background-color: white;
                color: var(--text);
                transition: all ease-out 0.3s;
                height: 100%;

                article.media {
                    margin: -0.1rem -2rem 0;
                    max-width: inherit;
                    width: calc(100% + 4rem);
                    padding: 0;
                    height: auto;

                    img {
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .categories {
                    margin: 2rem 0 1.5rem;
                    ul {
                        gap: 1rem;

                        li {
                            font-size: 0.75rem;
                            text-transform: uppercase;
                            letter-spacing: 0.18em;
                            background-color: var(--backgroundGreenDark);
                            color: var(--primary);
                            padding: 0.333em 1.5em;
                            border-radius: 2em;
                            margin: 0;
                        }
                    }
                }

                h3 {
                    color: var(--text);
                    font-size: 1.5rem;
                    margin-bottom: 1.25rem;
                }

                .field--name-field-content {
                    max-width: 50ch;
                    font-size: 1rem;
                }
            }

            &:hover {
                box-shadow: var(--shadow);

                .para-section {
                    background-color: var(--paper);
                    transition: all ease-in 0.3s;
                }
            }
        }
        
    }
}