/********************************************
 * 0. GLOBAL & RESET (mobile adjustments)
 ********************************************/
@media (max-width: 768px) {
    /* Global mobile reset */
}



/********************************************
 * 1. TYPOGRAPHY
 ********************************************/
@media (max-width: 1200px) {
    /* Desktop down typography */
}

@media (max-width: 992px) {
    /* Tablet down typography */
}

@media (max-width: 768px) {
    /* Mobile main typography */
}

@media (max-width: 480px) {

    /* Extra small mobile typography */
    .c-heading1__title {
        font-size: 16px;
        padding: 6px 16px;
    }
}



/********************************************
 * 2. GRID / LAYOUT CORE (content + sidebar)
 ********************************************/
@media (max-width: 1200px) {

    /* Desktop → adjust container width */
    body {
        min-width: 984px;
    }
    .p-top1 .c-latest-posts__inner{
    
}

@media (max-width: 992px) {

    /* Mobile layout */
    body {
        min-width: 730px;
    }

    .c-header__inner {
        gap: 6px;
    }

    .c-header__logo {
        flex: 0 0 200px;
    }

    .c-header__bannerapp {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (max-width: 767px) {

    /* Mobile layout */
    body {
        min-width: 100%;
    }

    .c-header__logo {
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {

    /* Extra mobile layout */

}



/********************************************
 * 3. HEADER + NAVIGATION
 ********************************************/
@media (max-width: 992px) {
    /* Tablet header/nav */
}

@media (max-width: 767px) {

    /* Mobile header/nav */
    .c-header .c-header__topbar .c-header__inner {
        justify-content: center;
        position: relative;
        flex-wrap: wrap;
    }
    .c-header .c-header__main .c-header__inner {
        justify-content: flex-end;
        position: relative;
        align-items: flex-end;
    }

    .c-header__mbmenu {
        display: inline-block;
        position: absolute;
        top: calc(50% - 8px);
        left: 10px;
        height: 16px;
    }

    .c-header__mbmenu .c-offcanvas.is-active {
        left: 0;
    }

    .c-header__mbmenu .c-offcanvas .c-offcanvas__wrapper {
        padding: 8px 10px 20px 10px;
    }

    .c-header__mbmenu .c-offcanvas .c-offcanvas__wrapper .c-offcanvas__row {
        margin-bottom: 20px;
    }

    .c-header__mbmenu .c-offcanvas .c-offcanvas__wrapper .c-offcanvas__row6 {
        display: flex;
        margin-top: 16px;
    }


    .c-header__inner .c-header__logo {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .c-header__inner .c-header__mbmenu .c-btn__group {
        height: 16px;
        display: inline-block;
    }

    .c-header__inner .c-btn__group .c-menu__toggle {
        display: inline-block;
    }

    .c-header__inner .c-header__bannerapp {
        /* display: none; */
    }

    #offCanvasMenuClose svg {
        width: 20px;
        height: 20px;
    }

    .c-offcanvas__row1 #offCanvasMenuClose {
        position: absolute;
        left: 0px;
        top: 10px;
    }

    .c-header__main .c-header__inner .c-header__menu {
        display: none;
    }

    .u-spac__content {
        padding-inline: 10px;
    }

    .c-offcanvas .c-offcanvas__title {
        font-size: 1.4rem;
        color: #949494;
        font-weight: 500;
        margin-top: 16px;
    }

    .c-offcanvas #offcanvasMainMenu li {
        border-bottom: 1px solid #414141;
    }

    .c-offcanvas #offcanvasMainMenu li a,
    .c-offcanvas #offcanvasSubMenu li a {
        font-size: 1.6rem;
        font-weight: 700;
        padding: 8px 0;
    }

    .c-header__mbmenu .c-offcanvas .c-offcanvas__wrapper .c-offcanvas__row6 .c-offcanvas__title {
        margin-top: 0px;
    }

    .c-offcanvas #offcanvasSubMenu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        column-gap: 8px;
    }

    .c-offcanvas__row7 p {
        font-size: 1.2rem;
        text-align: left;
    }

    .c-menu__item a {
        padding: 12px 16px;
    }

}


/********************************************
 * 4. HOMEPAGE SECTIONS
 ********************************************/
@media (max-width: 1200px) {

    .p-top2 .articlesSwiper.is-loading .swiper-slide,
    .p-top4 .articlesSwiper2.is-loading .swiper-slide {
        flex: 0 0 calc(33% - 13px);
    }



}

@media (max-width: 992px) {

    /* Tablet home adjustments */
    .p-top2 .articlesSwiper.is-loading .swiper-slide,
    .p-top4 .articlesSwiper2.is-loading .swiper-slide {
        flex: 0 0 calc(50% - 6px);
    }

    .p-top3 .p-top3__wrapper .p-top3__row {
        flex-direction: column;
        row-gap: 20px;
    }
}

@media (max-width: 767px) {

    /* Mobile home adjustments */
    .p-top1 .c-latest-posts__inner .skeleton-item {
        gap: 7px;
    }

    .c-postlist1__item .skeleton-title {
        height: 20px;
    }

    .p-top1 .c-latest-posts__inner {
        flex-direction: column;
    }

    .p-top1 .c-latest-posts__featured {
        width: 100%;
        aspect-ratio: 16/9;
        height: auto;
        min-height: 200px;
        overflow: hidden;
    }

    .p-top1 #featured-link {
        height: 100%;
        aspect-ratio: 16/9;
        overflow: hidden;
    }

    .p-top1 #featured-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }

    .p-top1 .c-latest-posts__list {
        width: 100%;
    }

    .p-top1 .c-latest-posts__list .c-post-item {
        padding: 8px;
    }

    .p-top1 .c-latest-posts__list .c-post-item .c-post-item__title {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .c-ads1 .c-ads1__wrapper .c-ad1__inner {
        flex-direction: column;
        gap: 8px;
    }

    .c-ads1 .c-ads1__wrapper .c-ad1__inner .c-ad1--right {
        display: none;
    }

    .p-top2 .articlesSwiper.is-loading .swiper-slide,
    .p-top4 .articlesSwiper2.is-loading .swiper-slide {
        flex-basis: 100%;
        margin-right: 0px;
    }

    .p-top3l {
        width: 100%;
    }

    .p-top3l {
        width: 100%;
        flex-basis: 100%;
    }

    .p-top3 .p-top3__wrapper .p-top3__row {
        flex-direction: column;
    }

    #featured-image-skeleton {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile home */

    .p-top1 .c-latest-posts__inner .skeleton-item {
        gap: 7px;
    }

    .c-postlist1__item .skeleton-title {
        height: 20px;
    }

    .p-top1 .c-latest-posts__inner {
        flex-direction: column;
    }

    .p-top1 .c-latest-posts__featured {
        width: 100%;
        aspect-ratio: 16/9;
        height: auto;
    }

    .p-top1 #featured-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }

    .p-top1 .c-latest-posts__list {
        width: 100%;
    }

    .p-top1 .c-latest-posts__list .c-post-item {
        padding: 8px;
    }

    .p-top1 .c-latest-posts__list .c-post-item .c-post-item__title {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .c-ads1 .c-ads1__wrapper .c-ad1__inner {
        flex-direction: column;
        gap: 8px;
    }

    .c-ads1 .c-ads1__wrapper .c-ad1__inner .c-ad1--right {
        display: none;
    }

    .p-top2 .articlesSwiper.is-loading .swiper-slide,
    .p-top4 .articlesSwiper2.is-loading .swiper-slide {
        flex-basis: 100%;
        margin-right: 0px;
    }

    .p-top3l {
        width: 100%;
    }

    .p-top3l {
        width: 100%;
        flex-basis: 100%;
    }

    .p-top3 .p-top3__wrapper .p-top3__row {
        flex-direction: column;
    }
}

/********************************************
 * 4. CATEGORY SECTIONS
 ********************************************/
@media (max-width: 992px) {
    .p-cat1 {
        margin-top: 10px;
    }

    .p-cat1 .p-cat1__wrapper .p-cat1__row {
        flex-direction: column;
    }

    .c-pagination {
        margin-bottom: 60px;
    }
}

@media (min-width: 768px) {
    .c-postlist3__fea img {
        height: 382px;
    }
}

@media (max-width: 767px) {

    /* Mobile home adjustments */
    .c-postlist1__fea img,
    .c-postlist3__fea img {
        height: 200px;
        object-fit: cover;
    }

    .p-top2 .articlesSwiper .swiper-slide .c-owl__img,
    .p-top4 .articlesSwiper2 .swiper-slide .c-owl__img,
    .p-top2 .articlesSwiper .swiper-slide .skeleton-img,
    .p-top4 .articlesSwiper2 .swiper-slide .skeleton-img {
        height: 200px;
    }

}

@media (max-width: 480px) {

    /* Extra small mobile home */
    .p-cat1 .p-cat1__wrapper .p-cat1__row {
        flex-direction: column;
    }

    .p-cat1 .p-cat1__wrapper .p-cat1__row .p-cat1l {
        width: 100%;
        flex-basis: 100%;
    }
}

/********************************************
 * 5. FEATURED / HERO BLOCK
 ********************************************/
@media (max-width: 992px) {
    /* Tablet featured */
}

@media (max-width: 768px) {
    /* Mobile featured */
}



/********************************************
 * 6. POST CARDS (list, grid, sidebar items)
 ********************************************/
@media (max-width: 992px) {
    /* Tablet card layout */
}

@media (max-width: 767px) {

    /* Mobile card layout */
    .c-postlist1__inner {
        gap: 12px;
    }

    .c-postlist1__item {
        flex-basis: 100%;
        width: 100%;
        margin-bottom: 16px;
    }

    .c-postlist1__title a {
        font-size: 1.6rem;
        line-height: 1.3;
    }
}

@media (min-width: 581px) {
    .c-postlist3__title a {
        font-size: 2.2rem;
    }
}

@media (max-width: 580px) {

    /* Extra mobile card layout */

    .c-postlist3__title a {
        font-size: 1.6rem;
        line-height: 1.3;
    }
}




/********************************************
 * 8. SINGLE POST PAGE
 ********************************************/
@media (max-width: 992px) {

    /* Tablet single layout */
    .p-single {
        margin-top: 10px;
    }

    .p-single .p-single__wrapper .p-single__row {
        flex-direction: column;
    }
}

@media (max-width: 767px) {

    /* Mobile single layout */
    .post-template-default .c-related__list {
        flex-direction: column;
    }

    .post-template-default .c-related__list .c-related__item {
        display: flex;
        column-gap: 12px;
    }

    .post-template-default .c-related__list .c-related__item .c-related__thumb {
        flex: 0 0 40%;
    }

    .post-template-default .c-related__list .c-related__thumb img {
        height: 130px;
    }

    .post-template-default .c-related__list .c-related__item .c-related__content {
        flex: 1 1 60%;
    }

    .post-template-default .p-singlel .p-single2l__wrapper {
        display: none;
    }
}

@media (max-width: 480px) {

    /* Extra mobile single */
    .c-main .c-main__wrapper .p-single .p-single__wrapper .p-single__row {
        flex-direction: column;
    }

    .c-main .c-main__wrapper .p-single .p-single__wrapper .p-single__row .p-singlel {
        width: 100%;
        flex-basis: 100%;
    }

    .c-single__title {
        font-size: 2.2rem;
    }

    .post-template-default .c-meta1 {
        flex-direction: column;
        row-gap: 20px;
    }

    .post-template-default .c-tag1 {
        align-self: unset;
    }

    .c-single__tags {
        justify-content: flex-start;
    }

    .post-template-default .c-single__content {
        line-height: 1.4;
    }

    .post-template-default .c-related__list {
        flex-direction: column;
        row-gap: 20px;
    }

    .post-template-default .c-related__list .c-related__item .c-related__thumb {
        width: 100%;
        height: 130px;
    }

    .post-template-default .c-related__list .c-related__thumb img {
        height: 100%;
    }
}



/********************************************
 * 9. SIDEBAR
 ********************************************/
@media (max-width: 992px) {

    /* Tablet sidebar */
    .c-sidebar {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 20px;
    }

    .c-sidebar .c-postlist2 {
        flex: 1 1 50%;
    }

    .c-sidebar .c-ads2 {
        flex: 1 1 50%;
    }

    .c-sidebar .c-ads4,
    .c-sidebar .c-ads5 {
        display: none;
    }
}

@media (max-width: 767px) {

    /* Mobile sidebar */
    .c-sidebar {
        display: block;
    }
}

@media (max-width: 480px) {

    /* Extra mobile single */
    .c-sidebar {
        padding: 10px;
    }
}

@media (max-width: 992px) and (min-width: 767px) {
    .c-sidebar {
        display: grid;
        grid-template-columns: 300px auto;
        gap: 20px;
    }

    .c-sidebar .c-ads2 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        margin-bottom: 0px !important;
    }

    .c-sidebar .c-ads3 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .c-sidebar .c-postlist2 {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }
}



/********************************************
 * 10. ADS / BANNERS
 ********************************************/
@media (max-width: 1200px) {
    .c-ads1 .c-ads1__wrapper .c-ad1__inner {
        flex-direction: column;
    }

    #ad-topbar-03 {
        width: min(100%, 580px);
    }

    .c-ad1--right {
        display: none;
    }
}

