/**
 * Enhanced Responsive Design для FinHelp
 * Максимальная адаптация под все устройства
 */

/* ================================
   MOBILE FIRST - Extra Small Devices
   Phones Portrait (320px - 480px)
   ================================ */

@media (max-width: 480px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Typography responsive scaling */
  .text-4xl, 
  .text-display.text-4xl,
  h1 {
    font-size: 1.875rem !important;
    line-height: 1.2 !important;
  }
  
  .text-3xl, h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .text-2xl, h3 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  .text-xl {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
  }
  
  .text-lg {
    font-size: 1rem !important;
  }
  
  /* Button adaptations */
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
  }
  
  .btn--lg {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
  
  .btn--mobile-full {
    width: 100%;
    justify-content: center;
  }
  
  .mobile-btn-stack {
    flex-direction: column;
    width: 100%;
  }
  
  .mobile-btn-stack > * {
    width: 100%;
  }
  
  /* Promo banner mobile optimization */
  .promo-banner .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .promo-banner .flex {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
  }
  
  .promo-banner span {
    font-size: 0.8125rem;
    display: block;
  }
  
  .promo-banner-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem;
  }
  
  /* Card responsive padding */
  .card {
    padding: 1.25rem !important;
  }
  
  .card p-8 {
    padding: 1.25rem !important;
  }
  
  .card p-12 {
    padding: 1.5rem !important;
  }
  
  /* Grid spacing */
  .grid {
    gap: 1rem !important;
  }
  
  .gap-8 {
    gap: 1rem !important;
  }
  
  .gap-12 {
    gap: 1.5rem !important;
  }
  
  /* Header mobile */
  .header .container {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  .header .text-2xl {
    font-size: 1.5rem !important;
  }
  
  /* Section spacing mobile */
  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .py-12 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  /* Hero section mobile */
  .hero {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Blog cards mobile */
  .blog-card-image {
    height: 180px;
  }
  
  .blog-card-content {
    padding: 1.25rem;
  }
  
  /* FAQ mobile */
  .faq-question {
    font-size: 1rem;
    padding: 0.75rem 0;
  }
  
  .faq-answer {
    font-size: 0.9375rem;
    padding-bottom: 0.75rem;
  }
  
  /* Pricing cards mobile */
  .text-3xl.font-bold {
    font-size: 2rem !important;
  }
  
  /* Footer mobile */
  footer .grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  /* Breadcrumbs mobile */
  .breadcrumbs {
    font-size: 0.8125rem;
    padding: 0.5rem 0;
  }
  
  /* Prose content mobile */
  .prose-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .prose h2 {
    font-size: 1.5rem !important;
  }
  
  .prose h3 {
    font-size: 1.25rem !important;
  }
}

/* ================================
   Small Devices - Phones Landscape
   (481px - 768px)
   ================================ */

@media (min-width: 481px) and (max-width: 768px) {
  .text-4xl {
    font-size: 2.25rem !important;
  }
  
  .text-3xl {
    font-size: 1.875rem !important;
  }
  
  .promo-banner {
    font-size: 0.875rem;
  }
  
  .promo-banner .flex {
    flex-wrap: wrap;
  }
  
  .card {
    padding: 1.5rem;
  }
}

/* ================================
   Medium Devices - Tablets
   (769px - 1024px)
   ================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 720px;
  }
  
  /* Optimize 3-column grids for tablets */
  .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Adjust navigation spacing */
  nav.items-center.gap-8 {
    gap: 1.5rem;
  }
}

/* ================================
   Touch Device Optimizations
   ================================ */

@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets for accessibility (WCAG 2.1 AAA) */
  .btn,
  a,
  button,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  .btn {
    padding: 0.875rem 1.75rem;
  }
  
  /* Disable hover effects on touch devices */
  .hover\:text-primary:hover,
  .hover\:bg-surface:hover,
  .hover-lift:hover {
    transform: none !important;
  }
  
  .card:hover {
    transform: translateY(0) !important;
  }
  
  /* Larger mobile menu items for touch */
  .mobile-menu a,
  .mobile-menu button {
    padding: 1rem 0;
    font-size: 1.125rem;
  }
  
  /* Easier to tap links */
  .text-sm a {
    font-size: 1rem;
  }
}

/* ================================
   Landscape Mode Optimizations
   ================================ */

@media (max-height: 600px) and (orientation: landscape) {
  .py-24 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  .py-16 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .hero {
    min-height: auto;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .mobile-menu-content {
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* ================================
   Specific Device Optimizations
   ================================ */

/* iPhone SE, 5, 5S (320px) */
@media (max-width: 320px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .text-4xl {
    font-size: 1.625rem !important;
  }
  
  .text-3xl {
    font-size: 1.375rem !important;
  }
  
  .btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  
  .promo-banner span {
    font-size: 0.75rem;
  }
}

/* iPad and tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    max-width: 90%;
  }
  
  /* Grid adjustments for tablets */
  .grid.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Pricing cards side-by-side on tablets */
  .grid.md\:grid-cols-3.pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid.md\:grid-cols-3.pricing-cards > :last-child {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* ================================
   Large Screens Optimization
   ================================ */

/* Desktop (1441px - 1920px) */
@media (min-width: 1441px) and (max-width: 1920px) {
  .container {
    max-width: 1280px;
  }
}

/* Ultra-wide screens (1921px+) */
@media (min-width: 1921px) {
  .container {
    max-width: 1536px;
  }
  
  /* Slightly larger type for ultra-wide */
  .text-5xl {
    font-size: 3.75rem;
  }
}

/* ================================
   High DPI Displays (Retina)
   ================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Thinner borders on retina */
  .border {
    border-width: 0.5px;
  }
}

/* ================================
   Accessibility - Reduced Motion
   ================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .promo-banner,
  .mobile-menu-content,
  .animate-on-scroll,
  .animate-item,
  .hover-lift {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ================================
   Dark Mode Mobile Optimizations
   ================================ */

@media (prefers-color-scheme: dark) and (max-width: 768px) {
  :root:not([data-theme]) {
    --glass-bg: rgba(15, 21, 34, 0.9);
  }
  
  .header {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  .card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* ================================
   Print Optimization
   ================================ */

@media print {
  /* Ensure readable print sizes */
  .text-4xl {
    font-size: 24pt !important;
  }
  
  .text-3xl {
    font-size: 18pt !important;
  }
  
  .text-2xl {
    font-size: 16pt !important;
  }
  
  /* Remove shadows and effects */
  .card,
  .btn {
    box-shadow: none !important;
    border: 1px solid #ccc;
  }
  
  /* Expand containers for print */
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }
}