/**
 * FoksTech Responsive Styles
 * Breakpoints: 1440px, 1024px, 768px, 430px, 375px, 320px.
 * Tested for zero horizontal overflow, touch targets, and readable typography.
 */

/* ==========================================================================
   LAPTOP & SMALL DESKTOP (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Switch to mobile hamburger navigation at <= 1024px to prevent header link wrapping */
  .desktop-nav {
    display: none !important;
  }

  .header-actions .btn-whatsapp {
    display: none;
  }

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

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }

  .hero-content {
    align-items: center;
    margin: 0 auto;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

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

  .hero-3d-wrapper {
    order: -1;
    height: 380px;
  }

  #hero-3d-container {
    max-width: 380px;
    height: 380px;
  }

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

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

  .project-cta-banner {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .project-cta-content {
    max-width: 100%;
  }
}

/* ==========================================================================
   TABLET PORTRAIT (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .header-container {
    height: 64px;
  }

  .mobile-drawer {
    top: 64px;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .highlights-grid {
    grid-template-columns: 1fr;
  }

  /* Product Hero Responsive Grid */
  .product-hero-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    justify-items: center;
    gap: var(--space-6);
  }

  .product-hero-info {
    text-align: center;
  }

  .product-badges {
    justify-content: center;
  }

  .product-hero-actions {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .contact-channels-row {
    grid-template-columns: 1fr;
  }

  .about-details-box {
    grid-template-columns: 1fr;
  }

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

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

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

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

  /* Chatbot Window on Mobile */
  .chatbot-window {
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    height: 82vh;
    border-radius: var(--radius-lg);
  }

  #fokstech-chatbot-widget {
    bottom: 16px;
    right: 16px;
  }

  .chatbot-trigger {
    width: 54px;
    height: 54px;
  }

  .hero-3d-wrapper {
    height: 320px;
  }

  #hero-3d-container {
    max-width: 320px;
    height: 320px;
  }

  .hero-brand-badge-overlay {
    width: 105px;
    height: 105px;
  }
}

/* ==========================================================================
   SMARTPHONES (<= 430px)
   ========================================================================== */
@media (max-width: 430px) {
  :root {
    --container-padding: 1rem;
  }

  .hero-headline {
    font-size: 2.2rem;
  }

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

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

  .service-card,
  .project-card {
    padding: var(--space-5);
  }

  .project-cta-banner {
    padding: var(--space-6) var(--space-4);
  }

  .hero-3d-wrapper {
    height: 280px;
  }

  #hero-3d-container {
    max-width: 280px;
    height: 280px;
  }

  .hero-brand-badge-overlay {
    width: 85px;
    height: 85px;
  }

  .brand-name-text {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   COMPACT SMARTPHONES (<= 375px & 320px)
   ========================================================================== */
@media (max-width: 375px) {
  .brand-logo-img {
    height: 32px;
  }

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

  .hero-headline {
    font-size: 1.9rem;
  }

  .section-title {
    font-size: 1.55rem;
  }

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

@media (max-width: 320px) {
  .hero-headline {
    font-size: 1.7rem;
  }

  .project-title,
  .service-title {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .mobile-drawer,
  #fokstech-chatbot-widget,
  #site-preloader,
  .btn,
  .footer-back-to-top {
    display: none !important;
  }

  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
}