/**
 * Mobile Responsive Fixes for Hi.AI Design
 * Prevents text overflow and ensures proper responsive behavior
 */

/* ===== GLOBAL OVERFLOW PREVENTION ===== */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

* {
  box-sizing: border-box;
}

/* ===== NAVIGATION OVERFLOW FIX ===== */
/* Only apply overflow hidden to the body to prevent page scroll */
/* We remove it from internal elements so shadows/glows aren't clipped */

/* ===== CONTAINER FIXES ===== */
.site-container,
.container,
section {
  max-width: 100%;
}

/* ===== TEXT OVERFLOW FIXES ===== */
h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* ===== IMAGE RESPONSIVE FIXES ===== */
img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

.service-icon img,
.agent-logo-shine img,
.card img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ===== MOBILE BREAKPOINTS ===== */

/* Extra Small Devices (Portrait Phones, less than 576px) */
@media (max-width: 575.98px) {
  /* Typography */
  h1 { font-size: 1.75rem !important; line-height: 1.2; }
  h2 { font-size: 1.5rem !important; line-height: 1.3; }
  h3 { font-size: 1.25rem !important; line-height: 1.3; }
  h4 { font-size: 1.1rem !important; }
  p { font-size: 0.95rem !important; line-height: 1.6; }
  
  /* Container padding */
  .site-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Service cards */
  .service-card {
    padding: 1.5rem !important;
    margin-bottom: 1.5rem;
  }
  
  .service-card h3 {
    font-size: 1.1rem !important;
    line-height: 1.3;
  }
  
  .service-card p {
    font-size: 0.9rem !important;
  }
  
  /* Service icons */
  .service-icon > div {
    width: 100px !important;
    height: 100px !important;
  }
  
  .service-icon img {
    max-width: 80px !important;
    max-height: 80px !important;
  }
  
  /* Agent cards */
  .agent-card-wrapper {
    margin-bottom: 1.5rem;
  }
  
  /* Grid adjustments */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Navigation */
  nav {
    padding: 0.5rem 1rem !important;
  }
  
  .nav-logo img {
    max-width: 100px !important;
  }
}

/* Small Devices (Landscape Phones, 576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.35rem !important; }
  
  .site-container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  
  .service-icon > div {
    width: 120px !important;
    height: 120px !important;
  }
  
  .service-icon img {
    max-width: 100px !important;
    max-height: 100px !important;
  }
}

/* Medium Devices (Tablets, 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  h1 { font-size: 2.25rem !important; }
  h2 { font-size: 2rem !important; }
  h3 { font-size: 1.5rem !important; }
  
  .site-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  .grid.grid-cols-1.lg\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .service-icon > div {
    width: 140px !important;
    height: 140px !important;
  }
  
  .service-icon img {
    max-width: 120px !important;
    max-height: 120px !important;
  }
}

/* Large Devices (Desktops, 992px to 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  .grid.grid-cols-1.lg\\:grid-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Extra Large Devices (Large Desktops, 1200px and up) */
@media (min-width: 1200px) {
  .site-container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .grid.grid-cols-1.lg\\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ===== SPECIFIC COMPONENT FIXES ===== */

/* Hero Section */
@media (max-width: 767.98px) {
  .hero-tagline {
    font-size: 1.5rem !important;
    line-height: 1.3;
    padding: 0 1rem;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
    padding: 0 1rem;
  }
  
  .hero-logo-img {
    max-width: 200px !important;
  }
}

/* Service Cards Grid */
@media (max-width: 991.98px) {
  .service-card .grid {
    grid-template-columns: 1fr !important;
  }
}

/* Agent Cards */
@media (max-width: 767.98px) {
  .agents-grid-dynamic {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }
  
  .agent-card-wrapper {
    max-width: 100%;
  }
}

/* Why Choose Cards */
@media (max-width: 767.98px) {
  .why-choose-card {
    padding: 1.5rem !important;
  }
  
  .why-choose-icon-container {
    width: 80px !important;
    height: 80px !important;
  }
}

/* Footer */
@media (max-width: 767.98px) {
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ===== LANDSCAPE ORIENTATION FIX ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    min-height: auto !important;
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
  }
  
  .service-card,
  .agent-card-wrapper,
  .why-choose-card {
    margin-bottom: 1rem;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .nav-mobile-menu-btn,
  .theme-toggle,
  .lang-toggle {
    display: none !important;
  }
  
  * {
    overflow: visible !important;
  }
}