/**
 * HAS Responsive Stylesheet — Breakpoints & Viewport Adaptations
 * Brand: HAS (HEX Automation Services)
 * Tested Across: 320px, 360px, 375px, 390px, 414px, 480px, 768px, 820px, 1024px, 1280px, 1440px, 1920px
 */

/* -------------------------------------------------------------------------
 * Large Displays & Ultrawide (>= 1440px)
 * ------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --has-max-width: 1320px;
  }
}

/* -------------------------------------------------------------------------
 * Laptops & Tablets Landscape (<= 1024px)
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .has-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--has-space-10);
  }

  .has-hero {
    padding-top: calc(var(--has-space-10) + var(--has-header-height));
    min-height: auto;
  }

  .has-process-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--has-space-4);
  }

  .has-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--has-space-8);
  }
}

/* -------------------------------------------------------------------------
 * Tablets Portrait (<= 820px)
 * ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .has-process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .has-form-grid {
    grid-template-columns: 1fr;
    gap: var(--has-space-4);
  }
}

/* -------------------------------------------------------------------------
 * Mobile Devices (<= 768px)
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --has-header-height: 64px;
  }

  .has-section {
    padding-top: var(--has-space-12);
    padding-bottom: var(--has-space-12);
  }

  .has-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
  }

  .has-nav-menu {
    position: fixed;
    top: var(--has-header-height);
    left: 0;
    width: 100%;
    background: #07090e;
    border-bottom: 1px solid var(--has-border-medium);
    flex-direction: column;
    align-items: stretch;
    padding: var(--has-space-4) var(--has-space-6);
    gap: var(--has-space-2);
    display: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  }

  .has-nav-menu.active {
    display: flex;
  }

  .has-nav-link {
    display: flex;
    align-items: center;
    min-height: 48px; /* 48px touch target */
    font-size: var(--has-text-base);
    padding: var(--has-space-2) var(--has-space-4);
    border-radius: var(--has-radius-md);
  }

  .has-nav-link:hover {
    background: var(--has-bg-card);
  }

  .has-hero-metrics {
    grid-template-columns: 1fr;
    gap: var(--has-space-3);
  }

  .has-process-steps {
    grid-template-columns: 1fr;
  }

  .has-form-container {
    padding: var(--has-space-6);
    border-radius: var(--has-radius-lg);
  }

  /* Prevent iOS Safari automatic zoom on focus */
  .has-form-control,
  select.has-form-control,
  textarea.has-form-control {
    font-size: 16px !important;
    min-height: 48px;
  }

  .has-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--has-space-8);
  }

  .has-footer-bottom {
    flex-direction: column;
    gap: var(--has-space-4);
    text-align: center;
  }
}

/* -------------------------------------------------------------------------
 * Small Mobile Phones (<= 480px)
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .has-container {
    padding-left: var(--has-space-4);
    padding-right: var(--has-space-4);
  }

  .has-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .has-hero-subtitle {
    font-size: var(--has-text-sm);
  }

  .has-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--has-space-3);
  }

  .has-hero-actions .has-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .has-service-card,
  .has-portfolio-card {
    padding: var(--has-space-6);
  }

  .has-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--has-space-4);
  }

  .has-card-footer .has-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .has-terminal-body {
    font-size: 11px;
    padding: var(--has-space-4);
  }
}

/* -------------------------------------------------------------------------
 * Extra Narrow Devices (<= 360px, e.g. iPhone SE 1st Gen)
 * ------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .has-container {
    padding-left: var(--has-space-3);
    padding-right: var(--has-space-3);
  }

  .has-service-card,
  .has-portfolio-card,
  .has-form-container {
    padding: var(--has-space-4);
  }

  .has-section-title {
    font-size: 1.5rem;
  }
}