/* Content */

:root {
    --boldr-content-section-width: var(--boldr-columns-12);
    --boldr-content-text-align: left;
}

.boldr-content {
    position: relative;
    background-color: var(--boldr-content-background);

    --boldr-content-left-margin: 0;
    --boldr-content-left-column: var(--boldr-content-normal-left);
    --boldr-content-center: var(--boldr-spacers-1);
    --boldr-content-right-column: var(--boldr-content-normal-right);
    --boldr-content-right-margin: 0;

    --boldr-content-narrower-left: var(--boldr-columns-5);
    --boldr-content-normal-left: var(--boldr-columns-6);
    --boldr-content-wider-left: var(--boldr-columns-7);
    --boldr-content-narrower-right: var(--boldr-columns-5);
    --boldr-content-normal-right: var(--boldr-columns-6);
    --boldr-content-wider-right: var(--boldr-columns-7);

    --boldr-content-spacing-top: 0;
    --boldr-content-spacing-bottom: 1fr;
}

.boldr-content-has-background-image {
    padding: var(--boldr-spacing-large) 0;

    /* Black background combined with opaicty in image to make text legible */
    background: #000000;

    --boldr-text-color: #ffffff;
    --boldr-legible-primary-color: #ffffff;
    --boldr-legible-highlight-color: #ffffff;
}

.boldr-content-background-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.boldr-content-background-image-darken {
    opacity: 0.5;
}

.boldr-content-background-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.boldr-content-wrapper {
    margin: 0 auto;

    position: relative;
    z-index: 100;

    text-align: var(--boldr-content-text-align);
}

.boldr-content-section-normal .boldr-content-wrapper,
.boldr-content-section-left-margin .boldr-content-wrapper,
.boldr-content-section-right-margin .boldr-content-wrapper,
.boldr-content-section-narrower .boldr-content-wrapper {
    max-width: var(--boldr-columns-12);
    margin: 0 auto;
}

.boldr-content-section-full-width {
    margin: 0 var(--boldr-spacing-medium);

    --boldr-content-normal-left: calc(50% - var(--boldr-content-center) / 2);
    --boldr-content-wider-left: calc(60% - var(--boldr-content-center) / 2);
    --boldr-content-narrower-left: calc(40% - var(--boldr-content-center) / 2);
    --boldr-content-normal-right: calc(50% - var(--boldr-content-center) / 2);
    --boldr-content-wider-right: calc(60% - var(--boldr-content-center) / 2);
    --boldr-content-narrower-right: calc(40% - var(--boldr-content-center) / 2);
}

/* Alignment configurations */
.boldr-content-alignment-center .boldr-content-wrapper,
.boldr-content-alignment-full .boldr-content-wrapper {
    max-width: var(--boldr-content-section-width);
}

/* Grid section placement */
.boldr-content .boldr-section-heading { grid-area: heading-detached; }
.boldr-content-attach-heading-to-content .boldr-section-heading { grid-area: heading-attached; }


.boldr-content-opposite-content-image .boldr-content-images { grid-area: opposite; }
.boldr-content-opposite-content-heading .boldr-section-heading { grid-area: opposite; }

.boldr-content-content {
    grid-area: content;
    color: var(--boldr-text-color);
    font-family: var(--boldr-text-font-family);
    font-weight: var(--boldr-text-font-weight);
    font-size: var(--boldr-text-font-size);
    line-height: var(--boldr-text-line-height);
}

.boldr-content-content :first-child {
    margin-top: 0;
}

.boldr-content-content :last-child {
    margin-bottom: 0;
}

.boldr-content-images {
    position: relative;
    display: flex;
    align-items: stretch;
}

.boldr-content-images > * {
    flex: 1 1 auto;
}

.boldr-content-images img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.boldr-content-alignment-center .boldr-content-images:not(.empty) + .boldr-content-content,
.boldr-content-alignment-full .boldr-content-images:not(.empty) + .boldr-content-content {
    margin-top: var(--boldr-spacing-medium);
}

