/* 80-blog.css — Lista wpisow: kafelki na stronie glownej i w archiwum */

/* ---------- desktop (>= 1025px) ---------- */
@media screen and (min-width: 1025px) {
    .blog-container{
        width: 100%;
        /* height: 100vh; */
        margin: 0;
        padding: 0;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blog-content-box{
        /* min() zamiast samego var() — na oknie wezszym niz --screen-width
           kontener przestaje wystawac poza widok. */
        width: min(var(--screen-width), 100% - 80px);
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        /* height: 100vh; */
        padding: 100px 0 100px 0;
        box-sizing: border-box;
    }
    /* .blog-content{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: flex-start;
        box-sizing: border-box;
    } */
    .blog-header-box hr{
        width: 200%;
        height: 2px;
        background-color: #16488f;
        border: none;
        margin-bottom: 7%;
        margin-left: -50%;
        padding: 0;
    }
    .blog-header-box h2{
        font-size: var(--text-label); /* bylo 2vh  = 18px */
        font-family: var(--font-display);
        color: #16488f;
        margin: 0;
        padding: 0;
    }
    .blog-header-box{
        margin-bottom: 70px;
    }
    .blog-post{
        /* Odstepy robi teraz gap siatki, nie padding kafelka — padding
           zjadal 80 z ~327 px kolumny. min-width:0 pozwala dlugiemu
           tytulowi sie zlamac zamiast rozpychac tor. */
        min-width: 0;
        box-sizing: border-box;
    }
    .blog-post img{
        width: 100%;
        height: auto;
    }



    .blog-post h3{
        color: #357efc;
        font-family: var(--font-heading);
        font-weight: normal;
        font-size: var(--text-xl); /* bylo 3.5vh= 32px, przy wysokim oknie 49px */
    }
}

/* ---------- mobile (<= 1024px) ---------- */
@media screen and (max-width: 1024px) {
    .landing_page-container{
        background-image: linear-gradient(#2c2c2c, #ffffff) !important;
    }
    .blog-container{
        width: 100%;
    }
    .blog-content-box{
        width: 90%;
        min-height: 100%;
        margin: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .blog-header-box{
        width: fit-content;
        text-align: center;
        margin: 70px 0 60px 0;
    }
    .blog-header-box h2{
        font-size: 1.5rem;
        font-family: var(--font-display);
        color: #16488f;
        padding: 0;
        margin: 0;
    }
    .blog-header-box hr{
        width: 200%;
        height: 2px;
        background-color: #16488f;
        border: none;
        margin-bottom: 7%;
        margin-left: -50%;
    }
    .blog-post{
        min-width: 0;
        text-align: left;
    }
    .blog-post img{
        width: 100%;
    }
    .blog-post h3{
        font-size: 1.3rem;
        font-family: var(--font-heading);
        color: #16488f;
        margin: 20px 0 20px 0;
    }
}

/* ---------- siatka kafelkow: jedna definicja na wszystkie progi ---------- */
/*
 Wczesniej siatka byla opisana dwa razy — osobno w strefie desktopowej
 (auto-fit, minmax 240px, gap 60/48) i osobno w mobilnej (auto-fit,
 minmax 260px, gap 60/40). Jedna zmiana trzeba bylo wprowadzac w dwoch
 miejscach, a wartosci zdazyly sie juz rozjechac.

 Teraz opis stoi raz, poza media queries.
*/
.blog-content{
    display: grid;
    /*
     Zajawka na stronie glownej i w index.php pokazuje trzy wpisy i ma sie
     ukladac tak jak dotad: tyle kolumn, ile zmiesci sie w kontenerze.
    */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 60px 48px;
    width: 100%;
}

/*
 Pelna lista bloga (home.php). Przy auto-fit liczba kolumn wynikala z tego,
 ile razy minimum zmiesci sie w kontenerze, wiec na desktopie 1440 px
 wychodzily cztery kolumny: siedem wpisow ukladalo sie 4 + 3 i w ostatnim
 wierszu zostawala dziura. Teraz liczba kolumn jest zapisana wprost i ta
 sama na desktopie co na tablecie — dwie.

 minmax(0, 1fr) zamiast samego 1fr, bo 1fr to w istocie minmax(auto, 1fr),
 a auto = min-content: najdluzsze slowo w tytule rozpychaloby tor ponad
 jego udzial.
*/
.blog-content--lista{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Telefon: jedna kolumna, tak jak na zalaczonym ukladzie. Przy 680 px
   kontener ma ~612 px, wiec dwie kolumny po 282 px to ostatnia szerokosc,
   przy ktorej kafelek jest jeszcze czytelny; nizej lamie sie na jeden. */
@media screen and (max-width: 680px){
    .blog-content,
    .blog-content--lista{
        grid-template-columns: minmax(0, 1fr);
        gap: 50px;
    }
}