@CHARSET "UTF-8";

/* =========================
   MENUCKA MAGAZIN - SPOLOCNE
   ========================= */

.blog_switch {
    width: 100%;
    background: #f5f5f3;
    border: 1px solid #e9e9e6;
    border-radius: 14px;
    padding: 16px;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
    color: #111;
}

.blog_switch a {
    color: inherit;
    text-decoration: none;
}

/* LOGO */

.blog_switch > a:first-child {
    display: block;
}

.blog_switch > a:first-child img {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    margin: 0 auto 18px;
}

/* ZOZNAM */

.blog_switch .a_articles {
    display: block;
}

.blog_switch .a_popular {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
}

.blog_switch .a_popular:last-child {
    margin-bottom: 0;
}

.blog_switch .a_popular > a {
    display: block;
    padding: 7px;
    border-radius: 10px;
    box-sizing: border-box;
    transition: background .15s ease;
}

.blog_switch .a_popular > a:hover,
.blog_switch .a_popular > a:focus {
    background: #e8e7e4;
    text-decoration: none;
}

/* TABULKA - ponechana kvoli existujucemu CTP */

.blog_switch .a_popular table {
    width: 100%;
    border-collapse: collapse;
}

.blog_switch .a_popular td {
    padding: 0 !important;
    border: 0 !important;
    vertical-align: top;
}

/* OBRAZOK */

.blog_switch .a_popular img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 8px;
    border-radius: 10px;
}

/* NADPIS */

.blog_switch .a_popular h2,
.blog_switch .a_popular h3,
.blog_switch .a_popular h3.title {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #111;
}

/* VSETKY CLANKY */

.blog_switch > div[align="center"] {
    margin-top: 20px;
    text-align: center;
}

.blog_switch .btn-green {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px !important;
    border: 0 !important;
    border-radius: 10px !important;

    background: linear-gradient(
        135deg,
        #f28a2e 0%,
        #ef6c2f 48%,
        #e74848 100%
    ) !important;

    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none !important;
}

.blog_switch .btn-green:hover,
.blog_switch .btn-green:focus {
    color: #fff !important;
    text-decoration: none !important;
    opacity: .92;
}


/* =========================
   SIROKY BLOG POD PROFILOM
   ========================= */

@media (min-width: 768px) {

    .blog-wide .blog_switch .a_articles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .blog-wide .blog_switch .a_popular {
        margin: 0;
        min-width: 0;
    }

    /* pod profilom zobrazit iba prve 3 */
    .blog-wide .blog_switch .a_popular:nth-child(n+7) {
        display: none;
    }

    .blog-wide .blog_switch .a_popular > a {
        height: 100%;
    }

    .blog-wide .blog_switch .a_popular img {
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    .blog-wide .blog_switch .a_popular h2,
    .blog-wide .blog_switch .a_popular h3,
    .blog-wide .blog_switch .a_popular h3.title {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }
}


/* =========================
   MOBIL
   ========================= */

@media (max-width: 767px) {

    .blog_switch {
        padding: 14px;
        border-radius: 12px;
    }

    .blog_switch > a:first-child img {
        max-width: 190px;
        margin-bottom: 14px;
    }

    .blog_switch .a_popular {
        margin-bottom: 16px;
    }

    .blog_switch .a_popular > a {
        padding: 6px;
        border-radius: 9px;
    }

    .blog_switch .a_popular img {
        margin-bottom: 7px;
        border-radius: 9px;
    }

    .blog_switch .a_popular h2,
    .blog_switch .a_popular h3,
    .blog_switch .a_popular h3.title {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
}
/* =========================
   BLOG V PRAVOM STLPCI
   ========================= */

@media (min-width: 992px) {

    .blog-sidebar .blog_switch {
        padding: 12px;
    }

    .blog-sidebar .blog_switch > a:first-child img {
        max-width: 165px;
        margin-bottom: 10px;
    }

    .blog-sidebar .a_popular {
        margin-bottom: 5px;
    }

.blog-sidebar .a_popular > a {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 10px;
    align-items: center;
    padding: 4px;
    border-radius: 8px;
}

    .blog-sidebar .a_popular table,
    .blog-sidebar .a_popular tbody,
    .blog-sidebar .a_popular tr {
        display: contents;
    }

    .blog-sidebar .a_popular td {
        display: block;
        padding: 0 !important;
    }

.blog-sidebar .a_popular img {
    width: 78px;
    height: 78px;
    object-fit: cover;
    margin: 0;
    border-radius: 8px;
}

.blog-sidebar .a_popular h3.title {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: #333 !important;
text-align: left !important;
}

    .blog-sidebar .blog_switch > div[align="center"] {
        margin-top: 10px;
    }

    .blog-sidebar .btn-green {
        min-height: 32px;
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
}