@media (max-width: 992px) {
    .c-ads1 .c-ads1__wrapper .c-ad1__inner {
        flex-direction: row;
    }

    #ad-topbar-01 {
        width: 320px;
        min-height: 100px;
    }

    #ad-topbar-02 {
        width: 320px;
    }

    .c-ad1--right {
        display: inline-block;
    }
}

@media (max-width: 767px) {

    /* Mobile ads banners */
    #ad-sidebar-1 {
        min-height: 600px;
        margin-inline: auto;
    }
    #ad-sidebar-2{
    	margin-inline: auto;
    }

    #ad-topbar-01,#ad-topbar-03 {
        width: 320px;
        min-height: 100px;
    }
    
}

@media (max-width: 480px) {
    #ad-topbar-01 {
        width: 320px;
        min-height: 100px;
    }

    .c-ads__content {
        text-align: center;
    }
}


/********************************************
 * 11. PAGINATION
 ********************************************/
@media (max-width: 767px) {
    /* Mobile pagination */
}

@media (max-width: 480px) {

    .post-template-default .c-single__nav .c-single__prev,
    .post-template-default .c-single__nav .c-single__next {
        width: 45%;
        font-weight: 500;
        font-size: 1.4rem;
    }

    .post-template-default .c-single__nav .c-single__prev .prev-title,
    .post-template-default .c-single__nav .c-single__next .next-title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .post-template-default .c-single__nav .c-single__prev svg,
    .post-template-default .c-single__nav .c-single__next svg {
        width: 20px;
        height: 20px;
    }

    .post-template-default .c-single__nav .c-single__prev a {
        align-items: flex-start;
        column-gap: 8px;
        flex-direction: column;
    }

    .post-template-default .c-single__nav .c-single__next a {
        align-items: flex-end;
        column-gap: 8px;
        flex-direction: column;
    }

    .post-template-default .c-single__nav .c-single__next a .next-title {
        order: 2;
    }

    .post-template-default .c-single__nav .c-single__next a .next-icon {
        order: 1;
    }

}


/********************************************
 * 12. FOOTER
 ********************************************/
@media (max-width: 768px) {
    /* Mobile footer */
    .c-footer .c-footer__row1 .c-footer__inner {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {

    #menu-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
    }

    #menu-footer li {
        text-align: center;
    }

    #menu-footer li a {
        padding: 5px;
    }
}



/********************************************
 * 13. UTILITIES
 ********************************************/
@media (max-width: 767px) {

    /* .u-hide-mobile, .u-mb16, etc. */
    .u-pb24 {
        padding-bottom: 12px;
    }

    .u-pt24 {
        padding-top: 12px;
    }

    .u-pl20 {
        padding-left: 10px;
    }

    .u-pr20 {
        padding-right: 10px;
    }
}

@media (max-width: 480px) {

    .u-p16 {
        padding: 8px;
    }

    .u-mt30 {
        margin-top: 15px;
    }
}



/********************************************
 * 14. EXTRA MOBILE ONLY (≤480px)
 ********************************************/
@media (max-width: 480px) {
    /* Anything specific for small phones */
}