/* ==========================================================================
   STROKE TITLE WIDGET (.ast-*)
   z:3 by default. Sandwich clone defaults to z:0 via JS.
   ========================================================================== */

/* Widget wrapper fills its owning stage. */
.ast-layout-owner {
  position: relative;
}

.ast-layout-owner--pinned-stage {
  height: var(--wfs-viewport-height, 100svh);
  min-height: var(--wfs-viewport-height, 100svh);
}

.elementor-widget-aidem_stroke_title,
.elementor-widget:has(.ast-widget) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  align-self: stretch;
  pointer-events: none;
  z-index: 3 !important;
}

.elementor-widget-aidem_stroke_title > .elementor-widget-container,
.elementor-widget:has(.ast-widget) > .elementor-widget-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
}

.gsap-pin-on:has(.ast-widget) {
  position: relative;
}

.gsap-pin-on > .elementor-widget-aidem_stroke_title,
.gsap-pin-on > .elementor-widget:has(.ast-widget) {
  position: absolute !important;
  inset: 0 !important;
}

.ast-widget {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.ast-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ast-positioner {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  transform-origin: center top;
  transform:
    translateX(var(--ast-offset-x, 0px))
    translateY(calc(var(--ast-offset-y, 0px) + var(--ast-ios-y-correction, 0px)));
}

.ast-content {
  position: relative;
  max-width: 100%;
}

.ast-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.ast-title {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  line-height: 0.9;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.ast-title-variant {
  display: none;
  flex-direction: column;
  gap: var(--ast-title-line-gap, 0px);
  width: 100%;
}

.ast-title-variant--desktop {
  display: flex;
}

.ast-title-line {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  white-space: nowrap;
}

.ast-title-variant--auto-wrap .ast-title-line {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

/* Laptop widths use the desktop title variant. Let long desktop lines wrap
   here so they do not clip, while preserving full desktop and tablet/mobile
   variant behaviour. */
@media (min-width: 1025px) and (max-width: 1366px) {
  .ast-widget.ast-laptop-auto-wrap .ast-positioner,
  .ast-widget.ast-laptop-auto-wrap .ast-content,
  .ast-widget.ast-laptop-auto-wrap .ast-title-wrap,
  .ast-widget.ast-laptop-auto-wrap .ast-title-group > .ast-title-wrap--back,
  .ast-widget.ast-laptop-auto-wrap .ast-title-group > .ast-title-wrap--front,
  .ast-widget.ast-laptop-auto-wrap .ast-title {
    max-width: 100%;
  }

  .ast-widget.ast-laptop-auto-wrap .ast-title-variant--desktop .ast-title-line {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ast-title-variant--desktop {
    display: none;
  }

  .ast-title-variant--tablet {
    display: flex;
  }
}

@media (max-width: 767px) {
  .ast-title-variant--desktop,
  .ast-title-variant--tablet {
    display: none;
  }

  .ast-title-variant--mobile {
    display: flex;
  }
}

/* Stroke mode: transparent fill so only the stroke outline is visible.
   Scoped to inside .ast-widget so sandwich clone keeps solid fill. */
.ast-widget .ast-title--stroke {
  -webkit-text-fill-color: transparent;
}

.ast-title-group {
  display: grid;
}

.ast-title-group > .ast-title-wrap--back,
.ast-title-group > .ast-title-wrap--front {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Editor: keep --back visible until sandwich preview has built its clone. */
body.elementor-editor-active .ast-widget:not([data-ast-sandwich-preview-ready="1"]) .ast-title-wrap--back,
.elementor-editor-active .ast-widget:not([data-ast-sandwich-preview-ready="1"]) .ast-title-wrap--back {
  visibility: visible !important;
}

/* Elementor replaces widget markup during control changes, but sandwich
   clones live outside that markup. Never display an orphaned clone in editor. */
body.elementor-editor-active .ast-sandwich-clone,
.elementor-editor-active .ast-sandwich-clone {
  display: none !important;
}

/* Align stroke-title mobile behaviour with the project breakpoint contract:
   mobile up to 767px, tablet from 768px upward. */
@media (max-width: 767px) {
  .ast-stage {
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .ast-positioner,
  .ast-content,
  .ast-title-wrap,
  .ast-title-group > .ast-title-wrap--back,
  .ast-title-group > .ast-title-wrap--front,
  .ast-title {
    width: 100%;
  }

  .ast-title {
    text-align: center;
    overflow-wrap: anywhere;
  }
}

/* Entry effects are handled in JS via inline style + transition. */