/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 960px) {

    /* Main layout */

    .page {
        grid-template-columns: 1fr;
    }


    /* Sidebar */

    .sidebar {
        position: static;

        display: grid;

        grid-template-columns:
            300px
            minmax(0, 1fr);

        gap: 22px;

        align-items: start;
    }


    /* Homepage */

    .hero {
        grid-template-columns: 1fr;
    }

    .hero-list {
        margin-top: 8px;
    }

    .card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .extra-category-section .card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Single post */

    body.single .single-article {
        max-width: 100%;
    }

    body.single .related-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }



}


/* =========================================================
   SINGLE POST — DUAL LANGUAGE TABLET
========================================================= */

@media (max-width: 900px) {

    body.single .single-language-grid {
        grid-template-columns:
            minmax(0, 1fr)
            36px
            minmax(0, 1fr);
    }

    body.single .lang-block-newari {
        padding-right: 16px;
    }

    body.single .lang-block-nepali {
        padding-left: 16px;
    }

    body.single .language-divider {
        width: 36px;
    }

}


/* =========================================================
   SINGLE POST + ARCHIVE — TABLET
========================================================= */

@media (max-width: 768px) {

    /* Single post */

    body.single .page {
        margin-top: 22px;
    }

    body.single .single-article h1 {
        font-size: 29px;
    }

    body.single .post-hero-img {
        height: 320px;
    }

    body.single .lang-body p,
    body.single .entry-content p {
        font-size: 16px;
    }

    body.single .lang-body ul,
    body.single .lang-body ol,
    body.single .entry-content ul,
    body.single .entry-content ol {
        font-size: 16px;
    }

    body.single .related-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Single dual language */

    body.single .single-language-grid {
        display: block;

        margin-top: 22px;
        margin-bottom: 28px;
    }

    body.single .lang-block-newari {
        padding-right: 0;

        padding-bottom: 25px;
    }

    body.single .language-divider {
        position: relative;

        width: 100%;
        height: 42px;
        min-height: 42px;

        margin: 4px 0 24px;

        display: flex;

        align-items: center;
        justify-content: center;
    }

    body.single .language-divider::before {
        top: 50%;
        bottom: auto;

        left: 0;

        width: 100%;
        height: 2px;

        transform: translateY(-50%);

        background: var(--indigo);
    }

    body.single .language-divider .arrow-badge {
        position: relative;

        top: auto;

        width: 30px;
        height: 30px;

        background: var(--indigo);

        color: #ffffff;

        box-shadow:
            0 0 0 5px var(--paper);
    }

    body.single .lang-block-nepali {
        padding-left: 0;
        padding-top: 0;

        border: 0;
    }


    /* =====================================================
       ARCHIVE — TABLET
    ===================================================== */

    body.archive .cat-header {
        padding: 22px 0 6px;
    }

    body.archive .cat-header h1 {
        font-size: 30px;
    }

    body.archive .post-row {
        gap: 16px;

        padding: 16px;
    }

    body.archive .post-row .img {
        width: 190px;
        height: 135px;
    }

    body.archive .post-row h2 {
        font-size: 18px;
    }

}


/* =========================================================
   HOMEPAGE — SMALL TABLET
========================================================= */

