/* 百家姓网站响应式设计 */

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }

    .surnames-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 1rem;
    }

    .origins-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
    }

    .distribution-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Mobile (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Header */
    .site-header .container {
        flex-direction: column;
        gap: 1rem;
    }

    .logo h1 {
        font-size: 1.5rem;
    }

    .main-nav ul {
        gap: 1rem;
        font-size: 0.9rem;
    }

    /* Search Section */
    .search-section {
        padding: 2rem 0;
    }

    .search-section h2 {
        font-size: 1.5rem;
    }

    .search-box {
        flex-direction: column;
        gap: 0;
    }

    .search-box input {
        border-radius: 8px 8px 0 0;
    }

    .search-box button {
        border-radius: 0 0 8px 8px;
    }

    .search-hint {
        font-size: 0.85rem;
    }

    .search-hint a {
        margin: 0 5px;
    }

    /* Section Headings */
    section h2 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Surnames Grid */
    .surnames-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.8rem;
    }

    .surname-card {
        padding: 1rem;
    }

    .surname-char {
        font-size: 2.2rem;
    }

    /* Origins Grid */
    .origins-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .origin-card {
        padding: 1.5rem;
    }

    .origin-icon {
        font-size: 2.5rem;
    }

    /* Timeline */
    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        flex-direction: column !important;
        margin-bottom: 2rem;
    }

    .timeline-year {
        flex: 0 0 auto;
        align-self: flex-start;
        margin-left: 20px;
        margin-bottom: 0.5rem;
    }

    .timeline-content {
        margin-left: 20px !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    /* Distribution */
    .region-list,
    .special-groups {
        padding: 1.5rem;
    }

    .region-item {
        flex-direction: column;
        gap: 0.3rem;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Updates */
    .update-item {
        flex-direction: column;
        gap: 0.5rem;
    }

    .update-date {
        flex: 0 0 auto;
    }
}

/* Small Mobile (max-width: 480px) */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 10px;
    }

    .logo h1 {
        font-size: 1.3rem;
    }

    .logo .subtitle {
        font-size: 0.8rem;
    }

    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem;
    }

    .search-box input,
    .search-box button {
        font-size: 1rem;
        padding: 12px 15px;
    }

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

    .surname-char {
        font-size: 2rem;
    }

    section {
        padding: 2rem 0;
    }

    section h2 {
        font-size: 1.3rem;
    }

    .timeline-year {
        font-size: 0.9rem;
        padding: 0.7rem;
    }

    .timeline-content {
        padding: 1rem;
    }

    .timeline-content h3 {
        font-size: 1.1rem;
    }
}

/* Large Desktop (min-width: 1440px) */
@media screen and (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

    .surnames-grid {
        grid-template-columns: repeat(5, 1fr);
    }

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