/* ==================================================
   CARD A COMPONENT - "Des commerciaux sous-équipés"
   ================================================== */

/* ==================== DESKTOP STYLES ==================== */

/* Fine-tune Card A position and spacing */
#the-problem-container .card-a .lg-card {
  padding-left: 1.5rem; /* move content slightly left */
}

#the-problem-container .card-a-headline {
  gap: 1.25rem; /* slightly tighter spacing between image and text */
  padding-left: 0; /* remove extra left padding on headline */
}

#the-problem-container .card-a-headline .commerciaux-image {
  width: 13rem;
  height: 13rem;
  object-fit: contain;
}

/* Prevent hyphen break for 'sous-équipés' on desktop */
#the-problem-container .card-a-headline .text-container .ai-multicolor-flat {
  white-space: nowrap;
}

/* ==================== NEUTRAL STYLING ==================== */

/* Reinstate frosted backdrop for Card A (neutral style) */
#the-problem-container .card-a .lg-card__backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-clip: padding-box;
}

/* Neutral border/shadow for Card A */
#the-problem-container .card-a .lg-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.02),
    inset 0 1px 2px rgba(100, 180, 255, 0.04),
    inset 0 -1px 2px rgba(0, 0, 0, 0.01);
}

/* Hide inner ring/glow elements for Card A (neutral style) */
#the-problem-container .card-a .lg-card .lg-card__ring,
#the-problem-container .card-a .lg-card .lg-card__innerband,
#the-problem-container .card-a .lg-card .lg-card__innerfeather {
  display: none !important;
}

/* Disable pulsating animation for Card A */
#the-problem-container .card-a .lg-card.pulsating-illumination {
  animation: none !important;
}

#the-problem-container .card-a .lg-card.pulsating-illumination::after {
  animation: none !important;
  opacity: 0 !important;
}

/* ==================== MOBILE STYLES ==================== */

@media (max-width: 768px) {
  /* Optimized mobile image sizes for better text space */
  #the-problem-container .card-a-headline .commerciaux-image {
    width: 6rem;
    height: 6rem;
  }
  
  /* Allow text wrapping on mobile */
  #the-problem-container .card-a-headline .text-container .ai-multicolor-flat {
    white-space: normal;
  }
}