/*
 * Plugin Name: My Flexible Article Grid
 * Description: Styles for the flexible article grid, inspired by t-online.de.
 */

/* Grundlegende Box-Modell-Anpassung für konsistentes Layout */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Allgemeine Einstellungen für den Haupt-Grid-Container --- */
.flexible-grid {
    display: grid; /* Verwendet CSS Grid für das Layout der Artikel */
    /* Standard-Spaltenlayout: Füllt mit Artikeln von mind. 300px Breite, bis zu 3 Spalten auf größeren Bildschirmen */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px; /* Abstand zwischen den einzelnen Artikeln */
    padding: 20px 0; /* Innenabstand oben/unten für den gesamten Grid-Bereich */
    max-width: 1200px; /* Maximale Breite des Grids auf der Seite */
    margin: 0 auto; /* Zentrierung des Grids im Browserfenster */
    align-items: stretch; /* Stellt sicher, dass alle Artikelkarten in einer Reihe die gleiche Höhe haben */
    font-family: Arial, sans-serif; /* Einheitliche, saubere Schriftart für die Artikeltexte */
}

/* --- Stil der einzelnen Artikelkarte (Grid Item) --- */
.grid-item {
    display: flex; /* Nutzt Flexbox, um Bild und Inhalt vertikal zu stapeln */
    flex-direction: column; /* Bild oben, Textinhalt darunter */
    text-decoration: none; /* Entfernt die standardmäßige Unterstreichung von Links */
    color: #333; /* Standard-Textfarbe für die Artikeldetails */
    border: 1px solid #e7e7e7; /* Heller, feiner Rahmen um jede Artikelkarte */
    border-radius: 4px; /* Leicht abgerundete Ecken für einen modernen Look */
    overflow: hidden; /* Stellt sicher, dass Inhalte (besonders Bilder) die abgerundeten Ecken respektieren */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Sanfte Animationen beim Hover */
    background-color: #ffffff; /* Weißer Hintergrund für die Artikelkarten */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Dezenter Schatten unter der Karte */
}

.grid-item:hover {
    transform: translateY(-2px); /* Hebt die Karte beim Überfahren leicht an */
    box-shadow: 0 4px 8px rgba(0,0,0,0.12); /* Stärkerer Schatten beim Hover für einen Pop-Effekt */
}

/* --- Stil des Artikelbilds --- */
.grid-item img {
    width: 100%; /* Bild füllt die gesamte Breite der Artikelkarte aus */
    height: 180px; /* Feste Höhe für die Bilder, um Konsistenz zu gewährleisten */
    object-fit: cover; /* Schneidet das Bild bei Bedarf zu, damit es den Bereich füllt, ohne verzerrt zu werden */
    display: block; /* Entfernt zusätzlichen Leerraum unter dem Bild, der durch Inline-Elemente entstehen kann */
}

/* --- Stil des Textinhaltsbereichs der Artikelkarte --- */
.grid-item .item-content {
    padding: 10px 15px 15px; /* Innenabstand für den Textbereich (oben, seitlich, unten) */
    flex-grow: 1; /* Lässt den Textbereich den verbleibenden Platz einnehmen, damit alle Karten gleich hoch sind */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verteilt Überschrift, Teaser und Metadaten innerhalb des Bereichs */
}

/* Stil der Artikelüberschrift */
.grid-item .item-content h2 {
    font-size: 1.15em; /* Schriftgröße der Überschrift */
    margin-top: 0;
    margin-bottom: 8px; /* Abstand zwischen Überschrift und Teaser */
    line-height: 1.35; /* Zeilenhöhe der Überschrift */
    color: #000; /* Schwarze Farbe für die Überschrift */
    font-weight: bold; /* Fetter Schriftstil für die Überschrift */
}

/* Stil des Teaser-Textes (Kurztext) */
.grid-item .item-content .teaser {
    font-size: 0.9em; /* Schriftgröße des Teaser-Textes */
    line-height: 1.45; /* Zeilenhöhe des Teasers */
    color: #555; /* Mittleres Grau für den Teaser */
    margin-bottom: 12px; /* Abstand zwischen Teaser und Metadaten */
}

/* Stil der Metadaten (Autor, Datum) */
.grid-item .item-content .meta {
    font-size: 0.75em; /* Kleinere Schriftgröße für Metadaten */
    color: #888; /* Helleres Grau für Metadaten */
    text-transform: none; /* Keine Großbuchstaben, Standardtext */
    letter-spacing: normal; /* Normaler Zeichenabstand */
    margin-top: auto; /* Sorgt dafür, dass Metadaten immer am unteren Rand des Inhaltsbereichs sind */
}

/* --- Responsivität: Media Queries für das Grid --- */

/* Für Tablets und mittlere Bildschirme (max. 992px Breite) */
@media (max-width: 992px) {
    .flexible-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Etwas kleinere Mindestbreite, ggf. 2-3 Spalten */
        gap: 15px;
    }
}

/* Für kleinere Tablets und größere Mobile (max. 768px Breite) */
@media (max-width: 768px) {
    .flexible-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Mindestbreite weiter reduziert */
        gap: 12px;
    }
    .grid-item img {
        height: 160px; /* Bildhöhe auf kleineren Tablets reduzieren */
    }
    .grid-item .item-content {
        padding: 10px 12px;
    }
}

/* Für Mobile-Geräte (max. 576px Breite) */
@media (max-width: 576px) {
    .flexible-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf sehr kleinen Bildschirmen */
        gap: 10px;
        padding: 15px;
    }

    .grid-item img {
        height: 150px;
    }

    .grid-item .item-content {
        padding: 12px;
    }

    .grid-item .item-content h2 {
        font-size: 1em;
    }
    .grid-item .item-content .teaser {
        font-size: 0.85em;
    }
    .grid-item .item-content .meta {
        font-size: 0.7em;
    }
}

/* Allgemeine Styling-Verbesserungen (können auch im Theme sein, hier als Fallback) */
body {
    font-family: Arial, sans-serif; /* Einheitliche, klare Schriftart */
    line-height: 1.6;
    color: #333;
    margin: 0;
    background-color: #f5f5f5; /* Leichter Off-White Hintergrund */
}

h1 {
    text-align: center;
    color: #222;
    padding: 25px;
    margin-bottom: 0;
}