/*
 * CSS voor de Mijn Post Grid Plugin
 */

/* De container die het grid bevat */
.mijn-post-grid-container {
    display: grid;
    /* Maakt automatisch kolommen van minimaal 300px breed */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px; /* Ruimte tussen de grid-items */
    margin: 2em 0;
}

/* De link-wrapper die de hele kaart omvat, in alle staten */
.mpg-post-item-link,
.mpg-post-item-link:hover,
.mpg-post-item-link:focus,
.mpg-post-item-link:active,
.mpg-post-item-link:visited {
    text-decoration: none !important; /* Verwijder de underline en overschrijf andere stijlen */
    color: inherit; /* Zorgt dat tekstkleur correct wordt overgenomen */
    display: block; /* Zorgt dat de link de volledige ruimte inneemt als grid-item */
}

/* Individuele post-items (de "kaarten") */
.mpg-post-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden; /* Zorgt dat de afgeronde hoeken de afbeelding omsluiten */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Zorgt dat alle kaarten in dezelfde rij even hoog zijn */
}

/* Pas het hover-effect toe wanneer je over de link-wrapper zweeft */
.mpg-post-item-link:hover .mpg-post-item {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Container voor de uitgelichte afbeelding */
.mpg-post-thumbnail-container {
    display: block;
    line-height: 0; /* Verwijder mogelijke witruimte onder de afbeelding */
}

/* De uitgelichte afbeelding zelf */
.mpg-post-thumbnail-container img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Zorgt dat de afbeelding altijd de ruimte vult zonder vervorming */
    display: block;
    border-bottom: 1px solid #e0e0e0;
}

/* De content-wrapper binnen de kaart */
.mpg-post-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* De titel van de post */
.mpg-post-title {
    font-size: 1.25rem;
    margin: 0 0 10px 0;
    transition: color 0.2s ease;
}

/* Zorg ervoor dat de titel standaard zwart is, en zwart blijft na een bezoek */
.mpg-post-item-link:link .mpg-post-title,
.mpg-post-item-link:visited .mpg-post-title {
    color: #000;
}

/* Verander de titelkleur bij hover op de kaart */
.mpg-post-item-link:hover .mpg-post-title {
    color: #0073aa;
}

/* De samenvatting (excerpt) */
.mpg-post-excerpt {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1; /* Duwt de 'Lees meer'-tekst naar de bodem */
}

/* De 'Lees meer'-tekst (nu een span) */
.mpg-read-more {
    display: inline-block;
    margin-top: 15px;
    font-weight: bold;
    color: #0073aa;
    transition: transform 0.2s ease;
}

/* Voeg een klein effect toe aan de 'Lees meer'-tekst bij hover */
.mpg-post-item-link:hover .mpg-read-more {
    transform: translateX(4px);
}

/* --- Paginering Stijlen (Definitieve oplossing) --- */

.mpg-pagination {
    clear: both !important; /* Voorkomt problemen met 'floats' van het thema */
    width: 100%;
    margin: 40px 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* De UL-lijst die de paginering bevat.
   We gebruiken !important om te winnen van thema-stijlen. */
.mpg-pagination .mpg-page-list {
    display: flex !important; /* FORCEER flexbox-layout */
    flex-wrap: wrap !important; /* Sta wrapping toe op kleine schermen */
    justify-content: center !important; /* Centreer de items horizontaal */
    align-items: center !important; /* Centreer de items verticaal */
    list-style: none !important; /* Verwijder bullets */
    padding: 0 !important; /* Verwijder standaard padding */
    margin: 0 !important; /* Verwijder standaard margin */
    gap: 8px;
}

/* De individuele lijst-items */
.mpg-pagination .mpg-page-list li {
    margin: 0; /* Verwijderd, omdat we 'gap' gebruiken */
}

/* De links en de huidige pagina-span */
.mpg-pagination .page-numbers {
    display: block;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.5; /* Zorgt voor betere verticale centrering van tekst */
    text-decoration: none;
    color: #0073aa;
    background: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mpg-pagination a.page-numbers:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
}

.mpg-pagination .page-numbers.current {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
    cursor: default;
}

/* Stijl voor de vorige/volgende pijlen */
.mpg-pagination .prev,
.mpg-pagination .next {
    font-weight: bold;
    font-size: 0.9rem;
    background-color: #fff !important; /* Forceer een witte achtergrond */
}

/* Verberg de stippen als er veel pagina's zijn */
.mpg-pagination .dots {
    border: none;
    background: none;
    padding: 8px 4px;
}