/*
 * Token-Alias-Layer.
 *
 * Beide Components leben in einer Shadow DOM. Webflow-KLASSEN greifen dort nicht,
 * CSS-Custom-Properties erben aber durch die Grenze. Das Mapping ist mechanisch:
 * `--x--y` im Design-System entspricht `--_x---y` in Webflow.
 *
 * Hier werden die Webflow-Variablen einmal auf kurze interne Namen gelegt - immer mit
 * echtem Fallback, denn --shadow-* und die Gradienten sind KEINE Webflow-Variablen und
 * im Vite-Harness existiert gar keine davon.
 *
 * Niemals eine Farbe direkt hardcoden: die Collection `Color` hat sieben Modi
 * (Base, Dark, Dark Petrol, Brand, Footer, Hero Light, Surface). Ein fester Hex-Wert
 * bricht den Dark-Mode.
 *
 * :host trifft im Webflow-Shadow-Root, :root im lokalen Harness.
 */
:host,
:host {
  --dsw-text: var(--_color---text, #10222b);
  --dsw-text-secondary: var(--_color---text-secondary, #4a5c63);
  --dsw-text-tertiary: var(--_color---text-tertiary, #6b7d84);
  --dsw-text-on-brand: var(--_color---text-on-brand, #ffffff);
  --dsw-surface: var(--_color---surface, #f4f6f7);
  --dsw-surface-brand: var(--_color---surface-brand, #e6f1f3);
  --dsw-background: var(--_color---background, #ffffff);
  --dsw-border: var(--_color---border, #dfe5e7);
  --dsw-border-control: var(--_color---border-control, #c7d1d4);
  --dsw-brand: var(--_color---brand, #0f7683);
  --dsw-focus: var(--_color---focus-ring, #0f7683);

  --dsw-radius-s: var(--_radius---small, 0.5rem);
  --dsw-radius-m: var(--_radius---medium, 0.75rem);
  --dsw-radius-pill: var(--_radius---pill, 9999px);

  --dsw-space-2xs: var(--_space---xxsmall, 0.25rem);
  --dsw-space-xs: var(--_space---xsmall, 0.5rem);
  --dsw-space-s: var(--_space---small, 1rem);
  --dsw-space-m: var(--_space---medium, 2rem);

  --dsw-font: inherit;
}

/* Sichtbar nur fuer Screenreader - im Design fuer die aria-live-Meldung benutzt. */
.dsw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dsw-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--dsw-thumb-aspect, 16 / 9);
  overflow: hidden;
  background: var(--dsw-surface-brand);
  border-radius: inherit; /* die Karte drumherum bestimmt den Radius */
}

.dsw-thumb__picture,
.dsw-thumb__img {
  display: block;
  width: 100%;
  height: 100%;
}

.dsw-thumb__img {
  object-fit: cover;
  /* Kein Transition-Flackern beim Laden aus dem Cache. */
  background: var(--dsw-surface-brand);
}

/* Der Swatch ist ~4 KB und niedrig aufgeloest - hochskaliert nur unscharf brauchbar.
   Gleiche Behandlung wie in Wistias eigenem :not(:defined)-Platzhalter. */
.dsw-thumb[data-kind="swatch"] .dsw-thumb__img {
  filter: blur(8px);
  transform: scale(1.06);
}

/* Weder Bild noch Media-ID: ruhige Flaeche statt kaputtem Bild-Icon. */
.dsw-thumb[data-kind="none"] {
  background: var(--dsw-surface);
}

.dsw-thumb__duration {
  position: absolute;
  right: var(--dsw-space-xs);
  bottom: var(--dsw-space-xs);
  padding: 0.125rem var(--dsw-space-2xs);
  border-radius: var(--dsw-radius-s);
  background: rgb(0 0 0 / 0.72);
  color: #fff;
  font-family: var(--dsw-font);
  font-size: 0.75rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.dsw-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dsw-thumb__play svg {
  width: 3rem;
  height: 3rem;
  border-radius: var(--dsw-radius-pill);
  background: rgb(0 0 0 / 0.55);
  padding: 0.75rem;
  color: #fff;
}

@media (max-width: 478px) {
  .dsw-thumb__play svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.625rem;
  }
}