/* Multicolumn Buttons Paragraph Styles */

/* Target the .row added by the custom field template */
/* Target the .row added by the custom field template */
.multicolumn-buttons-container .row {
  display: flex;
  width: 100%;
  margin: 0;
}

/* Alignment - apply to the row to align the mc_container */
/* These selectors target the row inside the paragraph wrapper to align the mc_container */
.multicolumn-buttons-container.justify-content-center .row {
  justify-content: center !important;
}

.multicolumn-buttons-container.justify-content-end .row {
  justify-content: flex-end !important;
}

.multicolumn-buttons-container.justify-content-start .row {
  justify-content: flex-start !important;
}

/* Also target by paragraph type class for additional specificity */
.paragraph--type-multicolumn-buttons.multicolumn-buttons-container.justify-content-end .row {
  justify-content: flex-end !important;
}

.paragraph--type-multicolumn-buttons.multicolumn-buttons-container.justify-content-center .row {
  justify-content: center !important;
}

.paragraph--type-multicolumn-buttons.multicolumn-buttons-container.justify-content-start .row {
  justify-content: flex-start !important;
}

/* The mc_container wraps the buttons */
.multicolumn-buttons-container .mc_container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Override width for mc_container when not full width */
.multicolumn-buttons-container:not(.buttons-full-width) .row > .mc_container {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

/* Reset col-md behavior in Normal Mode to allow centering */
/* The mc_button paragraph adds a .col-md wrapper which forces 100% width, breaking centering */
.multicolumn-buttons-container:not(.buttons-full-width) .col-md {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding-left: 5px;
  padding-right: 5px;
}

/* Full Width Mode */
/* In full-width mode, col-md divs are direct children of the container */
.multicolumn-buttons-container.buttons-full-width {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  width: calc(100% + 20px);
}

/* Ensure buttons inside col-md take full width and have gutters */
.multicolumn-buttons-container.buttons-full-width > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

.multicolumn-buttons-container.buttons-full-width .btn,
.multicolumn-buttons-container.buttons-full-width a {
  width: 100%;
  display: block;
}

/* .mcbutton class - reserved for future styling if needed */
.mcbutton {
  /* Default margins for non-full-width mode */
  margin-left: 5px;
  margin-right: 5px;
}

/* Remove margins from .mcbutton in full-width mode to avoid double spacing */
.multicolumn-buttons-container.buttons-full-width .mcbutton {
  margin-left: 0;
  margin-right: 0;
}