/* ==========================================
   responsive.css - 珠海租車全站響應式樣式
   全新換代版 v5.0 | 2026-05-02
   所有媒體查詢集中管理
   ========================================== */

/* ============ 1200px 斷點 ============ */
@media (max-width: 1200px) {
    .container { max-width: 95%; }
    .hero-content { padding: 3rem 2%; }
    .stats-grid { gap: 1.5rem; }
    .stat-num { font-size: 3rem; }
    .cta-box { padding: 2.5rem; }
    .footer-inner { gap: 2rem; }
}

/* ============ 1024px 斷點 ============ */
@media (max-width: 1024px) {
    .hero-title { font-size: 2.4rem; }
    .hero-title-accent { font-size: 1.4rem; }
    .section-title { font-size: 1.8rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .cta-content h2 { text-align: center; }
    .cta-content p { text-align: center; }
    .cta-btns { justify-content: center; }

    /* Footer響應式 - 改為單列佈局 */
    .footer-inner { 
        grid-template-columns: 1fr; 
        gap: 2rem; 
        text-align: center;
    }
    .footer-brand { 
        max-width: 100%; 
        margin: 0 auto; 
    }
    .footer-links { 
        gap: 1.5rem; 
        justify-items: center;
    }
    .footer-col h4::after { 
        left: 50%; 
        transform: translateX(-50%); 
    }
    .footer-col ul { 
        align-items: center; 
    }

    /* 導航響應式 */
    #site-header { padding: 0 !important; }
    #site-header nav { width: 100%; }
    .header-lang { transform: translateY(-80%); right: 0.5rem; }
    .header-lang a {
        color: var(--primary);
        padding: 0.2rem 0.3rem;
        border: 1px solid var(--gold);
        border-radius: 2px;
        font-weight: 300;
        font-size: 0.7rem;
    }
}

/* ============ 992px 斷點 ============ */
@media (max-width: 992px) {
    .hero-title { font-size: 2rem; }
    .hero-title-accent { font-size: 1.2rem; }
    .hero-btns { gap: 0.8rem; }
    .btn-hero-secondary {
        padding: 0.9rem 1.8rem;
        font-size: 1rem;
    }
    .hero-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        justify-items: start;
    }
    .hero-trust span {
        justify-content: flex-start;
        padding: 0.25rem 0.6rem;
    }
    h1 { font-size: 1.8rem; }
    h2, .section-title { font-size: 1.7rem; margin: 0 0 1.5rem; }
    h3 { font-size: 1.25rem; }
    .usp-item { padding: 1.8rem 1.2rem; }
    .usp-icon { font-size: 2.5rem; }
    .usp-item h3 { font-size: 1.1rem; }
    .usp-item p { font-size: 0.93rem; }
    .section-stats { padding: 3rem 0; }
    .stat-num { font-size: 2.5rem; }
    .stat-unit { font-size: 1.2rem; }
    .stats-grid p { font-size: 0.9rem; }
    .section-cta { padding: 3.5rem 0; }
    .cta-box { padding: 2rem; gap: 1.5rem; }
    .cta-content h2 { font-size: 1.7rem; }
    .cta-content p { font-size: 1rem; }
    .btn-primary-lg, .btn-secondary-lg {
        padding: 0.75rem 1.2rem;
        font-size: 0.9rem;
    }
    .service-card-header { padding: 1.5rem; }
    .service-card-body { padding: 1.2rem; }
    .pricing-table th, .pricing-table td { padding: 0.8rem 1rem; font-size: 0.9rem; }

    /* 導航響應式 — 抽屜式 */
    .mobile-menu-btn { display: flex !important; }
    #site-header { transform: none !important; will-change: auto !important; }
    #site-header nav {
        position: fixed !important;
        top: 0; right: 0; bottom: 0;
        width: 75%;
        max-width: 180px;
        background: #fff;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        z-index: 200;
        overflow-y: visible;  /* 改为visible，允许内容完整显示 */
        padding: 3rem 0 1.5rem;
    }
    #site-header nav.open { transform: translateX(0); }
    .nav-close-btn {
        display: flex !important;
        position: absolute;
        top: 1rem; right: 1rem;
    }
    .nav-list {
        flex-direction: column;
        gap: 0;
    }
    .nav-list > li,
    .nav-list > li > a {
        padding: 0.8rem;
        border-radius: 0;
        font-size: 1rem;
    }
    .nav-list > li > a:hover { background: var(--light); color: var(--primary); }
    .nav-list > li.present > span {
        padding: 0.8rem 1.5rem;
        border-radius: 0;
        background: var(--macau-green-light);
        color: var(--macau-green);
    }
    /* 移动端带二级菜单的导航项被选中状态 - 使用蓝色背景 */
    .nav-dropdown > a:hover {
        background: var(--primary) !important;
    }
    /* 移动端带二级菜单的导航项展开状态 */
    .nav-dropdown.open > a {
        background: var(--primary) !important;
    }
 
    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        min-width: auto;
        transition: max-height 0.35s ease;
    }
    .nav-dropdown.open .dropdown-menu { max-height: 320px; }
    .dropdown-menu li a { 
        padding: 0.6rem 1.5rem 0.6rem 1.25rem;  /* 左侧padding从2.5rem减为1.25rem，向左移动一半 */
    }
    .dropdown-menu li a::before { display: none; }
    .header-lang {
        right: 3.5rem;
        transform: translateY(-50%);
    }
    .header-lang a {
        border: 2px solid var(--gold);
        border-radius: var(--radius-sm);
        font-weight: 500;
        font-size: 0.85rem;
        padding: 0.25rem 0.6rem;
    }
    .feature-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .feature-grid-2 { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .route-grid { grid-template-columns: repeat(2, 1fr); }

    /* 新聞詳情頁響應式 */
    .news-detail { padding: 1.5rem; }
    .quick-summary-card { padding: 1.2rem; }
    .summary-line { font-size: 0.95rem; }
    .category-tabs { gap: 0.6rem; }
    .tab-link, .tab-item.active { padding: 0.7rem 1.2rem; font-size: 0.9rem; }
    .news-cards-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
    .news-card-image { height: 200px; }
    .news-card-content { padding: 1.3rem; }
    .news-card-title { font-size: 1.1rem; }
    .news-card-excerpt { font-size: 0.9rem; }
}
  
