/*
 * CMN Component Overrides
 */

[data-cmn-component="CmnhButton"] { display: flex; }
[data-cmn-component="CmnhButton"]:has([justify="center"]) { justify-content: center; }
[data-cmn-component="CmnhButton"]:has([justify="end"]) { justify-content: end; }

.cmnh-button {
  display:          flex         !important;
  align-items:      center;
  gap:              var(--cmnh-component-button-gap);
  font-size:        var(--cmnh-component-button-font-size);
  font-family:      var(--cmnh-component-button-font-family);
  font-weight:      var(--cmnh-component-button-font-weight);
  letter-spacing:   var(--cmnh-component-button-letter-spacing);
  text-transform:   var(--cmnh-component-button-text-transform);
  border-radius:    var(--cmnh-component-button-border-radius);
  transition:       var(--cmnh-component-button-transition);
  outline-offset:   var(--cmnh-component-button-outline-offset);
  width:            fit-content;
  border:           none;
  cursor:           pointer;
  text-decoration:  none;
  box-shadow:       none;
  background-image: none;
}

.cmnh-card-group [data-cmn-component="CmnhCard"] { display: flex; min-height: 200px; min-width: 0; }
.cmnh-card-group [data-cmn-component="CmnhCard"] .cmnh-card { flex: 1; max-width: 100%; max-height: none; align-items: center; }

/* Fixed-width image column for complex cards */
.cmnh-card-group .cmnh-card.complex .card-image-wrapper { flex: 0 0 200px; overflow: hidden; }

@media (max-width: 768px) {
  .cmnh-card-group .cmnh-card.complex { flex-direction: column; }
  .cmnh-card-group .cmnh-card.complex .card-image-wrapper { flex: 0 0 auto; }
}

.cmnh-card .card-image.contain img {
  object-fit: contain;
}

/* Hide image wrapper when no image is present */
.cmnh-card .card-image-wrapper:not(:has(.card-image)) {
  display: none;
}

/* Hide button wrapper when no button is present */
.cmnh-card .card-button-wrap:not(:has(.cmnh-button)) {
  display: none !important;
}

/* Search input — hide clear button when field is empty */
[data-cmn-component="CmnhInput"] .cmnh-input__button { display: none; }
[data-cmn-component="CmnhInput"]:has(.cmnh-input:not(:placeholder-shown)) .cmnh-input__button { display: grid; }