/**
 * Beitragslisten-Layout: Bild links, Titel + Anreisser rechts.
 *
 * Auf grossen Bildschirmen liegt das Beitragsbild in einer
 * float:left-Spalte mit ein Drittel der Containerbreite, Titel
 * und Anreissertext fliessen rechts daneben. Sobald der Text
 * laenger ist als die Bildhoehe, laeuft er unter dem Bild
 * automatisch in voller Breite weiter (klassisches Float-Verhalten,
 * das mit CSS-Grid oder Flexbox nicht moeglich waere).
 *
 * Mobile-first: bis 767px liegen Bild und Text untereinander.
 *
 * @package welpentheme
 * @author  Joern Gorres
 * @version 1.0.0
 */

/**
 * Kontexte, in denen das Listenlayout greifen soll:
 *   - Blog-Hauptseite      (body.blog)
 *   - Archivseiten         (body.archive)  – Kategorien, Tags, Autor, Datum, Post-Type
 *   - Suchergebnisse       (body.search-results)
 *   - Statische Blog-Page  (body.page-template-default mit blog-Loop) –
 *     wird im Regelfall ohnehin als body.blog gefuehrt.
 *
 * Single-Post-Ansichten bleiben unangetastet.
 */

/**
 * Clearfix nach jedem Artikel
 *
 * Wichtig, damit der Float des Beitragsbildes nicht in den naechsten
 * Artikel "hineinragt" und ihn nach rechts verdraengt.
 */
.blog .post::after,
.archive .post::after,
.search-results .post::after {
    content: "";
    display: block;
    clear: both;
}

/**
 * Innerer Container: Hintergrund / Padding bleiben unveraendert,
 * wir setzen nur die Position fuer den Clearfix.
 */
.blog .inside-article,
.archive .inside-article,
.search-results .inside-article {
    position: relative;
}

/**
 * Beitragstitel buendig mit dem oberen Bildrand + SV-Vereinsgruen
 *
 * Das Childtheme setzt in typography.css fuer "body h2" einen
 * margin-top von 30px. Das schiebt die Listen-Ueberschrift unter
 * den oberen Bildrand. In Listen-Ansichten heben wir das auf,
 * damit Titel und Bild oben buendig stehen.
 *
 * Farbe: GeneratePress rendert die Titel als <h2><a>...</a></h2>.
 * Die Farbe muss daher EXPLIZIT am <a> gesetzt werden (sonst
 * gewinnt die Default-Linkfarbe). Hover-Farbe leicht dunkler.
 */
.blog .post .entry-title,
.archive .post .entry-title,
.search-results .post .entry-title,
.blog .post .entry-title a,
.archive .post .entry-title a,
.search-results .post .entry-title a {
    margin-top: 0;
    color: #5a9e33;
    text-decoration: none;
}

.blog .post .entry-title a:hover,
.blog .post .entry-title a:focus,
.archive .post .entry-title a:hover,
.archive .post .entry-title a:focus,
.search-results .post .entry-title a:hover,
.search-results .post .entry-title a:focus {
    color: #4a8229;
}

/**
 * Header insgesamt kompakt halten
 *
 * Defaults von GeneratePress und vom Childtheme erzeugen rund um
 * den Header oft 1.5em bis 30px Abstand. In Listen wollen wir
 * Titel + Meta + Kategorien dicht beieinander.
 */
.blog .post .entry-header,
.archive .post .entry-header,
.search-results .post .entry-header {
    margin: 0 0 0.5em 0;
}

/**
 * Alle direkten Kinder des Headers (h2, entry-meta-div fuer
 * Datum/Autor, footer.entry-meta fuer Kategorien) eng aneinander.
 *
 * 0.15em Abstand sorgt fuer optische Trennung der Zeilen, ohne
 * dass die "riesige" Lucke aus dem alten Default bleibt.
 */
.blog .post .entry-header > *,
.archive .post .entry-header > *,
.search-results .post .entry-header > * {
    margin-top: 0;
    margin-bottom: 0.15em;
    line-height: 1.4;
}
.blog .post .entry-header > *:last-child,
.archive .post .entry-header > *:last-child,
.search-results .post .entry-header > *:last-child {
    margin-bottom: 0;
}

/**
 * Anreissertext ohne Top-Margin direkt unter den Header anschliessen
 * lassen (kein doppelter Whitespace zwischen Kategorie-Zeile und Text).
 */
