/**
 * Psyn.app - Responsive Design System
 * Mobile-first responsive styles and breakpoint-specific adjustments
 * Developer: Aaliyah
 */

/* ============================================
   MOBILE BASE (320px - 639px)
   Default styles are mobile-first
   ============================================ */

/* Touch-friendly interactions */
@media (pointer: coarse) {
  /* Increase touch targets */
  .btn,
  .nav-link,
  a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Larger tap areas for icons */
  .btn-icon {
    min-width: 48px;
    min-height: 48px;
  }
  
  /* Remove hover states on touch devices */
  .hover-lift:hover,
  .hover-grow:hover,
  .card-interactive:hover {
    transform: none;
  }
  
  /* Use active states instead */
  .btn:active {
    transform: scale(0.95);
  }
}

/* Mobile-specific utilities */
.mobile-only {
  display: block;
}

.mobile-hidden {
  display: none;
}

/* ============================================
   SMALL DEVICES (640px - 767px)
   ============================================ */

@media (min-width: 640px) {
  /* Typography adjustments */
  :root {
    font-size: 17px;
  }
  
  /* Container adjustments */
  .container {
    padding: 0 var(--space-6);
  }
  
  /* Grid improvements */
  .projects-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  /* Card layouts */
  .card-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  
  /* Utilities */
  .sm\:text-center {
    text-align: center;
  }
  
  .sm\:flex {
    display: flex;
  }
  
  .sm\:hidden {
    display: none;
  }
  
  .sm\:block {
    display: block;
  }
}

/* ============================================
   TABLETS (768px - 1023px)
   ============================================ */

@media (min-width: 768px) {
  /* Typography scaling */
  h1 {
    font-size: var(--text-5xl);
  }
  
  h2 {
    font-size: var(--text-4xl);
  }
  
  /* Hero adjustments */
  .hero {
    padding: var(--space-10) 0;
  }
  
  .hero-title {
    font-size: var(--text-5xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-xl);
  }
  
  /* Navigation improvements */
  .mobile-menu-toggle {
    display: none;
  }
  
  .site-nav {
    display: flex !important;
  }
  
  /* Grid layouts */
  .projects-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  
  .card-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  
  /* Footer layout */
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Modal adjustments */
  .modal {
    max-width: 700px;
  }
  
  /* Utilities */
  .md\:text-left {
    text-align: left;
  }
  
  .md\:text-center {
    text-align: center;
  }
  
  .md\:flex {
    display: flex;
  }
  
  .md\:grid {
    display: grid;
  }
  
  .md\:hidden {
    display: none;
  }
  
  .md\:block {
    display: block;
  }
  
  .mobile-only {
    display: none;
  }
  
  .mobile-hidden {
    display: block;
  }
}

/* ============================================
   DESKTOP (1024px - 1279px)
   ============================================ */

@media (min-width: 1024px) {
  /* Typography refinement */
  :root {
    font-size: 18px;
  }
  
  h1 {
    font-size: var(--text-6xl);
  }
  
  /* Hero enhancements */
  .hero {
    padding: var(--space-12) 0;
  }
  
  .hero-title {
    font-size: var(--text-6xl);
  }
  
  /* Section spacing */
  .projects-section {
    padding: var(--space-12) 0;
  }
  
  /* Grid improvements */
  .projects-container {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-8);
  }
  
  .card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  
  /* Footer layout */
  .footer-content {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Featured cards two-column layout */
  .project-card.featured {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Hover effects enabled */
  .hover-effects-enabled .card-interactive:hover {
    transform: translateY(-4px);
  }
  
  /* Sidebar layouts */
  .layout-sidebar {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--space-8);
  }
  
  /* Utilities */
  .lg\:text-left {
    text-align: left;
  }
  
  .lg\:flex {
    display: flex;
  }
  
  .lg\:grid {
    display: grid;
  }
  
  .lg\:hidden {
    display: none;
  }
  
  .lg\:block {
    display: block;
  }
}

/* ============================================
   LARGE DESKTOP (1280px - 1535px)
   ============================================ */

@media (min-width: 1280px) {
  /* Container adjustments */
  .container {
    max-width: 1280px;
  }
  
  .container--wide {
    max-width: 1400px;
  }
  
  /* Hero spacing */
  .hero-content {
    max-width: 1000px;
  }
  
  /* Project grid optimization */
  .projects-container {
    gap: var(--space-10);
  }
  
  /* Sidebar layout */
  .layout-sidebar {
    grid-template-columns: 280px 1fr;
  }
  
  /* Utilities */
  .xl\:text-left {
    text-align: left;
  }
  
  .xl\:flex {
    display: flex;
  }
  
  .xl\:grid {
    display: grid;
  }
  
  .xl\:hidden {
    display: none;
  }
  
  .xl\:block {
    display: block;
  }
}

