/* =========================================================
   Disorder Elements — Chip Thoughts Widget
   ========================================================= */

/* ── CSS Variables (defaults, overridden by Elementor) ── */
.dct-chip {
  --dct-chip-bg:      #1c1a18;
  --dct-border-from:  #FF8647;
  --dct-border-to:    #E4D8B2;
  --dct-border-width: 2px;
  --dct-radius:       100px;
  --dct-rotate:       0deg;    /* set by JS per-chip */
  --dct-offset-y:     0px;     /* organic Y nudge in grid mode, set by JS */
  --dct-drop:         40px;
}

/* ── Wrapper: default flex (no max-columns) ───────────── */
.dct-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/*
 * Grid mode (Elementor writes grid-template-columns inline).
 * We keep justify-content:center so the whole grid block is centred,
 * but remove align-items so each chip can use its own --dct-offset-y
 * via translateY without being overridden by stretch/center alignment.
 */
.dct-chips-wrap[style*="grid-template-columns"] {
  align-items: start;   /* let chips sit at cell top so Y offset reads naturally */
  justify-items: center;
}

/* ── Single Chip ──────────────────────────────────────── */
.dct-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /*
   * Base transform:
   *   rotate  — pattern from JS
   *   translateY — organic offset (0px in flex mode, varied in grid mode)
   */
  transform: translateY( var(--dct-offset-y) ) rotate( var(--dct-rotate) );

  /* Gradient border */
  background-color: var(--dct-chip-bg);
  background-image:
    linear-gradient(var(--dct-chip-bg), var(--dct-chip-bg)),
    linear-gradient(to right, var(--dct-border-from), var(--dct-border-to));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: var(--dct-border-width) solid transparent;
  border-radius: var(--dct-radius);

  /* Purely decorative */
  pointer-events: none;
  user-select: none;
  cursor: default;
}

/* ── Inner padding wrapper ────────────────────────────── */
.dct-chip-inner {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Text ─────────────────────────────────────────────── */
.dct-chip-text {
  color: #e8e0d4;
  position: relative;
  z-index: 3;
  white-space: nowrap;
}

/* ── Entry animation ──────────────────────────────────── */
/*
 * Hidden state: shifted up by --dct-drop, keeps rotation + offset-y so
 * the chip "arrives" at its resting position without any snap.
 *
 * Full resting transform:  translateY(offset-y)  rotate(rotate)
 * Hidden transform:        translateY(offset-y - drop) rotate(rotate)
 */
.dct-chip.dct-will-animate {
  opacity: 0;
  transform:
    translateY( calc( var(--dct-offset-y) - var(--dct-drop) ) )
    rotate( var(--dct-rotate) );
}

.dct-chip.dct-animate-in {
  opacity: 1;
  transform: translateY( var(--dct-offset-y) ) rotate( var(--dct-rotate) );
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 767px) {
  .dct-chips-wrap {
    gap: 12px;
  }
  .dct-chip-inner {
    padding: 10px 18px;
  }
  .dct-chip-text {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .dct-chips-wrap {
    gap: 10px;
  }
  .dct-chip-inner {
    padding: 9px 16px;
  }
}