/* ============================================================
   MOBILE CARD FIX - COMPLETE REDESIGN FOR SYMMETRICAL ALIGNMENT
   ============================================================ */

/* Apply to mobile devices only */
@media (max-width: 768px) {
  
  /* ========== CONTAINER RESET ========== */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  
  /* ========== CARD GRID CONTAINERS ========== */
  .category-cards,
  .blog-grid,
  .why-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* ========== INDIVIDUAL CARDS ========== */
  .category-card,
  .blog-card,
  .why-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* ========== CARD IMAGES - FULL BLEED TO VIEWPORT ========== */
  .category-card-img-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: -24px !important;
    margin-bottom: 20px !important;
    height: 250px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .category-card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  .blog-card-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  }
  
  .blog-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  /* ========== CARD ICONS ========== */
  .category-icon,
  .why-card-icon {
    margin: 0 auto 16px auto !important;
  }
  
  /* ========== CARD TEXT ========== */
  .category-card h3,
  .blog-card h3,
  .why-card h3 {
    text-align: center !important;
    width: 100% !important;
  }
  
  .category-card p,
  .blog-card p,
  .why-card p {
    text-align: center !important;
    width: 100% !important;
  }
  
  /* ========== CARD BUTTONS ========== */
  .category-card .btn,
  .blog-card .btn,
  .why-card .btn {
    margin: 0 auto !important;
    align-self: center !important;
  }
  
  /* ========== BLOG CARD BODY ========== */
  .blog-card-body {
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .blog-card-meta {
    justify-content: center !important;
    width: 100% !important;
  }
  
  .blog-card-footer {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* ========== STAT HIGHLIGHTS ========== */
  .stat-highlight {
    margin: 0 auto !important;
  }
  
  /* ========== REMOVE ANY TRANSFORMS ON MOBILE ========== */
  .category-card:hover,
  .blog-card:hover,
  .why-card:hover {
    transform: none !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .category-card,
  .blog-card,
  .why-card {
    padding: 20px 16px !important;
  }
  
  .category-card-img-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: -20px !important;
    margin-bottom: 16px !important;
    height: 220px !important;
  }
  
  .blog-card-image {
    height: 200px !important;
  }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  
  .category-card,
  .blog-card,
  .why-card {
    padding: 18px 14px !important;
  }
  
  .category-card-img-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: -18px !important;
    margin-bottom: 14px !important;
    height: 200px !important;
  }
  
  .blog-card-image {
    height: 180px !important;
  }
}