/* ============================================
   EXTRA LARGE (1536px+)
   ============================================ */

@media (min-width: 1536px) {
  /* Container max-width */
  .container {
    max-width: 1400px;
  }
  
  .container--wide {
    max-width: 1600px;
  }
  
  /* Typography scaling */
  :root {
    font-size: 19px;
  }
  
  /* Increased spacing */
  .hero {
    padding: calc(var(--space-12) * 1.5) 0;
  }
  
  .projects-section {
    padding: calc(var(--space-12) * 1.5) 0;
  }
  
  /* Utilities */
  .2xl\:text-center {
    text-align: center;
  }
  
  .2xl\:flex {
    display: flex;
  }
  
  .2xl\:hidden {
    display: none;
  }
  
  .2xl\:block {
    display: block;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (orientation: landscape) and (max-height: 600px) {
  /* Reduce vertical spacing on short landscape screens */
  .hero {
    padding: var(--space-6) 0;
  }
  
  .hero-title {
    font-size: var(--text-4xl);
  }
  
  .modal {
    max-height: 80vh;
  }
  
  /* Compact navigation */
  .site-header {
    padding: var(--space-2) 0;
  }
}

/* ============================================
   HIGH RESOLUTION DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Subtle border improvements */
  .card,
  .btn-secondary,
  .form-input {
    border-width: 0.5px;
  }
  
  /* Thinner lines */
  .card-header,
  .card-footer,
  .modal-header,
  .modal-footer {
    border-width: 0.5px;
  }
}

/* ============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================ */

@media (prefers-color-scheme: light) {
  /* Currently using dark theme only */
  /* Light mode styles can be added here in the future */
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  /* Reset colors for print */
  * {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Hide non-content elements */
  .site-header,
  .site-footer,
  .mobile-menu-toggle,
  .btn,
  .toast-container,
  .modal-overlay,
  nav,
  .skip-to-main {
    display: none !important;
  }
  
  /* Optimize content */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  h1 {
    font-size: 24pt;
  }
  
  h2 {
    font-size: 18pt;
  }
  
  h3 {
    font-size: 14pt;
  }
  
  /* Page breaks */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  .project-card {
    page-break-inside: avoid;
  }
  
  /* Show URLs */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
  
  /* Optimize spacing */
  .container {
    max-width: 100%;
    padding: 0;
  }
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Flexbox utilities */
.flex {
  display: flex;
}

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

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

.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-end {
  justify-content: flex-end;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Grid utilities */
.grid {
  display: grid;
}

.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);
}

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

.w-auto {
  width: auto;
}

.max-w-sm {
  max-width: 640px;
}

.max-w-md {
  max-width: 768px;
}

.max-w-lg {
  max-width: 1024px;
}

.max-w-xl {
  max-width: 1280px;
}

/* Spacing utilities */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Text utilities */
.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

/* Display utilities */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

/* Overflow utilities */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

/* Position utilities */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* ============================================
   CONTAINER QUERIES (Progressive Enhancement)
   ============================================ */

@supports (container-type: inline-size) {
  .container-query {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .container-query .card-title {
      font-size: var(--text-2xl);
    }
  }
  
  @container (min-width: 600px) {
    .container-query .project-card {
      grid-template-columns: 200px 1fr;
    }
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --midnight-canvas: #000000;
    --frost-white: #ffffff;
    --syntax-gold: #4D9FE6;
    --function-blue: #00aaff;
  }
  
  .btn,
  .card,
  .form-input {
    border-width: 2px;
  }
  
  a:focus,
  button:focus,
  input:focus {
    outline-width: 3px;
  }
}

/* Reduced transparency */
@media (prefers-reduced-transparency) {
  * {
    backdrop-filter: none !important;
  }
  
  .modal-overlay {
    background: rgba(10, 14, 20, 0.95);
  }
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

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

/* Responsive iframe (videos) */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   MOBILE NAVIGATION ENHANCEMENTS
   ============================================ */

@media (max-width: 767px) {
  .site-nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--midnight-elevated);
    border-top: 1px solid rgba(230, 232, 235, 0.1);
    padding: var(--space-4);
    display: none;
    flex-direction: column;
    gap: var(--space-2);
    box-shadow: var(--shadow-high);
    z-index: 999;
  }
  
  .site-nav.is-open {
    display: flex;
  }
  
  .nav-link {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    width: 100%;
    text-align: center;
  }
  
  .nav-link:hover,
  .nav-link.active {
    background: var(--midnight-popover);
  }
}

/* ============================================
   RESPONSIVE TABLES
   ============================================ */

@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   SAFE AREAS (Mobile Notches)
   ============================================ */

@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
  
  .site-header {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    padding-top: max(var(--space-3), env(safe-area-inset-top));
  }
  
  .site-footer {
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }
}