/* Aidem Service Cards — asvc-* */

.asvc-wrap {
  --asvc-header-title-color: #1b1b1f;
  --asvc-header-desc-color: #666670;
  --asvc-card-bg: #f5f5f7;
  --asvc-card-radius: 24px;
  --asvc-frame-g1: transparent;
  --asvc-frame-g2: transparent;
  --asvc-frame-gap: 0px;
  --asvc-eyebrow-color: #8C5FF5;
  --asvc-card-title-color: #1b1b1f;
  --asvc-card-subtitle-color: #8C5FF5;
  --asvc-card-desc-color: #5c5c66;
  --asvc-bullet-icon-color: #8C5FF5;
  --asvc-bullet-icon-size: 14px;
  --asvc-bullet-text-color: #33333d;
  --asvc-decor-color: #8C5FF5;
  --asvc-decor-size: 48px;
  --asvc-decor-opacity: 1;
  --asvc-decor-speed: 2500ms;
  --asvc-decor-top: 6%;
  --asvc-decor-side: 6%;
  --asvc-header-decor-size: 100px;
  --asvc-header-decor-opacity: 1;
  --asvc-header-decor-speed: 2500ms;
  --asvc-header-decor-top: 0px;
  --asvc-header-decor-right: 0px;
  --asvc-image-col: 42%;

  width: 100%;
  box-sizing: border-box;
}

.asvc-wrap *,
.asvc-wrap *::before,
.asvc-wrap *::after {
  box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.asvc-header {
  position: relative;
  width: 100%;
}

.asvc-header-title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.4em;
  color: var(--asvc-header-title-color) !important;
}

.asvc-header-desc {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--asvc-header-desc-color);
  max-width: 62ch;
}

/* Decorative image beside the header title/description — continuous loop,
   independent of scroll. Reuses the same spin/pulse/glitch keyframes as
   the per-card decorative icon further down this file. */
.asvc-header-decor {
  position: absolute;
  z-index: 0;
  top: var(--asvc-header-decor-top);
  right: var(--asvc-header-decor-right);
  width: var(--asvc-header-decor-size);
  height: var(--asvc-header-decor-size);
  opacity: var(--asvc-header-decor-opacity);
  pointer-events: none;
}

.asvc-header-decor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.asvc-header-decor-rotate {
  animation: asvc-spin var(--asvc-header-decor-speed) linear infinite;
}

.asvc-header-decor-pulsate {
  animation: asvc-pulse var(--asvc-header-decor-speed) ease-in-out infinite;
}

.asvc-header-decor-glitch {
  animation: asvc-glitch var(--asvc-header-decor-speed) steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .asvc-header-decor-rotate,
  .asvc-header-decor-pulsate,
  .asvc-header-decor-glitch {
    animation: none;
  }
}

/* ── Grid / rows ─────────────────────────────────────────────────────────── */
.asvc-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* .asvc-card is now the GRADIENT FRAME layer (same technique as the Cards
   Stacking Horizontal widget's .csh-visual "frame"): it holds the diagonal
   gradient and the Inset Gap padding that reveals a sliver of it as a
   border. .asvc-card-inner is the actual solid-background content box,
   sized to fill whatever's left inside that gap. With the default 0px gap
   the inner box fills the frame completely and no border is visible. */
.asvc-card {
  position: relative;
  border-radius: 24px;
  padding: var(--asvc-frame-gap, 0px);
  background-image: linear-gradient(146.44deg, var(--asvc-frame-g1, transparent) 10.94%, var(--asvc-frame-g2, transparent) 89.06%);
  overflow: hidden;
}

.asvc-card-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  background: var(--asvc-card-bg);
  border-radius: calc(var(--asvc-card-radius, 24px) - var(--asvc-frame-gap, 0px));
  padding: 48px;
  overflow: hidden;
}

.asvc-card--reverse .asvc-card-inner {
  flex-direction: row-reverse;
}

.asvc-card--no-image .asvc-card-body {
  flex: 1 1 100%;
}

.asvc-card-body {
  position: relative;
  z-index: 2;
  flex: 1 1 calc(100% - var(--asvc-image-col));
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.asvc-card-image {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--asvc-image-col);
  max-width: var(--asvc-image-col);
}

.asvc-card-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* ── Eyebrow / title / subtitle / description ───────────────────────────── */
.asvc-eyebrow {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asvc-eyebrow-color);
  margin-bottom: 0.6em;
}

.asvc-card-title {
  margin: 0 0 0.3em;
  color: var(--asvc-card-title-color) !important;
}

