/*
 Theme Name:   Sahifa Child
 Theme URI:    http://tielabs.com/themes/sahifa/
 Description:  Sahifa Child Theme
 Author:       TieLabs
 Author URI:   http://tielabs.com
 Template:     sahifa
 Version:      1.0.0
*/

/* Ovdje možeš pisati svoje dodatne CSS stilove ako želiš */

/* --- PRIKAZ NA RAČUNALU / DESKTOP (iznad 1200px) - PROŠIRENJE I 4 KOLONE --- */
@media only screen and (min-width: 1200px) {
    /* Ukupna fiksna širina glavnog okvira stranice za ujednačen raspored */
    body.boxed #wrapper,
    #wrapper,
    .container,
    .inner-wrapper,
    .header-content,
    #main-content {
        max-width: 1300px !important;
        width: 1300px !important;
    }

    /* Unutrašnji odmak od 20px od lijevog i desnog ruba bijelog okvira */
    #main-content,
    .container-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Odmak teksta u podnožju (footer) */
    footer,
    #footer-widget-area,
    .footer-bottom,
    .footer-content,
    #footer-bottom {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Precizno odmaknuti desni blok u podnožju (Powered by...) */
    .footer-bottom .alignright,
    #footer-bottom .alignright,
    .footer-bottom-right,
    footer .alignright {
        margin-right: 20px !important;
        padding-right: 0 !important;
    }

    /* Precizno odmaknuti lijevi blok u podnožju (© 2015...) */
    .footer-bottom .alignleft,
    #footer-bottom .alignleft,
    .footer-bottom-left,
    footer .alignleft {
        margin-left: 0 !important;
    }

    /* Lijevi glavni blok (odmak od sidebara 20px) */
    .content,
    #main-content .content {
        width: 920px !important;
        float: left !important;
        margin-left: 0 !important;
        margin-right: 20px !important;
        padding: 0 !important;
    }

    /* Desna bočna traka (sidebar) sa širinom 320px */
    .sidebar,
    #main-content .sidebar {
        width: 320px !important;
        float: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    /* Širina pojedinačne kartice u postotku za 4 kolone s manjim razmakom između redova */
    .recent-box .recent-item,
    .scroll-box .scroll-item {
        width: 23% !important;
        float: left !important;
        margin-right: 2.6% !important;
        margin-bottom: 12px !important;
        height: 230px !important;
        min-height: 230px !important;
        clear: none !important;
        overflow: hidden !important;
    }

    /* Svaki 4. članak u redu gubi desnu marginu */
    .recent-box .recent-item:nth-child(4n),
    .scroll-box .scroll-item:nth-child(4n) {
        margin-right: 0 !important;
    }

    /* Svaki 5., 9., 13. članak započinje novi čisti red */
    .recent-box .recent-item:nth-child(4n+1),
    .scroll-box .scroll-item:nth-child(4n+1) {
        clear: both !important;
    }

    /* Poništavanje starog pravila za 3 kolone */
    .recent-box .recent-item:nth-child(3n+1),
    .scroll-box .scroll-item:nth-child(3n+1) {
        clear: none !important;
    }

    /* Kompaktniji naslovi u karticama za prirodniji razmak */
    .recent-box .recent-item .post-box-title,
    .scroll-box .scroll-item .post-box-title {
        height: 52px !important;
        max-height: 52px !important;
        line-height: 1.25 !important;
        overflow: hidden !important;
        margin-bottom: 4px !important;
    }
}

/* --- PRIKAZ NA SREDNJIM MONITORIMA / LAPTOPI (od 768px do 1199px) - 3 KOLONE --- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .recent-box .recent-item,
    .scroll-box .scroll-item {
        width: 31.33% !important;
        float: left !important;
        margin-right: 3% !important;
        margin-bottom: 20px !important;
        clear: none !important;
    }

    .recent-box .recent-item:nth-child(3n),
    .scroll-box .scroll-item:nth-child(3n) {
        margin-right: 0 !important;
    }

    .recent-box .recent-item:nth-child(3n+1),
    .scroll-box .scroll-item:nth-child(3n+1) {
        clear: both !important;
    }
}

/* --- MOBILNI PRIKAZ (do 767px) --- */
@media only screen and (max-width: 767px) {
    /* Kontejner kartice kao Flexbox red s tankom sivom linijom na dnu */
    .recent-box .recent-item,
    .scroll-box .scroll-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e2e2e2 !important;
        clear: both !important;
    }

    /* Uklanjanje linije s posljednjeg elementa */
    .recent-box .recent-item:last-child,
    .scroll-box .scroll-item:last-child {
        border-bottom: none !important;
    }

    /* Fiksiranje širine slikovnog bloka na 100px */
    .recent-box .recent-item .post-thumb,
    .scroll-box .scroll-item .post-thumb {
        float: none !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    /* Slika popunjava 100px širine */
    .recent-box .recent-item .post-thumb img,
    .scroll-box .scroll-item .post-thumb img,
    .recent-box .recent-item img,
    .scroll-box .scroll-item img {
        float: none !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: auto !important;
        display: block !important;
    }

    /* Odmak teksta/naslova desno od slike za 20px */
    .recent-box .recent-item .post-box-title,
    .scroll-box .scroll-item .post-box-title,
    .recent-box .recent-item .entry-meta,
    .scroll-box .scroll-item .entry-meta {
        flex: 1 1 auto !important;
        width: auto !important;
        margin-left: 20px !important;
        padding-left: 0 !important;
    }

    .recent-box .recent-item .post-box-title,
    .scroll-box .scroll-item .post-box-title {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }

    .recent-box .recent-item .post-box-title a,
    .scroll-box .scroll-item .post-box-title a {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .recent-box .recent-item .entry-meta,
    .scroll-box .scroll-item .entry-meta {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}