/**
 * Interactive Services widget styles.
 * Desktop: hover-driven crossfade. Tablet: touch/focus driven. Mobile: accordion.
 */

.ventexia-services {
  display: flex;
  align-items: center;
  gap: 64px;
}

.ventexia-services .ventexia-services__col--left {
  width: 65%;
  min-width: 0;
}

.ventexia-services .ventexia-services__col--right {
  flex: 1;
  position: relative;
}

.ventexia-services .ventexia-services__label {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: #210762;
  font-family: "Plus Jakarta Sans", Sans-serif;
  font-weight: 600;
  letter-spacing: 4.6px;
}

.ventexia-services .ventexia-services__heading {
  margin: 0 0 2rem;
  line-height: 1.15;
  font-family: "Plus Jakarta Sans", Sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.ventexia-services .ventexia-services__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ventexia-services .ventexia-services__trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  gap: 1rem;
  margin: 0;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  outline: none;
  cursor: pointer;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  vertical-align: baseline;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  transition: none;
  -webkit-appearance: none;
  appearance: none;
}

.ventexia-services .ventexia-services__trigger:hover,
.ventexia-services .ventexia-services__trigger:focus,
.ventexia-services .ventexia-services__trigger:active {
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
}

.ventexia-services .ventexia-services__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.ventexia-services .ventexia-services__number {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-family: "Plus Jakarta Sans", Sans-serif;
  font-weight: 600;
}

.ventexia-services .ventexia-services__line {
  flex: 0 0 auto;
  width: 24px;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transform-origin: left center;
  transition:
    opacity 0.3s ease,
    transform 0.5s ease;
}

.ventexia-services .ventexia-services__item.is-active .ventexia-services__line {
  opacity: 1;
}

.ventexia-services .ventexia-services__heading-group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}

.ventexia-services .ventexia-services__title {
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: none;
  transition: color 0.3s ease;
}

.ventexia-services .ventexia-services__subtitle {
  font-size: 0.875rem;
  color: #5a5a5a;
  transition: color 0.3s ease;
}

.ventexia-services .ventexia-services__subtitle.is-active {
  color: #242424;
  font-weight: 600;
}

.ventexia-services .ventexia-services__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  /* Resting position sits 20px behind the active position so the arrow
     slides in. --ventexia-arrow-offset comes from the widget's "Arrow
     Position" control; the fallback preserves the original design. */
  transform: translateX(calc(var(--ventexia-arrow-offset, -80px) - 20px));
  border: 1px solid rgba(0, 0, 0, 0.85);
  border-radius: 50%;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.ventexia-services .ventexia-services__arrow svg {
  width: 45%;
  height: 45%;
}

.ventexia-services
  .ventexia-services__item.is-active
  .ventexia-services__arrow {
  opacity: 1;
  transform: translateX(var(--ventexia-arrow-offset, -80px));
}

.ventexia-services .ventexia-services__panel {
  display: none;
}

.ventexia-services .ventexia-services__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 0.9rem 1.75rem;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  background-color: currentColor;
}

.ventexia-services .ventexia-services__button:hover {
  opacity: 0.85;
}

.ventexia-services .ventexia-services__button--panel {
  margin-top: 1rem;
}

.ventexia-services .ventexia-services__image-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
}

.ventexia-services .ventexia-services__image--large {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}

.ventexia-services .ventexia-services__image--large.is-active {
  opacity: 1;
}

.ventexia-services .ventexia-services__image--large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ventexia-services .ventexia-services__floating-stack {
  position: absolute;
  bottom: -10%;
  left: -12%;
  width: 45%;
  pointer-events: none;
}

.ventexia-services .ventexia-services__image--floating {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
}

.ventexia-services .ventexia-services__image--floating.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}

.ventexia-services .ventexia-services__image--floating img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  display: block;
}

.ventexia-services .ventexia-services__content-stack {
  position: relative;
  margin-top: 1.5rem;
}

