/* ================================================
   Responsive Design - SwissFixPro
   Mobile-first responsive breakpoints and adjustments
   ================================================ */

/* ================================================
   Breakpoint System
   Mobile First Approach:
   - Base: 0px - 479px (Mobile)
   - SM: 480px - 639px (Large Mobile)
   - MD: 640px - 767px (Small Tablet)
   - LG: 768px - 1023px (Tablet)
   - XL: 1024px - 1279px (Small Desktop)
   - 2XL: 1280px+ (Large Desktop)
   ================================================ */

/* ================================================
   Base Mobile Styles (0px - 479px)
   ================================================ */

/* Navigation adjustments for small screens */
@media (max-width: 479px) {
  .nav__content {
    padding: 0 var(--space-sm);
  }
  
  .hero__title {
    font-size: var(--font-size-3xl);
    line-height: 1.1;
  }
  
  .hero__subtitle {
    font-size: var(--font-size-base);
  }
  
  .hero__cta {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }
  
  .service-card {
    padding: var(--space-md);
  }
  
  .service-card__icon {
    width: 48px;
    height: 48px;
  }
  
  .contact-form-wrapper {
    padding: var(--space-md);
  }
}

/* ================================================
   Large Mobile (480px - 639px)
   ================================================ */

@media (min-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }
  
  .hero__cta {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .service-options {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .calculator-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================
   Small Tablet (640px - 767px)
   ================================================ */

@media (min-width: 640px) {
  .container {
    padding: 0 var(--space-lg);
  }
  
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-methods {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .service-options {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .calculator-options {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (min-width: 768px) {
  /* Typography scaling for tablet */
  .hero__title {
    font-size: var(--font-size-5xl);
  }
  
  .hero__subtitle {
    font-size: var(--font-size-xl);
  }
  
  .section-title {
    font-size: var(--font-size-4xl);
  }
  
  /* Layout improvements */
  .nav__menu {
    display: flex;
  }
  
  .nav__toggle {
    display: none;
  }
  
  .nav__mobile {
    display: none;
  }
  
  .hero__content {
    max-width: 600px;
  }
  
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  
  .contact-methods {
    grid-template-columns: 1fr;
  }
  
  .service-options {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .calculator-options {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Hide mobile contact bar */
  .mobile-contact-bar {
    display: none;
  }
  
  body {
    padding-bottom: 0;
  }
}

/* ================================================
   Small Desktop (1024px - 1279px)
   ================================================ */

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-xl);
  }
  
  /* Full navigation visible */
  .nav__language,
  .nav__cta {
    display: block;
  }
  
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .process-timeline {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  
  .service-options {
    grid-template-columns: repeat(5, 1fr);
  }
  
  /* Enhanced hover effects for desktop */
  .service-card:hover {
    transform: translateY(-8px);
  }
  
  .gallery-item:hover {
    transform: translateY(-6px);
  }
  
  .contact-method:hover {
    transform: translateY(-4px);
  }
}

/* ================================================
   Large Desktop (1280px+)
   ================================================ */

@media (min-width: 1280px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .calculator-options {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Maximum content width on very large screens */
  .hero__content {
    max-width: 700px;
  }
  
  .section-header {
    max-width: 800px;
  }
  
  /* Enhanced spacing for large screens */
  .section {
    padding: calc(var(--space-section) * 1.2) 0;
  }
}

/* ================================================
   Extra Large Desktop (1536px+)
   ================================================ */

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
  
  .hero__title {
    font-size: clamp(4rem, 6vw, 6rem);
  }
  
  .section-title {
    font-size: clamp(2.5rem, 4vw, 4rem);
  }
  
  /* Ultra-wide layout adjustments */
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xl);
  }
  
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xl);
  }
}

/* ================================================
   High DPI / Retina Displays
   ================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for high DPI displays */
  .logo,
  .service-card__icon svg,
  .process-step__icon svg {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ================================================
   Landscape Mobile Orientation
   ================================================ */

@media (orientation: landscape) and (max-height: 600px) {
  .hero {
    min-height: 600px;
  }
  
  .hero__scroll {
    display: none;
  }
  
  .nav__mobile {
    top: var(--header-height-mobile);
    max-height: calc(100vh - var(--header-height-mobile));
  }
}

/* ================================================
   Portrait Tablet Orientation
   ================================================ */

@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  .contact-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .contact-methods {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================
   Accessibility - High Contrast Mode
   ================================================ */

@media (prefers-contrast: high) {
  .service-card,
  .gallery-item,
  .testimonial-card,
  .contact-method {
    border-width: 2px;
    border-color: currentColor;
  }
  
  .btn {
    border-width: 2px;
  }
  
  .form-input,
  .form-textarea,
  .form-select {
    border-width: 2px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .hero__content {
    animation: none;
  }
  
  .scroll-animate,
  .scroll-animate-left,
  .scroll-animate-right,
  .scroll-animate-scale {
    transform: none;
    opacity: 1;
    transition: none;
  }
  
  .hover-lift:hover,
  .hover-scale:hover,
  .service-card:hover,
  .gallery-item:hover {
    transform: none;
  }
}

/* ================================================
   Print Styles
   ================================================ */

@media print {
  .header,
  .nav,
  .mobile-contact-bar,
  .privacy-banner,
  .loading-overlay {
    display: none !important;
  }
  
  .main {
    margin-top: 0;
  }
  
  .hero {
    min-height: auto;
    padding: var(--space-lg) 0;
  }
  
  .hero__background {
    display: none;
  }
  
  .hero__content {
    color: var(--color-text-primary);
  }
  
  .section {
    padding: var(--space-lg) 0;
    break-inside: avoid;
  }
  
  .service-card,
  .gallery-item,
  .testimonial-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--color-border-dark);
  }
  
  .contact-form-wrapper {
    display: none;
  }
  
  .btn {
    border: 1px solid currentColor;
    background: none !important;
    color: var(--color-text-primary) !important;
  }
}

/* ================================================
   Container Queries (Modern browsers)
   ================================================ */

@container (min-width: 640px) {
  .service-card {
    padding: var(--space-xl);
  }
  
  .gallery-item {
    aspect-ratio: 16 / 10;
  }
}

@container (min-width: 1024px) {
  .contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
}

/* ================================================
   Utility Classes for Responsive Design
   ================================================ */

/* Hide/Show on specific breakpoints */
@media (max-width: 479px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (min-width: 480px) and (max-width: 639px) {
  .hidden-sm {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .hidden-md {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-lg {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hidden-xl {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .hidden-2xl {
    display: none !important;
  }
}

/* Show only on specific breakpoints */
@media (min-width: 480px) {
  .show-sm-up {
    display: block !important;
  }
}

@media (min-width: 640px) {
  .show-md-up {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .show-lg-up {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .show-xl-up {
    display: block !important;
  }
}

/* Responsive text alignment */
@media (max-width: 767px) {
  .text-center-mobile {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .text-left-desktop {
    text-align: left;
  }
}

/* Responsive spacing */
@media (max-width: 767px) {
  .mb-lg-mobile {
    margin-bottom: var(--space-lg);
  }
  
  .p-sm-mobile {
    padding: var(--space-sm);
  }
}

/* Responsive grid gaps */
@media (max-width: 767px) {
  .gap-sm-mobile {
    gap: var(--space-sm);
  }
}

@media (min-width: 768px) {
  .gap-lg-desktop {
    gap: var(--space-lg);
  }
}