/*
 Theme Name:   Simplyblack Child
 Description:  Das Child Theme der Website audiodramaseurope.de
 Author:       Sebastian Stelling
 Author URI:   https://www.audiodramaseurope.de
 Template:     simplyblack
 Version:      1.0
 Text Domain:  simplyblack-child
*/


/* --- 1. Allgemeine Stile (Unabhängig von Mobile/Desktop) --- */

.weekly-posts-wrapper {
    margin: 30px 0;
}

.weekly-posts-wrapper h2 {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 25px;
    color: #333 !important; 
    padding-bottom: 10px;
}

.weekly-post-item {
    text-align: center;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
    transition: transform 0.3s ease;
    box-sizing: border-box; 
}

.weekly-post-item a {
    text-decoration: none;
    color: #333;
    display: block; 
}

.weekly-post-item img {
    width: 100%;
    height: auto; 
    object-fit: cover; 
    border-radius: 5px;
    margin-bottom: 10px;
}

.weekly-post-item h3 {
    font-size: 1.1em;
    margin: 5px 0 0 0;
    line-height: 1.3;
    white-space: normal;
}


/* --- 2. Desktop-Stile (Ab 769px): 4 Spalten Layout --- */

@media (min-width: 769px) {

    .weekly-posts-container {
        display: flex !important;
        flex-wrap: wrap !important; 
        justify-content: flex-start !important; /* Kein space-between mehr */
        gap: 20px !important; /* Beibehaltung des Abstands */
        padding: 10px 0 !important;
    }

    .weekly-post-item {
        /* *** NEUE KORREKTUR: Breiteren Puffer schaffen *** */
        /* Wir ziehen 20px ab (statt 15px), um die Breite zu garantieren. */
        flex: 0 1 calc(25% - 20px) !important; 
        
        display: flex !important;
        flex-direction: column !important;
    }

    .weekly-post-item a {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important; 
    }

    .weekly-post-item img {
        height: 150px !important; 
    }

    .weekly-post-item h3 {
        max-height: 6em !important; 
        overflow: hidden !important; 
        flex-grow: 1 !important; 
        text-align: center !important; 
    }
}


/* --- 3. Mobile Stile entfernen (Optional, falls die Theme-Standard-Mobile-Stile nicht gut aussehen) --- */
/* Da keine Änderungen auf Mobile gewünscht sind, lassen wir diesen Block leer. */
/* Die Standard-Darstellung des Themes wird hier verwendet. */

/* @media (max-width: 768px) { } */


/* --- 3. Mobile Karussell-Styles (bis 768px) --- */

@media (max-width: 768px) {
    
    .weekly-posts-container {
        display: flex !important; 
        overflow-x: scroll !important; 
        scroll-snap-type: x mandatory !important; 
        -webkit-overflow-scrolling: touch !important; 
        
        flex-wrap: nowrap !important; 
        padding: 0 20px 20px 20px !important; 
        gap: 15px !important;
        margin-left: -20px !important; 
        margin-right: -20px !important;
        width: auto !important;
    }

    .weekly-post-item {
        flex-shrink: 0 !important; 
        width: 75vw !important; 
        scroll-snap-align: start !important; 
        margin-left: 0 !important;
    }
    
    /* Erster und letzter Eintrag für Ränder im Karussell */
    .weekly-posts-container .weekly-post-item:first-child {
        margin-left: 20px !important;
    }

    .weekly-posts-container .weekly-post-item:last-child {
        margin-right: 20px !important;
    }

    /* Scrollbalken verstecken */
    .weekly-posts-container::-webkit-scrollbar {
        display: none !important;
    }
    .weekly-posts-container {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
}

/* --- Desktop-Stile (Ab 769px) und Allgemeine Stile --- */

/* 1. Allgemeine Stile: Füge eine Transition hinzu, falls sie noch fehlt */
.weekly-post-item {
    /* ... andere Stile ... */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Wichtig für eine sanfte Animation */
}

/* 2. Hover-Effekt: Definiert, was beim Überfahren passiert */
.weekly-post-item:hover {
    /* Hebt die Box leicht an */
    transform: translateY(-5px) scale(1.02); 
    
    /* Verstärkter, sichtbarer Schatten */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
    
    /* Hebt den Titel leicht hervor */
    color: #0073aa; /* Optional: Ändert die Titelfarbe beim Hover */
}

/* 3. Link-Farbe beim Hover korrigieren (optional) */
.weekly-post-item:hover a h3 {
    color: #0073aa !important; /* Passt die Titelfarbe innerhalb des Links an */
}


/* === Ausgabe der Kategorien via Shortcode === */
.kategorien-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0;
  justify-content: center;
}

.kategorie-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f4f4f4;
  color: #000000;
  text-decoration: none;
  border-radius: 25px;
  border: 1px solid #444;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.kategorie-button:hover,
.kategorie-button:focus {
  background-color: #003399;
  border-color: #d60000;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(214, 0, 0, 0.4);
}

/* Optional: Aktive Kategorie */
.kategorie-button.active {
  background-color: #d60000;
  border-color: #d60000;
  color: #fff;
}

/* Responsive Optimierung für Mobilgeräte */
@media (max-width: 600px) {
  .kategorie-button {
    font-size: 0.95rem;
    padding: 8px 16px;
  }
}


/* === Neuester Beitrag Shortcode === */
.widget-latest-post {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-bottom: 1em;
}

.widget-latest-post-thumb {
  display: flex;
  justify-content: center; /* Bild zentrieren */
  width: 100%;
}

.widget-latest-post-thumb img {
  width: 300px;       /* Feste Breite */
  height: auto;       /* Höhe passt sich automatisch an */
  display: block;
}

.widget-latest-post-title {
  font-size: 1em;
  font-weight: bold;
  margin: 0.5em 0 0;
  text-align: left;   /* Titel linksbündig */
}

.widget-latest-post-excerpt {
  font-size: 0.9em;
  color: #555;
  margin: 0.5em 0 0;
  text-align: left;   /* Auszug linksbündig */
}

/* Link nur auf Bild + Titel */
.widget-latest-post-link {
  text-decoration: underline;
  color: inherit;
  display: inline-block;
}

.widget-latest-post-link:hover {
  text-decoration: underline;
  color: inherit;
}

/* Button: übernimmt die Button-Optik deines Themes über "more-link" */
.widget-latest-post-button {
  margin-top: 0.4em;
  align-self: flex-start;
  text-decoration: none;
}