.ventexia-services .ventexia-services__description {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.ventexia-services .ventexia-services__description.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Crossfade motion for the stacked layers. Safe on load: the default-active
   layer is already .is-active in the server-rendered HTML, so nothing
   changes state (and therefore nothing animates) until a real interaction. */
.ventexia-services .ventexia-services__image--large,
.ventexia-services .ventexia-services__image--floating,
.ventexia-services .ventexia-services__description {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* Prev/next switcher. Hidden on desktop/tablet where the list itself is the
   control; shown on mobile. As <button> elements these need the same theme
   button-reset neutralization as the trigger (min-height, background,
   transition, appearance). */
.ventexia-services .ventexia-services__nav {
  display: none;
  gap: 0.5rem;
}

.ventexia-services .ventexia-services__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.85);
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.ventexia-services .ventexia-services__nav-btn:hover,
.ventexia-services .ventexia-services__nav-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.ventexia-services .ventexia-services__nav-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.ventexia-services .ventexia-services__nav-btn svg {
  width: 40%;
  height: 40%;
  color: #242424;
}

/* Tablet: two columns still fit, just tighter. Activation is click-driven
   (script.js falls back from hover automatically on touch devices). */
@media (max-width: 1024px) {
  .ventexia-services {
    gap: 32px;
  }

  .ventexia-services .ventexia-services__col--left {
    width: 55%;
  }

  .ventexia-services .ventexia-services__floating-stack {
    width: 38%;
  }
}

/* Mobile: label and heading, then a single inline service row — number,
   line, title and subtitle on the left, prev/next arrows on the right —
   with the image and description beneath it. */
@media (max-width: 767px) {
  .ventexia-services {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* Image + description flow beneath the switcher row. `flex: none` is
     essential: the base `flex: 1` distributes HEIGHT once the container is
     a column, collapsing this column and spilling its content over the list. */
  .ventexia-services .ventexia-services__col--right {
    flex: none;
    width: 100%;
  }

  .ventexia-services .ventexia-services__image-stack {
    aspect-ratio: 4 / 3;
  }

  /* The floating image overflows the viewport edge on small screens. */
  .ventexia-services .ventexia-services__floating-stack {
    display: none;
  }

  /* Left column becomes a grid so the list and the nav share one row.
     Rows are assigned explicitly — auto-placement would shift everything
     when the optional label/heading/button are left empty. */
  .ventexia-services .ventexia-services__col--left {
    flex: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
  }

  .ventexia-services .ventexia-services__label {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .ventexia-services .ventexia-services__heading {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .ventexia-services .ventexia-services__list {
    grid-row: 3;
    grid-column: 1;
  }

  .ventexia-services .ventexia-services__nav {
    display: flex;
    grid-row: 3;
    grid-column: 2;
  }

  .ventexia-services .ventexia-services__button--main {
    grid-row: 4;
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* Only the active service is shown; the nav steps through them. */
  .ventexia-services .ventexia-services__item {
    display: none;
  }

  .ventexia-services .ventexia-services__item.is-active {
    display: block;
    animation: ventexia-services-item-in 0.3s ease;
  }

  /* The per-item hover arrow is replaced by the shared prev/next nav. */
  .ventexia-services .ventexia-services__arrow {
    display: none;
  }

  /* Number and line sit together on their own row above title + subtitle. */
  .ventexia-services .ventexia-services__trigger {
    cursor: default;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
  }

  .ventexia-services .ventexia-services__number {
    grid-row: 1;
    grid-column: 1;
  }

  .ventexia-services .ventexia-services__line {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
  }

  .ventexia-services .ventexia-services__heading-group {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .ventexia-services .ventexia-services__title {
    font-size: 1.25rem;
  }

  /* Layout guards. Elementor writes control values (column width, gap,
     title size) into its generated post CSS at 4-class specificity
     (.elementor-{id} .elementor-element.elementor-element-{id} .target),
     which would otherwise squeeze the stacked mobile layout no matter what
     this file says. The repeated root class lifts these to 5 classes so
     the mobile layout always wins here — without !important. */
  .ventexia-services.ventexia-services.ventexia-services.ventexia-services {
    gap: 24px;
  }

  .ventexia-services.ventexia-services.ventexia-services.ventexia-services
    .ventexia-services__col--left {
    width: 100%;
  }

  .ventexia-services.ventexia-services.ventexia-services.ventexia-services
    .ventexia-services__title {
    font-size: 1.5rem;
  }
}

@keyframes ventexia-services-item-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}