/* Content bar (FullTwoByBar) CMS object. Editor-selected colors arrive as inline custom properties
   on the section root (see the eight _*Bar_View.cshtml partials); everything else is left to
   Bootstrap utility classes. */

/* A saved BackgroundColor is an optional override. Without one, bars use the normal page surface
   or the alternate surface according to their container position. */
.cms-two-by-bar {
    background: var(--cms-two-by-bar-background, var(--site-color-background, #ffffff));
    color: var(--cms-two-by-bar-body-color, var(--site-color-text));
}

/* The explicit color wins on alternate rows too; otherwise preserve the alternating standard. */
.cms-two-by-bar--alt { background: var(--cms-two-by-bar-background, var(--site-color-surface-strong, #e9eaee)); }

.cms-two-by-bar__heading { color: var(--cms-two-by-bar-heading-color, var(--site-color-primary)); }
.cms-two-by-bar__heading a { color: inherit; }
.cms-two-by-bar__text { color: var(--cms-two-by-bar-body-color, var(--site-color-text)); }
/* A BACKSTOP, not the mechanism. Headings are optional, and every view now guards its heading
   element with an explicit Razor if, so a bar with no heading emits no element at all. This rule
   catches what that cannot: a heading element that reaches the page holding nothing, which an
   author can still produce by typing a non-breaking space or an empty tag into the field.

   It is deliberately not relied on, for two reasons. :empty does not match an element containing
   whitespace, so it never fired for the centred layout, whose h2 spans several lines - that bar
   rendered a full display-5 line box until its guard was added. And display:none still leaves the
   element in the sibling chain, so the "> * + *" rule further down counts it and pushes the next
   element 1.5rem clear, which in a two- or three-column bar misaligns the columns beside it.
   Omitting the element avoids both; this rule only softens the cases that slip through. */
.cms-two-by-bar__heading:empty, .cms-two-by-bar__text:empty { display: none; }

/* The centered layout's optional border box (CenterBorder). */
.cms-two-by-bar__panel {
    border-color: var(--site-color-border) !important;
    padding: 2rem 1rem;
}

/* A small logo or icon above the copy. Capped so an oversized upload cannot dwarf the heading;
   the views already add img-fluid and the mx-auto/d-block centering.

   260px to 350px per the October review, which asked for "more image space between the header and
   the paragraph". The review called this a max-HEIGHT; the cap is and always was a max-width, and
   260 is the number it was asking about. Adding a max-height of 350 instead would have changed
   nothing visible - the artwork here is wide and short, around 2.5:1, so at a 260px width it is
   only ~105px tall and a 350px height ceiling would never bind. Raising the width is what grows
   the image, and it grows the height with it, which is the effect that was wanted.

   This is the BASE rule, so padded, full content, standard, two-thirds and three-column all take
   it. Two-column overrides at 500px below, and centered releases the cap entirely. */
.cms-two-by-bar__small-image { max-width: 350px; }

/* The outer container's width cap is NOT set here. Every layout writes
   class="cms-two-by-bar__container container", so the cap comes from bootstrap-theme.css's
   .container override, which is the padded form - max-width: T + 2g with g of padding - so that
   content lands on the same measure as .site-container's border edge.

   This used to carry max-width: var(--site-content-width) "to state the intent", and because
   two-by-bar.css loads AFTER bootstrap-theme.css in the bundle and both selectors are one class,
   it won. The box then measured T rather than T + 2g, its own padding pushed the content 32px
   inside, and every bar sat inset from the logo above 1464px of viewport while looking correct
   below it. Stating an intent in a second place is how the two drifted; the cap lives in one
   place now.

   Custom HTML renders without a .cms-two-by-bar__container at all - it is meant to run full width. */

/* Centered bars also use this field for wide feature artwork. Let the image use its natural
   width up to the reference layout's content width without enlarging small logos. */
.cms-two-by-bar--centered .cms-two-by-bar__small-image {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* The large image. Left and right are independently authored and never shown at the same time, so
   this only has to size a single image inside its own column. object-fit keeps a portrait and a
   landscape upload from changing the row's height. */
.cms-two-by-bar__large-image {
    width: 100%;
    max-height: 32rem;
    object-fit: contain;
}

.cms-two-by-bar--two-thirds .cms-two-by-bar__large-image { max-height: 20rem; }

/* No cap, for the same reason as the padded layout below: the COLUMN is the measure. 500px inside
   a col-md-6 that measures 712px at full width left more than 200px of the column unused, so the
   copy stopped well short of where the layout said the column ended. The review measured it on
   /Products/MicronMapper.

   Note what this rule used to do, which nobody intended: _StandardBar_View puts --media-left on
   alternating bars and --media-right on the rest, and only the media-right half carried this cap.
   So the same layout gave a 500px column of copy when the image sat right and a full-width one
   when it sat left, alternating down the page. There is no --media-left counterpart to remove;
   taking this to 100% is what makes the two halves agree.

   The outer container's width cap is shared across every layout - see .cms-two-by-bar__container
   above - so the bar itself is still held to the site measure. */
.cms-two-by-bar--split.cms-two-by-bar--media-right .cms-two-by-bar__content { max-width: 100%; }

/* No cap. 530px inside a col-md-6 left about 150px of the column unused at full width, so the
   copy stopped short of where the layout said the column ended - the review measured the box at
   exactly 530 x 480. The column is the measure; the grid already decides how wide half the bar
   is. */
.cms-two-by-bar--padded .cms-two-by-bar__content { max-width: 100%; }
/* The padded layout's image sizes itself: no 500px cap, and width: auto so the BOX follows the
   image rather than the column. The view already puts img-fluid on it - max-width: 100% plus
   height: auto - and this lets that do the work, which is what the review asked for.

   width: auto is the part that matters, and it is a correction to the base rule above rather
   than to the cap. With the base width: 100%, the box is the full column and object-fit: contain
   letterboxes anything that is not the column's aspect ratio. Measured in a 688px column:

     portrait 800x1000   width:100% -> box 688x512, image drawn 410 wide, 139px of empty
                         background each side.  width:auto -> box 410x512, none.
     small 300x200       width:100% -> stretched to 688 wide, visibly soft.
                         width:auto -> 300x200, its own size.
     landscape 1200x600  identical either way - it already matches the column.

   So this only changes uploads that are not landscape, and only to stop the layout inventing
   space around them. Same treatment .cms-two-by-bar--centered already gives its small image,
   a few rules up. Scoped to --padded because the other layouts were not in this review. */
.cms-two-by-bar--padded .cms-two-by-bar__large-image {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* The two-thirds row carries a 3rem gutter, paired with py-4 (not p-4) on its two columns in
   _TwoThirdBar_View.cshtml. The two changes only make sense together.

   p-4 overrode the column's own horizontal padding with 1.5rem. A Bootstrap row pulls itself
   --bs-gutter-x/2 to the left of its container and each column pads itself back by the same
   amount, so the two cancel and content lands exactly on the container's edge - but only while
   the column keeps the padding the row expects. At 24px against the row's -12px, every bar's
   copy sat 12px right of the logo and its image 12px short of the right edge.

   py-4 restores the horizontal padding to the gutter, which fixes the alignment but would also
   halve the space between the copy and the image, because that space WAS the two p-4 paddings
   meeting. Raising the gutter to 3rem puts it back: 24px of column padding either side of the
   boundary, 48px between them, and the row's own -24px margin still cancels at the outer edges.
   Outer space gone, inner gap unchanged - which is what the review asked for.

   Set on the direct child row only. Nested rows - .cms-two-by-bar__actions holds the buttons -
   re-declare --bs-gutter-x through Bootstrap's own .row rule, so the value does not inherit
   down and the buttons keep their normal spacing. Verified. */
.cms-two-by-bar--two-thirds > .cms-two-by-bar__container > .row { --bs-gutter-x: 3rem; }

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

/* No cap on the copy. 500px inside a col-md-6 that is 712px wide at full width left the right
   column's text ending ~190px short of the site's right edge, which is the edge the review asks
   it to meet. The column is the measure. The small image below keeps its own cap - an image is
   not copy, and nothing asked for it to stretch. */
.cms-two-by-bar--two-column .cms-two-by-bar__content { max-width: 100%; }
.cms-two-by-bar--two-column .cms-two-by-bar__small-image { max-width: 500px; }

/* No cap and no auto margins on desktop: the column IS the measure. 320px centred inside a
   466px column was doing two things at once, and the review objected to both - it held every
   column's content 81px in from where the layout said the column started, and the leftover space
   either side of two adjacent caps read as a 187px gutter down the middle of the bar.

   Paired with the 3.5rem row gutter below and the removal of px-3 from the content div in
   _TripleColumnBar_View.cshtml. Same arithmetic as the two-thirds bar: the row pulls itself
   --bs-gutter-x/2 left, each column pads back by the same amount, so the outer edges cancel onto
   the container and the inner gap is the full gutter. 3.5rem reproduces the 56px the markup
   always intended - Bootstrap's 12px column padding plus px-3's 16px, meeting in the middle -
   rather than the 187px the caps were accidentally producing. */
.cms-two-by-bar--three-column .cms-two-by-bar__content {
    max-width: 100%;
    margin-inline: 0;
}

.cms-two-by-bar--three-column > .cms-two-by-bar__container > .row { --bs-gutter-x: 3.5rem; }

/* The image keeps its cap. An image is not copy, and letting it grow to a full third of the bar
   was not asked for. */
.cms-two-by-bar--three-column .cms-two-by-bar__small-image { max-width: 320px; }

/* Stacked, the columns are full width and a line of text across a phone-width screen is fine,
   but across a small tablet it is not - so the cap and the centring both come back here. This is
   the one place they are wanted: there is no column edge to align to once the grid has collapsed. */
@media (max-width: 767.98px) {
    .cms-two-by-bar--three-column .cms-two-by-bar__content {
        max-width: 400px;
        margin-inline: auto;
    }
}

/* One value between every block inside a column bar's content - image, heading, copy, buttons.

   The spacing used to come from four unrelated places at once: pb-3 on the heading, the h3's own
   0.5rem reboot margin, py-2 on the copy, and the content div's py-5. Nothing owned the rhythm,
   so the gaps landed wherever that arithmetic happened to put them. Measured ink-to-ink before
   this rule, the two layouts were uneven in OPPOSITE directions:

     three-column   heading->copy 39px   copy->button 10px
     two-column     heading->copy 30px   copy->button 58px

   The owl selector sets the gap once and only between siblings, so the first child still sits on
   the content div's py-5 and the last still sits above it - the outer padding stays the column's
   job, the inner rhythm is this rule's. margin-bottom: 0 on the children is what stops the h3's
   reboot margin adding to it; the utility classes that used to do this work are gone from both
   views, because a utility carries !important and cannot be overridden from here.

   Scoped to the two column layouts. The split, padded, full-text and centred bars lay their
   content out differently and were not part of the review. */
.cms-two-by-bar--two-column .cms-two-by-bar__content > *,
.cms-two-by-bar--three-column .cms-two-by-bar__content > * {
    margin-bottom: 0;
}

.cms-two-by-bar--two-column .cms-two-by-bar__content > * + *,
.cms-two-by-bar--three-column .cms-two-by-bar__content > * + * {
    margin-top: 1.5rem;
}

/* Buttons sit in a Bootstrap row, so only the wrap gap needs stating. */
.cms-two-by-bar__actions { row-gap: .5rem; }

/* .btn-white moved to bootstrap-theme.css, unscoped - the "move it if another object ever needs
   it" this note used to anticipate. The bar EDITOR needed it: the button that opens the left/right
   button modal renders itself in the style the author picked, as a live preview, so a button set
   to White drew its opener with .btn-white - and the opener has no .cms-two-by-bar ancestor, so
   this rule never reached it and the control fell back to a bare .btn with no border or ground.
   That is the October review's "the button in the CMS 'Add left button' needs a border or
   background-color". Its hover was fixed in the same move. */

/* Links written by hand against the reference's old title-derived anchor still resolve: each view
   emits this hidden alias beside the real two-by-bar-{ID} anchor. It must take up no space and
   must clear the sticky bar when jumped to. */
.cms-anchor-alias {
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
    scroll-margin-top: var(--site-sticky-bar-height, 5rem);
}

/* Admin editor preview canvas, matching .cms-section-header-preview. */
.cms-two-by-bar-preview,
.cms-existing-two-by-bars,
.cms-existing-two-by-bar { width: min(100%, var(--site-content-width)); }

.cms-two-by-bar-form__layout {
    color: var(--site-color-text);
    background: var(--site-color-surface);
}

.cms-two-by-bar-form__grid {
    display: grid;
    gap: var(--site-space-3);
    margin: 0;
}

.cms-two-by-bar-form__grid--split { grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); }
.cms-two-by-bar-form__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-two-by-bar-form__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-two-by-bar-form__grid--center { grid-template-columns: minmax(0, 48rem); }

.cms-two-by-bar-form__grid > [class*="col-"] {
    width: 100%;
    max-width: none;
}

.cms-two-by-bar-form__panel,
.cms-two-by-bar-form__column {
    padding: 1rem;
    border: 1px solid var(--site-color-border);
    border-radius: var(--site-radius-medium);
    background: var(--site-color-background);
    box-shadow: var(--site-shadow-small);
}

.cms-two-by-bar-form__column > h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    color: var(--site-color-heading) !important;
    font-size: .8rem;
    letter-spacing: .04em;
}

.cms-two-by-bar-form__column > h3::before {
    width: .4rem;
    height: 1.2rem;
    border-radius: 999px;
    background: var(--site-color-primary);
    content: "";
}

.cms-existing-two-by-bar {
    overflow: hidden;
    border: 1px solid var(--site-color-border);
    border-radius: var(--site-radius-medium);
    background: var(--site-color-background);
    box-shadow: var(--site-shadow-small);
    transition: border-color var(--site-transition-standard), box-shadow var(--site-transition-standard), transform var(--site-transition-standard);
}

.cms-existing-two-by-bar:hover {
    border-color: color-mix(in srgb, var(--site-color-primary) 42%, var(--site-color-border));
    box-shadow: var(--site-shadow-medium);
    transform: translateY(-1px);
}

.cms-existing-two-by-bar__form {
    background: var(--site-color-surface);
}

@media (max-width: 991.98px) {
    .cms-two-by-bar-form__grid--split,
    .cms-two-by-bar-form__grid--two,
    .cms-two-by-bar-form__grid--three {
        grid-template-columns: minmax(0, 1fr);
    }
}