/* ==========================================================================
   RESPONSIVE UTILITIES (Mobile-First)
   Additional mobile optimizations and touch-friendly improvements

   Breakpoints:
   - 480px (xs) - Large phones
   - 640px (sm) - Small tablets
   - 768px (md) - Tablets
   - 1024px (lg) - Small desktops
   - 1280px (xl) - Large desktops
   ========================================================================== */

/* -------------------------------------------------------------------------
   CHROME PERFORMANCE OPTIMIZATIONS
   Chrome handles backdrop-filter and filter:blur poorly compared to Safari
   ------------------------------------------------------------------------- */

/* Reduce backdrop-filter complexity for all browsers - better scroll perf */
@supports (backdrop-filter: blur(1px)) {
  .glass-card,
  .service-card {
    /* Simpler blur for better performance */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* GPU acceleration hint */
.glass-card,
.service-card,
.header,
.menu-overlay {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Note: Removed CSS containment rules - they were clipping service card content */

/* -------------------------------------------------------------------------
   TOUCH-FRIENDLY IMPROVEMENTS
   Larger tap targets and better touch interactions
   ------------------------------------------------------------------------- */

/* Ensure minimum tap target size (44x44px) on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav__toggle,
  .footer__social-link,
  .services-scroll__btn,
  .faq-item__toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Disable hover effects on touch devices for better performance */
  .glass-card:hover,
  .service-card:hover,
  .feature-card:hover,
  .bento-card:hover,
  .timeline__item:hover .timeline__content {
    transform: none;
  }

  /* Add active states for touch feedback */
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .glass-card:active,
  .service-card:active {
    transform: scale(0.99);
  }
}

/* -------------------------------------------------------------------------
   MOBILE TYPOGRAPHY ADJUSTMENTS
   ------------------------------------------------------------------------- */

/* Prevent text overflow on small screens */
.hero__title,
.section__title,
.page-hero__title,
.cta__title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
}

/* -------------------------------------------------------------------------
   MOBILE SPACING UTILITIES
   ------------------------------------------------------------------------- */

/* Reduce section padding on mobile */
@media (max-width: 479px) {
  .section {
    padding: clamp(3rem, 8vh, 5rem) 0;
  }

  .section__header {
    margin-bottom: var(--space-10);
  }

  .section__description {
    font-size: var(--text-base);
  }
}

/* -------------------------------------------------------------------------
   MOBILE NAVIGATION IMPROVEMENTS
   ------------------------------------------------------------------------- */

/* Better mobile menu experience */
.menu-overlay__nav {
  padding: var(--space-4);
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.menu-overlay__nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

@media (max-width: 479px) {
  .menu-overlay__link {
    font-size: var(--text-xl);
    padding: var(--space-3) 0;
  }

  .menu-overlay__sublinks {
    gap: var(--space-2) var(--space-4);
    margin: var(--space-2) auto var(--space-3);
  }

  .menu-overlay__sublink {
    font-size: var(--text-xs);
  }
}

/* -------------------------------------------------------------------------
   MOBILE FORM IMPROVEMENTS
   ------------------------------------------------------------------------- */

/* Larger form inputs on mobile for easier interaction */
@media (max-width: 479px) {
  .form__input,
  .form__textarea,
  .cta__form-input,
  .cta__form-textarea,
  .cta-premium__input,
  .cta-premium__textarea,
  .newsletter-form__input {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: var(--space-4);
  }

  .form__label,
  .cta__form-label {
    font-size: 10px;
  }
}

/* -------------------------------------------------------------------------
   MOBILE GRID ADJUSTMENTS
   ------------------------------------------------------------------------- */

/* Single column grids on very small screens */
@media (max-width: 479px) {
  .features__grid,
  .features-grid,
  .testimonials__grid,
  .solutions__grid,
  .pricing-grid,
  .pricing__grid,
  .support-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-card__image {
    height: 160px;
  }
}

/* -------------------------------------------------------------------------
   MOBILE CARD IMPROVEMENTS
   ------------------------------------------------------------------------- */

/* Better card readability on mobile */
@media (max-width: 479px) {
  .pricing-card {
    padding: var(--space-6) var(--space-5);
  }

  .pricing-card__amount {
    font-size: var(--text-3xl);
  }

  .testimonial {
    padding: var(--space-6);
  }

  .testimonial__quote {
    font-size: var(--text-base);
  }

  .stat-card {
    padding: var(--space-6);
  }

  .stat-card__number {
    font-size: var(--text-3xl);
  }

  .support-card {
    padding: var(--space-6);
  }
}

/* -------------------------------------------------------------------------
   MOBILE FOOTER IMPROVEMENTS
   ------------------------------------------------------------------------- */

@media (max-width: 479px) {
  .footer {
    padding: var(--space-12) 0 var(--space-8);
  }

  .footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer__bottom {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
  }

  .footer__legal {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* -------------------------------------------------------------------------
   LANDSCAPE MOBILE ADJUSTMENTS
   ------------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--space-16) var(--container-padding);
  }

  .page-hero {
    min-height: auto;
    padding: var(--space-12) var(--container-padding);
  }

  .hero__scroll-indicator {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   SAFE AREA INSETS (Notched Devices)
   ------------------------------------------------------------------------- */

@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
  }

  .header {
    padding-top: calc(var(--space-5) + env(safe-area-inset-top));
  }

  .menu-overlay {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* -------------------------------------------------------------------------
   PRINT STYLES
   ------------------------------------------------------------------------- */

@media print {
  .header,
  .footer,
  .hero__scroll-indicator,
  .services-scroll__controls,
  .nav__toggle,
  .menu-overlay {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding: var(--space-8) 0;
  }

  .section {
    padding: var(--space-6) 0;
    break-inside: avoid;
  }

  .glass-card,
  .service-card,
  .feature-card,
  .pricing-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--color-border);
  }
}