/* CLAUDE: assets/css/cards.css – Card-Grid Styling (responsive, 3-spaltig) */
/* CLAUDE: Styles für Gutenberg Block-Pattern "Card Grid – 3-spaltig (responsive)" */
/* CLAUDE: Enthält: Grid-Layout, Card-Styles, Hover-Effekte, Responsive Breakpoints */
/* CLAUDE: Max. 200 Zeilen, nur Card-spezifische Styles */

/* ===== GRID-LAYOUT ===== */

/* CLAUDE: Grid-Container – 3 Spalten auf Desktop */
/* CLAUDE: Ändern: grid-template-columns für andere Spaltenanzahl anpassen */
/* CLAUDE: gap: clamp() für fluid Spacing (16px-28px je nach Viewport) */
/* CLAUDE: margin: 30px links/rechts für besseren Abstand zum Viewport-Rand */
.ddi-grid {
  display: grid; /* CLAUDE: CSS Grid für flexibles Layout */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* CLAUDE: 3 gleich breite Spalten, minmax verhindert Overflow */
  gap: clamp(16px, 2.5vw, 28px); /* CLAUDE: Fluid Gap zwischen Cards (16px Mobil, 28px Desktop) */
  margin-left: 30px; /* CLAUDE: 30px Margin links (Anforderung) */
  margin-right: 30px; /* CLAUDE: 30px Margin rechts (Anforderung) */
}

/* CLAUDE: Grid auf Tablet (≤1024px) – 2 Spalten */
/* CLAUDE: Ändern: Breakpoint anpassen falls nötig (z.B. 1200px) */
@media (max-width: 1024px) {
  .ddi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* CLAUDE: 2 gleich breite Spalten */
  }
}

/* CLAUDE: Grid auf Mobil (≤680px) – 1 Spalte */
/* CLAUDE: Ändern: Breakpoint anpassen falls nötig (z.B. 768px) */
@media (max-width: 680px) {
  .ddi-grid {
    grid-template-columns: 1fr; /* CLAUDE: 1 Spalte (Full-Width) */
  }
}

/* ===== CARD-STYLES ===== */

/* CLAUDE: Card-Wrapper (Anchor-Tag) – komplett klickbar */
/* CLAUDE: Enthält: Hover-Effekt, Schatten, Radius, Transition, Goldene Umrandung */
/* CLAUDE: Ändern: background, border-radius, box-shadow nach Design anpassen */
.ddi-card {
  display: block; /* CLAUDE: Block-Element für volle Breite */
  text-decoration: none !important; /* CLAUDE: Entfernt Standard-Link-Unterstrich (Anforderung: !important) */
  color: inherit; /* CLAUDE: Erbt Textfarbe von Parent (verhindert blaue Link-Farbe) */
  background: #fff; /* CLAUDE: Weißer Hintergrund für Card */
  border-radius: 12px; /* CLAUDE: 12px Eckenradius (Anforderung) */
  border: 2px solid #D4AF37; /* CLAUDE: Goldene Umrandung – #D4AF37 (klassisches Metallic-Gold, Anforderung) */
  overflow: hidden; /* CLAUDE: Verhindert, dass Bild über Radius hinausragt */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* CLAUDE: Sanfter Schatten (Normal-State) */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; /* CLAUDE: Smooth Hover-Effekt (inkl. Border-Color) */
  will-change: transform, box-shadow; /* CLAUDE: Performance-Optimierung für Animation */
}

/* CLAUDE: Card-Link-Wrapper (verhindert Unterstreichungen) */
/* CLAUDE: Stellt sicher, dass ALLE Kinder keine Unterstreichung haben (Anforderung) */
.ddi-card *,
.ddi-card__link,
.ddi-card__link * {
  text-decoration: none !important; /* CLAUDE: Keine Unterstreichung auf Card-Elementen (!important für Override) */
}

/* CLAUDE: Card-Hover-Effekt – Anheben + stärkerer Schatten */
/* CLAUDE: Ändern: translateY-Wert für stärkeren/schwächeren Effekt anpassen */
.ddi-card:hover {
  transform: translateY(-2px); /* CLAUDE: Hebt Card um 2px an */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); /* CLAUDE: Stärkerer Schatten (Hover-State) */
}

/* CLAUDE: Card-Fokus-Effekt (Tastatur-Navigation) */
/* CLAUDE: Ändern: outline-color nach Theme-Farben anpassen */
.ddi-card:focus-visible {
  outline: 2px solid #1e90ff; /* CLAUDE: Blauer Fokus-Ring (WCAG-konform) */
  outline-offset: 3px; /* CLAUDE: Abstand zwischen Element und Fokus-Ring */
}

/* ===== CARD-INNER-CONTAINER ===== */

