/* Responsive Breakpoints & Mobile Optimization */

/* Tablets & Small Laptops (<= 1024px) */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .hero-content {
    text-align: center;
    align-items: center;
  }

  .hero-eyebrow {
    align-self: center;
  }

  .hero-secondary-text {
    border-left: none;
    padding-left: 0;
  }

  .hero-actions {
    justify-content: center;
  }

  .trust-line {
    justify-content: center;
  }

  .personal-brand-grid {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    gap: var(--space-8);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .process-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .remote-architecture-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablets & Mobile Devices (<= 768px) */
@media (max-width: 768px) {
  /* Navigation */
  .nav-desktop {
    display: none;
  }

  .mobile-toggle {
    display: inline-flex;
  }

  /* Sticky Mobile Bottom Bar */
  .sticky-mobile-bar {
    display: block;
  }

  /* Prevent bottom content from being obscured by sticky mobile bar */
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* Prevent iOS Safari auto-zoom on input focus by keeping 16px font size */
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control {
    font-size: 16px;
  }

  /* Grid adaptations — use minmax(0, 1fr) to prevent content blowout */
  .grid-2,
  .pricing-grid,
  .form-grid,
  .service-toggle-grid,
  .ecosystem-grid,
  .principles-grid,
  .stats-strip,
  .grid-3,
  .grid-4,
  .process-timeline,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ensure all grid children never expand past column width */
  .grid-2 > *,
  .pricing-grid > *,
  .form-grid > *,
  .service-toggle-grid > *,
  .ecosystem-grid > *,
  .principles-grid > *,
  .stats-strip > *,
  .grid-3 > *,
  .grid-4 > *,
  .process-timeline > *,
  .footer-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Cards & Forms Padding */
  .card-pricing {
    padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
  }

  .form-card {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.15rem, 3vw, 1.5rem);
  }

  /* Qualification Widget Mobile Padding */
  .qualification-widget {
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 3vw, 1.5rem);
    border-radius: var(--radius-lg);
  }

  .qualification-widget .card {
    padding: clamp(1.25rem, 3.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.25rem);
    border-radius: var(--radius-md);
  }

  /* Buttons on Mobile */
  .btn {
    white-space: normal;
    padding: 0.75rem 1.15rem;
  }

  .btn-lg {
    padding: 0.85rem 1.35rem;
    font-size: var(--text-sm);
  }

  /* Image Wrappers */
  .hero-image-wrapper {
    max-width: 100%;
    width: 100%;
  }

  /* Section Spacing */
  .section,
  .personal-brand-section {
    padding-top: clamp(3rem, 7vw, 4.25rem);
    padding-bottom: clamp(3rem, 7vw, 4.25rem);
  }

  .hero {
    padding-top: clamp(2.5rem, 6vw, 3.5rem);
    padding-bottom: clamp(3rem, 7vw, 4.25rem);
  }
}

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

  /* Header Branding */
  .logo-brand-mark {
    height: 38px;
    max-width: calc(100vw - 110px);
  }

  /* Hero adjustments */
  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }

  .hero-actions .btn {
    width: 100%;
  }

  .pricing-amount {
    font-size: 2.35rem;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  /* Qualification Widget on Small Screens */
  .qualification-widget {
    padding: 1.35rem 0.85rem;
    border-radius: var(--radius-md);
  }

  .qualification-widget .card {
    padding: 1.15rem 0.75rem;
  }

  .qualification-widget h2 {
    font-size: 1.35rem;
  }

  /* Service choice radio cards */
  .radio-card-body {
    padding: var(--space-3);
  }

  .radio-card-title {
    font-size: var(--text-sm);
  }

  .radio-card-price {
    font-size: var(--text-base);
  }

  /* WhatsApp Preview Box */
  .whatsapp-preview-box {
    padding: var(--space-3);
  }

  .whatsapp-preview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Sticky Mobile Bar */
  .sticky-mobile-bar {
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }

  .sticky-mobile-actions .btn {
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
  }

  /* Footer adaptations */
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
    align-items: center;
  }

  .footer-ecosystem {
    padding: var(--space-4);
  }

  .ecosystem-list {
    flex-direction: column;
    gap: var(--space-2);
  }

  .ecosystem-item:nth-child(even) {
    display: none;
  }
}

/* Extra Small Phones (<= 360px) */
@media (max-width: 360px) {
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .card-pricing,
  .form-card {
    padding: var(--space-4) var(--space-3);
  }

  .qualification-widget {
    padding: 1.15rem 0.65rem;
  }

  .qualification-widget .card {
    padding: 1rem 0.65rem;
  }

  .btn {
    font-size: var(--text-xs);
    padding: 0.65rem 0.75rem;
  }
}