@layer imt-reset, imt-defaults, imt-components;

/* Reset: minimal, vererbt Typo/Color */
@layer imt-reset {
  .imticker { color: var(--imt-text); font: inherit; container-type: inline-size; }
}

/* Components */
@layer imt-components {
  .imt-list { display: grid; gap: var(--imt-space); }
  @container (min-width: 36rem){ .imt-list{ grid-template-columns: 1fr 1fr; } }
  @container (min-width: 64rem){ .imt-list{ grid-template-columns: 1fr 1fr 1fr; } }

  .imt-card {
    background: var(--imt-card);
    border: 1px solid var(--imt-border);
    border-radius: var(--imt-radius);
    padding: var(--imt-space);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .imt-card__meta { display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; color: var(--imt-muted); font-size:.9em; }
  .imt-badge {
    display:inline-flex; gap:.4em; align-items:center;
    padding:.15rem .5rem; border-radius:999px;
    background: color-mix(in oklab, var(--imt-accent) 12%, white);
    font-size:.85em; font-weight:600;
  }
  .imt-card__title { margin: .2rem 0 .4rem; font: inherit; font-weight: 700; }
  .imt-card__excerpt { margin: 0; color: var(--imt-muted); }
  .imt-card__source a { text-decoration: underline; }
}

/* CSS-frei-Modus: nur Layout-Grundgerüst, keine Card-Stile */
.imt-css-free .imt-card,
.imt-css-free .imt-badge { all: unset; }