/* ============================================================
   Two By Bar CMS object

   Bootstrap owns the grid, responsive order, spacing, alignment,
   typography, buttons, visibility, and backgrounds. This file
   contains only the styling that is specific to this CMS object.
   ============================================================ */

/* ------------------------------------------------------------
   Shared foundation
   ------------------------------------------------------------ */

.cms-two-by-bar {
    margin-inline: auto;
}

.cms-two-by-bar :is(p, li) {
    line-height: 1.5;
}

.cms-two-by-bar__small-image {
    width: 100%;
    max-width: 450px;
    height: auto;
}

/* ------------------------------------------------------------
   Split bar
   Modifier: .cms-two-by-bar--split
   ------------------------------------------------------------ */

/* Standard split */
.cms-two-by-bar--split.cms-two-by-bar--large-image-right .cms-two-by-bar__content {
    max-width: 500px;
}

.cms-two-by-bar--split.cms-two-by-bar--large-image-left .cms-two-by-bar__container {
    max-width: 1200px;
}

/* Padded split
   Modifier: .cms-two-by-bar--padded */
.cms-two-by-bar--padded .cms-two-by-bar__content {
    max-width: 530px;
}

.cms-two-by-bar--padded .cms-two-by-bar__large-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------
   Centered bar
   Modifier: .cms-two-by-bar--centered
   Uses shared and Bootstrap styling; no variant-specific rules.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Two-thirds bar
   Modifier: .cms-two-by-bar--two-thirds
   ------------------------------------------------------------ */

.cms-two-by-bar--two-thirds {
    background-repeat: no-repeat;
    background-position: left center;
}

.cms-two-by-bar--two-thirds .cms-two-by-bar__container {
    max-width: 1200px;
}

.cms-two-by-bar--two-thirds :is(.cms-two-by-bar__media, .cms-two-by-bar__content) {
    min-width: 0;
}

.cms-two-by-bar--two-thirds .cms-two-by-bar__large-image {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: auto;
}

/* ------------------------------------------------------------
   Full-text bar
   Modifier: .cms-two-by-bar--full-text
   Uses shared and Bootstrap styling; no variant-specific rules.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Two-column bar
   Modifier: .cms-two-by-bar--two-column
   ------------------------------------------------------------ */

.cms-two-by-bar--two-column .cms-two-by-bar__content {
    max-width: 500px;
}

.cms-two-by-bar--two-column .cms-two-by-bar__small-image {
    max-width: 500px;
}

/* ------------------------------------------------------------
   Three-column bar
   Modifier: .cms-two-by-bar--three-column
   ------------------------------------------------------------ */

.cms-two-by-bar--three-column .cms-two-by-bar__content {
    max-width: 320px;
    margin-inline: auto;
}

.cms-two-by-bar--three-column .cms-two-by-bar__small-image {
    max-width: 320px;
}

@media (max-width: 767.98px) {
    .cms-two-by-bar--three-column .cms-two-by-bar__content {
        max-width: 400px;
    }
}

/* ------------------------------------------------------------
   Custom HTML bar
   Modifier: .cms-two-by-bar--custom
   Uses shared and Bootstrap styling; no variant-specific rules.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Shared responsive behavior
   ------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .cms-two-by-bar :is(p, ul) {
        text-align: left;
    }
}