/* Mobile: < 768px */
@media (max-width: 768px) {
    :root {
        --container-padding: 16px;
        --header-height: 60px;
    }

    /* Header Logo - Icon height aligns with DTC text (35px) */
    .img_log {
        width: 40px;
        height: 35px;
        max-width: none;
    }

    /* Ensure header stays on top when spec selector is open */
    .header {
        /*z-index: 1003 !important;*/
    }

    .header__menu-btn-icon {
        width: var(--font-size-lg);
        height: var(--font-size-lg);
    }

    .nav-overlay__close-icon {
        width: var(--font-size-lg);
        height: var(--font-size-lg);
    }

    /* Hide desktop arrows on mobile */
    .nav-link__arrow {
        display: none;
    }

    /* Mobile Navigation Overlay - Solid white background, no transparency */
    .nav-overlay {
        background-color: #ffffff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        height: auto;
        /*max-height: 100vh;*/
        justify-content: flex-start;
        padding-bottom: var(--space-xs);
    }

    /* Dark overlay for content below navigation using box-shadow */
    .nav-overlay--active {
        box-shadow: 0 100vh 0 100vh rgba(0, 0, 0, 0.5);
    }

    /* Add top spacing to nav list to avoid overlap with close button */
    .nav-overlay__list {
        margin-top: 60px;
        justify-content: flex-start;
    }

    /* Compress nav items on mobile */
    .nav-overlay__link {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-medium);
        border-bottom: 1px solid var(--color-border-light);
        width: 100%;
    }

    .nav-overlay__item:first-child .nav-overlay__link {
        font-weight: var(--font-weight-medium);
    }

    .nav-overlay__lang {
        margin-top: var(--space-lg);
    }

    .stats-bar {
        gap: var(--space-xl);
        flex-wrap: wrap;
    }

    .about-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-certs {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stats {
        gap: var(--space-md);
    }

    /* Page Title Mobile Styles */
    .page-title--with-aside {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        padding: calc(var(--header-height) + var(--space-xl))
            var(--container-padding) var(--space-xl);
        margin: 0 calc(0.5 * var(--container-padding));
        min-width: 0;
    }

    .page-title__heading--en {
        margin-left: 0;
        font-size: var(--font-size-3xl);
        letter-spacing: 0;
        font-family: SourceHanSansCN, serif;
        font-weight: 900;
    }

    .page-title__aside {
        flex-shrink: 1;
        max-width: 100%;
        font-size: var(--font-size-base);
        line-height: 1.8;
        color: var(--color-text-secondary);
    }

    .page-title__btn {
        margin-top: var(--space-sm);
        align-self: flex-end;
    }

    /* Pagination - Hide on mobile, show load more button */
    .pagination {
        display: none;
    }

    .load-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-bottom: var(--space-md);
        background: none;
        border: none;
        cursor: pointer;
        transition: color var(--transition-fast);
    }

    .load-more-btn_text {
        font-size: var(--font-size-sm);
        color: rgb(153, 153, 153);
    }

    .load-more-btn_img {
        margin-left: 4px;
        margin-top: -2px;
        width: 12px;
    }

    .load-more-btn:hover {
        color: var(--color-text);
    }

    .detail__nav_text {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex-shrink: 1;
    }

    /* Hide pagination on mobile */
    .pagination {
        display: none;
    }

    .footer__inner {
        gap: 0;
    }

    /* 版权信息独占一行 */
    .footer__inner > span:first-child {
        width: 100%;
        text-align: center;
    }

    /* 隐藏分隔符 */
    .footer__divider {
        display: none;
    }
}

/* Print Styles */
@media print {
    .header,
    .nav-overlay,
    .footer {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }
}