/* The price block (drupal_block('sr_property_price_block')) is rendered
   through Drupal's generic block + form theming, which wraps the actual
   <aside class="col-xl-5 order-md-last"> in extra divs
   (.price.block-sr-property-price-block > .wrapper123 > form). Those
   wrapper divs are the real direct children of .row, so Bootstrap's grid
   width/flex rules land on them instead of the aside, breaking the
   col-xl-7 / col-xl-5 split. display:contents removes their boxes from
   layout so the aside becomes the row's effective flex child. */
.price.block-sr-property-price-block,
.price.block-sr-property-price-block > .wrapper123,
.price.block-sr-property-price-block > .wrapper123 > form {
  display: contents;
}

/* On a parent property with sub-properties, this same block instead renders
   PropertySubForm's "Room Types" list (a <fieldset class="SectionContainer">,
   no aside). display:contents above promotes the fieldset itself to be the
   row's effective flex child; with no explicit width it shrinks to fit only
   its image, wrapping the "Room Types" heading. Give it a fixed
   sidebar-appropriate width, and force the shared .search-sub-results-container
   (also used by a separate full-width listing elsewhere, hence scoped here)
   to a single column so a lone room type doesn't reserve a blank column. */
.price.block-sr-property-price-block .SectionContainer {
  flex: 0 0 auto;
  width: 320px;
}
.price.block-sr-property-price-block .search-sub-results-container {
  grid-template-columns: 1fr !important;
  width: 100%;
  height: auto !important;
}
.price.block-sr-property-price-block .fieldset__wrapper {
  height: auto !important;
}

/* This card lives outside Bootstrap's normal grid (promoted by
   display:contents above), so it doesn't inherit the main content column's
   own col-lg-* stacking. Match that same lg breakpoint here so it stacks
   full-width below the property description on tablet/mobile instead of
   staying squeezed beside it at every screen size. .container.d-flex itself
   has no flex-wrap, so its children (.row and this promoted fieldset) are
   forced to stay on one line regardless of width — without wrap, a 100%-wide
   fieldset just overflows/overlaps instead of dropping to a new line. */
@media (max-width: 991.98px) {
  .container.d-flex[data-sticky-container] {
    flex-wrap: wrap;
  }
  .price.block-sr-property-price-block .SectionContainer {
    width: 100%;
  }
}