/* Optional subtitle under native Tab / Nested Tab titles (VSW pack). */
.vsw-tab-title-description {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: inherit;
  margin-top: 0.35em;
  font-size: 0.85em;
  line-height: 1.35;
  font-weight: 400;
  opacity: 0.85;
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
}

.vsw-tab-title-description p {
  margin: 0 0 0.35em;
}

.vsw-tab-title-description p:last-child {
  margin-bottom: 0;
}

/* Classic Tabs: stack title + description */
.elementor-widget-tabs .elementor-tab-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Nested Tabs: Elementor sets --n-tabs-title-flex-basis: content on the widget so each
 * .e-n-tab-title uses flex-basis: content — the item grows to fit the longest unbroken
 * line and largely ignores width. Force auto so width / max-width can constrain.
 */
.elementor-widget-n-tabs .e-n-tabs-heading > .e-n-tab-title {
  flex-basis: auto;
}

/*
 * Equal tabs + gap on one horizontal row — tablet/desktop only.
 * On narrow viewports this math + nowrap makes each tab too narrow; let Elementor defaults + wrap handle mobile.
 */
@media (min-width: 768px) {
  .elementor-widget-n-tabs.elementor-element {
    container-name: vsw-n-tabs;
  }

  @container vsw-n-tabs style(--n-tabs-heading-direction: row) {
    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(1) {
      flex: 0 0 100% !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(2),
    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(2) ~ .e-n-tab-title {
      flex: 0 0 calc((100% - (1 * var(--n-tabs-gap, 0px))) / 2) !important;
      width: calc((100% - (1 * var(--n-tabs-gap, 0px))) / 2) !important;
      max-width: calc((100% - (1 * var(--n-tabs-gap, 0px))) / 2) !important;
    }

    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(3),
    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(3) ~ .e-n-tab-title {
      flex: 0 0 calc((100% - (2 * var(--n-tabs-gap, 0px))) / 3) !important;
      width: calc((100% - (2 * var(--n-tabs-gap, 0px))) / 3) !important;
      max-width: calc((100% - (2 * var(--n-tabs-gap, 0px))) / 3) !important;
    }

    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(4),
    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(4) ~ .e-n-tab-title {
      flex: 0 0 calc((100% - (3 * var(--n-tabs-gap, 0px))) / 4) !important;
      width: calc((100% - (3 * var(--n-tabs-gap, 0px))) / 4) !important;
      max-width: calc((100% - (3 * var(--n-tabs-gap, 0px))) / 4) !important;
    }

    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(5),
    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(5) ~ .e-n-tab-title {
      flex: 0 0 calc((100% - (4 * var(--n-tabs-gap, 0px))) / 5) !important;
      width: calc((100% - (4 * var(--n-tabs-gap, 0px))) / 5) !important;
      max-width: calc((100% - (4 * var(--n-tabs-gap, 0px))) / 5) !important;
    }

    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(6),
    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(6) ~ .e-n-tab-title {
      flex: 0 0 calc((100% - (5 * var(--n-tabs-gap, 0px))) / 6) !important;
      width: calc((100% - (5 * var(--n-tabs-gap, 0px))) / 6) !important;
      max-width: calc((100% - (5 * var(--n-tabs-gap, 0px))) / 6) !important;
    }

    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(7),
    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(7) ~ .e-n-tab-title {
      flex: 0 0 calc((100% - (6 * var(--n-tabs-gap, 0px))) / 7) !important;
      width: calc((100% - (6 * var(--n-tabs-gap, 0px))) / 7) !important;
      max-width: calc((100% - (6 * var(--n-tabs-gap, 0px))) / 7) !important;
    }

    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(8),
    .e-n-tabs-heading > .e-n-tab-title:first-child:nth-last-child(8) ~ .e-n-tab-title {
      flex: 0 0 calc((100% - (7 * var(--n-tabs-gap, 0px))) / 8) !important;
      width: calc((100% - (7 * var(--n-tabs-gap, 0px))) / 8) !important;
      max-width: calc((100% - (7 * var(--n-tabs-gap, 0px))) / 8) !important;
    }

    .e-n-tabs-heading {
      flex-wrap: nowrap;
    }
  }
}

/* Phone: undo equal-width / repeater width so tabs + subtitle don’t collapse */
@media (max-width: 767px) {
  .elementor-widget-n-tabs .e-n-tabs-heading > .e-n-tab-title {
    min-width: 0;
  }

  .elementor-widget-n-tabs .e-n-tabs-heading > .e-n-tab-title[class*="elementor-repeater-item-"] {
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .elementor-widget-n-tabs .e-n-tabs-heading {
    flex-wrap: wrap !important;
  }

  .elementor-widget-tabs .elementor-tab-title[class*="elementor-repeater-item-"] {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .elementor-widget-tabs .elementor-tab-title.elementor-tab-mobile-title {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .elementor-widget-tabs .elementor-tab-title .vsw-tab-title-description {
    max-width: 100%;
  }
}

/* Nested Tabs: description on its own row under the title text */
.e-n-tabs .e-n-tab-title {
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5em;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.e-n-tabs .e-n-tab-title .e-n-tab-title-text {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Same horizontal alignment as tab title (Elementor « Align Title » sets --n-tabs-title-text-align on the widget). */
.e-n-tabs .e-n-tab-title .vsw-tab-title-description {
  flex: 0 0 100%;
  margin-top: 0.2em;
  text-align: var(--n-tabs-title-text-align, inherit);
}

/* Per-tab title width (Elementor slider + {{CURRENT_ITEM}}) */
.elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title,
.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title {
  box-sizing: border-box;
}

/* Rich text inside description (nested elements from editor) */
.vsw-tab-title-description * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}