/* ============================================
   볼라피오 - Responsive Stylesheet
   ============================================ */

/* Tablet: 1024px */
@media (max-width: 1024px) {
    :root {
        --font-size-4xl: 2.8rem;
        --font-size-3xl: 2rem;
        --font-size-2xl: 1.6rem;
        --space-3xl: 6rem;
    }

    .navbar {
        padding: 0 var(--space-lg);
    }

    .section {
        padding: var(--space-2xl) var(--space-lg);
    }

    .philosophy-grid {
        gap: var(--space-xl);
    }

    .service-cards {
        gap: var(--space-lg);
    }

    .target-grid {
        gap: var(--space-xl);
    }

    .process-flow {
        padding: 0;
    }

    .contact-grid {
        gap: var(--space-xl);
    }
}

/* Mobile: 768px */
@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.6rem;
        --font-size-2xl: 1.3rem;
        --space-3xl: 4rem;
        --space-2xl: 3rem;
        --nav-height: 64px;
        --nav-height-scrolled: 56px;
    }

    /* Disable custom cursor on touch */
    body {
        cursor: auto;
    }

    a,
    button {
        cursor: pointer;
    }

    .cursor-dot,
    .cursor-ring {
        display: none;
    }

    /* Nav */
    .nav-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Section */
    .section {
        padding: var(--space-2xl) var(--space-sm);
    }

    .navbar {
        padding: 0 var(--space-sm);
    }

    /* Hero */
    .hero-content {
        padding: 0 var(--space-sm);
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Philosophy */
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Services */
    .service-cards {
        grid-template-columns: 1fr;
    }

    /* Programs */
    .program-tabs {
        flex-direction: column;
    }

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

    .program-number {
        font-size: 4rem;
    }

    /* Process */
    .process-flow {
        flex-direction: column;
        align-items: center;
        gap: var(--space-xl);
    }

    .process-line {
        display: none;
    }

    .process-svg {
        display: none;
    }

    /* Target */
    .target-grid {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .cta-contact-cards {
        flex-direction: column;
        align-items: center;
    }

    /* Footer */
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-info {
        flex-direction: column;
        gap: var(--space-lg);
    }

    /* Sub pages */
    .page-header {
        min-height: 40vh;
    }

    .page-header .section-title {
        font-size: var(--font-size-2xl);
    }

    .about-mission-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-grid.reverse {
        direction: ltr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Reduce motion on mobile for performance */
    .parallax-layer {
        transform: none !important;
    }

    .hero-wave {
        animation-duration: 25s;
    }

    .hero-particles {
        display: none;
    }
}

/* Small Mobile: 480px */
@media (max-width: 480px) {
    :root {
        --font-size-4xl: 1.7rem;
        --font-size-3xl: 1.4rem;
    }

    .hero-badge {
        font-size: var(--font-size-xs);
        padding: 6px 14px;
    }

    .btn {
        padding: 12px 24px;
        font-size: var(--font-size-sm);
    }

    .cta-button {
        padding: 14px 32px;
        font-size: var(--font-size-base);
    }

    .service-card {
        padding: var(--space-lg);
    }

    .value-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .contact-form {
        padding: var(--space-lg);
    }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-wave,
    .hero-particles {
        display: none;
    }
}