/* Consolidated button label styles used across board views */

/* Label area (container) */
.button-label-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  /* use your intended % or px */
  height: 25%;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding: 6px 8px;
  background: transparent;
  color: #1F1F1F;
  font-weight: 500;
  text-align: center;
  border-radius: 0 0 6px 6px;
  pointer-events: none;
  z-index: 40;
  box-sizing: border-box;
}

/* Label text (ONLY when inside container) */
.button-label-container .button-label,
.button-label-container .label-text {
  max-width: 100%;
  line-height: 1.2;
  padding: 0 4px;
  font-size: clamp(0.7rem, 2.6vw, 1.8rem);

  /* Let the label size naturally; JS will shrink per-label when needed. */
  display: block;
  overflow: visible;
  white-space: normal;
}

/* Ensure the image sits behind the label area so the text isn't visually occluded */
.button-label,
.label-text {
  max-width: 100%;
  /* slightly increase line-height to avoid sub-pixel clipping */
  line-height: 1.2;
  padding: 0 4px;
  /* Base font-size can still scale with viewport; JS will reduce per-label when needed */
  font-size: clamp(0.7rem, 2.6vw, 1.8rem);
  display: block;
  /* Allow the label to naturally size (JS will shrink it to fit the container). Remove ellipsis/clamp. */
  overflow: visible;
  white-space: normal;
}

/* High-specificity override to prevent any remaining truncation rules from applying. */
.button-label, .label-text, .button-label-container .button-label, .button-label-container .label-text {
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  word-break: break-word !important;
}