/* ==================================================================
 *                   CERTIFICATES.CSS - ZERTIFIKATE
 * ==================================================================
 * Version: 1.0.0
 * Letzte Aktualisierung: 2025-03-13
 *
 * Dieses Stylesheet gestaltet die Sektion zur Anzeige von
 * Zertifikaten und Auszeichnungen.
 * ================================================================== */

/* 1. GRID-LAYOUT FÜR DIE GALERIE
   ================================================================== */
.certificates-grid {
    display: grid;
    /* Erstellt ein flexibles Raster: Spalten sind mind. 300px breit und teilen sich den Platz */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg); /* Nutzt den globalen Abstand aus main.css */
    margin-top: var(--spacing-xl);
}

/* 2. STYLING DER EINZELNEN ZERTIFIKAT-KARTE
   ================================================================== */
.certificate-card {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden; /* Stellt sicher, dass die Ecken des Bildes rund bleiben */
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certificate-card:hover {
    transform: translateY(-10px); /* Hebt die Karte beim Hovern an */
    box-shadow: var(--shadow-md);
}

/* 3. BILD- & INHALTSBEREICH DER KARTE
   ================================================================== */
.certificate-image-container {
    background-color: #ffffff; /* Weißer Hintergrund, damit Zertifikate gut aussehen */
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.certificate-image-container img {
    object-fit: contain; /* Stellt sicher, dass das ganze Bild sichtbar ist */
    aspect-ratio: 16 / 11; /* Sorgt für einheitliche Bildproportionen */
    width: 100%;
}

.certificate-content {
    padding: var(--spacing-md);
    flex-grow: 1; /* Sorgt dafür, dass alle Inhaltsbereiche gleich hoch sind */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.certificate-title {
    font-family: 'JosefinSlab-SemiBold', serif;
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.certificate-issuer {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.certificate-date {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-top: auto; /* Schiebt das Datum nach unten, falls Platz ist */
}

/* 4. RESPONSIVE ANPASSUNGEN
   ================================================================== */
@media (max-width: 768px) {
    .certificates-grid {
        /* Auf kleineren Bildschirmen wird nur eine Spalte angezeigt */
        grid-template-columns: 1fr;
    }
}