/** 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-content-flow: var(--tsds-card-flow);
  --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-media-radius: var(--tsds-card-radius);
  --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. A new
 * Surface/Card ends this owner, so an outer Card cannot paint inner content. */
@scope (.elementor :is(.card-primary, .card-secondary):not(:where(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft))) to (:scope :is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft, .card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary)) {
  :scope > :is(.e-heading-base, .e-paragraph-base, .e-icon-base, a:not(.e-button-base)),
  :scope > :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);
  }

  :scope > :is(.e-icon-base, a:not(.e-button-base)) svg,
  :scope > :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;
}

/* Explicit flow is consumed only on the classed Card, never from an ancestor. */
:where(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):is(.flow-0, .flow-xxxs, .flow-xxs, .flow-xs, .flow-s, .flow-m, .flow-l, .flow-xl, .flow-xxl, .flow-xxxl),
.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(.flow-0, .flow-xxxs, .flow-xxs, .flow-xs, .flow-s, .flow-m, .flow-l, .flow-xl, .flow-xxl, .flow-xxxl) {
  --tsds-card-content-flow: var(--tsds-flow);
}

/* Card radius is resolved on its owner before inheritance to the medium. */
:where(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl),
.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(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) {
  --tsds-card-media-radius: var(--tsds-radius);
}

/* One vertical rhythm, without additive host gaps or content margins.
 * Important is limited to spacing ownership, matching the Flow utility. */
: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) > :is(.e-con-inner, .elementor-container) {
  row-gap: 0 !important;
}

: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)),
.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)),
.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)) {
  margin-block: 0 !important;
}

/*
 * 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-content-flow) !important;
}

/* V4 editor: Atomic hosts have display: contents; use the existing Flow
 * adapter's first rendered child, keeping all frontend/Classic rules intact. */
.elementor-edit-area-active :where(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary) > .elementor-element[data-atomic] > :first-child,
.elementor-edit-area-active :where(.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) > .elementor-element[data-atomic] > :first-child {
  margin-block: 0 !important;
}

.elementor-edit-area-active :where(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary) > .elementor-element + .elementor-element[data-atomic] > :first-child,
.elementor-edit-area-active :where(.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) > .elementor-element + .elementor-element[data-atomic] > :first-child {
  margin-top: var(--tsds-card-content-flow) !important;
}

/* Card media always bleeds horizontally; position controls only vertical
 * padding compensation and outer corners. No clipping on the Card FX owner. */
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)) > img.e-image-base,
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.e-con-inner, .elementor-container) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)) > img.e-image-base {
  --tsds-card-media-top-radius: 0px;
  --tsds-card-media-bottom-radius: 0px;
  --tsds-card-media-corners: var(--tsds-card-media-top-radius) var(--tsds-card-media-top-radius) var(--tsds-card-media-bottom-radius) var(--tsds-card-media-bottom-radius);
  display: block;
  box-sizing: border-box;
  width: calc(100% + var(--tsds-card-padding) * 2);
  max-width: none;
  align-self: stretch;
  margin-inline: calc(var(--tsds-card-padding) * -1);
}

/* First/last effective content child; editor overlays and shapes do not count.
 * The only-child case matches both rules and therefore receives all four edges. */
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)):nth-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)) > img.e-image-base,
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.e-con-inner, .elementor-container) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)):nth-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)) > img.e-image-base {
  --tsds-card-media-top-radius: var(--tsds-card-media-radius);
  margin-top: calc(var(--tsds-card-padding) * -1) !important;
}

:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-last-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-last-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-last-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)):nth-last-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)) > img.e-image-base,
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.e-con-inner, .elementor-container) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)):nth-last-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)) > img.e-image-base {
  --tsds-card-media-bottom-radius: var(--tsds-card-media-radius);
  margin-bottom: calc(var(--tsds-card-padding) * -1) !important;
}

/* Radius utilities on a media wrapper also reach the visible image.
 * An explicit radius on the image itself still wins via the existing bridge. */
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) {
  --tsds-card-media-corners: var(--tsds-radius);
}

:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)) > img.e-image-base:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.e-con-inner, .elementor-container) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)) > img.e-image-base:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)) > img:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)) > img:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)) > img:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > .elementor-widget-image.card-media img:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > .elementor-widget-image.card-media img:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > .elementor-widget-image.card-media img:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)) {
  border-radius: var(--tsds-card-media-corners);
}

/* Normal single wrappers and Classic Image Widgets expand once, at the slot;
 * their image fills that slot, rather than adding the padding a second time. */
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)) > img,
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)) > img,
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)) > img,
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > .elementor-widget-image.card-media img,
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > .elementor-widget-image.card-media img,
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)):is(.e-con, .e-con-inner, .elementor-container) > :is(.e-con-inner, .elementor-container) > .elementor-widget-image.card-media img {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* V4 editor: the Atomic host is boxless; apply geometry to the rendered img.
 * This follows the existing direct img.e-image-base markup, not descendants. */
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)) > img.e-image-base,
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.e-con-inner, .elementor-container) > .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)) > img.e-image-base {
  width: calc(100% + var(--tsds-card-padding) * 2);
  max-width: none;
}

.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > .elementor-element[data-atomic].card-media:is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) > img.e-image-base:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)) > :is(.e-con-inner, .elementor-container) > .elementor-element[data-atomic].card-media:is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) > img.e-image-base:not(:where(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)) {
  border-radius: var(--tsds-radius);
}

/* V4 Block Cards can be stretched by their parent Grid. A negative bottom
 * margin cancels padding, but not that extra height. For a trailing medium
 * with preceding content, keep the minimum Card flow and let the preceding
 * content's bottom auto-margin absorb only the extra stretched space. */
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)).e-div-block-base:has(> :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-last-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)):not(:nth-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)))),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)).e-div-block-base:has(> .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)):nth-last-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)):not(:nth-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)))) {
  display: flex;
  flex-direction: column;
}

.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)).e-div-block-base:has(> :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-last-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)):not(:nth-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)))) > :where(:not(.elementor-element-overlay):not(.elementor-shape)),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)).e-div-block-base:has(> .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)):nth-last-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)):not(:nth-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)))) > .elementor-element[data-atomic] > :first-child {
  flex-shrink: 0;
}

.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)).e-div-block-base:has(> :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-last-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)):not(:nth-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)))) > :nth-last-child(2 of :not(.elementor-element-overlay):not(.elementor-shape)),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)).e-div-block-base:has(> .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)):nth-last-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)):not(:nth-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)))) > .elementor-element:nth-last-child(2 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape))[data-atomic] > :first-child {
  margin-bottom: auto !important;
}

/* Preserve the Atomic Button's previous inline-sized box in this local column.
 * btn-block keeps its explicit full width; Button colors/radius are untouched. */
.elementor :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)).e-div-block-base:has(> :is(.card-media, :is(a, figure, picture, div):not(:where(.e-con-inner, .elementor-container)):has(> img.card-media)):nth-last-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)):not(:nth-child(1 of :not(.elementor-element-overlay):not(.elementor-shape)))) > :where(.e-button-base),
.elementor-edit-area-active :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary):not(:where(.card-media-layout)).e-div-block-base:has(> .elementor-element[data-atomic]:is(.card-media, :has(> img.e-image-base.card-media)):nth-last-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)):not(:nth-child(1 of .elementor-element:not(.elementor-element-overlay):not(.elementor-shape)))) > .elementor-element[data-atomic] > :where(.e-button-base) {
  align-self: flex-start;
}