/** TS Design System: historical Card compatibility. */

/* Historical modifiers remain modifiers; they do not activate a Card. */
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-ol {
  --tsds-card-border: 1px solid var(--ts-color-border, var(--c-border, rgba(0, 0, 0, 0.1)));
  --tsds-card-shadow: 0 0 0 0 transparent;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).card-brand-1 {
  --tsds-card-border: 1px solid color-mix(in srgb, var(--shadow-color-1, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, CanvasText)))) 22%, transparent);
  --tsds-card-shadow: 0 0 0 0 transparent;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).card-brand-2 {
  --tsds-card-border: 1px solid color-mix(in srgb, var(--shadow-color-2, var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, CanvasText)))) 22%, transparent);
  --tsds-card-shadow: 0 0 0 0 transparent;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).card-plain {
  --tsds-card-surface: transparent;
  --tsds-card-border: 0 solid transparent;
  --tsds-card-shadow: 0 0 0 0 transparent;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).card-elev-s {
  --tsds-card-shadow: var(--card-elevation-s, var(--shadow-s, 0 6px 16px) rgba(0, 0, 0, var(--shadow-alpha-s, 0.1)));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).card-elev {
  --tsds-card-shadow: var(--card-elevation-m, var(--shadow-m, 0 12px 30px) rgba(0, 0, 0, var(--shadow-alpha-m, 0.12)));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).card-elev-l {
  --tsds-card-shadow: var(--card-elevation-l, var(--shadow-l, 0 18px 50px) rgba(0, 0, 0, var(--shadow-alpha-l, 0.14)));
}

/* The six published presets remain one-class Legacy Cards. */
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(
  .preset-card,
  .preset-card-compact,
  .preset-card-feature,
  .preset-card-outline,
  .preset-card-soft,
  .preset-card-plain
) {
  --tsds-card-padding: var(--pad-m);
  --tsds-card-flow: var(--flow-s);
  --tsds-card-surface: var(--card-surface, var(--ts-color-surface, var(--c-surface-card, var(--c-surface-1, var(--ts-color-background, var(--e-global-color-background, #fff))))));
  --tsds-card-color: var(--card-color, var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417))));
  --tsds-card-border: 0 solid transparent;
  --tsds-card-radius: var(--card-radius-m, var(--radius-l, calc(var(--ts-radius-base, 16px) * 1.5)));
  --tsds-card-shadow: var(--card-elevation-m, var(--shadow-m, 0 12px 30px) rgba(0, 0, 0, var(--shadow-alpha-m, 0.12)));
  box-sizing: border-box;
  padding: var(--tsds-card-padding);
  border: var(--tsds-card-border);
  border-radius: var(--tsds-card-radius);
  background: var(--tsds-card-surface);
  color: var(--tsds-card-color);
  box-shadow: var(--tsds-card-shadow);
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).preset-card-compact {
  --tsds-card-padding: var(--pad-s);
  --tsds-card-flow: var(--flow-xs);
  --tsds-card-radius: var(--card-radius-s, var(--radius-m, var(--ts-radius-base, 16px)));
  --tsds-card-shadow: var(--card-elevation-s, var(--shadow-s, 0 6px 16px) rgba(0, 0, 0, var(--shadow-alpha-s, 0.1)));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).preset-card-feature {
  --tsds-card-padding: var(--pad-xl);
  --tsds-card-flow: var(--flow-m);
  --tsds-card-radius: var(--card-radius-xl, var(--radius-xxl, calc(var(--ts-radius-base, 16px) * 3)));
  --tsds-card-shadow: var(--card-elevation-l, var(--shadow-l, 0 18px 50px) rgba(0, 0, 0, var(--shadow-alpha-l, 0.14)));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).preset-card-outline {
  --tsds-card-border: 1px solid var(--ts-color-border, var(--c-border, rgba(0, 0, 0, 0.1)));
  --tsds-card-shadow: 0 0 0 0 transparent;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).preset-card-soft {
  --tsds-card-surface: var(--card-soft-surface, var(--ts-color-surface-soft, var(--c-surface-subtle, var(--c-surface-2, #f6f7f9))));
  --tsds-card-border: 1px solid color-mix(in srgb, var(--ts-color-border, var(--c-border, rgba(0, 0, 0, 0.1))) 60%, transparent);
  --tsds-card-shadow: 0 0 0 0 transparent;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).preset-card-plain {
  --tsds-card-surface: transparent;
  --tsds-card-border: 0 solid transparent;
  --tsds-card-radius: 0;
  --tsds-card-shadow: 0 0 0 0 transparent;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container):is(
  .preset-card,
  .preset-card-compact,
  .preset-card-feature,
  .preset-card-outline,
  .preset-card-soft,
  .preset-card-plain
) > :where(:not(.elementor-element-overlay):not(.elementor-shape) + :not(.elementor-element-overlay):not(.elementor-shape)),
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(
  .preset-card,
  .preset-card-compact,
  .preset-card-feature,
  .preset-card-outline,
  .preset-card-soft,
  .preset-card-plain
) > :is(.e-con-inner, .elementor-container) > :where(:not(.elementor-element-overlay):not(.elementor-shape) + :not(.elementor-element-overlay):not(.elementor-shape)) {
  margin-top: var(--tsds-card-flow);
}

/* Historical interaction remains opt-in and never implies clickability. */
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-interactive {
  transition:
    transform var(--hover-speed, 180ms) var(--hover-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
    box-shadow var(--hover-speed, 180ms) var(--hover-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
    border-color var(--hover-speed, 180ms) var(--hover-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
  will-change: transform;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).card-interactive:hover {
  transform: var(--lift-s, translateY(-2px));
  box-shadow: var(--tsds-card-shadow, var(--card-elevation-m, var(--shadow-m, 0 12px 30px) rgba(0, 0, 0, var(--shadow-alpha-m, 0.12))));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).card-interactive:focus-within {
  outline: 2px solid color-mix(in srgb, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, CanvasText))) 28%, transparent);
  outline-offset: 2px;
}