/*
 * Responsive CSS - Mobile First Approach
 * No animations on mobile per requirements
 */

/* Mobile First Base Styles (320px+) */
/* Conservative font sizes for mobile */
:root {
  --mobile-font-h1: 1.5rem;
  --mobile-font-h2: 1.375rem;
  --mobile-font-h3: 1.25rem;
  --mobile-font-base: 0.875rem;
}

/* Mobile Typography */
@media (max-width: 767.98px) {
  h1 { font-size: var(--mobile-font-h1); }
  h2 { font-size: var(--mobile-font-h2); }
  h3 { font-size: var(--mobile-font-h3); }
  p { font-size: var(--mobile-font-base); }
  
  .navbar-brand {
    font-size: 1rem;
  }
  
  /* Remove animations on mobile */
  .card {
    transition: none;
  }
  
  .card:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(26, 26, 46, 0.1);
  }
  
  .btn-primary:hover {
    transform: none;
  }
  
  .gallery-item:hover img {
    transform: none;
  }
}

/* Extra Small Devices (Portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .hero-section {
    min-height: 80vh;
    text-align: center;
  }
  
  .section-padding {
    padding: 2rem 0;
  }
  
  .section-padding-lg {
    padding: 3rem 0;
  }
  
  .contact-form {
    padding: 1.5rem;
  }
  
  .service-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .team-photo {
    width: 120px;
    height: 120px;
  }
  
  .pricing-card.featured {
    transform: none;
    margin-bottom: 1rem;
  }
  
  .process-number {
    left: 20px;
    width: 35px;
    height: 35px;
    font-size: 0.875rem;
  }
  
  /* Hide decorative blobs on mobile */
  .blob-decoration {
    display: none;
  }
}

/* Small Devices (Landscape phones, 576px and up) */
@media (min-width: 576px) {
  .hero-section {
    min-height: 90vh;
  }
  
  .contact-form {
    padding: 2rem;
  }
  
  .service-card {
    padding: 1.75rem;
  }
}

/* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) {
  :root {
    --mobile-font-h1: 1.75rem;
    --mobile-font-h2: 1.5rem;
    --mobile-font-h3: 1.375rem;
    --mobile-font-base: 1rem;
  }
  
  .hero-section {
    min-height: 100vh;
    text-align: left;
  }
  
  .section-padding {
    padding: 3rem 0;
  }
  
  .section-padding-lg {
    padding: 5rem 0;
  }
  
  .contact-form {
    padding: 2.5rem;
  }
  
  .service-card {
    padding: 2rem;
  }
  
  .team-photo {
    width: 140px;
    height: 140px;
  }
  
  /* Re-enable some animations for tablets+ */
  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .gallery-item img {
    transition: transform 0.3s ease;
  }
}

/* Large Devices (Desktops, 992px and up) */
@media (min-width: 992px) {
  :root {
    --mobile-font-h1: 2rem;
    --mobile-font-h2: 1.75rem;
    --mobile-font-h3: 1.5rem;
    --mobile-font-base: 1rem;
  }
  
  .navbar-brand {
    font-size: 1.125rem;
  }
  
  .section-padding {
    padding: 4rem 0;
  }
  
  .section-padding-lg {
    padding: 6rem 0;
  }
  
  .contact-form {
    padding: 3rem;
  }
  
  .service-card {
    padding: 2rem;
  }
  
  .team-photo {
    width: 150px;
    height: 150px;
  }
  
  .pricing-card.featured {
    transform: scale(1.05);
  }
  
  /* Show decorative elements */
  .blob-decoration {
    display: block;
  }
  
  /* Re-enable hover animations */
  .btn-primary:hover {
    transform: translateY(-2px);
  }
}

/* Extra Large Devices (Large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .hero-section {
    min-height: 100vh;
  }
  
  .section-padding-lg {
    padding: 8rem 0;
  }
  
  .contact-form {
    padding: 3.5rem;
  }
}

/* XXL Devices (Larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}

/* High DPI Displays */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  
  .team-photo {
    border-width: 2px;
  }
  
  .card {
    box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08);
  }
}

/* Landscape Orientation Adjustments */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .hero-section {
    min-height: 100vh;
    padding: 2rem 0;
  }
  
  .section-padding {
    padding: 1.5rem 0;
  }
}

/* Print Styles */
@media print {
  .navbar,
  .footer,
  .blob-decoration,
  .btn {
    display: none;
  }
  
  .hero-section {
    background: none;
    color: black;
    min-height: auto;
    padding: 1rem 0;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  .section-padding,
  .section-padding-lg {
    padding: 1rem 0;
  }
}

/* Accessibility - Focus States */
@media (min-width: 768px) {
  .navbar-nav .nav-link:focus {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
  }
  
  .btn:focus {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
  }
  
  .form-control:focus {
    outline: none;
  }
}

/* Dark Mode Support (Future-proofing) */

.hero-content {
    padding-top: 175px;
}