.asvc-card-subtitle {
  margin: 0 0 0.8em;
  color: var(--asvc-card-subtitle-color);
  font-weight: 600;
}

.asvc-card-desc {
  margin: 0 0 1.2em;
  color: var(--asvc-card-desc-color);
  max-width: 56ch;
}

/* ── Bullets ─────────────────────────────────────────────────────────────── */
.asvc-bullets {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.asvc-bullet {
  display: flex;
  align-items: center;
  gap: 12px;
}

.asvc-bullet-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--asvc-bullet-icon-size);
  height: var(--asvc-bullet-icon-size);
  color: var(--asvc-bullet-icon-color);
}

.asvc-bullet-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

.asvc-bullet-icon i {
  font-size: var(--asvc-bullet-icon-size);
  line-height: 1;
}

.asvc-bullet-text {
  color: var(--asvc-bullet-text-color);
}

/* ── CTA button ──────────────────────────────────────────────────────────
   Deliberately no visual styling here (no background/color/padding/shape) —
   the button renders with the site's own native Elementor Button markup
   (.elementor-button / .elementor-button-link / .elementor-size-sm), so it
   always matches the site's global Button style automatically rather than a
   bespoke look baked into this widget. Only layout spacing lives here. */
.asvc-cta {
  display: flex;
}

/* ── Decorative icon — continuous loop, independent of scroll ───────────── */
.asvc-decor {
  position: absolute;
  z-index: 0;
  top: var(--asvc-decor-top);
  right: var(--asvc-decor-side);
  width: var(--asvc-decor-size);
  height: var(--asvc-decor-size);
  color: var(--asvc-decor-color);
  opacity: var(--asvc-decor-opacity);
  pointer-events: none;
}

.asvc-card--reverse .asvc-decor {
  right: auto;
  left: var(--asvc-decor-side);
}

.asvc-decor svg,
.asvc-decor i,
.asvc-decor img {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.asvc-decor img {
  object-fit: contain;
}

.asvc-decor i {
  font-size: var(--asvc-decor-size);
  line-height: 1;
}

.asvc-decor-rotate {
  animation: asvc-spin var(--asvc-decor-speed) linear infinite;
}

.asvc-decor-pulsate {
  animation: asvc-pulse var(--asvc-decor-speed) ease-in-out infinite;
}

.asvc-decor-glitch {
  animation: asvc-glitch var(--asvc-decor-speed) steps(1, end) infinite;
}

@keyframes asvc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes asvc-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Glitch — irregular "burst, calm, burst" timing (not an evenly-spaced
   tick) plus per-loop random offsets/scale read from the --g-* custom
   properties. Those are set once on load and re-randomized on every
   animationiteration by service-card-widget.js, so consecutive loops
   don't repeat the exact same motion. The px/scale values below are
   just sane fallbacks if JS hasn't run yet (e.g. reduced-motion users
   never see this, see the prefers-reduced-motion block below). */
@keyframes asvc-glitch {
  0%, 100% { transform: translate(0, 0) scale(1); }
  3%       { transform: translate(var(--g-x1, -4px), var(--g-y1, 2px)) scale(var(--g-s1, 1.02)); }
  5%       { transform: translate(0, 0) scale(1); }
  9%       { transform: translate(var(--g-x2, 3px), var(--g-y2, -3px)); }
  11%      { transform: translate(0, 0); }
  13%      { transform: translate(var(--g-x3, -2px), var(--g-y3, 1px)); }
  15%      { transform: translate(0, 0); }
  46%      { transform: translate(0, 0); }
  49%      { transform: translate(var(--g-x2, 2px), var(--g-y1, -2px)) scale(var(--g-s2, 0.98)); }
  51%      { transform: translate(0, 0); }
  78%      { transform: translate(0, 0); }
  81%      { transform: translate(var(--g-x1, -3px), var(--g-y3, 2px)); }
  83%      { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .asvc-decor-rotate,
  .asvc-decor-pulsate,
  .asvc-decor-glitch {
    animation: none;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .asvc-card-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .asvc-card-image,
  .asvc-card-body {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .asvc-card-image {
    order: -1;
  }

  /* Vertical/Horizontal Offset above are responsive Elementor controls —
     set different values for Tablet/Mobile directly in the widget panel
     if the decorative image needs repositioning on smaller screens,
     rather than hardcoding a breakpoint override here. */
}

@media (max-width: 600px) {
  .asvc-card,
  .asvc-card-inner {
    border-radius: 18px;
  }

  .asvc-card-inner {
    padding: 28px;
  }

  .asvc-header {
    text-align: left;
  }
}