.blog .post .entry-summary,
.archive .post .entry-summary,
.search-results .post .entry-summary,
.blog .post .entry-content,
.archive .post .entry-content,
.search-results .post .entry-content {
    margin-top: 0.25em;
}

.blog .post .entry-summary > p:first-child,
.archive .post .entry-summary > p:first-child,
.search-results .post .entry-summary > p:first-child,
.blog .post .entry-content > p:first-child,
.archive .post .entry-content > p:first-child,
.search-results .post .entry-content > p:first-child {
    margin-top: 0;
}

/**
 * "Weiterlesen"-Link in eigener Zeile + ggf. unter dem Bild
 *
 * Aktuell rendert GeneratePress den Read-More-Link inline am
 * Ende des Anreissertextes ("... endlich war … Weiterlesen …").
 * Wir machen ihn per CSS zu einem Blockelement, damit er in
 * einer eigenen Zeile steht.
 *
 * "clear: left" zwingt den Link zudem UNTER das links floatende
 * Beitragsbild. Bei langen Anreissertexten (die das Bild ohnehin
 * ueberschiessen) faellt das nicht auf. Bei kurzen Anreissern,
 * die rechts neben dem Bild enden, wird der Weiterlesen-Link in
 * den vorher leeren Bereich unter dem Bild gezogen und schliesst
 * die Karte optisch sauber ab.
 */
.blog .post .entry-summary .read-more,
.archive .post .entry-summary .read-more,
.search-results .post .entry-summary .read-more {
    display: block;
    clear: left;
    margin-top: 0.5em;
}

/**
 * Mobile-Verhalten (bis 767px)
 *
 * Bild und Text liegen untereinander. Das Bild fuellt die volle
 * Container-Breite, der Anreisser folgt darunter.
 */
.blog .inside-article > .post-image,
.archive .inside-article > .post-image,
.search-results .inside-article > .post-image {
    margin: 0 0 1em 0;
}

.blog .inside-article > .post-image img,
.archive .inside-article > .post-image img,
.search-results .inside-article > .post-image img {
    display: block;
    width: 100%;
    height: auto;
}

/**
 * Desktop-Layout ab 768px
 *
 * - Bild floated nach links und nimmt ca. ein Drittel der Container-
 *   breite ein.
 * - Header (Titel + Meta) und Anreisser fliessen rechts daneben
 *   im verbleibenden Raum.
 * - Sobald der textuelle Inhalt das Bild ueberschiesst, laeuft er
 *   automatisch in voller Breite unter dem Bild weiter
 *   (Standard-Float-Verhalten).
 */
@media (min-width: 768px) {
    /**
     * Container fester Hoehe (180px) statt nur das Bild zu deckeln.
     *
     * GeneratePress Premium fuegt fuer "Featured Images" eigene
     * Inline-Styles ein (z. B. ".resize-featured-image .post-image
     * img { width:…; height:…; }"). Wenn wir nur das <img> begrenzen,
     * kann diese Inline-Regel uns ueberschreiben. Wir deckeln daher
     * den UMGEBENDEN .post-image-Div hart auf 180px und schneiden mit
     * overflow:hidden ab. Damit ist die Render-Hoehe garantiert
     * 180px, egal was Theme oder Plugin ans <img> haengen.
     *
     * 180px ist ein Vorschlagswert; einfach hier anpassen:
     *  - 140 px -> Text bricht schon nach 1–2 Zeilen um
     *  - 220 px -> Text bricht nach 4–5 Zeilen um
     */
    .blog .inside-article > .post-image,
    .archive .inside-article > .post-image,
    .search-results .inside-article > .post-image {
        float: left;
        width: 33.3333%;
        height: 180px;
        margin: 0 1.5em 0.75em 0;
        overflow: hidden;
    }

    /* Anchor- und Img-Element fuellen den 180px-Rahmen vollstaendig
       aus. !important deckt den Fall ab, dass GP Premium oder ein
       anderer Inline-Style spaeter feuert. */
    .blog .inside-article > .post-image > a,
    .archive .inside-article > .post-image > a,
    .search-results .inside-article > .post-image > a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .blog .inside-article > .post-image img,
    .archive .inside-article > .post-image img,
    .search-results .inside-article > .post-image img {
        width: 100% !important;
        height: 100% !important;
        max-height: 180px !important;
        object-fit: cover;
        object-position: center;
        display: block;
    }
}

/* Hinweis: Die feinen Vertikalabstaende der Meta-Bloecke werden
 * weiter oben ueber die universellere ".entry-header > *"-Regel
 * gesteuert (margin-bottom: 0.15em). */