/* Company Profile Mobile Responsive Fixes */

/* Base responsive adjustments */
@media (max-width: 768px) {
  /* Container adjustments */
  #company-profile {
    padding: 120px 0 100px;
  }
  
  .company-profile-cards {
    margin-top: 2rem;
  }
  
  .cards-container {
    gap: 1.25rem;
    margin-top: 1.5rem;
  }
  
  /* Card padding and spacing */
  .profile-card {
    padding: 1.5rem;
    border-radius: 1.25rem;
  }
  
  /* Header adjustments */
  .card-header {
    margin-bottom: 1.25rem;
  }
  
  .card-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  .card-title {
    font-size: 1.125rem;
    font-weight: 600;
  }
  
  /* Stats grid optimization */
  .stats-grid {
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
  
  .stat-item {
    min-height: 65px;
    padding: 0.625rem 0.375rem;
  }
  
  .stat-number {
    font-size: 1.125rem;
    margin-bottom: 0.15rem;
  }
  
  .stat-label {
    font-size: 0.65rem;
    line-height: 1.2;
  }
  
  /* Description text optimization */
  .card-description {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
  }
  
  /* Features grid spacing */
  .features-grid {
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  
  .feature-item {
    padding: 0.625rem;
  }
  
  .feature-icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
    margin-right: 0.625rem;
  }
  
  .feature-text {
    font-size: 0.8125rem;
  }
  
  /* Badges container */
  .badges-container {
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  
  .badge {
    padding: 0.4375rem 0.625rem;
    font-size: 0.7rem;
  }
  
  .badge i {
    margin-right: 0.3125rem;
    font-size: 0.7rem;
  }
}

/* Small mobile devices (480px and below) */
@media (max-width: 480px) {
  /* Further reduce padding and spacing */
  #company-profile {
    padding: 100px 0 80px;
  }
  
  .company-profile-cards {
    margin-top: 1.5rem;
  }
  
  .cards-container {
    gap: 1rem;
  }
  
  .profile-card {
    padding: 1.25rem;
    border-radius: 1rem;
  }
  
  /* Adjust stats for very small screens */
  .stat-item {
    min-height: 60px;
    padding: 0.5rem 0.25rem;
  }
  
  .stat-number {
    font-size: 1rem;
  }
  
  .stat-label {
    font-size: 0.6rem;
    max-height: 3.6em; /* Allow more lines for very long labels */
  }
  
  /* Adjust text sizes */
  .card-description {
    font-size: 0.8125rem;
  }
  
  .feature-text {
    font-size: 0.75rem;
  }
  
  .badge {
    padding: 0.375rem 0.5rem;
    font-size: 0.65rem;
  }
}

/* Tiny mobile devices (360px and below) */
@media (max-width: 360px) {
  /* Extreme small screen optimizations */
  .card-icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.375rem;
  }
  
  .card-title {
    font-size: 1rem;
  }
  
  .feature-icon {
    width: 1.625rem;
    height: 1.625rem;
    font-size: 0.8125rem;
  }
}

/* Touch target optimization for mobile devices */
@media (hover: none) and (pointer: coarse) {
  .feature-item,
  .stat-item,
  .badge {
    cursor: pointer;
  }
  
  .feature-item:active,
  .badge:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Ensure proper text wrapping and prevent overflow */
.profile-card {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.card-description,
.feature-text,
.stat-label {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Optimize animation for mobile performance */
@media (max-width: 768px) {
  .profile-card {
    animation-duration: 0.5s;
  }
  
  .profile-card:nth-child(2) {
    animation-delay: 0.15s;
  }
  
  .profile-card:nth-child(3) {
    animation-delay: 0.3s;
  }
}

/* Improve contrast and readability on mobile */
@media (max-width: 768px) {
  .stat-number,
  .card-title,
  .feature-text {
    color: #111827; /* Slightly darker for better contrast on mobile screens */
  }
  
  .card-description {
    color: #4b5563;
  }
}