/* ===========================================================================
   SportyKids - Blog (javni deo)
   ---------------------------------------------------------------------------
   Ucitava se SAMO na blog.php i blog-post.php.
   Sve klase su pod .blog-page / .blog-article, pa ovaj fajl ne moze da utice
   na index.html, program.html, gallery.html ni contact.html.

   Boje, fontovi i radijusi preuzeti su iz postojeceg sajta
   (assets/css/global.css -> :root promenljive), da bi blog izgledao
   kao prirodan deo SportyKids dizajna.
   =========================================================================== */


/* ===========================================================================
   1. ARHIVA BLOGOVA  (blog.php)
   =========================================================================== */

.blog-page {
    position: relative;
    padding: 110px 0px 100px;
}

/* --- Uvodni tekst iznad liste ---------------------------------------- */
.blog-page__intro {
    position: relative;
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.blog-page__intro p {
    font-size: 17px;
    line-height: 29px;
    opacity: .70;
    color: var(--color-four);
}

/* --- Mreza kartica ---------------------------------------------------- */
.blog-page .blog-grid {
    position: relative;
}

/* Kartice u istom redu imaju istu visinu, bez obzira na duzinu naslova
   i na to da li post ima sliku. */
.blog-page .blog-card {
    position: relative;
    display: flex;
    margin-bottom: 30px;
}

.blog-card__inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 24px 24px 28px;
    background-color: var(--white-color);
    box-shadow: 0px 0px 20px rgba(var(--color-four-rgb), 0.06);
    transition: all 500ms ease;
}

.blog-card__inner:hover {
    box-shadow: 0px 0px 25px rgba(244, 131, 31, 0.35);
}

/* --- Slika kartice ---------------------------------------------------- */
.blog-card__image {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--main-color);
}

.blog-card__image img {
    position: relative;
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: all 500ms ease;
}

.blog-card__inner:hover .blog-card__image img {
    opacity: .70;
    transform: scale(1.06, 1.06) rotate(2deg);
}

/* --- Sadrzaj kartice -------------------------------------------------- */
.blog-card__content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-top: 20px;
}

/* Kartica bez slike: sadrzaj pocinje odmah, bez praznog prostora. */
.blog-card--no-image .blog-card__content {
    padding-top: 0px;
}

.blog-card__date {
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    padding-left: 16px;
    color: rgba(var(--color-four-rgb), 0.60);
}

.blog-card__date:before {
    position: absolute;
    content: '';
    left: 0px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50px;
    background-color: var(--main-color);
}

.blog-card__title {
    position: relative;
    font-weight: 600;
    font-size: 22px;
    line-height: 32px;
    margin-top: 10px;
    /* Duge reci ne smeju da probiju karticu. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.blog-card__title a {
    position: relative;
    color: var(--color-four);
    transition: all 300ms ease;
}

.blog-card__title a:hover {
    color: var(--main-color);
}

.blog-card__excerpt {
    position: relative;
    font-size: 16px;
    line-height: 27px;
    margin-top: 12px;
    /* Gura CTA na dno kartice, pa su sva dugmad poravnata. */
    flex: 1 1 auto;
    opacity: .70;
    color: var(--color-four);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.blog-card__more {
    position: relative;
    align-self: flex-start;
    font-weight: 600;
    font-size: 16px;
    margin-top: 18px;
    display: inline-block;
    color: var(--color-two);
    transition: all 300ms ease;
}

.blog-card__more i {
    position: relative;
    margin-left: 4px;
    font-size: 10px;
    font-weight: 700;
}

.blog-card__more:hover {
    color: var(--main-color);
}


/* ===========================================================================
   2. PRAZNO STANJE  (nema objavljenih blogova)
   =========================================================================== */

.blog-empty {
    position: relative;
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    padding: 60px 30px;
    border-radius: 8px;
    background-color: var(--color-five);
}

.blog-empty__icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 18px;
}

.blog-empty h3 {
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 12px;
    color: var(--color-four);
}

.blog-empty p {
    font-size: 16px;
    line-height: 27px;
    opacity: .70;
    margin-bottom: 26px;
    color: var(--color-four);
}


/* ===========================================================================
   3. PAGINACIJA
   =========================================================================== */

.blog-pagination {
    position: relative;
    margin-top: 30px;
}

.blog-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-pagination__list li {
    list-style: none;
}

.blog-pagination__link {
    position: relative;
    display: inline-block;
    min-width: 46px;
    padding: 10px 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 50px;
    color: var(--color-four);
    background-color: var(--white-color);
    box-shadow: 0px 0px 15px rgba(var(--color-four-rgb), 0.08);
    transition: all 300ms ease;
}

