/** TS Design System: frontend-generic Card component with Elementor adapters. */

/*
 * Every documented size and semantic variant is a complete Card. The classed
 * element is the Card; collections never propagate Card styling to children.
 */
:where(
  .card-xxs,
  .card-xs,
  .card-s,
  .card-m,
  .card-l,
  .card-xl,
  .card-xxl,
  .card-soft,
  .card-primary,
  .card-secondary
),
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(
  .card-xxs,
  .card-xs,
  .card-s,
  .card-m,
  .card-l,
  .card-xl,
  .card-xxl,
  .card-soft,
  .card-primary,
  .card-secondary
) {
  --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, var(--card-radius-m, var(--ts-radius-standard, var(--radius-l, 24px))));
  --tsds-card-shadow: var(--card-elevation-s, var(--shadow-s, 0 6px 16px) rgba(0, 0, 0, var(--shadow-alpha-s, 0.1)));
  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);
}

/* A complete Card owns its component padding over an ordinary one-class host
 * default. Surface, Radius and FX remain independently overrideable utilities. */
:is(
  .card-xxs,
  .card-xs,
  .card-s,
  .card-m,
  .card-l,
  .card-xl,
  .card-xxl,
  .card-soft,
  .card-primary,
  .card-secondary
)[class] {
  padding: var(--tsds-card-padding);
}

/* Direct mappings avoid a second responsive Card scale. */
.card-xxs,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-xxs {
  --tsds-card-padding: var(--pad-xxs);
  --tsds-card-flow: var(--flow-xxs);
}

.card-xs,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-xs {
  --tsds-card-padding: var(--pad-xs);
  --tsds-card-flow: var(--flow-xs);
}

.card-s,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-s {
  --tsds-card-padding: var(--pad-s);
  --tsds-card-flow: var(--flow-xs);
}

.card-m,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-m {
  --tsds-card-padding: var(--pad-m);
  --tsds-card-flow: var(--flow-s);
}

.card-l,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-l {
  --tsds-card-padding: var(--pad-l);
  --tsds-card-flow: var(--flow-m);
}

.card-xl,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-xl {
  --tsds-card-padding: var(--pad-xl);
  --tsds-card-flow: var(--flow-l);
}

.card-xxl,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-xxl {
  --tsds-card-padding: var(--pad-xxl);
  --tsds-card-flow: var(--flow-xl);
}

/* Explicit Padding utilities keep their established priority on Cards. These
 * combination renderers have the same controlled weight as Card ownership and
 * appear later, while later deliberate host overrides can still win. */
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):is(.pad-0, .pad-xxxs, .pad-xxs, .pad-xs, .pad-s, .pad-m, .pad-l, .pad-xl, .pad-xxl, .pad-xxxl) {
  padding: var(--tsds-pad);
}

:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):is(.pad-x-0, .pad-x-xxxs, .pad-x-xxs, .pad-x-xs, .pad-x-s, .pad-x-m, .pad-x-l, .pad-x-xl, .pad-x-xxl, .pad-x-xxxl) {
  padding-inline: var(--tsds-pad-x);
}

:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):is(.pad-y-0, .pad-y-xxxs, .pad-y-xxs, .pad-y-xs, .pad-y-s, .pad-y-m, .pad-y-l, .pad-y-xl, .pad-y-xxl, .pad-y-xxxl) {
  padding-block: var(--tsds-pad-y);
}

:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):is(.pad-t-0, .pad-t-xxxs, .pad-t-xxs, .pad-t-xs, .pad-t-s, .pad-t-m, .pad-t-l, .pad-t-xl, .pad-t-xxl, .pad-t-xxxl) {
  padding-top: var(--tsds-pad-t);
}

:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):is(.pad-b-0, .pad-b-xxxs, .pad-b-xxs, .pad-b-xs, .pad-b-s, .pad-b-m, .pad-b-l, .pad-b-xl, .pad-b-xxl, .pad-b-xxxl) {
  padding-bottom: var(--tsds-pad-b);
}