.boldr-content-alignment-center .boldr-content-content + .boldr-content-images:not(:empty),
.boldr-content-alignment-full .boldr-content-content + .boldr-content-images:not(:empty) {
    margin-top: var(--boldr-spacing-medium);
}

.boldr-content-links { grid-area: links-detached; }
.boldr-content-attach-links-to-content .boldr-content-links { grid-area: links-attached; }
.boldr-content-attach-links-to-images .boldr-content-images-links {
    position: absolute;
    left: 0;
    bottom: var(--boldr-spacing-medium);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.boldr-content-alignment-center .boldr-content-links {
    justify-content: center;
}

/* Headings and images in Horizontal layout */
.boldr-content-layout-heading-left .boldr-section-heading,
.boldr-content-layout-heading-right .boldr-section-heading,
.boldr-content-layout-heading-left .boldr-content-images,
.boldr-content-layout-heading-right .boldr-content-images {
    width: var(--boldr-columns-5);
}

/* Content links */
.boldr-content-links {
    margin-top: var(--boldr-spacing-medium);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.boldr-content-links .boldr-button {
    margin-bottom: var(--boldr-spacing-flow);
    margin-right: var(--boldr-spacing-flow);
}

.boldr-content-links .boldr-button:last-child {
    margin-bottom: 0;
    margin-right: 0;
}

.boldr-content-no-content .boldr-section-heading {
    margin-bottom: 0;
}

.boldr-content-alignment-center .boldr-content-wrapper {
    text-align: center;
}


@media screen and (max-width: 799px) {
    .boldr-content-image-above .boldr-content-images {
        margin-bottom: var(--boldr-spacing-medium);
    }
    .boldr-content-image-below .boldr-content-images {
        margin-top: var(--boldr-spacing-medium);
    }
}

@media screen and (min-width: 800px) {
    .boldr-content-alignment-left .boldr-content-wrapper,
    .boldr-content-alignment-right .boldr-content-wrapper {
        display: grid;
        gap: 0 0;
        grid-template-rows: auto var(--boldr-content-spacing-top) auto auto auto var(--boldr-content-spacing-bottom) auto;
    }

    .boldr-content-alignment-center .boldr-content-wrapper,
    .boldr-content-alignment-full .boldr-content-wrapper {
        padding-left: var(--boldr-content-left-margin);
        padding-right: var(--boldr-content-right-margin);
    }

    .boldr-content-alignment-left .boldr-content-wrapper,
    .boldr-content-alignment-right .boldr-content-wrapper {
        grid-template-columns: var(--boldr-content-left-margin) var(--boldr-content-left-column) var(--boldr-content-center) var(--boldr-content-right-column) var(--boldr-content-right-margin);
    }
    .boldr-content-alignment-left .boldr-content-wrapper {
        grid-template-areas:
            "left heading-detached heading-detached heading-detached right"
            "left x center opposite right"
            "left heading-attached center opposite right"
            "left content center opposite right"
            "left links-attached center opposite right"
            "left y center opposite right"
            "left links-detached links-detached links-detached right";
    }

    .boldr-content-alignment-right .boldr-content-wrapper {
        grid-template-areas:
            "left heading-detached heading-detached heading-detached right"
            "left opposite center x right"
            "left opposite center heading-attached right"
            "left opposite center content right"
            "left opposite center links-attached right"
            "left opposite center y right"
            "left links-detached links-detached links-detached right";
    }

    /* Opposite: spacing top = auto: align bottom */
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-auto.boldr-content-opposite-content-image .boldr-content-images { align-self: end; }
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-auto.boldr-content-opposite-content-heading .boldr-section-heading { align-self: end; }

    /* Opposite: spacing top = auto: align top */
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-auto.boldr-content-opposite-content-image .boldr-content-images { align-self: start; }
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-auto.boldr-content-opposite-content-heading .boldr-section-heading { align-self: start; }

    /* Opposite: spacing top & bottom = auto: align center */
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-auto.boldr-content-spacing-bottom-opposite.boldr-content-spacing-bottom-auto.boldr-content-opposite-content-image .boldr-content-images { align-self: center; }
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-auto.boldr-content-spacing-bottom-opposite.boldr-content-spacing-bottom-auto.boldr-content-opposite-content-heading .boldr-section-heading { align-self: center; }

    /* Opposite: spacing top: large */
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-large.boldr-content-opposite-content-image .boldr-content-images { margin-top: var(--boldr-spacing-large); }
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-large.boldr-content-opposite-content-heading .boldr-section-heading { margin-top: var(--boldr-spacing-large); }

    /* Opposite: spacing top: medium */
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-medium.boldr-content-opposite-content-image .boldr-content-images { margin-top: var(--boldr-spacing-medium); }
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-medium.boldr-content-opposite-content-heading .boldr-section-heading { margin-top: var(--boldr-spacing-medium); }

    /* Opposite: spacing top: small */
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-small.boldr-content-opposite-content-image .boldr-content-images { margin-top: var(--boldr-spacing-small); }
    .boldr-content-spacing-top-opposite.boldr-content-spacing-top-small.boldr-content-opposite-content-heading .boldr-section-heading { margin-top: var(--boldr-spacing-small); }

    /* Opposite: spacing bottom: large */
    .boldr-content-spacing-bottom-opposite.boldr-content-spacing-bottom-large.boldr-content-opposite-content-image .boldr-content-images { margin-bottom: var(--boldr-spacing-large); }
    .boldr-content-spacing-bottom-opposite.boldr-content-spacing-bottom-large.boldr-content-opposite-content-heading .boldr-section-heading { margin-bottom: var(--boldr-spacing-large); }

    /* Opposite: spacing bottom: medium */
    .boldr-content-spacing-bottom-opposite.boldr-content-spacing-bottom-medium.boldr-content-opposite-content-image .boldr-content-images { margin-bottom: var(--boldr-spacing-medium); }
    .boldr-content-spacing-bottom-opposite.boldr-content-spacing-bottom-medium.boldr-content-opposite-content-heading .boldr-section-heading { margin-bottom: var(--boldr-spacing-medium); }

    /* Opposite: spacing bottom: small */
    .boldr-content-spacing-bottom-opposite.boldr-content-spacing-bottom-small.boldr-content-opposite-content-image .boldr-content-images { margin-bottom: var(--boldr-spacing-small); }
    .boldr-content-spacing-bottom-opposite.boldr-content-spacing-bottom-small.boldr-content-opposite-content-heading .boldr-section-heading { margin-bottom: var(--boldr-spacing-small); }

    /* Content: spacing */
    .boldr-content-spacing-top-content.boldr-content-spacing-top-auto { --boldr-content-spacing-top: 1fr; --boldr-content-spacing-bottom: 0; }
    .boldr-content-spacing-top-content.boldr-content-spacing-top-small { --boldr-content-spacing-top: var(--boldr-spacing-small); }
    .boldr-content-spacing-top-content.boldr-content-spacing-top-medium { --boldr-content-spacing-top: var(--boldr-spacing-medium); }
    .boldr-content-spacing-top-content.boldr-content-spacing-top-large { --boldr-content-spacing-top: var(--boldr-spacing-large); }

    .boldr-content-spacing-bottom-content.boldr-content-spacing-bottom-auto { --boldr-content-spacing-bottom: 1fr;  }
    .boldr-content-spacing-bottom-content.boldr-content-spacing-bottom-small { --boldr-content-spacing-bottom: var(--boldr-spacing-small); }
    .boldr-content-spacing-bottom-content.boldr-content-spacing-bottom-medium { --boldr-content-spacing-bottom: var(--boldr-spacing-medium); }
    .boldr-content-spacing-bottom-content.boldr-content-spacing-bottom-large { --boldr-content-spacing-bottom: var(--boldr-spacing-large); }

    /* Section margin left */
    .boldr-content-section-narrower,
    .boldr-content-section-left-margin {
        --boldr-content-left-margin: calc(var(--boldr-columns-1) + var(--boldr-spacers-1));
        --boldr-content-narrower-left: var(--boldr-columns-4);
        --boldr-content-normal-left: var(--boldr-columns-5);
        --boldr-content-wider-left: var(--boldr-columns-6);
    }
    .boldr-content-section-narrower,
    .boldr-content-section-right-margin {
        --boldr-content-right-margin: calc(var(--boldr-columns-1) + var(--boldr-spacers-1));
        --boldr-content-narrower-right: var(--boldr-columns-4);
        --boldr-content-normal-right: var(--boldr-columns-5);
        --boldr-content-wider-right: var(--boldr-columns-6);
    }
    .boldr-content-section-half {
        --boldr-content-left-margin: calc(var(--boldr-columns-3) + var(--boldr-spacers-1));
        --boldr-content-right-margin: calc(var(--boldr-columns-3) + var(--boldr-spacers-1));
    }

    /* Content wider */
    .boldr-content-alignment-left.boldr-content-content-wider {
        --boldr-content-left-column: var(--boldr-content-wider-left);
        --boldr-content-right-column: var(--boldr-content-narrower-right);
    }

    .boldr-content-alignment-right.boldr-content-content-wider {
        --boldr-content-right-column: var(--boldr-content-wider-right);
        --boldr-content-left-column: var(--boldr-content-narrower-left);
    }

    /* Wider margin */
    .boldr-content-content-wider-margin {
        --boldr-content-center: var(--boldr-spacers-2);
    }

    .boldr-content-alignment-right.boldr-content-content-wider-margin {
        --boldr-content-right-column: var(--boldr-content-narrower-right);
    }
    .boldr-content-alignment-left.boldr-content-content-wider-margin {
        --boldr-content-left-column: var(--boldr-content-narrower-left);
    }

    /* Content narrower, opposite normal */
    .boldr-content-alignment-left.boldr-content-content-narrower.boldr-content-opposite-normal {
        --boldr-content-left-column: var(--boldr-content-narrower-left);
        --boldr-content-center: var(--boldr-spacers-2);
    }

    .boldr-content-alignment-right.boldr-content-content-narrower.boldr-content-opposite-normal {
        --boldr-content-right-column: var(--boldr-content-narrower-right);
        --boldr-content-center: var(--boldr-spacers-2);
    }

    /* Content narrower, opposite wider */
    .boldr-content-alignment-left.boldr-content-content-narrower.boldr-content-opposite-wider {
        --boldr-content-left-column: var(--boldr-content-narrower-left);
        --boldr-content-right-column: var(--boldr-content-wider-right);
    }

    .boldr-content-alignment-right.boldr-content-content-narrower.boldr-content-opposite-wider {
        --boldr-content-left-column: var(--boldr-content-wider-left);
        --boldr-content-right-column: var(--boldr-content-narrower-right);
    }

    /* Content narrower, opposite narrower */
    .boldr-content-alignment-left.boldr-content-content-narrower.boldr-content-opposite-narrower {
        --boldr-content-left-column: var(--boldr-content-narrower-left);
        --boldr-content-right-column: var(--boldr-content-narrower-right);
        --boldr-content-center: var(--boldr-spacers-3);
    }

    .boldr-content-alignment-right.boldr-content-content-narrower.boldr-content-opposite-narrower {
        --boldr-content-left-column: var(--boldr-content-narrower-left);
        --boldr-content-right-column: var(--boldr-content-narrower-right);
        --boldr-content-center: var(--boldr-spacers-3);
    }

}