/**
 * responsive.css - 반응형 스타일시트
 * 대구 집수리 교육 - 행집사
 * Mobile-First Responsive Design
 */

/* ========================================
   Extra Small Devices (phones, 576px and down)
======================================== */
@media (max-width: 575.98px) {
    :root {
        --container-padding: 16px;
    }

    /* Typography */
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }

    /* Header */
    .logo-text .logo-main {
        font-size: var(--font-size-base);
    }

    .logo-text .logo-sub {
        display: none;
    }

    /* Hero Section */
    .hero-section {
        padding: var(--space-10) 0 var(--space-16);
    }

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

    .hero-description {
        font-size: var(--font-size-base);
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-stats {
        gap: var(--space-6);
    }

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

    /* Slider */
    .slider-container {
        height: 350px;
    }

    .slide-title {
        font-size: var(--font-size-2xl);
    }

    .slide-description {
        font-size: var(--font-size-base);
    }

    .slider-nav {
        width: 40px;
        height: 40px;
    }

    .slider-prev {
        left: var(--space-3);
    }

    .slider-next {
        right: var(--space-3);
    }

    /* Section */
    .section {
        padding: var(--space-12) 0;
    }

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

    .section-header {
        margin-bottom: var(--space-8);
    }

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

    /* Course Cards */
    .course-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .course-card-content {
        padding: var(--space-5);
    }

    /* Feature Cards */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .feature-card {
        padding: var(--space-6);
    }

    /* Testimonials */
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: var(--space-6);
    }

    /* Contact Form */
    .form-radio-group {
        flex-direction: column;
    }

    /* Footer */
    .footer-top {
        padding: var(--space-10) 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-info {
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-contact-quick {
        display: flex;
        justify-content: center;
    }

    .footer-bottom-inner {
        text-align: center;
    }

    .legal-links {
        flex-direction: column;
        gap: var(--space-2);
    }

    .legal-links .divider {
        display: none;
    }

    /* Floating Buttons */
    .floating-contact {
        right: var(--space-3);
        bottom: var(--space-3);
    }

    .floating-btn {
        width: 50px;
        height: 50px;
    }

    .back-to-top {
        right: var(--space-3);
        bottom: calc(var(--space-3) + 120px);
        width: 44px;
        height: 44px;
    }

    /* Page Hero */
    .page-hero {
        padding: var(--space-10) 0 var(--space-8);
    }

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

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .stat-number {
        font-size: var(--font-size-4xl);
    }

    /* Team */
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* News */
    .news-item {
        flex-direction: column;
        gap: var(--space-4);
    }

    .news-date {
        width: auto;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: var(--space-2);
    }

    .news-date-day {
        font-size: var(--font-size-xl);
    }

    /* CTA Section */
    .cta-section {
        padding: var(--space-12) 0;
    }

    .cta-title {
        font-size: var(--font-size-2xl);
    }

    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .btn {
        width: 100%;
    }

    /* Map */
    .map-container {
        height: 300px;
    }

    .location-info {
        grid-template-columns: 1fr;
    }

    /* Job Cards */
    .job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
}

/* ========================================
   Small Devices (landscape phones, 576px and up)
======================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Hero */
    .hero-stats {
        justify-content: flex-start;
    }

    /* Course Cards */
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Feature Cards */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Medium Devices (tablets, 768px and up)
======================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Header */
    .btn-cta {
        display: inline-flex;
    }

    /* Hero */
    .hero-section {
        padding: var(--space-16) 0 var(--space-20);
    }

    .hero-actions {
        flex-direction: row;
    }

    .hero-actions .btn {
        width: auto;
    }

    /* Course Cards */
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Feature Cards */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Team */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Large Devices (desktops, 992px and up)
======================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Navigation */
    .main-nav {
        display: block;
    }

    .mobile-menu-toggle {
        display: none;
    }

    /* Hero */
    .hero-section {
        padding: var(--space-20) 0 var(--space-24);
    }

    /* Course Cards */
    .course-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Feature Cards */
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1.5fr repeat(3, 1fr) 1fr;
    }

    /* Testimonials */
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Extra Large Devices (large desktops, 1200px and up)
======================================== */
@media (min-width: 1200px) {
    :root {
        --container-max: 1200px;
    }

    /* Course Cards */
    .course-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Feature Cards */
    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Testimonials */
    .testimonial-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Team */
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Extra Extra Large Devices (1400px and up)
======================================== */
@media (min-width: 1400px) {
    :root {
        --container-max: 1320px;
    }
}

/* ========================================
   Print Styles
======================================== */
@media print {
    .site-header,
    .floating-contact,
    .back-to-top,
    .slider-nav,
    .slider-pagination,
    .mobile-nav {
        display: none !important;
    }

    .site-main {
        padding-top: 0;
    }

    .section {
        padding: var(--space-8) 0;
    }

    a {
        color: var(--text-primary);
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: var(--text-tertiary);
    }

    .btn {
        border: 1px solid var(--text-primary);
    }
}

/* ========================================
   Reduced Motion
======================================== */
@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;
    }
}

/* ========================================
   Dark Mode Support (Optional)
======================================== */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable automatic dark mode
    :root {
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --text-tertiary: #9ca3af;
        --bg-primary: #111827;
        --bg-secondary: #1f2937;
        --bg-tertiary: #374151;
        --border-light: #374151;
        --border-default: #4b5563;
    }
    */
}

/* ========================================
   High Contrast Mode
======================================== */
@media (prefers-contrast: high) {
    :root {
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    }

    .btn {
        border: 2px solid currentColor;
    }

    .form-input,
    .form-textarea,
    .form-select {
        border: 2px solid var(--text-primary);
    }
}

/* ========================================
   Landscape Orientation for Mobile
======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: var(--space-8) 0;
        min-height: auto;
    }

    .slider-container {
        height: 300px;
    }

    .floating-contact {
        flex-direction: row;
        bottom: var(--space-2);
    }

    .back-to-top {
        bottom: var(--space-2);
        right: calc(var(--space-4) + 130px);
    }
}

/* ========================================
   Touch Device Optimizations
======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .nav-link,
    .dropdown-menu li a,
    .footer-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Remove hover effects on touch */
    .btn:hover {
        transform: none;
    }

    .course-card:hover,
    .feature-card:hover,
    .testimonial-card:hover {
        transform: none;
    }

    /* Show overlay on portfolio by default */
    .portfolio-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
    }
}

/* ========================================
   Retina Display Optimizations
======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Use higher resolution images if available */
    .logo img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   Safe Area Insets (for notched devices)
======================================== */
@supports (padding: max(0px)) {
    .site-header .container {
        padding-left: max(var(--container-padding), env(safe-area-inset-left));
        padding-right: max(var(--container-padding), env(safe-area-inset-right));
    }

    .site-footer {
        padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    }

    .floating-contact {
        right: max(var(--space-4), env(safe-area-inset-right));
        bottom: max(var(--space-4), env(safe-area-inset-bottom));
    }
}

/* ========================================
   Container Queries (Modern Browsers)
======================================== */
@supports (container-type: inline-size) {
    .course-grid,
    .feature-grid,
    .testimonial-grid {
        container-type: inline-size;
    }

    @container (max-width: 600px) {
        .course-card,
        .feature-card,
        .testimonial-card {
            padding: var(--space-4);
        }
    }
}