/* Desktop */

@media(min-width:992px) {

    .navbar-toggler {
        display: none;
    }
}

/* Mobile */

@media(max-width:991.98px) {

    .main-navigation .horizontal-sitemap {
        display: none;
    }

    .main-navigation .navbar-toggler {
        display: block;
        border: 0;
        background: none;
        color: #fff;
        padding: 0;
    }

    .main-navigation .navbar-toggler:focus {
        box-shadow: none;
    }

    .main-navigation .navbar-toggler-icon {
        background-image: url("/images/menu-icon.png");
    }

    .mobile-navigation.offcanvas {
        width: 300px;
        background: #161616;
        color: #fff;
        z-index: 1051;
    }
    .mobile-navigation .offcanvas-header .btn-close {
        background-image: url("/images/close-icon.png");
    }

    .mobile-navigation .mobile-nav {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-navigation .mobile-nav li {
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .mobile-navigation .mobile-nav a {
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 15px 0;
        text-transform: uppercase;
    }

    .mobile-navigation .mobile-nav ul {
        list-style: none;
        padding-left: 20px;
    }

    /* Current page in the hamburger menu */
    .mobile-navigation .mobile-nav a.active {
        color: #CABB9B;
    }

    /* Mobile tab navigation below the logo (HorizontalHeaderNav.cshtml).
       The header row keeps hamburger + logo on one line; the tab bar is placed
       centred underneath it, and the row's bottom margin reserves its space. */
    .header .header-container,
    .header .header-row {
        position: relative;
        margin-bottom: 80px;
    }

    .main-navigation .mobile-tab-nav {
        position: absolute;
        top: calc(100% + 24px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        gap: 4px;
        padding: 2px;
        background: #2D2D2D;
        border-radius: 4px;
        white-space: nowrap;
    }

    .main-navigation .mobile-tab-link {
        display: block;
        padding: 6px 18px;
        border-radius: 4px;
        color: #fff;
        font-family: var(--font-secondary);
        font-size: 12px;
        font-weight: var(--font-weight-bold);
        line-height: 1.1;
        letter-spacing: -0.2px;
        text-transform: uppercase;
        text-decoration: none;
    }

    .main-navigation .mobile-tab-link:hover {
        color: #fff;
        text-decoration: none;
    }

    .main-navigation .mobile-tab-link.active {
        background: #161616;
        color: #CABB9B;
    }
}

@media(max-width:400px) {
    .main-navigation .mobile-tab-link {
        font-size: 10px;
    }
}

@media only screen and (max-width: 1200px) {
    .most-recent-card-list {grid-template-columns: repeat(3,1fr);}
}

@media only screen and (max-width: 991px){

    /* Header */
    .header .header-row .header-col {display: flex; justify-content: center; margin: 0;}
    .header .header-row .header-col1 {width: 20%; justify-content: left;}
    .header .header-row .header-col2 {width: 80%;}
    .header .header-row .header-col3 {display:none;}
    .header .nav-sitemap.horizontal-sitemap .nav-item .nav-sitemap_link, .header .nav-sitemap.horizontal-sitemap .nav-item .nav-link-child {margin: 0 6px 6px;}
    .header .header-row .header-col2 .site-header-img.header-tagline {display: none !important;}
    .header .header-row .header-col2 .header-logo {margin-left: -20%;}

    /* Footer */
    .footer .footer-logo {margin: 0 0 30px;}
    .footer .nav-sitemap {margin: 0;}
    .footer .footer-top-section {padding: 40px 0 0;}
    .footer .footer-top-section .col-md-3 {width: 50%;}
    .footer .footer-bottom-section {padding: 30px 0;}
    .footer .footer-bottom-section .nav-sitemap {margin: 30px 0 20px;}
    .footer-new {padding: 78px 0;}


    /* Atlas Chat */
    .chat-app-container,.atlas-chat-app {height: 100%; overflow:visible;}
    .chat-app-container .chat-app-bg {display: none;}
    .atlas-chat-app .initial-state,.atlas-chat-app .ai-prompt-state,.atlas-chat-app .follow-up-prompt {position: relative;}
    .atlas-chat-app .initial-state {top: 0;}
    .chat-atlas-wrapper .chat-atlas-footer,.chat-atlas-wrapper .chat-tags {flex-wrap: wrap;}
    .chat-atlas-wrapper .chat-submit {margin: 12px 0 0;}

    .atlas-chat-app.conversation-active .initial-prompt, .atlas-chat-app .ai-prompt-state {display:none;}
    .atlas-chat-app.conversation-active .ai-prompt-state {display: block; position: relative;}
    .ai-prompt-state .ai-response-container {padding-bottom: 60px; min-height: unset;}
    .ai-prompt-state .ai-response {margin-top: 40px;}
    .atlas-chat-app .initial-prompt, .atlas-chat-app .follow-up-prompt,.ai-prompt-state .ai-response {width: 100%; max-width: 100%;}
    .atlas-chat-app .prompt-options .chat-tags .chat-tag span {margin-left: 0;}
    .atlas-chat-app .prompt-options .chat-tags,.atlas-chat-app .prompt-options,.ai-prompt-state .ai-response .article-list {flex-wrap: wrap;}
    .atlas-chat-app .prompt-options .chat-tags .chat-tag,.atlas-chat-app .chat-submit {margin: 0 0 5px;}

    .personalize-row {display: block !important;}
    .personalize-row .personalize-label {padding: 0 !important; margin: 0 0 10px;}
    .personalize-row .custom-pill-group {display: flex !important; flex-wrap: wrap;}
    .personalize-row .custom-pill {width: 100%; margin: 0 0 5px;}


    /* Blog detail */
    .article-detail-page {padding: 20px 50px;}
    .article-layout {display: block;}
    .article-card-block {min-height: unset; margin: 0 0 30px;}
    .article-card-block .article-title-content {padding: 0 15px;}
    .article-card-block .article-body {padding: 20px 15px;}
    .article-card-block .article-body .article-video, .article-card-block .article-body .article-section {margin: 0 0 15px;}
    .article-card-block .article-body .article-video iframe {height: 300px;}
    .about-article-section {margin: 0 0 30px;}
    .article-card-block .article-title-content {display: none;}
    .article-card-block .article-hero .article-hero-content { display: block;}
    .article-card-block .article-hero .article-hero-image {height: 254px;}


    /* New header */
    .header.header-new {padding: 20px 0;}
    .header .header-container .header-col1 .header-logo2 {display: none !important;}
    .header .header-container .header-col1 {order: 2; width: 80%; justify-content: center;}
    .header .header-container .header-col2 {order: 1; justify-content: flex-start; width: 20%;}

    /* Most recent */
    .most-recent-card-list {grid-template-columns: 1fr; padding: 15px 0;}


    /* Atlas Chat */
    .chat-role-section .role-label {margin-right: 15px;}
    .chat-app .chat-sidebar,.chat-app .right-chat-panel {display:none;}
    .chat-app .chat-main-container .scroll-area {padding: 24px 20px 16px;}
    .atlas-chat-app .follow-up-prompt .follow-up-prompt-box {margin: 0 20px;}
    .ai-prompt-state .article-list .article-card {width: 100%;}

    .custom-dropdown .dropdown-menu {min-width: fit-content; max-width: 100%; width: 100%;}


    .atlas-hero-title {
        font-size: 28px;
        line-height: 120%; /* 33.6px */
        letter-spacing: -0.56px;
        margin: 0 0 26px;
    }
    .atlas-hero-intro {
        font-size: 11px;
        line-height: 150%; /* 16.5px */
        letter-spacing: -0.22px;
    }
    .atlas-partners {margin: 55px auto;}


    .blog-filter-bar > *:nth-child(1), .blog-filter-bar > *:nth-child(2),.blog-filter-bar > *:nth-child(3), .blog-filter-bar > *:nth-child(4) {flex:auto; width: 100%;}
    .atlas-blog-card .blog-card-image {height: 90px;}
    .atlas-blog-card .blog-card-date.blog-card-date-desktop {display: none;}
    .atlas-blog-card .blog-card-date.blog-card-date-mobile {display: inline-block;
        position: static;
        margin: 0 0 20px;}
    .atlas-blog-card .blog-card-body {padding: 20px 30px;}

    .atlas-blog-card.atlas-blog-card-featured .blog-card-image {
        height: 100%;
    }
    .atlas-blog-grid-section .custom-pagination {margin: 40px auto;}
    .most-recent-card-list {margin: 20px 0;}
    .heading-2  {font-size: 28px;}
}

@media (min-width: 768px) and (max-width: 992px) {
    .chat-app-container {
        max-width: 720px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .chat-app-container {
        max-width: 540px;
    }
}
@media only screen and (max-width: 480px) {
    .article-detail-page {padding: 15px;}
}

/* ---------- Mobile: 2 logos per row ---------- */
@media (max-width: 640px) { /* keep in sync with MOBILE_QUERY in the JS */
    .atlas-partners {
        --visible: 2;
        --gap: 14px;
    }

}