/**
 * Vertical Accordion Widget
 *
 * Layout: vertical bars in a row; collapsed = narrow (tab title only),
 * expanded = one bar grows to show panel content. BEM prefix: jutso-widgets-vertical-accordion
 */

/* Layout: row of bars */
.jutso-widgets-vertical-accordion {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 280px;
  gap: 24px;
  justify-content: center;
}

/* Each bar (tab + panel) – width-based transition for smooth expand/collapse */
.jutso-widgets-vertical-accordion__item {
  display: flex;
  flex-direction: row;
  width: 75px;
  min-width: 75px;
  overflow: hidden;
  background-color: white;
  transition: width 0.5s ease-in-out;
  border-radius: 60px;
}

.jutso-widgets-vertical-accordion__item--active {
  width: 100%;
}

/* Tab trigger (vertical label on the bar) */
.jutso-widgets-vertical-accordion__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 75px;
  min-width: 3.5rem;
  padding: 40px 24px !important;
  border: 0 !important;
  background: transparent;
  justify-content: space-between;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  transition: padding 0.5s ease;
  font-size: var(--jutso-core-font-h5-size);
  font-weight: var(--jutso-core-font-h5-weight);
  line-height: var(--jutso-core-font-h5-line-height);
  letter-spacing: var(--jutso-core-font-h5-letter-spacing);
  text-transform: var(--jutso-core-font-h5-transform);
  font-family: var(--jutso-core-font-h5-family);
  font-style: var(--jutso-core-font-h5-style);
  font-variant: var(--h5-font-variant);
}

.jutso-widgets-vertical-accordion__item--active .jutso-widgets-vertical-accordion__tab {
  padding: 40px 48px 40px 24px !important;
}

/* Tab focus: panel expand is the indicator; no extra outline on the title button. */
.jutso-widgets-vertical-accordion__tab:focus,
.jutso-widgets-vertical-accordion__tab:focus-visible {
  outline: none;
}

.jutso-widgets-vertical-accordion__tab-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 100%;
  line-height: 1.5em;
}

.jutso-widgets-vertical-accordion__tab-index {
  display: inline-block;
  font-size: var(--jutso-core-font-h4-size);
  font-weight: var(--jutso-core-font-h4-weight);
  line-height: var(--jutso-core-font-h4-line-height);
  letter-spacing: var(--jutso-core-font-h4-letter-spacing);
  text-transform: var(--jutso-core-font-h4-transform);
  font-style: var(--jutso-core-font-h4-style);
  font-variant: var(--h4-font-variant);
  transform: rotate(90deg);
}

/* Panel: inactive width 0, active fills remaining space (effectively 100% of item) */
.jutso-widgets-vertical-accordion__panel {
  flex: 0 0 0;
  width: 720px;
  min-width: 720px;
  overflow: hidden;
  padding: 0;
  background-color: inherit;
  color: inherit;
  flex: 1 1 auto;
  overflow: auto;
  padding: 40px 64px 40px 24px;
}

.jutso-widgets-vertical-accordion__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.jutso-widgets-vertical-accordion__panel-inner h3 {
  margin: 0 !important;
}

/* Panel content elements */
.jutso-widgets-vertical-accordion__image {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jutso-widgets-vertical-accordion__image-media {
  line-height: 0;
}

.jutso-widgets-vertical-accordion__image-media img {
  width: 100%;
  aspect-ratio: 702 / 291;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.jutso-widgets-vertical-accordion__image-caption,
.jutso-widgets-vertical-accordion__image-caption a,
.jutso-widgets-vertical-accordion__image-caption a:hover {
  text-align: right;
  font-size: var(--jutso-core-font-paragraph-xs-size);
  line-height: var(--jutso-core-font-paragraph-xs-line-height);
  font-weight: var(--jutso-core-font-paragraph-xs-weight);
  letter-spacing: var(--jutso-core-font-paragraph-xs-letter-spacing);
  word-spacing: var(--jutso-core-font-paragraph-xs-word-spacing);
  opacity: 0.8;
}

.jutso-widgets-vertical-accordion__image-caption a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.jutso-widgets-vertical-accordion__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.jutso-widgets-vertical-accordion__text {
  margin: 0;
  line-height: 1.5;
}

.jutso-widgets-vertical-accordion__text p:first-child {
  margin-top: 0;
}

.jutso-widgets-vertical-accordion__text p:last-child {
  margin-bottom: 0;
}

/* Min-content width (same as Custom Button widget option) when using helper with width_min_content. */
.jutso-widgets-vertical-accordion__cta.jutso-widgets-btn--width-min-content {
  width: min-content;
  white-space: nowrap;
}

.jutso-widgets-vertical-accordion__cta:hover {
  text-decoration: underline;
}

/* Mobile: horizontal accordion – items stacked, panel height transition (matches desktop feel).
   1200px as on NNL (Dennis, 2026-09-29): the editor's desktop preview is narrower and shows the stacked layout,
   which is the intended behaviour at that width, not a bug. */
@media (max-width: 1200px) {
  .jutso-widgets-vertical-accordion {
    flex-direction: column;
    min-height: 0;
    align-items: stretch;
    gap: 10px;
    justify-content: flex-start;
  }

  .jutso-widgets-vertical-accordion__item {
    flex: none;
    flex-direction: column;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: none;
    border-radius: 12px;
    padding: 16px !important;
  }

  .jutso-widgets-vertical-accordion__item:last-child {
    border-bottom: 0;
  }

  .jutso-widgets-vertical-accordion__item--active {
    flex: none;
    min-width: 100%;
    max-width: 100%;
  }

  /* Tab as horizontal header (full width, no rotation) */
  .jutso-widgets-vertical-accordion__tab {
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    flex-direction: row-reverse;
    writing-mode: horizontal-tb;
    text-orientation: unset;
    transform: none;
    padding: 0 !important;
    justify-content: space-between;
    text-align: left;
  }

  .jutso-widgets-vertical-accordion__tab-index {
    transform: rotate(0deg);
  }

  .jutso-widgets-vertical-accordion__item--active .jutso-widgets-vertical-accordion__tab {
    padding: 0 !important;
  }

  .jutso-widgets-vertical-accordion__tab-text {
    white-space: normal;
    max-height: none;
  }

  /* Panel: collapsed = max-height 0, expanded = max-height large; transition matches desktop (0.5s) */
  .jutso-widgets-vertical-accordion__panel {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    max-height: 0;
    padding: 0;
    transition:
      max-height 0.5s ease-in-out,
      padding 0.5s ease-in-out;
  }

  .jutso-widgets-vertical-accordion__panel-inner {
    padding-top: 26px;
  }

  .jutso-widgets-vertical-accordion__item--active .jutso-widgets-vertical-accordion__panel {
    max-height: 3000px;
    padding: 0;
  }
}