.blog-pagination__link:hover {
    color: var(--white-color);
    background-color: var(--main-color);
}

/* Trenutna strana - jasno oznacena i bojom i tezinom slova. */
.blog-pagination__link.is-current {
    color: var(--white-color);
    background-color: var(--main-color);
    font-weight: 700;
    cursor: default;
}

/* Nedostupno "Prethodna"/"Sledeca" - prikazano, ali neaktivno. */
.blog-pagination__link.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.blog-pagination__dots {
    padding: 10px 4px;
    color: rgba(var(--color-four-rgb), 0.60);
}

.blog-pagination__info {
    text-align: center;
    margin-top: 18px;
    font-size: 15px;
    opacity: .65;
    color: var(--color-four);
}


/* ===========================================================================
   4. POJEDINACNI CLANAK  (blog-post.php)
   =========================================================================== */

.blog-article {
    position: relative;
    padding: 110px 0px 100px;
}

.blog-article__inner {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
}

.blog-article__date {
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-left: 18px;
    color: var(--main-color);
}

.blog-article__date:before {
    position: absolute;
    content: '';
    left: 0px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50px;
    background-color: var(--main-color);
}

.blog-article__title {
    position: relative;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    margin: 14px 0px 30px;
    color: var(--color-four);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* --- Slika clanka ----------------------------------------------------- */
.blog-article__image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 36px;
    background-color: var(--color-five);
}

.blog-article__image img {
    display: block;
    width: 100%;
    height: auto;          /* cuva originalni odnos stranica */
    max-width: 100%;
}

/* --- Tekst clanka ----------------------------------------------------- */
.blog-article__body {
    position: relative;
    font-size: 17px;
    line-height: 31px;
    color: var(--color-four);
}

/* Tipografija se postavlja i na sam <p>, jer globalno pravilo
   "p { font-size:16px }" iz global.css pobedjuje puko nasledjivanje. */
.blog-article__body p {
    font-size: 17px;
    line-height: 31px;
    color: var(--color-four);
    margin-bottom: 22px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.blog-article__body p:last-child {
    margin-bottom: 0px;
}

/* --- Povratak na blog ------------------------------------------------- */
.blog-article__back {
    position: relative;
    margin-top: 45px;
    padding-top: 32px;
    border-top: 1px solid rgba(var(--color-four-rgb), 0.10);
}


/* ===========================================================================
   5. CLANAK NIJE PRONADJEN  (404)
   =========================================================================== */

.blog-notfound {
    position: relative;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 60px 30px;
    border-radius: 8px;
    background-color: var(--color-five);
}

.blog-notfound__code {
    font-size: 60px;
    line-height: 1;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 10px;
}

.blog-notfound h3 {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 12px;
    color: var(--color-four);
}

.blog-notfound p {
    font-size: 16px;
    line-height: 27px;
    opacity: .70;
    margin-bottom: 26px;
    color: var(--color-four);
}


/* ===========================================================================
   6. RESPONSIVE
   =========================================================================== */

/* Tableti i manji laptopovi */
@media only screen and (max-width: 1023px) {
    .blog-page,
    .blog-article {
        padding: 80px 0px 70px;
    }

    .blog-article__title {
        font-size: 34px;
        line-height: 44px;
    }
}

/* Telefoni u landscape / manji tableti */
@media only screen and (max-width: 767px) {
    .blog-page,
    .blog-article {
        padding: 60px 0px 50px;
    }

    .blog-page__intro {
        margin-bottom: 35px;
    }

    .blog-card__image img {
        height: 210px;
    }

    .blog-article__title {
        font-size: 28px;
        line-height: 38px;
    }

    .blog-article__body,
    .blog-article__body p {
        font-size: 16px;
        line-height: 29px;
    }
}

/* Mali telefoni (360px i slicno) */
@media only screen and (max-width: 479px) {
    .blog-card__inner {
        padding: 18px 18px 22px;
    }

    .blog-card__title {
        font-size: 20px;
        line-height: 30px;
    }

    .blog-card__image img {
        height: 190px;
    }

    .blog-article__title {
        font-size: 24px;
        line-height: 34px;
    }

    .blog-empty,
    .blog-notfound {
        padding: 40px 20px;
    }

    .blog-notfound__code {
        font-size: 48px;
    }

    /* Paginacija na malim ekranima ostaje u jednom redu koliko god moze,
       a brojevi se prelamaju umesto da prave horizontalni scroll. */
    .blog-pagination__link {
        min-width: 40px;
        padding: 8px 12px;
        font-size: 15px;
    }
}