/* css/mobile.css 手机端专属样式 */

@media (max-width: 768px) {
    :root {
        --top-bar-inner-padding: 8px 12px;
        --top-bar-inner-gap: 8px;
        --top-bar-actions-gap: 8px;
        --nav-container-padding: 8px 12px;
        --nav-container-z-index: 120;
        --portal-layout-columns: 1fr;
        --portal-layout-gap: 18px;
        --portal-home-hero-padding: 18px 16px;
        --portal-home-hero-margin-bottom: 18px;
        --portal-top-grid-columns: 1fr;
        --site-page-container-width: min(100%, calc(100% - 24px));
        --mobile-side-padding: 12px;
        --mobile-thumb-radius: 10px;
    }

    .top-bar {
        font-size: 0.82rem;
    }

    .top-bar .top-bar-brand-mobile {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        color: var(--primary);
    }

    .top-bar .top-bar-brand-mobile img {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        object-fit: contain;
    }

    .top-bar-login-text,
    .top-bar-date,
    .hero-header {
        display: none;
    }

    .top-bar-user {
        display: inline-block;
        max-width: 40vw;
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .top-bar-avatar,
    .top-bar-icon-link {
        width: 32px;
        height: 32px;
    }

    .top-user-menu__panel {
        min-width: 150px;
        right: -6px;
    }

    .nav-container {
        position: sticky;
        top: 0;
        padding-left: calc(12px + var(--safe-area-left));
        padding-right: calc(12px + var(--safe-area-right));
    }

    .nav-container .nav-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .nav-container .nav-links {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .nav-container .nav-link {
        width: 100%;
        min-width: 0;
        padding: 8px 6px;
        font-size: 0.88rem;
        text-align: center;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

  .nav-container .nav-search {
    display: none;
}

    .hero-inner,
    .container,
    .tag-container,
    .search-page-container,
    .search-shell {
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
    }

    .container {
    margin-top: 20px;
    margin-bottom: 28px;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

    .portal-grid,
    .portal-secondary-grid,
    .portal-hot-grid,
    .portal-latest-grid,
    .portal-top-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .portal-top-grid .portal-card--compact,
    .portal-top-grid .portal-card--hero {
        grid-column: auto;
    }

    .portal-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

    .portal-card .card-content {
        order: 1;
        padding: 14px;
    }

    .portal-card .meta {
        padding: 8px 14px;
        font-size: 0.78rem;
    }

    .portal-card .card-thumb,
    .latest-thumb,
    .news-item .thumb,
    .search-news-item .thumb {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: var(--mobile-thumb-radius);
        overflow: hidden;
    }

    .portal-card .card-thumb {
        order: 2;
    }

    .portal-card .card-thumb img,
    .search-news-item .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.container,
.portal-layout,
.portal-main,
.portal-grid,
.portal-top-grid,
.portal-card {
    min-width: 0;
}

.portal-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.portal-card .card-thumb,
.portal-card .card-thumb img {
    width: 100%;
    max-width: 100%;
}

.portal-card .card-thumb img {
    display: block;
}
    
    .latest-top,
    .news-item,
    .search-news-item {
        flex-direction: column;
        gap: 10px;
    }

    .news-item {
        padding-bottom: 14px;
    }

    .news-item h3 {
        font-size: 1.05rem;
        line-height: 1.45;
    }

    .tag-list-meta {
        margin-top: 8px;
        font-size: 0.8rem;
    }

    .article-page {
        padding: 18px 0 24px;
    }

    .article-container {
        padding: 14px;
        border-radius: 0;
        box-shadow: none;
    }

    .article-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .article-sidebar {
        width: 100%;
    }

    .article-main > h1 {
        font-size: clamp(1.5rem, 6.2vw, 1.9rem);
        line-height: 1.34;
    }

    .article-meta {
        margin: 8px 0 14px;
        padding: 8px 10px;
        font-size: 0.84rem;
        gap: 4px;
    }

    .content-text {
        font-size: 1rem;
        line-height: 1.78;
    }

    .action-bar {
        gap: 8px;
    }

    .action-bar .like-btn,
    .action-bar .share-btn {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 0.86rem;
    }

    .search-form {
        gap: 8px;
    }

    .search-news-item {
        padding: 12px;
        border-radius: 10px;
    }

    .search-news-item .info {
        order: 1;
    }

    .search-news-item .thumb {
        order: 2;
    }

    .search-news-item h3 {
        margin: 0;
        font-size: 1rem;
        line-height: 1.4;
    }

    .search-item-snippet {
        font-size: 0.88rem;
        -webkit-line-clamp: 3;
    }

    .article-nav {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .article-nav .nav-item {
        padding: 10px;
    }

    .article-nav .nav-item a {
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .article-tag-box {
        padding: 10px 12px;
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .comment-section {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .comment-item {
        padding: 10px;
    }

    .pagination {
        gap: 6px;
    }

    .pagination a,
    .pagination span,
    .pagination button {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 0.84rem;
    }

    .pagination__meta,
    .pagination__jump {
        width: 100%;
    }

    .pagination__meta {
        text-align: left;
        margin-top: 4px;
    }

    .pagination__jump input {
        min-width: 0;
        width: 100%;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ui-sheet {
        width: calc(100vw - 20px);
        padding: 18px;
        border-radius: 18px;
    }

    .footer__inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 26px 0 18px;
    }

    .footer__brand {
        padding: 18px;
        border-radius: 14px;
    }

    .footer__meta {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .top-bar-inner {
        padding-left: calc(12px + var(--safe-area-left));
        padding-right: calc(12px + var(--safe-area-right));
    }

    .top-bar-user {
        max-width: 30vw;
    }

    .nav-container .nav-links {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .nav-container .nav-link {
        font-size: 0.78rem;
        padding: 6px 2px;
    }

    .portal-home-hero h2 {
        font-size: 1.2rem;
    }

    .article-container {
        padding: 12px 10px;
    }

    .article-meta {
        font-size: 0.78rem;
    }

    .pagination a,
    .pagination span,
    .pagination button {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .global-back-to-top {
        width: 48px;
        height: 48px;
        right: 10px;
    }
}