/* ======================================================
   RESPONSIVE DESIGN SYSTEM - Common Module
   統一響應式設計系統
   ====================================================== */

:root {
    --font-scale-xs: 0.85;
    --font-scale-sm: 0.9;
    --font-scale-md: 0.95;
    --font-scale-lg: 1;
    --space-scale-xs: 0.75;
    --space-scale-sm: 0.85;
    --space-scale-md: 0.9;
    --space-scale-lg: 1;
    --carousel-height: 70vh;
    --carousel-min-height: 350px;
}

/* 強制移動端布局 - 所有用户设备都按照移动端 (480px) 显示 */
html, body {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
}

img, picture, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

main, [role="main"] {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.carousel-container {
    height: var(--carousel-height);
    min-height: var(--carousel-min-height);
    flex: 1;
}

@media (max-width: 480px) {
    :root {
        --carousel-height: 60vh;
        --carousel-min-height: 280px;
    }

    body {
        font-size: calc(14px * var(--font-scale-sm));
        line-height: 1.6;
    }
    
    h1, .h1 {
        font-size: calc(1.9rem * var(--font-scale-sm));
        margin-bottom: calc(1rem * var(--space-scale-sm));
        line-height: 1.2;
    }
    
    h2, .h2 {
        font-size: calc(1.5rem * var(--font-scale-sm));
        margin-bottom: calc(0.8rem * var(--space-scale-sm));
        line-height: 1.3;
    }
    
    .container {
        padding: 0 calc(1rem * var(--space-scale-sm));
    }
    
    main, [role="main"] {
        padding: 0 calc(1rem * var(--space-scale-sm));
    }
    
    .carousel-image {
        object-fit: contain;
        background-color: transparent;
    }
    
    .service-card:hover {
        transform: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --carousel-height: 65vh;
        --carousel-min-height: 300px;
    }

    body {
        font-size: calc(15px * var(--font-scale-md));
        line-height: 1.65;
    }
    
    h1, .h1 {
        font-size: calc(2rem * var(--font-scale-md));
        margin-bottom: calc(1.2rem * var(--space-scale-md));
    }
    
    h2, .h2 {
        font-size: calc(1.6rem * var(--font-scale-md));
        margin-bottom: calc(1rem * var(--space-scale-md));
    }
    
    .container {
        padding: 0 calc(1.5rem * var(--space-scale-md));
    }
    
    main, [role="main"] {
        padding: 0 calc(1.5rem * var(--space-scale-md));
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
}

@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --carousel-height: 70vh;
        --carousel-min-height: 350px;
    }

    body {
        font-size: 16px;
        line-height: 1.7;
    }
    
    h1, .h1 {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
    }
    
    h2, .h2 {
        font-size: 1.8rem;
        margin-bottom: 1.2rem;
    }
    
    .container {
        padding: 0 2rem;
    }
    
    main, [role="main"] {
        padding: 0 2rem;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
}

@media (min-width: 1025px) {
    :root {
        --carousel-height: 70vh;
        --carousel-min-height: 400px;
    }

    body {
        font-size: 16px;
        line-height: 1.75;
    }
    
    h1, .h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
    
    h2, .h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .container {
        padding: 0 3rem;
    }
    
    main, [role="main"] {
        max-width: 1200px;
        padding: 0 3rem;
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
}

@media print {
    * {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}