/* * DATEI: /wp-content/themes/composer-child/custom-CSS/news-css.css
 * BESCHREIBUNG: Reduziert auf reinen Rahmen für News-Grid
 */

/* 1. RAHMEN UM DIE GANZE KARTE */
/* Wir nutzen "html body" für höhere Priorität, damit es Theme-Styles überschreibt */
html body .vc_grid-item .vc_grid-item-mini {
    /* Der eigentliche Rahmen */
    border: 1px solid #444444 !important; 
    
    /* Runde Ecken (10px) */
    border-radius: 10px !important;       
    
    /* Hintergrund sicherheitshalber weiß setzen */
    background-color: #ffffff !important; 
    
    /* WICHTIG: Damit das Bild oben nicht über die runden Ecken hinausragt */
    overflow: hidden !important;          
    
    /* Damit der Rahmen nicht die Breite verändert */
    box-sizing: border-box !important;
    
    /* Weicher Übergang für Hover-Effekte */
    transition: all 0.3s ease-in-out;
}

/* 2. HOVER EFFEKT (Optional) */
/* Beim Drüberfahren wird der Rahmen etwas dunkler */
html body .vc_grid-item:hover .vc_grid-item-mini {
    border-color: #222222 !important;
    /* Optional: Leichter Schatten für mehr Tiefe */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

/* 3. RESET FÜR INNERE RÄNDER */
/* Verhindert, dass das Theme versehentlich noch Ränder um Bild oder Text zieht (doppelter Rahmen) */
html body .vc_grid-item .vc_gitem-zone {
    border: none !important;
    box-shadow: none !important;
}

/* 4. LOGIK FÜR FEHLENDES BILD (Inhalt rutscht nach oben) */

/* Fall A: WPBakery fügt das Standard-Platzhalterbild "vc_gitem_image.png" ein. 
   Wir nutzen den modernen :has() Selektor. Das prüft: "Hat Zone A dieses spezifische Bild?" 
   Falls ja -> Weg damit! 
*/
html body .vc_grid-item .vc_gitem-zone-a:has(img[src*="vc_gitem_image.png"]) {
    display: none !important;
}

/* Fall B: Zur Sicherheit das Platzhalter-Bild selbst auch noch direkt verstecken */
html body .vc_grid-item img[src*="vc_gitem_image.png"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Fall C: Wenn Zone technisch wirklich leer ist (Fallback) */
html body .vc_grid-item .vc_gitem-zone-a:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
}



/* * DATEI: /wp-content/themes/composer-child/custom-CSS/related-posts.css
 * BESCHREIBUNG: Styling für "Ähnliche Beiträge" unter dem Artikel
 * Passt das Design an das Haupt-News-Grid an.
 */

/* 1. CONTAINER / KARTE DESIGNEN */
/* Wir nutzen den Wrapper .inner-post, das ist das Gegenstück zur Grid-Karte */
.pix-recent-blog-posts .inner-post {
    border: 1px solid #444444 !important; /* Dein dunkelgrauer Rahmen */
    border-radius: 10px !important;       /* Runde Ecken */
    background-color: #ffffff !important;
    overflow: hidden !important;          /* Bild beschneiden */
    box-sizing: border-box !important;
    height: 100%;                         /* Damit alle gleich hoch wirken */
    transition: all 0.3s ease;
    margin-bottom: 30px;                  /* Abstand nach unten */
    position: relative;                   /* Wichtig für Positionierung */
}

/* Hover Effekt */
.pix-recent-blog-posts .inner-post:hover {
    border-color: #222222 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}


/* 2. BILD BEREICH (.featured-thumb) */
/* Ränder entfernen, damit es am Rahmen klebt */
.pix-recent-blog-posts .featured-thumb {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
}

.pix-recent-blog-posts .featured-thumb img {
    width: 100% !important;
    display: block !important;
    border-radius: 0 !important; /* Keine eigenen Ecken, der Container macht das */
}


/* 3. LOGIK FÜR FEHLENDES BILD (Placeholder) */
/* Dein HTML zeigt hier "placehold.it" als Bildquelle. 
   Wir nutzen wieder :has(), um den Bildcontainer auszublenden, wenn er nur den Platzhalter enthält.
*/
.pix-recent-blog-posts .inner-post .featured-thumb:has(img[src*="placehold.it"]),
.pix-recent-blog-posts .inner-post .featured-thumb:has(img[src*="placeholder"]) {
    display: none !important;
}


/* 4. INHALT (.content) */
/* Abstand zum Rahmen geben */
.pix-recent-blog-posts .content {
    padding: 20px !important;
    /* padding-bottom korrigiert, da kein Button mehr da ist */
    padding-bottom: 20px !important; 
}

/* Datum (Meta) */
.pix-recent-blog-posts .content .top-meta.date {
    font-size: 13px !important;
    color: #888888 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px !important;
    display: block !important;
}

/* Titel - H4 Style (16px) */
.pix-recent-blog-posts .content .title {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.pix-recent-blog-posts .content .title a {
    font-size: 16px !important;   /* Gewünschte Größe */
    line-height: 1.4 !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 700 !important;  /* Fett für Überschrift-Charakter */
}

/* Beschreibung / Excerpt - Angepasst an Masonry Grid */
.pix-recent-blog-posts .content .post-desc {
    font-size: 15px !important;      /* Auf 15px gesetzt */
    color: #555555 !important;       /* Gleiches Grau wie im Grid */
    line-height: 1.6 !important;     /* Angenehmer Lesefluss */
    margin-top: 10px !important;
    margin-bottom: 0 !important;     /* Kein Abstand unten nötig ohne Button */
    font-style: normal !important;   /* Falls Theme es kursiv macht */
}


/* FIX: Button "Alle News-Beiträge" rechtsbündig erzwingen */
/* Der Wrapper-Span verhindert oft das Floating, daher nutzen wir Flexbox */
span.ult_crlink {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

/* Float im Link resetten, da Flexbox das Layout übernimmt */
span.ult_crlink a.ult_colorlink {
    float: none !important;
}