/**
 * Universal Card-Media opt-in. Native layout, no orientation detection.
 * Card owns paint/clipping/FX; immediate content regions own Card padding.
 * Images retain intrinsic block size, then fill stretched flex/grid regions.
 * Percentage flex-basis intentionally resolves to content in an auto-height
 * column, unlike a zero-pixel basis. No fixed height or negative margins.
 */
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] {
  --tsds-card-content-flow: 0px;
  padding: 0;
  gap: 0;
  overflow: clip;
}

/* Reuse the existing direct Boxed/Classic content owner, without inventing
 * wrappers or replacing its native display/direction/grid configuration. */
:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container) {
  padding: 0;
  gap: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > :is(.card-media, :where(div, section, article, header, footer, main, aside, nav):not(:where(.card-media, .e-con-inner, .elementor-container, .elementor-element-overlay, .elementor-shape, .elementor-empty-view, .elementor-widget, .elementor-element[data-atomic]:not(.e-con), .card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary))) {
  margin: 0 !important;
  min-width: 0;
  box-sizing: border-box;
}

/* Low-weight sizing defaults: native authored flex-basis/track rules may win.
 * Only direct ordinary content containers are padded. Widgets, editor chrome,
 * technical wrappers and independent nested Cards are not inferred as content. */
:where(:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > :is(.card-media, :where(div, section, article, header, footer, main, aside, nav):not(:where(.card-media, .e-con-inner, .elementor-container, .elementor-element-overlay, .elementor-shape, .elementor-empty-view, .elementor-widget, .elementor-element[data-atomic]:not(.e-con), .card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary)))) {
  flex: 1 1 0%;
}

:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > :where(div, section, article, header, footer, main, aside, nav):not(:where(.card-media, .e-con-inner, .elementor-container, .elementor-element-overlay, .elementor-shape, .elementor-empty-view, .elementor-widget, .elementor-element[data-atomic]:not(.e-con), .card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary)) {
  padding: var(--tsds-card-padding);
}

:where(:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media) {
  /* Native Atomic position/alignment must override these defaults. */
  position: relative;
  align-self: stretch;
}

:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media {
  padding: 0;
  border: 0;
  border-radius: 0;
  min-height: 0;
}

/* Known native image/link/picture, Classic and Atomic-image host paths only.
 * display:contents on an editor Atomic host is deliberately not overridden. */
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(img, a, picture, .elementor-widget-container),
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(a, picture, .elementor-widget-container, .elementor-element[data-atomic]) > :is(img, a, picture),
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(.elementor-widget-container, .elementor-element[data-atomic]) > :is(a, picture) > :is(img, picture),
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > a > picture > img,
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(.elementor-widget-container, .elementor-element[data-atomic]) > a > picture > img {
  position: static;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

/* A media link establishes the overlay's containing box, not a new clip.
 * Rounded focus contours do not round the image's internal composition edges. */
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > a[href],
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(.elementor-widget-container, .elementor-element[data-atomic]) > a[href] {
  position: relative;
  border-radius: var(--tsds-card-media-radius);
}

/* Two adjacent opaque bands remain distinguishable across light/dark pixels.
 * Replaces the outer media-link outline only in this opt-in. Ordinary content
 * links/buttons/inputs retain their own focus styling inside Card padding. */
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > a[href]:focus-visible,
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(.elementor-widget-container, .elementor-element[data-atomic]) > a[href]:focus-visible {
  outline: none;
}

:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > a[href]:focus-visible::after,
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(.elementor-widget-container, .elementor-element[data-atomic]) > a[href]:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  pointer-events: none;
  border: 3px solid #fff;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px #000;
}

/* V4 text/heading links can reset UA outlines via all:unset. Supply a
 * context-local fallback; never restyle Button focus or links outside this mode.
 * Bound the offset by existing Card padding, without inventing a spacing scale. */
:is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > :where(div, section, article, header, footer, main, aside, nav):not(:where(.card-media, .e-con-inner, .elementor-container, .elementor-element-overlay, .elementor-shape, .elementor-empty-view, .elementor-widget, .elementor-element[data-atomic]:not(.e-con), .card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary)) :is(.e-paragraph-link-base, .e-heading-link-base):not(:where(.elementor-button, .e-button-base, .btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost)):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: clamp(-2px, calc(var(--tsds-card-padding) - 2px), 2px);
}

@media (forced-colors: active) {
  /* System color enforcement removes the normal surface/shadow distinction.
   * An internal contour preserves grouping without affecting layout/focus. */
  :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class]:not(:focus-visible) {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }

  /* V4 all:unset can erase the native text-link affordance. Keep the change
   * inside this opt-in and forced colors; do not override Button semantics. */
  :is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > :where(div, section, article, header, footer, main, aside, nav):not(:where(.card-media, .e-con-inner, .elementor-container, .elementor-element-overlay, .elementor-shape, .elementor-empty-view, .elementor-widget, .elementor-element[data-atomic]:not(.e-con), .card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary)) :is(.e-paragraph-link-base, .e-heading-link-base):not(:where(.elementor-button, .e-button-base, .btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-ghost)) {
    text-decoration-line: underline;
  }

  :is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > a[href]:focus-visible,
  :is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(.elementor-widget-container, .elementor-element[data-atomic]) > a[href]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: -6px;
  }

  :is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > a[href]:focus-visible::after,
  :is(:is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class], :is(.card-xxs, .card-xs, .card-s, .card-m, .card-l, .card-xl, .card-xxl, .card-soft, .card-primary, .card-secondary).card-media-layout[class] > :is(.e-con-inner, .elementor-container)) > .card-media > :is(.elementor-widget-container, .elementor-element[data-atomic]) > a[href]:focus-visible::after {
    border-color: Canvas;
    box-shadow: none;
  }
}