/* css/mobile.css - Mobile-specific enhancements */

/*======================================
//--//---> MOBILE OPTIMIZATIONS
======================================*/

/* Base mobile styles */
@media (max-width: 768px) {
  /*--/ Typography /--*/
  body {
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .title-a {
    font-size: 2rem;
  }

  .intro-title {
    font-size: 2rem;
  }

  /*--/ Spacing /--*/
  .paralax-mf {
    padding: 4rem 0;
  }

  .sect-4 {
    padding: 2rem 0;
  }

  /*--/ Touch-friendly targets /--*/
  .btn,
  .nav-link,
  .back-to-top,
  .form-control,
  a {
    min-height: 44px;
    min-width: 44px;
  }

  .nav-link {
    padding: 12px 16px;
    font-size: 1.1rem;
  }

  /*--/ Mobile navigation /--*/
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    margin-top: 1rem;
    padding: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  }

  .navbar-b.navbar-trans .navbar-collapse {
    background: rgba(0, 0, 0, 0.95);
  }

  .navbar-nav {
    padding: 0.5rem 0;
  }

  .navbar-nav .nav-item {
    padding: 0.25rem 0;
  }

  /*--/ Portfolio grid /--*/
  .work-box {
    margin-bottom: 2rem;
  }

  .work-content {
    padding: 1.5rem;
  }

  /*--/ Contact form /--*/
  .contact-mf {
    margin-top: 2rem;
  }

  .box-shadow-full {
    padding: 2rem 1rem;
  }

  /*--/ Images /--*/
  .work-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /*--/ Footer /--*/
  .copyright-box {
    text-align: center;
    font-size: 0.9rem;
  }
}

/*--/ Tablet landscape /--*/
@media (min-width: 769px) and (max-width: 1024px) {
  .title-a {
    font-size: 2.5rem;
  }

  .work-box {
    margin-bottom: 2.5rem;
  }
}

/*======================================
//--//---> SWIPE GESTURES (LIGHTBOX)
======================================*/

.lb-outerContainer {
  touch-action: pan-y pinch-zoom;
}

.lb-image {
  touch-action: pan-x pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

/*======================================
//--//---> MOBILE MENU OVERLAY
======================================*/

body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Optional: Add overlay when menu is open */
body.menu-open::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  animation: fadeIn 0.3s ease;
}

/*======================================
//--//---> iOS SAFARI FIXES
======================================*/

/* Fix for iOS Safari address bar */
.intro {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

@supports (-webkit-touch-callout: none) {
  .intro {
    min-height: -webkit-fill-available;
  }
}

/* Prevent iOS zoom on input focus */
input[type="text"],
input[type="email"],
textarea {
  font-size: 16px;
}

/*======================================
//--//---> MOBILE PERFORMANCE
======================================*/

@media (max-width: 768px) {
  /* Reduce motion for mobile performance */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }

  /* Optimize images */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/*======================================
//--//---> LANDSCAPE ORIENTATION
======================================*/

@media (max-height: 500px) and (orientation: landscape) {
  .intro {
    min-height: 100vh;
  }

  .navbar-b {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .intro-title {
    font-size: 1.8rem;
  }
}

/*======================================
//--//---> MOBILE LIGHTBOX IMPROVEMENTS
======================================*/

@media (max-width: 768px) {
  .lb-nav {
    top: 50%;
    transform: translateY(-50%);
  }

  .lb-nav a {
    min-width: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lb-closeContainer {
    padding-top: 20px;
  }

  .lb-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/*======================================
//--//---> MOBILE GRID LAYOUT
======================================*/

@media (max-width: 576px) {
  .row {
    margin-right: -10px;
    margin-left: -10px;
  }

  .row > * {
    padding-right: 10px;
    padding-left: 10px;
  }

  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/*======================================
//--//---> PULL TO REFRESH PREVENTION
======================================*/

body {
  overscroll-behavior-y: contain;
}

/*======================================
//--//---> SAFE AREA INSETS (iOS NOTCH)
======================================*/

@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .navbar-b {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}