/* CLAUDE: Card-Inner-Container – Padding für Inhalt */
/* CLAUDE: Ändern: padding nach Bedarf anpassen */
.ddi-card__inner {
  padding: clamp(14px, 2vw, 20px); /* CLAUDE: Fluid Padding (14px Mobil, 20px Desktop) */
}

/* ===== CARD-MEDIA (BILD) ===== */

/* CLAUDE: Card-Bild (Image-Block) – verhindert CLS */
/* CLAUDE: aspect-ratio: 16/9 erzwingt festes Seitenverhältnis (keine Layout-Shifts) */
/* CLAUDE: Ändern: aspect-ratio nach Bedarf anpassen (z.B. 4/3, 1/1) */
.ddi-card__media,
.ddi-card__media img {
  display: block; /* CLAUDE: Block-Element verhindert Inline-Gaps */
  width: 100%; /* CLAUDE: Volle Breite des Containers */
  aspect-ratio: 16 / 9; /* CLAUDE: Festes Seitenverhältnis (verhindert CLS) */
  object-fit: cover; /* CLAUDE: Bild wird beschnitten, um Aspect-Ratio zu füllen */
  border-radius: 10px; /* CLAUDE: Leichte Abrundung innen (etwas kleiner als Card-Radius) */
}

/* ===== CARD-BODY (TEXT-CONTAINER) ===== */

/* CLAUDE: Card-Body – Container für Titel + Text */
/* CLAUDE: Aktuell keine Styles nötig (nutzt Padding von .ddi-card__inner) */
/* CLAUDE: Ändern: Hier bei Bedarf zusätzliches Spacing/Padding hinzufügen */

/* ===== CARD-TITEL ===== */

/* CLAUDE: Card-Titel (Heading-Block) – Spacing + Line-Height */
/* CLAUDE: Ändern: margin, font-size, line-height nach Bedarf anpassen */
.ddi-card__title {
  margin: 20px 0 6px; /* CLAUDE: Abstand oben (20px statt 10px - Anforderung: mehr Abstand zu Themen-Badges), unten (6px) zum Text */
  line-height: 1.2; /* CLAUDE: Enge Line-Height für kompakte Darstellung */
  text-decoration: none; /* CLAUDE: Keine Unterstreichung (Anforderung) */
}

/* ===== CARD-TEXT ===== */

/* CLAUDE: Card-Text (Paragraph-Block) – Spacing + Opacity */
/* CLAUDE: Ändern: margin, opacity nach Bedarf anpassen */
.ddi-card__text {
  margin: 0; /* CLAUDE: Entfernt Standard-Paragraph-Margin (verhindert unnötigen Abstand) */
  opacity: 0.9; /* CLAUDE: Leichte Transparenz für sekundären Text (WCAG-konform bei dunklem Text) */
  text-decoration: none; /* CLAUDE: Keine Unterstreichung (Anforderung) */
  color: #826A59; /* CLAUDE: Dark Umber Farbe (Anforderung: #826A59) */
}

/* ===== CARD OHNE BILD ===== */

/* CLAUDE: Card ohne Bild – kompakteres Padding */
/* CLAUDE: :not(:has(...)) prüft, ob Bild fehlt (moderne CSS-Syntax, IE11 nicht unterstützt) */
/* CLAUDE: Ändern: padding-top nach Bedarf anpassen oder Regel entfernen */
.ddi-card:not(:has(.ddi-card__media)) .ddi-card__inner {
  padding-top: clamp(18px, 2.2vw, 24px); /* CLAUDE: Etwas mehr Padding oben, wenn Bild fehlt */
}

/* ===== MOBILE-OPTIMIERUNGEN (OPTIONAL) ===== */

/* CLAUDE: Mobile-spezifische Anpassungen (falls nötig) */
/* CLAUDE: Auskommentiert, da aktuell nicht benötigt – bei Bedarf aktivieren */

/*
@media (max-width: 680px) {
  .ddi-card__title {
    font-size: 1.2rem; // CLAUDE: Kleinere Schrift auf Mobil
  }

  .ddi-card__text {
    font-size: 0.9rem; // CLAUDE: Kleinerer Text auf Mobil
  }
}
*/

/* ===== DARK-MODE-SUPPORT (OPTIONAL) ===== */

/* CLAUDE: Dark-Mode-Anpassungen (falls Theme Dark-Mode unterstützt) */
/* CLAUDE: Auskommentiert, da aktuell nicht benötigt – bei Bedarf aktivieren */

/*
@media (prefers-color-scheme: dark) {
  .ddi-card {
    background: #1e1e1e; // CLAUDE: Dunkler Hintergrund
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.08); // CLAUDE: Heller Schatten
  }

  .ddi-card:hover {
    box-shadow: 0 8px 28px rgba(255, 255, 255, 0.12); // CLAUDE: Stärkerer heller Schatten
  }
}
*/