/* ==================================================
   CARD D COMPONENT - "Des directeurs débordés"
   ================================================== */

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

/* Fine-tune Card D position and spacing */
#the-problem-container .card-d .lg-card {
  padding-left: 1rem; /* reduced to shift content left */
  padding-right: 0.5rem; /* reduce right padding to prevent text cutoff */
}

#the-problem-container .card-d-headline {
  gap: 1.25rem; /* slightly tighter spacing between image and text */
  margin-left: -0.75rem; /* shift headline content slightly left */
}

/* Nudge Card D text slightly left */
#the-problem-container .card-d-headline .text-container {
  margin-left: -1rem;
}

#the-problem-container .card-d-headline .horloge-image {
  width: 15rem;
  height: 15rem;
  object-fit: contain;
}

#the-problem-container .card-d-headline .text-container .subtitle {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.3;
}

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

/* Reinstate frosted backdrop for Card D (neutral style) */
#the-problem-container .card-d .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 D */
#the-problem-container .card-d .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 D (neutral style) */
#the-problem-container .card-d .lg-card .lg-card__ring,
#the-problem-container .card-d .lg-card .lg-card__innerband,
#the-problem-container .card-d .lg-card .lg-card__innerfeather {
  display: none !important;
}

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

#the-problem-container .card-d .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-d-headline .horloge-image {
    width: 7rem;
    height: 7rem;
  }
  
  /* Special handling for Card D - reduce height */
  #the-problem-container .card-d .lg-card {
    min-height: 200px; /* Reduced height for card D */
    padding: 2rem; /* Reduced padding */
  }
  
  /* Reset desktop positioning overrides on mobile */
  #the-problem-container .card-d-headline .text-container {
    margin-left: 0; /* Reset desktop text shift */
  }
  
  #the-problem-container .card-d-headline .text-container .subtitle {
    font-size: 0.85rem;
    margin-top: 0.75rem;
    line-height: 1.4;
  }
}