/* Semantic variants use M geometry unless an explicit Card size follows. */
.card-soft,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-soft {
  --tsds-card-surface: var(--card-soft-surface, var(--ts-color-surface-soft, var(--c-surface-subtle, var(--c-surface-2, #f6f7f9))));
}

.card-primary,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-primary {
  --tsds-card-surface: var(--card-primary-surface, var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, CanvasText))));
  --tsds-card-color: var(--card-primary-color, var(--ts-color-on-primary, Canvas));
}

.card-secondary,
.elementor :is(.e-con, .e-con-inner, .elementor-container).card-secondary {
  --tsds-card-surface: var(--card-secondary-surface, var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, CanvasText))));
  --tsds-card-color: var(--card-secondary-color, var(--ts-color-on-secondary, Canvas));
}

/* A complete semantic Card owns its surface over ordinary one-class host
 * defaults, even when those defaults load later. The additional attribute
 * weight stays override-friendly; a later two-class or inline rule still wins. */
:is(.card-soft, .card-primary, .card-secondary)[class] {
  background: var(--tsds-card-surface);
}

/* Native content normally follows the inherited Card color. These low-weight
 * targets cover browser/theme defaults for common text and icon elements while
 * leaving explicit local color classes and TSDS Buttons in control. */
:where(.card-primary, .card-secondary) :is(h1, h2, h3, h4, h5, h6, p, li, a:not(.btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost)) {
  color: inherit;
}

:where(.card-primary, .card-secondary) svg {
  color: inherit;
  fill: currentColor;
}

/*
 * Elementor assigns its Global Colors directly to common widget internals, so
 * the inherited Card foreground alone cannot reach them. Restrict the bridge
 * to direct content widgets (or widgets in one direct Elementor content
 * wrapper), leave Button widgets to their own color contract, and keep the
 * targets in :where() so later element-specific Elementor colors can win.
 */
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :where(.elementor-widget:not(.elementor-widget-button)),
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :is(.e-con-inner, .elementor-container)
  > :where(.elementor-widget:not(.elementor-widget-button)),
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :where(.elementor-widget:not(.elementor-widget-button))
  :where(
    .elementor-heading-title,
    a:not(.elementor-button),
    .elementor-icon,
    .elementor-icon-list-icon,
    .elementor-icon-list-text
  ),
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :is(.e-con-inner, .elementor-container)
  > :where(.elementor-widget:not(.elementor-widget-button))
  :where(
    .elementor-heading-title,
    a:not(.elementor-button),
    .elementor-icon,
    .elementor-icon-list-icon,
    .elementor-icon-list-text
  ) {
  color: var(--tsds-card-color);
}

/* Elementor v4 renders common content as direct Atomic elements instead of
 * classic widget wrappers. Keep Buttons on their own color contract. */
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :is(.e-heading-base, .e-paragraph-base, .e-icon-base, a:not(.e-button-base)),
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :where(:not(.e-button-base))
  :is(.e-heading-base, .e-paragraph-base, .e-icon-base, a:not(.e-button-base)) {
  color: var(--tsds-card-color);
}

.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :is(.e-icon-base, a:not(.e-button-base)) svg,
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :where(:not(.e-button-base))
  :is(.e-icon-base, a:not(.e-button-base)) svg {
  fill: currentColor;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :where(.elementor-widget:not(.elementor-widget-button))
  :where(.elementor-icon svg, .elementor-icon-list-icon svg),
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.card-primary, .card-secondary)
  > :is(.e-con-inner, .elementor-container)
  > :where(.elementor-widget:not(.elementor-widget-button))
  :where(.elementor-icon svg, .elementor-icon-list-icon svg) {
  fill: currentColor;
}

/*
 * Generic content flow belongs to the Card itself. The following adapters
 * additionally support the two known direct Elementor
 * content wrappers. Existing flow-* utilities win through their established
 * priority contract and can therefore override this component default.
 */
:where(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary)
  > :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(
  .card-xxs,
  .card-xs,
  .card-s,
  .card-m,
  .card-l,
  .card-xl,
  .card-xxl,
  .card-soft,
  .card-primary,
  .card-secondary
) > :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(
  .card-xxs,
  .card-xs,
  .card-s,
  .card-m,
  .card-l,
  .card-xl,
  .card-xxl,
  .card-soft,
  .card-primary,
  .card-secondary
) > :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);
}