/**
 * blog-card-component.css
 * 
 * Isolierte Stile für Blog-Vorschaukarten
 * - Klar getrennt nach Geräteklassen
 * - Hohe Spezifität durch Komponenten-Wrapper
 * - CSS-Variablen für einfache Wartung
 */

/* ===== Gemeinsame Basisdefinitionen ===== */
.blog-card-component {
  --blog-card-title-size: 1.2rem;
  --blog-card-title-weight: 700;
  --blog-card-title-line-height: 1.4;
  
  --blog-card-date-size: 0.85rem;
  --blog-card-date-color: #666;
  
  --blog-card-text-size: 1rem;
  --blog-card-text-line-height: 1.5;
  --blog-card-text-color: #333;
  
  --blog-card-spacing: 1.5rem;
  --blog-card-border-radius: 8px;
}

/* ===== DESKTOP-SPEZIFISCHE STILE (Standard) ===== */
.blog-card-component .blog-card {
  border-radius: var(--blog-card-border-radius);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  height: 100%;
}

/* Titel */
.blog-card-component .blog-card .card-title {
  font-size: var(--blog-card-title-size) !important;
  font-weight: var(--blog-card-title-weight) !important;
  line-height: var(--blog-card-title-line-height) !important;
  margin-bottom: 0.75rem !important;
}

/* Datum und Meta-Informationen */
.blog-card-component .blog-card .text-dark.small {
  font-size: var(--blog-card-date-size) !important;
  color: var(--blog-card-date-color) !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

/* Textinhalt */
.blog-card-component .blog-card .card-text {
  font-size: var(--blog-card-text-size) !important;
  line-height: var(--blog-card-text-line-height) !important;
  color: var(--blog-card-text-color) !important;
}

/* Content-Überschrift (aus Markdown) */
.blog-card-component .blog-card .content-heading {
  font-size: calc(var(--blog-card-text-size) * 1.1) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

/* Spezifische Regel für den Karten-Titel mit höherer Spezifität */
.blog-card-component .blog-card .card-title a,
html body .blog-card-component .blog-card .card-title a {
  font-size: 1.2rem !important; /* Desktop-Größe direkt gesetzt */
  color: var(--secondary-color) !important;
  text-decoration: none !important;
  font-weight: var(--blog-card-title-weight) !important;
  line-height: var(--blog-card-title-line-height) !important;
  display: inline-block !important;
  border-bottom: none !important;
}

/* ===== TABLET-SPEZIFISCHE STILE ===== */
@media (min-width: 768px) and (max-width: 1199px) {
  .blog-card-component {
    --blog-card-title-size: 1.2rem;
    --blog-card-date-size: 1.2rem;
    --blog-card-text-size: 1.2rem;
    --blog-card-spacing: 1.25rem;
  }
  
  /* Tablet-spezifische Anpassungen mit höherer Spezifität */
  .blog-card-component .blog-card .card-title a,
  html body .blog-card-component .blog-card .card-title a {
    font-size: 1.2rem !important; /* Tablet-Größe direkt gesetzt */
  }
  
  /* Tablet-spezifische Anpassungen */
  .blog-card-component .blog-card .card-body {
    padding: var(--blog-card-spacing) !important;
  }
}

/* ===== SMARTPHONE-SPEZIFISCHE STILE ===== */
@media (max-width: 767px) {
  .blog-card-component {
    --blog-card-title-size: 1.0rem;
    --blog-card-date-size: 0.8rem;
    --blog-card-text-size: 0.95rem;
    --blog-card-spacing: 1rem;
    --blog-card-border-radius: 6px;
  }
  
  /* Smartphone-spezifische Anpassungen mit höherer Spezifität */
  .blog-card-component .blog-card .card-title a,
  html body .blog-card-component .blog-card .card-title a {
    font-size: 1.0rem !important; /* Smartphone-Größe direkt gesetzt */
  }
  
  /* Smartphone-spezifische Anpassungen */
  .blog-card-component .blog-card {
    margin-bottom: 1.25rem !important;
  }
  
  .blog-card-component .blog-card .card-body {
    padding: var(--blog-card-spacing) !important;
  }
}