/* Responsive styles for Business Automation Service Landing Page */

/* Default mobile-first styles are already defined in styles.css */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  :root {
    --container-padding: 1.5rem;
  }

  .hero__title {
    font-size: 2.75rem;
  }
  
  /* Ensure glass effects work well on smaller screens */
  .services__card,
  .benefits__item,
  .contact__form {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
  }

  .hero__title {
    font-size: 3rem;
  }

  .hero__subtitle {
    font-size: 1.5rem;
  }

  .services__grid,
  .benefits__list {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Enhanced glass card effects for larger screens */
  .services__card:hover,
  .benefits__item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6);
  }
  
  .statistics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .hero__title {
    font-size: 3.5rem;
  }

  .services__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .benefits__list {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Enhanced header for large screens */
  .header__logo h1 {
    font-size: 1.75rem;
    letter-spacing: 1px;
  }
  
  .header__logo-img {
    width: 48px;
    height: 48px;
  }
  
  /* Improved glass card spacing */
  .services__card,
  .benefits__item {
    padding: var(--spacing-xl);
  }
  
  .statistics__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .statistics__value {
    font-size: 3.5rem;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  :root {
    --container-padding: 0;
  }
  
  /* Enhanced background effects for large screens */
  body {
    background-image: 
      radial-gradient(circle at 15% 25%, rgba(60, 60, 100, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 85% 75%, rgba(60, 100, 120, 0.15) 0%, transparent 50%);
  }
  
  /* Larger hero section for impact */
  .hero {
    padding: calc(var(--spacing-xxl) * 2.5) 0 calc(var(--spacing-xxl) * 1.5);
  }
}

/* Mobile-only styles (max-width: 575.98px) */
@media (max-width: 575.98px) {
  .hero {
    padding-top: calc(var(--spacing-xxl) + var(--spacing-xl));
  }

  .hero__title {
    font-size: 2rem;
  }

  .hero__subtitle {
    font-size: 1rem;
  }

  .services__title,
  .benefits__title,
  .contact__title {
    font-size: 1.75rem;
  }

  .services__grid,
  .benefits__list {
    grid-template-columns: 1fr;
  }

  .services__card,
  .benefits__item {
    padding: var(--spacing-md);
  }
  
  /* Optimize glass effect for mobile */
  .header {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  .header__logo-img {
    width: 32px;
    height: 32px;
  }
  
  .header__logo h1 {
    font-size: 1.25rem;
  }
  
  /* Improve mobile form experience */
  .contact__form {
    padding: var(--spacing-lg);
  }

  .contact__form-submit {
    padding: calc(var(--spacing-sm) + 2px) var(--spacing-md);
  }

  .footer__container {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .footer__social {
    order: 1;
    justify-content: center;
    margin-bottom: var(--spacing-xs);
  }
  
  .footer__copyright {
    order: 3;
  }
  
  .footer__legal {
    order: 2;
    justify-content: center;
    margin-bottom: var(--spacing-xs);
  }
  
  .statistics__grid,
  .testimonials__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .statistics__item,
  .testimonials__card {
    padding: var(--spacing-md);
  }
  
  .statistics__value {
    font-size: 2.5rem;
  }
  
  .testimonials__quote p {
    font-size: 0.95rem;
  }
  
  .testimonials__author-image {
    font-size: 2rem;
  }
  
  .testimonials__author-name {
    font-size: 0.95rem;
  }
  
  .testimonials__author-role {
    font-size: 0.8rem;
  }
}

/* Small devices adjustment for footer (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .footer__container {
    padding: 0 var(--spacing-md);
  }
  
  .footer__copyright {
    width: 100%;
    order: 3;
    margin-top: var(--spacing-xs);
  }
  
  .footer__social {
    order: 1;
  }
  
  .footer__legal {
    order: 2;
  }
}

/* Responsive styles */

@media (max-width: 1200px) {
  .container {
    max-width: 95%;
  }
}

@media (max-width: 992px) {
  .hero__title {
    font-size: 2rem;
  }
  
  .hero__subtitle {
    font-size: 1.1rem;
  }
  
  .contact__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .contact__image {
    order: -1;
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero__title {
    font-size: 1.75rem;
  }
  
  .hero__subtitle {
    font-size: 1rem;
  }
  
  .services__grid, 
  .benefits__list, 
  .statistics__grid, 
  .testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero__image, 
  .benefits__image {
    max-width: 100%;
  }
  
  .footer__container {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }
  
  .footer__social, 
  .footer__legal {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .hero {
    padding-top: calc(var(--spacing-xxl) + 2rem);
  }
  
  .hero__title {
    font-size: 1.5rem;
  }
  
  .hero__cta-button {
    width: 100%;
  }
  
  .services__title, 
  .benefits__title, 
  .statistics__title, 
  .testimonials__title, 
  .contact__title {
    font-size: 1.5rem;
  }
  
  .contact__form {
    padding: var(--spacing-md);
  }
  
  .contact__form-submit {
    width: 100%;
  }
  
  /* Adjust background image blur for small screens */
  .hero::after,
  .benefits::after,
  .contact::after {
    filter: blur(5px);
    opacity: 0.05;
  }
} 