/* ==========================================================================
   Article Grid — style odwzorowujące układ referencyjny
   Wgraj do: wp-content/themes/generatepress_child/article-grid.css
   ========================================================================== */

.ag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 30px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.ag-grid-cols-2 .ag-card {
    width: calc(50% - 15px);
}

.ag-grid-cols-3 .ag-card {
    width: calc(33.333% - 20px);
}

.ag-card {
    display: flex;
    flex-direction: column;
}

/* Treść karty (bez zdjęcia) — rozciąga się na resztę dostępnej wysokości,
   dzięki czemu przycisk "Czytaj więcej" zawsze ląduje na dole karty,
   niezależnie od długości tytułu/leadu (patrz .ag-readmore niżej) */
.ag-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Zdjęcie — kwadrat 1:1. Używamy "padding-hack" (padding-top: 100%) zamiast
   samego aspect-ratio, bo aspect-ratio bywa niezawodne na PUSTYCH elementach
   (gdy wpis nie ma zdjęcia wyróżniającego) wewnątrz kontenerów flex — ta
   technika działa gwarantowanie zawsze, niezależnie od zawartości.
   Tło (#F7F5F0) sprawia, że brak zdjęcia wygląda jak świadomy element
   designu, a nie błąd/pusta dziura na stronie. */
.ag-thumbnail {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 16px;
    background-color: #F7F5F0;
}

.ag-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.ag-card:hover .ag-thumbnail img {
    transform: scale(1.05);
}

/* Kategorie */
.ag-cats {
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    margin-bottom: 8px;
}

.ag-cat {
    color: #1E5B41;
    text-decoration: none;
}

.ag-cat:hover {
    text-decoration: underline;
}

.ag-cat-sep {
    color: #1E5B41;
    margin: 0 6px;
    opacity: 0.6;
}

/* Tytuł */
.ag-title {
    margin: 0 0 10px;
    font-family: "Lora", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    /* Max 2 linie — niezależnie od długości tytułu, karta zawsze ma tę samą
       wysokość w tym miejscu, więc karty w rzędzie się nie rozjeżdżają */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ag-title a {
    color: #2B2B28;
    text-decoration: none;
}

.ag-title a:hover {
    color: #1E5B41;
}

/* Meta: autor + data */
.ag-meta {
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    color: #7a7a7a;
    margin-bottom: 12px;
}

.ag-meta a {
    color: #7a7a7a;
    text-decoration: none;
}

.ag-meta a:hover {
    color: #1E5B41;
}

.ag-sep {
    margin: 0 8px;
    opacity: 0.5;
}

/* Lead / zajawka */
.ag-excerpt {
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #2B2B28;
    margin-bottom: 16px;
    /* Max 3 linie — z tego samego powodu co tytuł wyżej */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Przycisk czytaj więcej — zawsze na dole karty (patrz .ag-body: flex + flex:1
   wyżej), dzięki czemu wszystkie przyciski w rzędzie są na tej samej wysokości,
   niezależnie od długości tytułu i leadu nad nimi */
.ag-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    background-color: #1E5B41;
    color: #ffffff !important;
    font-family: "Raleway", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.ag-readmore:hover {
    background-color: #A32D2D;
    color: #ffffff !important;
}

.ag-arrow {
    font-size: 14px;
}

/* ==========================================================================
   Responsywność
   ========================================================================== */

@media (max-width: 900px) {
    .ag-grid-cols-2 .ag-card,
    .ag-grid-cols-3 .ag-card {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .ag-grid {
        gap: 28px;
        padding: 0 12px;
    }
    .ag-title {
        font-size: 17px;
    }
}