/* HARD RULE (Kobi): opposing sides when they fit; wrap only when first row lacks space.
 * v2 FAIL: flex:1 1 12rem on badge wrapped short labels on ~390 carousel cards
 *         (remaining width after duration ≈191px < 192px basis).
 * v3: flex 0 1 auto + max-content; JS still sets data-badge-row for left-stack on wrap.
 */
.theme-preview .card__image,
.theme-preview .activity-card .card__image,
.theme-preview .activity-card-grid .card__image {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  padding: 12px !important;
}

.theme-preview .card__image-layer,
.theme-preview .card__image > a,
.theme-preview .card__image > img,
.theme-preview .card__image > picture {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.theme-preview .card__duration,
.theme-preview .card__badge,
.theme-preview .card__badge.card__badge--sunset,
.theme-preview .card__badge.card__badge--navy {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.theme-preview .card__duration {
  order: 1 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Short badges stay same-row opposite; long seasonal wraps by content width */
.theme-preview .card__badge,
.theme-preview .card__badge.card__badge--sunset,
.theme-preview .card__badge.card__badge--navy {
  order: 2 !important;
  flex: 0 1 auto !important; /* NOT 1 1 12rem */
  width: max-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  text-align: left !important;
  min-width: 0 !important;
}

.theme-preview .card__image .card__offer-group--overlay,
.theme-preview .card__badge ~ .card__offer-group--overlay,
.theme-preview .card__duration ~ .card__offer-group--overlay {
  position: absolute !important;
  top: auto !important;
  bottom: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 2 !important;
  margin: 0 !important;
}

.theme-preview .card__image:not(:has(.card__duration)) .card__badge {
  margin-left: 0 !important;
  flex: 0 1 auto !important;
}

/* Measured wrap → left stack (Sunset long string) */
.theme-preview .card__image[data-badge-row="wrap"] .card__badge {
  flex: 1 1 100% !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.theme-preview .card__image[data-badge-row="split"] .card__badge {
  flex: 0 1 auto !important;
  margin-left: auto !important;
  width: max-content !important;
  max-width: calc(100% - 8px) !important;
}

.cruise-card__media {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}
.cruise-card__media > :not(.cruise-card__duration):not(.cruise-card__badge):not(.card__offer-group--overlay) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.cruise-card__duration {
  position: relative !important;
  order: 1 !important;
  flex: 0 0 auto !important;
  z-index: 2 !important;
}
.cruise-card__badge {
  position: relative !important;
  order: 2 !important;
  flex: 0 1 auto !important;
  margin-left: auto !important;
  max-width: 100% !important;
  width: max-content !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  z-index: 2 !important;
  min-width: 0 !important;
}
.cruise-card__media:not(:has(.cruise-card__duration)) .cruise-card__badge {
  margin-left: 0 !important;
}
.cruise-card__media[data-badge-row="wrap"] .cruise-card__badge {
  flex: 1 1 100% !important;
  margin-left: 0 !important;
  width: 100% !important;
}
.cruise-card__media[data-badge-row="split"] .cruise-card__badge {
  flex: 0 1 auto !important;
  margin-left: auto !important;
}