/*
 * 日历页移动端布局（顶部横向国家栏 + 月份折叠）
 * 断点与 error.txt / index.css / responsive.css 一致
 */

[x-cloak] {
    display: none !important;
}

.mobile-toolbar {
    display: none;
}

.calendar-accordion {
    display: none;
}

/* Tablet / Mobile — 横栏年份 + 横滑国家，日历全宽无页面横向滚动 */
@media (max-width: 768px) {
    html {
        overflow-x: clip;
    }

    body {
        overflow-x: clip;
        max-width: 100%;
    }

    header {
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }

    header .logo-wrap {
        min-width: 0;
    }

    header .logo-text {
        font-size: 1.35rem;
    }

    .sidebar-desktop {
        display: none !important;
    }

    .container {
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        margin: 16px auto;
        gap: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    main {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .page-title {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* 一行年份 + 一行国家（国家行内横向滚动） */
    .mobile-toolbar {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-bottom: 14px;
        padding: 12px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid var(--border-light);
        border-radius: 12px;
        overflow: visible;
    }

    .mobile-year-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .mobile-year-pill {
        flex: 0 0 auto;
        width: auto;
        min-width: 4.5rem;
        padding: 8px 18px;
        border-radius: 999px;
        border: 1px solid var(--border-light);
        background: #eef2f7;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        color: var(--text-deep);
    }

    .mobile-year-pill.active {
        background: var(--month-bg);
        color: #fff;
        border-color: transparent;
    }

    .mobile-country-scroll {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
        padding-bottom: 6px;
        touch-action: pan-x;
        cursor: grab;
        user-select: none;
    }

    .mobile-country-scroll.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    .mobile-country-scroll::-webkit-scrollbar {
        height: 5px;
    }

    .mobile-country-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

    .mobile-country-tab {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--border-light);
        background: #fff;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        color: var(--text-deep);
        user-select: none;
    }

    .mobile-country-tab.active {
        background: var(--month-bg);
        color: #fff;
        border-color: transparent;
    }

    .mobile-country-tab:disabled {
        opacity: 0.5;
        cursor: wait;
    }

    .mobile-country-more {
        background: #f1f5f9;
        font-weight: 600;
    }

    .mobile-status {
        margin: 0 0 8px;
        font-size: 11px;
    }

    .calendar-grid--desktop {
        display: none !important;
    }

    .calendar-accordion {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .month-accordion-item {
        border: 1px solid var(--border-light);
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    .month-accordion-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border: none;
        background: #f8fafc;
        font-size: 15px;
        font-weight: 700;
        color: var(--text-deep);
        cursor: pointer;
        text-align: left;
    }

    .month-accordion-trigger .chevron {
        width: 1em;
        color: var(--month-bg);
        font-size: 12px;
    }

    .month-accordion-panel {
        padding: 0 4px 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .month-accordion-panel .month-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .month-accordion-panel .month-table th,
    .month-accordion-panel .month-table td {
        height: 36px;
        font-size: clamp(10px, 2.8vw, 13px);
        padding: 2px 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-main {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .calendar-accordion {
        width: 100%;
        max-width: 100%;
    }

    .section-card {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .info-item {
        flex-wrap: wrap;
    }

    .date-badge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    header .ad-slot-top {
        display: none !important;
    }

    .partial-holidays-grid {
        grid-template-columns: 1fr !important;
    }

    .strategy-grid {
        grid-template-columns: 1fr !important;
    }

    .site-footer {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
        margin: 14px auto;
    }

    .calendar-main {
        padding: 10px;
    }

    .page-title {
        font-size: 1.15rem;
        margin-bottom: 12px;
    }

    .month-accordion-trigger {
        font-size: 14px;
        padding: 11px 12px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .container {
        padding: 0 12px;
        margin: 12px auto;
    }

    .mobile-year-pill {
        font-size: 13px;
    }

    .mobile-country-tab {
        padding: 7px 12px;
        font-size: 12px;
    }

    .calendar-main {
        padding: 8px;
    }

    .month-accordion-panel .month-table td {
        height: 34px;
        font-size: 12px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .page-title {
        font-size: 1.05rem;
        margin-bottom: 10px;
    }

    .mobile-toolbar {
        margin-bottom: 10px;
    }

    .month-accordion-trigger {
        font-size: 13px;
    }
}