@media (max-width: 760px) {

    .tab-sec-head {
        flex-wrap: wrap;

        align-items: center;

        gap: 10px;
    }

    .tab-sec-head .tabs {
        order: 2;

        flex: 0 0 100%;

        width: 100%;

        gap: 18px;
    }

    .tab-sec-head .home-tab {
        font-size: 18px;
    }

    .tab-sec-head .more {
        order: 1;

        width: 100%;

        padding-bottom: 0;

        text-align: right;
    }


    .sec-head {
        flex-wrap: wrap;

        gap: 10px;
    }

    .sec-head h2 {
        order: 1;
    }

    .sec-head .more {
        order: 2;

        margin-left: auto;
    }

    .sec-head .tabs {
        order: 3;

        flex: 0 0 100%;

        width: 100%;

        gap: 16px;

        padding: 5px 0 7px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 700px) {

    /* Global wrapper */

    .wrap {
        padding-left: 16px;
        padding-right: 16px;
    }


    /* Sidebar */

    .sidebar {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 620px) {

    /* =====================================================
       HOMEPAGE
    ===================================================== */

    .page {
        margin-top: 20px;
    }

    .hero-lead .img {
        height: 240px;
    }

    .hero-lead h1 {
        font-size: 25px;

        line-height: 1.28;
    }

    .hero-dual {
        flex-direction: column;
    }

    .hero-dual .strut {
        display: none;
    }

    .hero-list .item {
        gap: 10px;
    }

    .hero-list .thumb {
        width: 82px;
        height: 60px;

        flex-basis: 82px;
    }

    .sec-head {
        margin-top: 34px;

        flex-wrap: wrap;

        align-items: flex-start;
    }

    .sec-head .tabs {
        order: 3;

        width: 100%;

        overflow-x: auto;

        white-space: nowrap;

        scrollbar-width: none;
    }

    .sec-head .tabs::-webkit-scrollbar {
        display: none;
    }

    .sec-head .more {
        margin-left: auto;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .card .img {
        height: 190px;
    }


    /* Extra category */

    .extra-category-section {
        margin-top: 34px;
    }

    .extra-category-section .extra-category-head {
        gap: 12px;
    }

    .extra-category-section .extra-category-head h2 {
        font-size: 19px;
    }

    .extra-category-section .card-grid {
        grid-template-columns: 1fr;
    }

    .extra-category-section .card .img {
        height: 190px;
    }


    /* =====================================================
       ARCHIVE — MOBILE
    ===================================================== */

    body.archive .cat-header {
        padding: 20px 0 4px;
    }

    body.archive .cat-header h1 {
        font-size: 27px;
    }

    body.archive .cat-header .archive-description,
    body.archive .cat-header p {
        font-size: 13px;
    }

    body.archive .page {
        margin-top: 16px;
    }

    body.archive .post-row {
        flex-direction: column;

        gap: 14px;

        padding: 14px;

        margin-bottom: 16px;
    }

    body.archive .post-row .img {
        width: 100%;

        height: 190px;
    }

    body.archive .post-row h2 {
        font-size: 18px;

        margin: 5px 0 9px;
    }

    body.archive .post-row .dual {
        flex-direction: column;

        gap: 12px;
    }

    body.archive .post-row .dual .strut {
        display: none;
    }

    body.archive .post-row .dual p {
        font-size: 13px;

        -webkit-line-clamp: 3;
    }

    body.archive .post-row .foot {
        align-items: flex-start;

        gap: 10px;

        flex-wrap: wrap;
    }

    body.archive .pagination {
        margin-top: 28px;

        gap: 6px;
    }

    body.archive .pagination .page-numbers {
        min-width: 32px;

        height: 32px;

        padding: 0 8px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 24px 18px;
    }


    /* =====================================================
       SINGLE POST
    ===================================================== */

    body.single .page {
        margin-top: 18px;
    }

    body.single .single-article h1 {
        font-size: 27px;

        line-height: 1.3;
    }

    body.single .post-meta-row {
        gap: 12px;

        padding-bottom: 14px;
    }

    body.single .post-hero-figure {
        margin: 18px 0;
    }

    body.single .post-hero-img {
        height: 250px;
    }

    body.single .lang-body p,
    body.single .entry-content p {
        font-size: 16px;

        line-height: 1.8;

        margin-bottom: 16px;
    }

    body.single .lang-body ul,
    body.single .lang-body ol,
    body.single .entry-content ul,
    body.single .entry-content ol {
        font-size: 16px;

        line-height: 1.8;
    }

    body.single .h-divider {
        margin: 32px 0;
    }

    body.single .author-box {
        align-items: flex-start;

        padding: 16px;
    }

    body.single .related {
        margin-top: 36px;
    }

    body.single .related-grid {
        grid-template-columns: 1fr;
    }

    body.single .related-grid .img {
        height: 180px;
    }


    /* Breadcrumb */

    .subrule .wrap {
        gap: 12px;

        align-items: flex-start;

        flex-wrap: wrap;
    }



}


/* =========================================================
   SINGLE POST — SOCIAL SHARE
========================================================= */

@media (max-width: 600px) {

    body.single .post-share {
        gap: 7px;
    }

    body.single .share-label {
        width: 100%;

        margin-bottom: 3px;
    }

    body.single .share-btn {
        width: 36px;
        height: 36px;
    }

    body.single .share-btn svg {
        width: 16px;
        height: 16px;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr;
    }


    /* Homepage */

    .hero-list .thumb {
        width: 76px;
        height: 58px;

        flex-basis: 76px;
    }


    /* Single */

    body.single .single-article h1 {
        font-size: 24px;
    }

    body.single .post-hero-img {
        height: 220px;
    }

    body.single .author-box .av {
        width: 46px;
        height: 46px;
    }

    body.single .tag-row a {
        font-size: 11px;

        padding: 5px 10px;
    }

}


/* =========================================================
   RESPONSIVE — ADVERTISEMENTS
========================================================= */

@media (max-width: 960px) {

    .sidebar .ndd-ad-sidebar {
        max-width: 300px;
    }

}


@media (max-width: 700px) {

    .ndd-ad-home-desktop {
        display: none;
    }

    .ndd-ad-home-mobile {
        display: block;
    }

    .ndd-ad-archive-top,
    .ndd-ad-single-top,
    .ndd-ad-infeed,
    .ndd-ad-inarticle {
        max-width: 100%;
    }

    .ndd-ad-archive-top .ndd-ad-image,
    .ndd-ad-single-top .ndd-ad-image,
    .ndd-ad-infeed .ndd-ad-image,
    .ndd-ad-inarticle .ndd-ad-image {
        width: 100%;
        height: auto;
    }

    .sidebar .ndd-ad-sidebar {
        max-width: 100%;
    }

}


@media (max-width: 420px) {

    .ndd-ad-home-mobile {
        max-width: 100%;
    }

    .ndd-ad-home-mobile .ndd-ad-image {
        width: 100%;
        height: auto;
    }

}


/* =========================================================
   UPDATED HEADER — LARGE TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {

    .header-main-inner {
        grid-template-columns: minmax(370px, 1fr) 105px minmax(270px, 370px);
        gap: 22px;
    }

    .header-logo {
        width: 105px;
        height: 105px;
    }

    .header-title-image {
        width: min(100%, 285px);
    }

    .site-header .header-flag img {
        width: 95px;
        height: 85px;
    }

    .header-ad img,
    .header-ad-placeholder {
        height: 100px;
    }

    .header-ad-placeholder {
        font-size: 17px;
    }

    .site-header .primary .menu > li > a {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 15px;
    }

    .site-header .header-date {
        padding-left: 10px;
    }

    .site-header .ns-date,
    .site-header .ns-date iframe {
        width: 150px;
    }

}


/* =========================================================
   UPDATED HEADER — TABLET AND MOBILE
========================================================= */

@media (max-width: 820px) {

    .site-header .wrap {
        padding-right: 14px;
        padding-left: 14px;
    }

    .header-main-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
        min-height: auto;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .header-brand {
        gap: 13px;
    }

    .header-logo {
        width: 76px;
        height: 76px;
    }

    .header-title-image {
        width: min(100%, 225px);
        max-height: 76px;
    }

    .site-header .header-flag img {
        width: 70px;
        height: 66px;
    }

    .header-ad {
        grid-column: 1 / -1;
    }

    .header-ad img,
    .header-ad-placeholder {
        height: 84px;
    }

    .header-ad-placeholder {
        font-size: 15px;
    }

    .site-header .header-nav-inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-header .menu-toggle {
        display: inline-flex;
    }

    .site-header .header-date {
        order: 2;
        min-height: 44px;
        margin-left: auto;
        padding-left: 8px;
    }

    .site-header .ad-date {
        font-size: 11px;
    }

    .site-header .date-separator {
        margin-right: 4px;
        margin-left: 4px;
    }

    .site-header .ns-date,
    .site-header .ns-date iframe {
        width: 142px;
    }

    .site-header .primary-wrap {
        order: 3;
        display: none;
        flex: 0 0 100%;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .site-header .primary-wrap.is-open {
        display: block;
    }

    .site-header .primary {
        display: block;
    }

    .site-header .primary .menu {
        display: block;
        width: 100%;
        padding: 6px 0 10px;
        background: #ffffff;
        white-space: normal;
    }

    .site-header .primary .menu > li {
        display: block;
        width: 100%;
    }

    .site-header .primary .menu > li > a {
        justify-content: space-between;
        width: 100%;
        min-height: 42px;
        padding: 10px 15px;
        color: var(--indigo);
        background: #ffffff;
        border-top: 1px solid var(--line);
    }

    .site-header .primary .menu-item-has-children > a::after {
        color: var(--indigo);
    }

    .site-header .primary .menu > li > a:hover,
    .site-header .primary .menu > li > a:focus,
    .site-header .primary .menu > li.current-menu-item > a,
    .site-header .primary .menu > li.current-menu-parent > a,
    .site-header .primary .menu > li.current-menu-ancestor > a,
    .site-header .primary .menu > li.current_page_item > a,
    .site-header .primary .menu > li.current_page_parent > a,
    .site-header .primary .menu > li.current_page_ancestor > a {
        color: var(--indigo-dark);
        background: rgba(32, 22, 160, 0.07);
    }

    .site-header .primary .menu > li > a::before {
        top: 7px;
        right: auto;
        bottom: 7px;
        left: 0;
        width: 3px;
        height: auto;
        background: var(--indigo);
    }

    .site-header .primary .menu > li > a:hover::before,
    .site-header .primary .menu > li > a:focus::before,
    .site-header .primary .menu > li.current-menu-item > a::before,
    .site-header .primary .menu > li.current-menu-parent > a::before,
    .site-header .primary .menu > li.current-menu-ancestor > a::before,
    .site-header .primary .menu > li.current_page_item > a::before,
    .site-header .primary .menu > li.current_page_parent > a::before,
    .site-header .primary .menu > li.current_page_ancestor > a::before {
        width: 3px;
    }

    .site-header .primary .sub-menu {
        position: static;
        display: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        width: 100%;
        min-width: 0;
        padding: 0 0 5px 15px;
        background: #f7f7fc;
        border: 0;
        box-shadow: none;
    }

    .site-header .primary .menu-item-has-children:hover > .sub-menu,
    .site-header .primary .menu-item-has-children:focus-within > .sub-menu,
    .site-header .primary .menu-item-has-children.submenu-open > .sub-menu {
        display: block;
    }

    .site-header .primary .sub-menu a {
        padding: 9px 14px;
        color: var(--indigo);
        background: #f7f7fc;
        white-space: normal;
    }

    .site-header .primary .sub-menu a:hover,
    .site-header .primary .sub-menu a:focus,
    .site-header .primary .sub-menu li.current-menu-item > a,
    .site-header .primary .sub-menu li.current_page_item > a {
        padding-left: 18px;
        color: #ffffff;
        background: var(--indigo-dark);
    }

}


/* =========================================================
   UPDATED HEADER — SMALL MOBILE
========================================================= */

@media (max-width: 540px) {

    .site-header .wrap {
        padding-right: 11px;
        padding-left: 11px;
    }

    .header-main-inner {
        gap: 9px;
    }

    .header-brand {
        gap: 8px;
    }

    .header-logo {
        width: 85px;
        height: 85px;
    }

    .header-title-image {
        width: min(100%, 175px);
        max-height: 85px;
    }

    .site-header .header-flag img {
        width: 85px;
        height: 60px;
    }

    .header-ad img,
    .header-ad-placeholder {
        height: 72px;
    }

    .header-ad-placeholder {
        padding: 12px;
        font-size: 13px;
    }

    .site-header .menu-toggle {
        width: 40px;
        font-size: 21px;
    }

    .site-header .header-date {
        padding-left: 2px;
    }

    .site-header .ad-date {
        font-size: 10px;
    }

    .site-header .date-separator {
        margin-right: 3px;
        margin-left: 3px;
    }

    .site-header .ns-date,
    .site-header .ns-date iframe {
        width: 120px;
    }

}


/* =========================================================
   UPDATED HEADER — VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .header-logo {
        width: 50px;
        height: 50px;
    }

    .header-title-image {
        width: min(100%, 145px);
    }

    .site-header .header-flag img {
        width: 44px;
        height: 46px;
    }

    .site-header .ad-date,
    .site-header .date-separator {
        display: none;
    }

    .site-header .ns-date,
    .site-header .ns-date iframe {
        width: 145px;
    }

}

/* =========================================================
   TABLET / MOBILE HEADER
========================================================= */

@media (max-width: 768px) {


    /* ---------------------------------------------
       Main page
    --------------------------------------------- */

    .page {

        grid-template-columns:
            minmax(
                0,
                1fr
            );

    }


    .sidebar {

        position: static;

    }



    /* Footer */

    .footer-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    .wrap {

        padding-left: 14px;

        padding-right: 14px;

    }



    /* Footer */

    .footer-grid {

        grid-template-columns:
            1fr;

    }

}