/* ==========================================================================
   Vertical tabs with a screenshot panel (reports, product capabilities) for
   Elementor HTML widgets. Paste only the HTML - no <style> or <script>;
   js/oit-vertical-tabs.js does the tab switching. Loaded on pages whose Elementor data
   mentions oit-vertical-tabs__layout (see oit_register_on_demand_scripts() in functions.php).

   Markup:
     div.oit-vertical-tabs > div.oit-vertical-tabs__layout
       div.oit-vertical-tabs__tabs[role=tablist][aria-orientation=vertical][aria-label]
         div.oit-vertical-tabs__item[.is-active][role=none]
           button.oit-vertical-tabs__tab[role=tab][id][aria-controls][aria-selected]
             span + svg.oit-vertical-tabs__chev (a down chevron)
           div.oit-vertical-tabs__desc > .oit-vertical-tabs__clip > .oit-vertical-tabs__body > [h3] + p
       div.oit-vertical-tabs__panels
         figure.oit-vertical-tabs__panel[role=tabpanel][id][aria-labelledby][hidden]
           div.oit-vertical-tabs__frame > img [+ figcaption]
   The first item and panel are the open ones (is-active, no hidden); the
   others' tabs carry tabindex="-1". The button rules are written out in full
   (hover and focus too) because Elementor and Astra restyle every button.
   ========================================================================== */

.oit-vertical-tabs {
  width: 100%;
  max-width: none;
  font-family: var(--font-family-base);
}

.oit-vertical-tabs,
.oit-vertical-tabs * {
  box-sizing: border-box;
}

.oit-vertical-tabs__layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.4fr);
  gap: var(--space-xl);
  align-items: start;
}

.oit-vertical-tabs__tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ---- Tabs ---- */

.oit-vertical-tabs__item {
  border-radius: var(--radius-2xl);
  background: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.oit-vertical-tabs__item.is-active {
  background: var(--surface-secondary);
}

.oit-vertical-tabs button.oit-vertical-tabs__tab,
.oit-vertical-tabs button.oit-vertical-tabs__tab:hover,
.oit-vertical-tabs button.oit-vertical-tabs__tab:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--radius-2xl);
  box-shadow: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 24px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.oit-vertical-tabs button.oit-vertical-tabs__tab:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.oit-vertical-tabs .oit-vertical-tabs__item.is-active button.oit-vertical-tabs__tab,
.oit-vertical-tabs .oit-vertical-tabs__item.is-active button.oit-vertical-tabs__tab:hover,
.oit-vertical-tabs .oit-vertical-tabs__item.is-active button.oit-vertical-tabs__tab:focus {
  background: transparent;
  color: var(--text-action);
}

.oit-vertical-tabs button.oit-vertical-tabs__tab:focus-visible {
  outline: var(--border-md) solid var(--border-focused);
  outline-offset: 2px;
}

.oit-vertical-tabs__chev {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.oit-vertical-tabs__item.is-active .oit-vertical-tabs__chev {
  transform: rotate(180deg);
}

/* ---- Description: opens by animating its grid row from 0fr to 1fr;
   visibility waits for the close to finish ---- */

.oit-vertical-tabs__desc {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}

.oit-vertical-tabs__item.is-active .oit-vertical-tabs__desc {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--duration-base) var(--ease-out), visibility 0s;
}

.oit-vertical-tabs__clip {
  min-height: 0;
  overflow: hidden;
}

.oit-vertical-tabs__body {
  padding: 0 20px 20px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.oit-vertical-tabs__item.is-active .oit-vertical-tabs__body {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-base) var(--ease-out) 0.1s, transform var(--duration-base) var(--ease-out) 0.1s;
}

.oit-vertical-tabs .oit-vertical-tabs__desc h3 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-base);
  font-size: 1rem;
  line-height: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.oit-vertical-tabs .oit-vertical-tabs__desc p {
  margin: 0;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
}

/* ---- Screenshot panel ---- */

.oit-vertical-tabs__panel {
  margin: 0;
  animation: oit-vertical-tabs-in var(--duration-base) var(--ease-out);
}

.oit-vertical-tabs__panel[hidden] {
  display: none;
}

@keyframes oit-vertical-tabs-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* No padding under the image: it runs into the frame's bottom edge and is
   cut off by the frame's rounded corners, as if peeking up from below.
   The frame has one fixed shape (16:9 by default; set --vertical-tabs-ratio on
   .oit-vertical-tabs to change it) and the image fills what is left of it,
   cropped from the bottom, so switching tabs or a late-loading image never
   changes the height and nothing below it jumps. */
.oit-vertical-tabs__frame {
  display: flex;
  flex-direction: column;
  aspect-ratio: var(--vertical-tabs-ratio, 16 / 9);
  padding: var(--space-lg) var(--space-lg) 0;
  overflow: hidden;
  background: var(--surface-secondary);
  border: 0;
  border-radius: var(--radius-3xl);
}

/* Two classes: Elementor's own .elementor img rule sets border-radius: 0 and
   box-shadow: none at the same strength and loads later, so a single class
   would lose to it */
.oit-vertical-tabs .oit-vertical-tabs__panel img {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: top center;
  border: 0;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08);
  -webkit-user-drag: none;
  user-select: none;
}

/* The image's caption, moved into its tab by js/oit-vertical-tabs.js */
.oit-vertical-tabs .oit-vertical-tabs__desc .oit-vertical-tabs__caption {
  margin: var(--space-sm) 0 0;
  font-size: 0.7rem;
  line-height: 20px;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .oit-vertical-tabs__layout {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .oit-vertical-tabs__frame {
    padding: var(--space-sm) var(--space-sm) 0;
    border-radius: var(--radius-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oit-vertical-tabs__item,
  .oit-vertical-tabs button.oit-vertical-tabs__tab,
  .oit-vertical-tabs__chev,
  .oit-vertical-tabs__desc,
  .oit-vertical-tabs__item.is-active .oit-vertical-tabs__desc,
  .oit-vertical-tabs__body,
  .oit-vertical-tabs__item.is-active .oit-vertical-tabs__body {
    transition: none;
  }

  .oit-vertical-tabs__panel {
    animation: none;
  }
}