/*
============================================================================
*   Portfolio Responsive Enhancements
*   Additional responsive improvements for modern devices
*   Date: 2025-01-26
============================================================================
*/

/* Modern Fluid Typography using clamp() for better responsiveness */
@media screen and (min-width: 320px) {
  header .banner-text h1 {
    font-size: clamp(2.5rem, 8vw, 5.625rem);
    line-height: 1.1;
  }
  
  header .banner-text h3 {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    line-height: 1.9;
  }
  
  /* Modern CSS Grid for portfolio on all devices */
  #portfolio-wrapper.bgrid-quarters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
  }
  
  #portfolio-wrapper .columns {
    width: auto;
    margin-bottom: 0;
  }
}

/* Enhanced intermediate breakpoint for better tablet landscape support */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* Portfolio grid improvements for tablet landscape */
  #portfolio-wrapper.bgrid-quarters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  #portfolio-wrapper .columns {
    width: auto;
    margin-bottom: 0;
  }
  
  /* Better form layout for tablet landscape */
  #contact form {
    max-width: 600px;
    margin: 30px auto;
  }
  
  #contact label {
    width: 30%;
  }
  
  #contact input,
  #contact textarea,
  #contact select {
    width: 65%;
  }
}

/* Enhanced touch targets for mobile accessibility */
@media only screen and (max-width: 767px) {
  /* Ensure minimum 44px touch targets */
  header .social li a,
  footer .social-links li a {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Better button sizing for mobile */
  #contact button.submit {
    min-height: 48px;
    padding: 12px 24px;
    width: 100%;
    margin: 30px 0 24px 0;
  }
  
  /* Navigation improvements */
  ul#nav li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
  }
  
  /* Form field improvements */
  #contact input,
  #contact textarea,
  #contact select {
    min-height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
    border-radius: 8px;
  }
  
  /* Profile platform buttons */
  #profile .button,
  .button {
    min-height: 48px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Very small mobile devices */
@media only screen and (max-width: 320px) {
  header .banner-text h1 {
    font-size: 2.25rem;
    margin: 0 auto 16px auto;
  }
  
  header .banner-text h3 {
    font-size: 0.8rem;
    width: 95%;
  }
  
  /* Ensure text is readable on very small screens */
  #contact form {
    padding: 0 15px;
  }
}

/* Improve contrast and accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High DPI display optimizations */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  /* Sharper borders and shadows for high DPI displays */
  header .banner-text h1 {
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
  }
}

/* Portrait tablet specific optimizations */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #portfolio-wrapper.bgrid-quarters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  #portfolio-wrapper .columns {
    width: auto;
    margin-bottom: 0;
  }
  
  header .banner-text h1 {
    font-size: clamp(3.5rem, 6vw, 4.5rem);
  }
}

/* Landscape phone specific optimizations */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  header {
    min-height: 400px;
    height: 400px;
  }
  
  header .banner {
    padding-bottom: 15px;
  }
  
  header .banner-text h1 {
    font-size: 2.5rem;
    margin: 0 auto 8px auto;
  }
  
  header .banner-text h3 {
    font-size: 0.9rem;
  }
  
  header .social {
    margin: 12px 0;
  }
}