/**
 * Aether AI — Premium Consulting & Strategy
 * Responsive Design Stylesheet
 */

/* Large Desktop (1440px and above) */
@media (min-width: 1440px) {
  .hero-wrapper {
    min-height: 840px;
  }
  .floating-cards-row {
    gap: 1.5rem;
  }
}

/* Laptop & Medium Desktop (992px to 1199px) */
@media (max-width: 1199.98px) {
  .floating-cards-row {
    gap: 1rem;
  }
  .floating-card {
    padding: 1.15rem;
  }
  .card-angle-1 {
    transform: rotate(-2deg) translateY(8px);
  }
  .card-angle-4 {
    transform: rotate(2deg) translateY(10px);
  }
}

/* Tablet (768px to 991px) */
@media (max-width: 991.98px) {
  .site-header {
    padding: 1rem 0;
  }
  
  .floating-cards-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    perspective: none;
  }
  
  .floating-card {
    flex: 0 0 calc(50% - 1rem);
    max-width: none;
    transform: none !important;
  }

  .bento-card {
    padding: 1.75rem;
  }

  .site-footer {
    padding-top: 4rem;
  }
}

/* Mobile Devices (576px to 767px) */
@media (max-width: 767.98px) {
  .section-padding {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .section-padding-top {
    padding-top: 3.5rem;
  }
  .section-padding-bottom {
    padding-bottom: 3.5rem;
  }

  .floating-cards-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .floating-card {
    flex: 1 1 100%;
    transform: none !important;
  }
  
  /* Hide 4th card on small screen to keep mobile hero compact */
  .floating-card:nth-child(4) {
    display: none;
  }

  .logo-strip {
    justify-content: center;
    gap: 1.5rem;
  }

  .cta-banner {
    padding: 2.5rem 1.5rem;
    text-align: center;
  }

  .filter-btn-group {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  
  .filter-btn {
    white-space: nowrap;
  }

  .site-footer {
    text-align: left;
  }
}

/* Small Mobile (< 576px) */
@media (max-width: 575.98px) {
  .container-custom {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .hero-wrapper {
    padding-top: 7rem;
    padding-bottom: 4rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn-pill {
    width: 100%;
  }

  .bento-stat {
    font-size: 2.25rem;
  }

  .back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 38px;
    height: 38px;
  }
}

/* Touch targets and accessible interaction */
button, a, input, select, textarea {
  touch-action: manipulation;
}