/**
 * responsive.css - 한국미래사업학교 반응형 스타일
 * Mobile-first approach with app-style mobile design
 */

/* ============================================
   Mobile First (Base: < 480px)
   ============================================ */

/* Typography adjustments */
html {
    font-size: 14px;
}

.section-inner,
.container,
.header-inner,
.footer-inner {
    padding-left: 1rem;
    padding-right: 1rem;
}

.section {
    padding: 3rem 0;
}

/* Header mobile */
.header-inner {
    height: 60px;
}

.logo-img,
.logo-img-white {
    height: 32px;
}

/* Buttons */
.btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Cards */
.card {
    padding: 1.5rem;
}

/* Footer */
.footer-top {
    padding: 2.5rem 0;
}

.footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.footer-col:nth-child(3) {
    grid-column: span 2;
}

.footer-social {
    justify-content: flex-start;
    margin-top: 1.5rem;
}

/* ============================================
   Small Phones (480px and up)
   ============================================ */
@media (min-width: 480px) {
    html {
        font-size: 15px;
    }

    .section-inner,
    .container,
    .header-inner,
    .footer-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-col:nth-child(3) {
        grid-column: auto;
    }
}

/* ============================================
   Tablets (768px and up)
   ============================================ */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    .section-inner,
    .container,
    .header-inner,
    .footer-inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .section {
        padding: 4rem 0;
    }

    .header-inner {
        height: 70px;
    }

    .logo-img,
    .logo-img-white {
        height: 36px;
    }

    /* Grid layouts */
    .grid-2-md { grid-template-columns: repeat(2, 1fr); }
    .grid-3-md { grid-template-columns: repeat(3, 1fr); }

    /* Cards */
    .card {
        padding: 2rem;
    }

    /* Footer */
    .footer-top {
        padding: 3rem 0;
    }

    .footer-social {
        justify-content: flex-end;
        margin-top: 0;
    }
}

/* ============================================
   Desktop (1024px and up)
   ============================================ */
@media (min-width: 1024px) {
    .section {
        padding: 5rem 0;
    }

    .header-inner {
        height: 80px;
    }

    .logo-img,
    .logo-img-white {
        height: 40px;
    }

    /* Grid layouts */
    .grid-2-lg { grid-template-columns: repeat(2, 1fr); }
    .grid-3-lg { grid-template-columns: repeat(3, 1fr); }
    .grid-4-lg { grid-template-columns: repeat(4, 1fr); }

    /* Footer */
    .footer-top {
        padding: 4rem 0;
    }
}

/* ============================================
   Large Desktop (1280px and up)
   ============================================ */
@media (min-width: 1280px) {
    .section-inner,
    .container {
        max-width: 1400px;
    }
}

/* ============================================
   Extra Large (1536px and up)
   ============================================ */
@media (min-width: 1536px) {
    html {
        font-size: 17px;
    }
}

/* ============================================
   Hero Section Responsive
   ============================================ */
.hero-section {
    min-height: 100vh;
    padding: 120px 0 80px;
}

@media (min-width: 768px) {
    .hero-section {
        padding: 140px 0 100px;
    }
}

@media (min-width: 1024px) {
    .hero-section {
        padding: 160px 0 120px;
    }
}

.hero-title {
    font-size: clamp(2rem, 8vw, 4.5rem);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.5rem);
}

/* ============================================
   Slider Responsive
   ============================================ */
.slider-container {
    margin: 0 -1rem;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .slider-container {
        margin: 0;
        padding: 0;
    }
}

.slide-item {
    padding: 0 0.5rem;
}

@media (min-width: 768px) {
    .slide-item {
        padding: 0 1rem;
    }
}

/* ============================================
   Program Cards Responsive
   ============================================ */
.program-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .program-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .program-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.program-card {
    height: 100%;
}

/* ============================================
   Stats Section Responsive
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.stat-number {
    font-size: clamp(2rem, 6vw, 3.5rem);
}

.stat-label {
    font-size: clamp(0.75rem, 2vw, 0.95rem);
}

/* ============================================
   Team Section Responsive
   ============================================ */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* ============================================
   Contact Form Responsive
   ============================================ */
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .contact-form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

.form-group.full-width {
    grid-column: 1 / -1;
}

/* ============================================
   FAQ Section Responsive
   ============================================ */
.faq-item {
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .faq-item {
        padding: 1.5rem 2rem;
    }
}

/* ============================================
   Blog/News Grid Responsive
   ============================================ */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* ============================================
   Location/Map Responsive
   ============================================ */
.location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .location-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.map-container {
    height: 300px;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

@media (min-width: 768px) {
    .map-container {
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .map-container {
        height: 100%;
        min-height: 450px;
    }
}

/* ============================================
   Portfolio/Gallery Responsive
   ============================================ */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* ============================================
   Page Header Responsive
   ============================================ */
.page-header {
    padding: 120px 0 60px;
}

@media (min-width: 768px) {
    .page-header {
        padding: 140px 0 80px;
    }
}

@media (min-width: 1024px) {
    .page-header {
        padding: 160px 0 100px;
    }
}

.page-header-title {
    font-size: clamp(2rem, 6vw, 3.5rem);
}

/* ============================================
   Two Column Layout Responsive
   ============================================ */
.two-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .two-col-layout {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }
}

.two-col-layout.reverse {
    direction: ltr;
}

@media (min-width: 1024px) {
    .two-col-layout.reverse .col-image {
        order: 2;
    }
    .two-col-layout.reverse .col-content {
        order: 1;
    }
}

/* ============================================
   Table Responsive
   ============================================ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 600px;
}

/* ============================================
   Mobile App-Style Components
   ============================================ */

/* App-style list */
.app-list {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.app-list-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.app-list-item:last-child {
    border-bottom: none;
}

.app-list-item:active {
    background: rgba(255, 255, 255, 0.05);
}

@media (min-width: 1024px) {
    .app-list-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* App-style tabs */
.app-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: 4px;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-tab {
    flex: 1;
    min-width: max-content;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--light-gray);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.app-tab.active {
    background: var(--primary);
    color: var(--white);
}

/* App-style search */
.app-search {
    position: relative;
    margin-bottom: 1.5rem;
}

.app-search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: var(--white);
    font-size: 1rem;
}

.app-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--gray);
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .site-header,
    .site-footer,
    .mobile-nav,
    .mobile-bottom-nav,
    .cosmic-bg {
        display: none !important;
    }

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

    body {
        background: white;
        color: black;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}

/* ============================================
   Landscape Mode Adjustments
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        min-height: auto;
        padding: 100px 0 60px;
    }

    .mobile-bottom-nav {
        height: 56px;
    }

    .bottom-nav-item {
        font-size: 0.65rem;
    }

    .bottom-nav-item svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   Safe Area (Notch) Support
   ============================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(70px + env(safe-area-inset-bottom));
    }

    .site-footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    @media (min-width: 1024px) {
        .site-footer {
            padding-bottom: 0;
        }
    }
}

/* ============================================
   High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --bg-card: rgba(0, 0, 0, 0.9);
    }

    .card,
    .app-list {
        border-width: 2px;
    }

    .btn {
        border: 2px solid transparent;
    }
}

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