/* ==================================================
   Card Component
   schwimm einfach Theme
================================================== */

/*
 * Base Card
 *
 * Grundstruktur für Kurs-, Team- und Infokarten.
 * Die Karte wächst automatisch mit ihrem Inhalt.
 */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;

  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/*
 * Bildbereich
 *
 * Der eigentliche Bildzuschnitt wird später
 * zusätzlich über die Image-Komponente gesteuert.
 */
.card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-background);
}

/*
 * Inhaltsbereich
 */
.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-16);

  padding: var(--space-24);
}

/*
 * Überschrift
 */
.card__title {
  margin: 0;
}

/*
 * Fließtext
 */
.card__text {
  margin: 0;
  color: var(--color-text);
}

/*
 * Zusätzliche Informationen
 */
.card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);

  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/*
 * Aktionsbereich
 *
 * margin-top: auto schiebt den Button bei Karten
 * innerhalb desselben Grids an das untere Ende.
 */
.card__footer {
  margin-top: auto;
  padding-top: var(--space-8);
}


/* ==================================================
   Simple Card
================================================== */

/*
 * Für Infoboxen ohne Bild.
 */
.card--simple {
  padding: var(--space-24);
}

/* ==================================================
   Borderless Card
================================================== */

/*
 * Für Karten, die später direkt auf einem
 * farbigen Seitenbereich stehen sollen.
 */
.card--borderless {
  border-color: transparent;
  box-shadow: none;
}

/* ==================================================
   Responsive
================================================== */

@media (max-width: 768px) {
  .card__body,
  .card--simple {
    padding: var(--space-16);
  }
}