/* ==================================================
   CARD B COMPONENT - "Une progression beaucoup TROP lente" (FEATURED)
   ================================================== */

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

/* Center the Search-style card container only for card-b */
#the-problem-container .card-b.feature-card-container {
  justify-content: center;
  align-items: center;
}

/* Center card content on desktop */
#the-problem-container .card-b .lg-card {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1.5rem;
}

#the-problem-container .card-b-headline .snail-logo {
  width: 7rem;
  height: 7rem;
  object-fit: contain;
}

/* ==================== FEATURED CARD SPECIAL EFFECTS ==================== */

/* Card B special glow effect - like MeetingPrepSection */
#the-problem-container .card-b.feature-card-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  z-index: 0;
  pointer-events: none;
  background: var(--ring-gradient);
  padding: calc(var(--ring-width) + var(--outer-glow-spread));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(var(--outer-glow-blur)) saturate(140%) brightness(135%);
  opacity: .78;
  transition: opacity 400ms ease, filter 400ms ease;
}

#the-problem-container .card-b.feature-card-container:hover::before {
  opacity: .90;
  filter: blur(calc(var(--outer-glow-blur) + 2px)) saturate(155%) brightness(145%);
}

/* ==================== DISABLE PULSATING ANIMATION ==================== */

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

#the-problem-container .card-b .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-b-headline .snail-logo {
    width: 5rem;
    height: 5rem;
  }
  
  /* Special handling for Card B - reduce height and center content on mobile */
  #the-problem-container .card-b .lg-card {
    min-height: 160px; /* Further reduced height for card B on mobile */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
  }
}