/* Shared layout refinements used across the static pages. */
.banner-container::after {
    content: "开发适合AI时代的实验数据生产工具";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46%;
    padding: 20px 40px;
    color: #fff;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: clamp(42px, 4.4vw, 72px);
    font-weight: 600;
    line-height: 1.12;
    text-align: center;
    letter-spacing: 0;
    background: linear-gradient(90deg, rgba(18, 22, 28, 0.70), rgba(41, 52, 66, 0.60), rgba(18, 22, 28, 0.70));
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

@media (max-width: 860px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 15px;
        line-height: 1.6;
        -webkit-text-size-adjust: 100%;
    }

    img,
    video {
        max-width: 100%;
    }

    /* Compact header with a swipeable navigation row. */
    header {
        display: block !important;
        padding: 10px 0 0 !important;
    }

    header .logo {
        justify-content: center;
        padding: 0 16px 10px;
        margin: 0 !important;
    }

    header .logo-img {
        height: 50px !important;
        max-width: min(70vw, 260px);
        object-fit: contain;
    }

    header .logo-text {
        font-size: 20px !important;
    }

    header nav {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        border-top: 1px solid #eef1f5;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    header nav::-webkit-scrollbar,
    .tab-navigation::-webkit-scrollbar {
        display: none;
    }

    header nav ul {
        width: max-content;
        min-width: 100%;
        display: flex !important;
        flex-flow: row nowrap !important;
        justify-content: flex-start !important;
        align-items: center;
        gap: 0 !important;
        padding: 0 8px;
    }

    header nav ul li {
        flex: none;
    }

    header nav ul li a {
        padding: 11px 11px !important;
        font-size: 14px !important;
        line-height: 22px;
        letter-spacing: 0 !important;
        white-space: nowrap;
    }

    .submenu {
        display: none !important;
    }

    /* The media banner becomes supporting context on small screens. */
    .banner-container,
    .banner-container.small {
        height: 176px !important;
    }

    .banner-slide img,
    .banner-slide video {
        object-fit: cover;
        object-position: center;
    }

    .banner-container::after {
        min-height: 48%;
        padding: 12px 18px;
        font-size: clamp(26px, 7.8vw, 34px);
        line-height: 1.24 !important;
    }

    .banner-text {
        width: calc(100% - 32px) !important;
    }

    .banner-text h1 {
        font-size: 32px !important;
        line-height: 1.25;
        letter-spacing: 2px !important;
        margin-bottom: 8px !important;
    }

    .banner-text p {
        font-size: 15px !important;
        line-height: 1.5;
        letter-spacing: 0 !important;
    }

    #content-container,
    #content-frame {
        min-height: 0 !important;
    }

    .latest-news-section,
    .news-list-section,
    .research-section,
    .members-section,
    .publications-list-section,
    .gallery-section,
    .contact-section {
        padding: 34px 16px 46px !important;
        min-height: 0 !important;
        background-attachment: scroll !important;
    }

    .latest-news-header,
    .news-list-header,
    .research-header,
    .members-header,
    .publications-list-header,
    .gallery-header,
    .contact-header {
        margin: 0 0 26px !important;
    }

    .latest-news-header h2,
    .news-list-header h2,
    .research-header h2,
    .members-header h2,
    .publications-list-header h2,
    .gallery-header h2,
    .contact-header h2 {
        font-size: 26px !important;
        line-height: 1.35;
        letter-spacing: 3px !important;
        margin-bottom: 8px !important;
    }

    /* Subsection navigation remains on one comfortable swipeable line. */
    .tab-navigation {
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        margin: 0 -16px 28px !important;
        padding: 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tab-btn {
        flex: none;
        padding: 9px 16px !important;
        font-size: 14px !important;
        line-height: 22px;
    }

    .tab-btn:not(:last-child)::after {
        font-size: 15px !important;
    }

    .tab-content-inner {
        max-width: 100%;
        padding: 0 !important;
    }

    /* Lists and cards. */
    .news-grid,
    .gallery-grid,
    .partners-grid,
    .products-grid,
    .column-grid,
    .column-grid-3,
    .members-grid,
    .members-grid.researcher-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 18px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .members-grid.researcher-grid .item,
    .members-grid.researcher-grid .item.c,
    .members-grid.researcher-grid .item.d,
    .members-grid.researcher-grid .item.e {
        grid-column: auto !important;
    }

    .news-card,
    .product-card,
    .partner-card,
    .contact-card {
        max-width: 100% !important;
        width: 100% !important;
    }

    .news-card-image {
        height: 198px !important;
    }

    .news-card-content {
        padding: 16px !important;
    }

    .news-card-content h3,
    .news-item h3,
    .publication-item h3,
    .recruitment-item h3 {
        font-size: 15px !important;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    .news-card-content h3.news-title-single-line {
        white-space: normal !important;
    }

    .news-item,
    .publication-item,
    .recruitment-item {
        padding: 12px 13px !important;
    }

    .news-meta,
    .publication-meta,
    .recruitment-meta {
        flex-wrap: wrap;
        margin-bottom: 3px !important;
    }

    .column-title {
        font-size: 18px !important;
    }

    .box-item {
        padding: 20px 15px !important;
    }

    .box-item h4 {
        font-size: 20px !important;
    }

    /* People profiles fit naturally without oversized portraits. */
    .member-avatar {
        width: 128px !important;
        height: 128px !important;
        margin: 0 auto 16px !important;
    }

    .member-card {
        padding: 8px 0 !important;
    }

    .member-card h3 {
        margin-bottom: 8px !important;
        font-size: 18px !important;
    }

    .member-bio {
        max-width: 100%;
        font-size: 14px !important;
        line-height: 1.7;
    }

    .gallery-item img,
    .gallery-item video,
    .partner-logo {
        max-width: 100%;
        height: auto;
    }

    .main-image {
        height: 220px !important;
    }

    .thumbnails img {
        width: 52px !important;
        height: 52px !important;
    }

    /* Detail pages and long articles. */
    .news-detail,
    .recruitment-detail {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
        padding-bottom: 0 !important;
    }

    .news-detail-image {
        height: 220px !important;
    }

    .news-detail-content,
    .recruitment-detail-content {
        padding: 22px 16px !important;
    }

    .news-detail-content h2,
    .recruitment-detail-content .main-title {
        font-size: 21px !important;
        line-height: 1.5;
        overflow-wrap: anywhere;
        margin-bottom: 18px !important;
    }

    .news-detail-text,
    .recruitment-detail-content p {
        font-size: 15px !important;
        line-height: 1.75 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .recruitment-detail-content h3 {
        font-size: 17px !important;
        line-height: 1.5;
        margin: 24px 0 10px !important;
    }

    .recruitment-detail-content .contact-info {
        margin-top: 28px !important;
        padding: 14px !important;
    }

    .contact-grid {
        gap: 20px !important;
        padding: 0 !important;
    }

    .site-footer {
        margin-top: 0 !important;
        padding: 18px 14px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    header nav ul li a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 13px !important;
    }

    .latest-news-section,
    .news-list-section,
    .research-section,
    .members-section,
    .publications-list-section,
    .gallery-section,
    .contact-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}