/* Section */
.section {
    position: relative;
    display: flex;
    padding-block: calc(var(--gap) * 4) calc(var(--gap) * 5);
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    overflow: hidden;
    scroll-margin-top: var(--header-height);

    >* {
        width: 100%;
    }

    @media (min-width: 1000px) {
        padding-block: calc(var(--gap) * 8) calc(var(--gap) * 10);
        gap: calc(var(--gap) * 8);
    }
}

.section:has(.section__title) {
    @media (min-width: 1000px) {
        gap: calc(var(--gap) * 4);
    }
}

.section__header {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    padding-inline: calc(var(--gap) * 2);
    margin-inline: auto;
    max-width: var(--container-max);
    justify-content: flex-end;

    >*:first-child {
        flex: 1;
    }

    @media (min-width: 1000px) {
        gap: calc(var(--gap) * 8);
    }
}

.section__title {
    font-size: var(--text-md);
    line-height: 1;
}

.section__heading {
    font-size: var(--text-lg);
    line-height: 1;
}

.section__heading::before {
    content: "";
    aspect-ratio: 1 / 1;
    width: 1ch;
    background-image: url("../assets/svg/section-title.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin-inline-end: var(--gap);
    filter: var(--filter-primary-lightest);

    @media (min-width: 500px) {
        display: inline-block;
    }
}

.section__heading::after {
    content: ".";
    color: var(--color-blue);
    display: inline-block;
}

.section__content {
    padding-inline: calc(var(--gap) * 2);
    margin-inline: auto;
    max-width: var(--container-max);
    width: 100%;
}

.section__content > img,
.section__content > video,
.section__content > picture,
.section__content > picture > img  {
    margin-inline: auto;
}

.section__header+.section__content {
    margin-block: calc(var(--gap) * -2);
}

.section__description {
    position: relative;
    z-index: 1;
}

.section__content p,
.section__content ul,
.section__content ol,
.section__content h2,
.section__content h3,
.section__content h4,
.section__content h5,
.section__content h6,
.expandable__body-content p,
.expandable__body-content ul,
.expandable__body-content ol,
.expandable__body-content h2,
.expandable__body-content h3,
.expandable__body-content h4,
.expandable__body-content h5,
.expandable__body-content h6 {
    padding-block: calc(var(--gap) * 2);
}

.section__content h4+p,
.expandable__body-content h4+p {
    padding-block-start: 0;
}

.expandable__body-content p+ul,
.expandable__body-content p+ol {
    padding-block-start: 0;
}

.section__content h3,
.expandable__body-content h3,
.section__content h4,
.expandable__body-content h4 {
    line-height: 1.3;
}

.section__content h3,
.expandable__body-content h3 {
    font-size: var(--text-sm);
}

.section__content h4,
.expandable__body-content h4 {
    font-size: var(--text-xs);
}

.section__content>ul,
.section__column>ul,
.expandable__body-content>ul {
    list-style: disc;
    padding-inline-start: calc(var(--gap) * 3);
}

.section__content>ol,
.section__column>ol,
.expandable__body-content>ol {
    list-style: decimal;
    padding-inline-start: calc(var(--gap) * 3);
}

.section__content>ul li,
.section__content>ol li,
.section__column>ul li,
.section__column>ol li,
.expandable__body-content>ul li,
.expandable__body-content>ol li {
    padding-block: calc(var(--gap) * 0.5);
    line-height: 1.6;
}

.section__content>ul ul,
.section__content>ol ol,
.section__content>ul ol,
.section__content>ol ul,
.section__column>ul ul,
.section__column>ol ol,
.section__column>ul ol,
.section__column>ol ul,
.expandable__body-content>ul ol,
.expandable__body-content>ul ul,
.expandable__body-content>ol ol,
.expandable__body-content>ol ul {
    margin-inline-start: calc(var(--gap) * 2);
    margin-block-end: calc(var(--gap) * 0.5);
}

.section__content>ul li>ol,
.section__content>ul li>ul,
.section__content>ol li>ol,
.section__content>ol li>ul,
.section__column>ul li>ol,
.section__column>ul li>ul,
.section__column>ol li>ol,
.section__column>ol li>ul,
.expandable__body-content>ul li>ol,
.expandable__body-content>ul li>ul,
.expandable__body-content>ol li>ol,
.expandable__body-content>ol li>ul {
    padding-block-start: var(--gap);
}

.section__content>ul ul,
.section__column>ul ul,
.expandable__body-content>ul ul {
    list-style: circle;
}

.section__content>ul ul ul,
.section__column>ul ul ul,
.expandable__body-content>ul ul ul {
    list-style: square;
}

.section__content>ol ol,
.section__column>ol ol,
.expandable__body-content>ol ol {
    list-style: lower-alpha;
}

.section__content>ol ol ol,
.section__column>ol ol ol,
.expandable__body-content>ol ol ol {
    list-style: lower-roman;
}

@media (min-width: 1000px) {
    .section__header {
        flex-direction: row;
        align-items: center;
    }

    .section__heading {
        flex: 1;
    }

    .section__description {
        max-width: 40%;
    }

    .section__columns {
        display: flex;
        flex-direction: row;
        gap: calc(var(--gap) * 6);
    }

    .section__columns--balanced .section__column {
        flex: 1;
    }

    .section__column:first-child {
        max-width: calc(60% - var(--gap) * 6);
    }

    .section__columns--balanced .section__column:first-child {
        max-width: none;
    }
}

@media (min-width: 1440px) {
    .section__heading::before {
        width: 2ch;
        position: absolute;
        left: 0;
    }
}

/* Section background color modifiers */
.section--gray-lightest {
    background-color: var(--color-gray-lightest);
}

.section--blue-ice {
    background-color: var(--color-blue-ice);

    a:not([class]) {
        color: var(--color-gray-dark);
    }
}

.section--blue-navy {
    background-color: var(--color-blue-navy);
    color: #fff;

    a:not([class]) {
        color: #fff;
    }
}

.section--blue-navy-dark {
    background-color: var(--color-blue-navy-dark);
    color: #fff;

    a:not([class]) {
        color: #fff;
    }
}

/* Section Parallax Background */
.section__parallax {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    display: none;
}

.section__parallax-image {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 500px;
    width: 100%;
    height: auto;
    opacity: 0.75;
    filter: brightness(0) saturate(100%) invert(88%) sepia(8%) saturate(464%) hue-rotate(187deg) brightness(109%) contrast(94%);
}

.section__parallax--center-left .section__parallax-image {
    bottom: 25%;
}

.section--blue-ice .section__parallax-image {
    filter: brightness(0) saturate(100%) invert(90%) sepia(16%) saturate(404%) hue-rotate(156deg) brightness(93%) contrast(93%);
}

.section--blue-navy .section__parallax-image {
    filter: brightness(0) saturate(100%) invert(17%) sepia(78%) saturate(1029%) hue-rotate(203deg) brightness(98%) contrast(86%);
}

.section--blue-navy-dark .section__parallax-image {
    filter: brightness(0) saturate(100%) invert(10%) sepia(43%) saturate(6874%) hue-rotate(230deg) brightness(71%) contrast(88%);
}

.page--loaded .section__parallax {
    display: block;
}