/**
 * Responsive CSS - Media queries and responsive utilities
 */

/* ===== Breakpoints ===== */
/* Mobile: < 640px */
/* Tablet: 640px - 1024px */
/* Desktop: > 1024px */

/* ===== Container Responsive ===== */
@media (max-width: 1280px) {
    .container {
        padding: 0 var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-md);
    }
}

/* ===== Typography Responsive ===== */
@media (max-width: 768px) {
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
    h4 { font-size: var(--font-size-lg); }
}

/* ===== Button Responsive ===== */
@media (max-width: 640px) {
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-group {
        flex-direction: column;
    }
}

/* ===== Form Responsive ===== */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }

    .form-group {
        margin-bottom: var(--spacing-md);
    }
}

/* ===== Card Responsive ===== */
@media (max-width: 768px) {
    .card {
        padding: var(--spacing-md);
    }
}

/* ===== Grid Responsive ===== */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .grid-cols-4,
    .grid-cols-3,
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .grid-cols-4,
    .grid-cols-3,
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ===== Spacing Responsive ===== */
@media (max-width: 768px) {
    .section {
        padding: var(--spacing-2xl) 0;
    }
}

/* ===== Display Utilities ===== */
@media (min-width: 1025px) {
    .hide-desktop { display: none !important; }
}

@media (max-width: 1024px) and (min-width: 641px) {
    .hide-tablet { display: none !important; }
}

@media (max-width: 640px) {
    .hide-mobile { display: none !important; }
}

/* ===== Text Alignment Responsive ===== */
@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center;
    }

    .text-left-mobile {
        text-align: left;
    }
}

/* ===== Modal Responsive ===== */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: var(--spacing-md);
    }
}

/* ===== Auth Pages Responsive ===== */
@media (max-width: 768px) {
    .auth-container {
        padding: var(--spacing-lg);
    }

    .auth-card {
        padding: var(--spacing-lg);
    }

    .social-buttons {
        flex-direction: column;
    }

    .divider {
        margin: var(--spacing-lg) 0;
    }
}

/* ===== Profile Page Responsive ===== */
@media (max-width: 1024px) {
    .profile-grid {
        grid-template-columns: 1fr !important;
    }

    .profile-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .profile-card {
        padding: var(--spacing-md);
    }

    .avatar-large {
        width: 100px;
        height: 100px;
        font-size: var(--font-size-3xl);
    }
}

/* ===== Contact Page Responsive ===== */
@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-form-container {
        padding: var(--spacing-md);
    }
}

/* ===== Table Responsive ===== */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }
}

/* ===== Navigation Responsive ===== */
@media (max-width: 1024px) {
    .nav-menu, .nav-links {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: #1a1f3a;
        flex-direction: column;
        padding: 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 999;
    }

    .nav-menu.active, .nav-links.active {
        display: flex;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }

    .nav-menu li, .nav-links li {
        width: 100%;
        border-bottom: 1px solid var(--color-gray-200);
    }

    .nav-menu a, .nav-links a {
        display: block;
        padding: var(--spacing-md) var(--spacing-lg);
        width: 100%;
    }
}

/* ===== Utility Classes ===== */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

@media (max-width: 768px) {
    .flex-wrap-mobile {
        flex-wrap: wrap;
    }

    .flex-column-mobile {
        flex-direction: column;
    }
}

/* ===== Overflow Utilities ===== */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Width Utilities ===== */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

@media (max-width: 768px) {
    .w-full-mobile {
        width: 100%;
    }
}

/* ===== Height Utilities ===== */
.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.min-h-screen {
    min-height: 100vh;
}

/* ===== Flex Utilities ===== */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

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

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

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

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-end {
    justify-content: flex-end;
}

/* ===== Gap Utilities ===== */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ===== Mobile-Specific Browser Fixes ===== */
/* Safari iOS: Prevent zoom on input focus */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px;
  }
}

/* Chrome Mobile: Fix viewport units */
@media screen and (max-width: 768px) {
  .container, .header-container {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Safari iOS & Chrome Mobile: Fix sticky header on scroll */
@supports (position: -webkit-sticky) or (position: sticky) {
  .header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* All Mobile: Improve scroll performance */
@media (max-width: 768px) {
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Improve scrolling on all browsers */
  .nav-menu, .nav-links, .modal-body, .dropdown-menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ===== Margin & Padding Responsive ===== */
@media (max-width: 768px) {
    .p-lg-mobile { padding: var(--spacing-lg); }
    .p-md-mobile { padding: var(--spacing-md); }
    .m-lg-mobile { margin: var(--spacing-lg); }
    .m-md-mobile { margin: var(--spacing-md); }
}