/* ============ 768px 斷點 ============ */
@media (max-width: 768px) {
    html { font-size: 15px; }
    .hero-content { padding: 2rem 1rem; }
    .hero-title { font-size: 1.8rem; }
    .hero-title-accent { font-size: 1.1rem; }
    .btn-hero-secondary {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
    }
    .hero-trust span { font-size: 0.85rem; }
    .section-title { font-size: 1.5rem; margin: 0 0 1.2rem; }
    .section-title::after { width: 40px; }
    .section-subtitle { font-size: 0.9rem; margin-bottom: 1.5rem; }
    .usp-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .usp-item { padding: 1.5rem 1rem; }
    .usp-icon { font-size: 2.2rem; }
    .service-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .stat-num { font-size: 2.2rem; }
    .stat-unit { font-size: 1.1rem; }
    .scene-tags { gap: 0.5rem; }
    .scene-tags li { padding: 0.4rem 1rem; font-size: 0.85rem; }
    .advantage-list li { flex-direction: column; gap: 0.5rem; padding: 1.2rem; }
    .adv-num { font-size: 1.8rem; }
    .cta-box { padding: 1.5rem; border-radius: var(--radius-lg); }
    .cta-content h2 { font-size: 1.4rem; }
    .feature-grid-3 { grid-template-columns: 1fr; }
    .feature-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .pricing-table { font-size: 0.85rem; }
    .pricing-table th, .pricing-table td { padding: 0.6rem 0.5rem; }
    .route-grid { grid-template-columns: 1fr; }
    .vehicle-showcase { grid-template-columns: 1fr; }
    .tuncan-pricing-grid { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .cta-box { flex-direction: column; text-align: center; padding: 2rem; }
    .cta-qr {display: none; }


    /* 新聞 */
    .news-grid { grid-template-columns: 1fr; }
    .news-item-img img { height: 180px; }
}

/* ============ 480px 斷點 ============ */
@media (max-width: 480px) {
    .hero-title { font-size: 1.8rem; }
    .hero-title-accent { font-size: 1.2rem; }
    .btn-hero-secondary {justify-content: center; }
    .btn-sky-primary {
    padding: 0.5rem 1rem;
    }    
    .btn-hero-secondary {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
        /* 加号小圆标 */
        .plus-badge {
            top: 3px;
            right:3px;
            padding: 2px 3px;
            font-size: 10px;
        }
    .fa-weixin {
            font-size: 2.2rem;
        }
    .hero-trust span {
        font-size: 1.3rem;
    }
    .usp-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .stat-num { font-size: 2rem; }
    .scene-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .btn-primary-lg, .btn-secondary-lg { width: 100%; justify-content: center; }
    .feature-grid-4 { grid-template-columns: 1fr; }
    
    /* Footer 480px優化 - 調整間距 */
    .footer-inner { padding-bottom: 2rem; }
    .footer-links { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem; 
    }
    
    .faq-q { padding: 1rem 1.2rem; font-size: 0.95rem; }
    .faq-a p { padding: 0 1.2rem 1rem; }
    .review-card { padding: 1.5rem; }
    .route-card { padding: 1.5rem; }
    
    /* 彩虹位置調整 - 往下移動30% */
    .rainbow {
        top: 3% !important;
    }
    
    /* 企業客戶樣式響應式優化 */
    .enterprise-scene-card {
        padding: 1.5rem 1rem;
    }
    .enterprise-scene-icon {
        font-size: 2.5rem;
    }
    .enterprise-scene-card h3 {
        font-size: 1.1rem;
    }
    .service-process {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .trust-indicator {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

/* ============ 租車資訊頁面響應式 ============ */
@media (max-width: 768px) {
    .page-layout {
        flex-direction: column;
    }
    .page-content {
        width: 100%;
        order: 1;
    }
    .page-sidebar {
        width: 100%;
        order: 2;
        margin-bottom: 1.5rem;
    }
    .category-tabs {
        gap: 0.5rem;
    }
    .tab-link,
    .tab-item.active {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    .tab-icon {
        font-size: 1.1rem;
    }
    .news-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .news-card-image {
        height: 180px;
    }
    .news-card-content {
        padding: 1.2rem;
    }
    .news-card-title {
        font-size: 1.05rem;
        -webkit-line-clamp: 2;
        min-height: 3.1em;
    }
    .news-card-excerpt {
        font-size: 0.88rem;
        -webkit-line-clamp: 4;
        min-height: 7em;
        margin-top:1rem;
    }
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
    }
    .news-category {
        margin-right: 0;
    }
    .news-title {
        width: 100%;
    }
    .news-date {
        margin-left: 0;
        align-self: flex-end;
    }
    .pagination {
        gap: 0.3rem;
    }
    .page-link, .page-current {
        min-width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .news-item {
        padding: 0.8rem;
    }
    .news-category a {
        padding: 0.2rem 0.6rem;
        font-size: 0.8rem;
    }
    .news-title {
        font-size: 0.9rem;
    }
    .news-date {
        font-size: 0.8rem;
    }
    .page-link, .page-current {
        min-width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
}

/* ============ 新聞詳情頁響應式 ============ */

@media (max-width: 768px) {
    .page-layout {
        flex-direction: column;
    }
    .page-content {
        width: 100%;
        order: 1;
    }
    .page-sidebar {
        width: 100%;
        order: 2;
        margin-bottom: 1.5rem;
    }
    .news-detail {
        padding: 1.2rem;
    }
    .article-title {
        font-size: 1.4rem;
    }
    .article-subtitle {
        font-size: 1rem;
    }
    .article-meta {
        gap: 0.6rem;
    }
    .meta-item {
        font-size: 0.85rem;
    }
    .tag-link {
        padding: 0.2rem 0.6rem;
        font-size: 0.8rem;
    }
    .article-content h2 {
        font-size: 1.2rem;
        margin: 1.5rem 0 0.8rem;
    }
    .article-content p {
        font-size: 0.95rem;
    }
    .info-table {
        font-size: 0.85rem;
    }
    .info-table th,
    .info-table td {
        padding: 0.6rem;
    }
    .itinerary-card,
    .tips-card {
        padding: 1rem;
    }
    .itinerary-card h3 {
        font-size: 1.1rem;
    }
    .cta-section {
        padding: 1.5rem;
    }
    .cta-section h3 {
        font-size: 1.2rem;
    }
    .cta-button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    .post-navigation {
        flex-direction: column;
    }
    .floating-contact {
        bottom: 1rem;
        right: 1rem;
    }

}

@media (max-width: 480px) {
    .news-detail {
        padding: 1rem;
    }
    .article-title {
        font-size: 1.2rem;
    }
    .article-subtitle {
        font-size: 0.9rem;
    }
    .article-meta {
        flex-wrap: wrap;
    }
    .category-tabs {
        gap: 0.4rem;
    }
    .tab-link,
    .tab-item.active {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
        border-radius: var(--radius-md);
    }
    .tab-icon {
        font-size: 1rem;
    }
    .tab-text {
        font-size: 0.75rem;
    }
    .benefit-list li {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    .table-container {
        margin: 1rem -1rem;
        border-radius: 0;
    }
    .info-table th,
    .info-table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    .port-name {
        white-space: normal;
    }
    .itinerary-card h3 {
        font-size: 1rem;
    }
    .tips-card h3 {
        font-size: 1rem;
    }
    .cta-section {
        padding: 1.2rem;
    }
    .cta-quote {
        font-size: 0.95rem;
    }
    .nav-link {
        padding: 0.8rem;
    }
    .nav-icon {
        font-size: 1.2rem;
    }
    .nav-label {
        font-size: 0.8rem;
    }
    .nav-title {
        font-size: 0.9rem;
    }
    .card-header {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    .tips-list a {
        padding: 0.6rem 0.4rem;
        font-size: 0.9rem;
    }
}

/* ========== 公司簡介頁面響應式優化 ========== */

/* 1024px */
@media (max-width: 1024px) {
    .about-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .about-hero .hero-subtitle {
        font-size: 1rem;
    }
}

/* 768px */
@media (max-width: 768px) {
    .about-usp {
        padding: 3rem 0;
    }
    
    .about-feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .about-feature-card {
        padding: 1.5rem;
    }
    
    .feature-icon {
        font-size: 2.5rem;
    }
    
    .about-feature-card h3 {
        font-size: 1.2rem;
    }
    
    .about-stats {
        padding: 3rem 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .stat-item {
        padding: 1.5rem 1rem;
    }
    
    .stat-item .stat-num {
        font-size: 2.5rem;
    }
    
    .stat-item .stat-unit {
        font-size: 1.2rem;
    }
    
    .stat-item p {
        font-size: 0.9rem;
    }
    
    .about-hero .hero-subtitle {
        font-size: 0.95rem;
        margin-top: 0.8rem;
    }
}

/* 480px */
@media (max-width: 480px) {
    .about-usp {
        padding: 2.5rem 0;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    .about-feature-card {
        padding: 1.2rem;
    }
    
    .feature-icon {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
    
    .about-feature-card h3 {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
    }
    
    .about-feature-card p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .feature-list li {
        font-size: 0.85rem;
        padding: 0.4rem 0;
    }
    
    .about-stats {
        padding: 2.5rem 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .stat-item {
        padding: 1.2rem 0.8rem;
    }
    
    .stat-item .stat-num {
        font-size: 2rem;
    }
    
    .stat-item .stat-unit {
        font-size: 1rem;
    }
    
    .stat-item p {
        font-size: 0.85rem;
        margin-top: 0.6rem;
    }
    
    .about-hero .hero-subtitle {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }
}