/* ==================================================
   LAYOUT COMPONENT - Section Structure & Grid
   ================================================== */

/* Main container */
#the-problem-container {
  position: relative;
  z-index: auto; /* avoid overlapping the global header */
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Section wrapper */
#the-problem-container .problem-section {
  width: 100%;
  padding-top: 10rem;
  padding-bottom: 6rem;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
  z-index: auto; /* allow header to stay on top */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* ==================== TITLE SECTION ==================== */

#the-problem-container .problem-title {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: auto;
  /* Same as TestimonialsSection title - handled by Tailwind classes in HTML */
}

#the-problem-container .problem-subtitle {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 3rem auto;
  position: relative;
  z-index: auto;
  /* Same as FAQ subtitle - handled by Tailwind classes in HTML */
}

/* ==================== CARDS GRID SECTION ==================== */

#the-problem-container .problem-cards {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: auto;
}

#the-problem-container .cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  --row-h: clamp(150px, 16vw, 200px);
  --row-mid-h: clamp(70px, 7.5vw, 110px);
  grid-template-rows: var(--row-h) var(--row-mid-h) var(--row-h);
}

/* Card placement */
#the-problem-container .card-a { grid-column: 1; grid-row: 1 / span 2; }
#the-problem-container .card-b { grid-column: 2; grid-row: 1 / span 1; }
#the-problem-container .card-d { grid-column: 2; grid-row: 2 / span 2; }
#the-problem-container .card-c { grid-column: 1; grid-row: 3 / span 1; }

/* ==================== SECTION SEPARATOR ==================== */

/* Specific styling for separator in problem section only */
.problem-section-separator .separator4-instance {
  margin: 4rem 0 1rem !important;
}

/* ==================== MOBILE LAYOUT ==================== */

@media (max-width: 900px) {
  #the-problem-container .problem-section {
    padding-top: 6rem;
    padding-bottom: 4rem;
    gap: 3rem;
  }
  
  #the-problem-container .cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 250px; /* Increased from 200px to 250px for better text accommodation */
    gap: 16px; /* Slightly increased gap */
    display: flex;
    flex-direction: column;
  }
  
  /* Mobile card reordering - Card B "Une progression beaucoup trop lente" first */
  #the-problem-container .card-b { order: 1; } /* "Une progression beaucoup trop lente" en premier */
  #the-problem-container .card-a { order: 2; } /* "Des commerciaux sous-équipés" */  
  #the-problem-container .card-c { order: 3; } /* "CRM qui surveillent..." */
  #the-problem-container .card-d { order: 4; } /* "Des directeurs débordés" */
  
  #the-problem-container .card-a,
  #the-problem-container .card-b,
  #the-problem-container .card-c,
  #the-problem-container .card-d {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  #the-problem-container .problem-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}