/*
 * ============================================================================
 * INFOGRAPHICS STYLING - ADD TO END OF reskin.css
 * ============================================================================
 * Styles the conditional infographic images that appear based on hl/lst params
 * ============================================================================
 */

/* ============================================================================
   INFOGRAPHIC CONTAINER SECTIONS
   ============================================================================ */

#infographicDiv,
#NoInfographicDiv {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-top: 1px solid var(--bpl-gray-200, #e2e8f0) !important;
  border-bottom: 1px solid var(--bpl-gray-200, #e2e8f0) !important;
  padding: 3rem 0 !important;
}

/* ============================================================================
   INDIVIDUAL INFOGRAPHIC IMAGES - Card-like treatment
   ============================================================================ */

#infographicDiv img,
#NoInfographicDiv img,
#infographicSpan img,
#VSinfographicSpan img,
#SingleVSinfographicSpan img {
  background: #fff !important;
  border: 1px solid var(--bpl-gray-200, #e2e8f0) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
              0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
  padding: 1rem !important;
  transition: all 0.3s ease !important;
  max-width: 100% !important;
  height: auto !important;
}

#infographicDiv img:hover,
#NoInfographicDiv img:hover,
#infographicSpan img:hover,
#VSinfographicSpan img:hover,
#SingleVSinfographicSpan img:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 
              0 4px 6px -4px rgba(0, 0, 0, 0.03) !important;
  transform: translateY(-4px) !important;
  border-color: var(--bpl-accent, #6eb441) !important;
}

/* ============================================================================
   INFOGRAPHIC LINK WRAPPERS
   ============================================================================ */

#infographicSpan a,
#VSinfographicSpan a,
#SingleVSinfographicSpan a,
#infographicDiv a,
#NoInfographicDiv a {
  display: inline-block !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* ============================================================================
   COLUMN SPACING - Better gap between side-by-side infographics
   ============================================================================ */

#infographicDiv .row,
#NoInfographicDiv .row {
  justify-content: center !important;
  gap: 1.5rem !important;
}

#infographicDiv .col-xl-4,
#infographicDiv .col-lg-4,
#infographicDiv .col-md-4,
#NoInfographicDiv .col-xl-4,
#NoInfographicDiv .col-lg-4,
#NoInfographicDiv .col-md-4 {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* ============================================================================
   OPTIONAL: Section heading if you want to add one via CSS
   ============================================================================ */

#infographicDiv .container::before,
#NoInfographicDiv .container::before {
  content: '' !important; /* Empty by default - can add text if desired */
  display: block !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--bpl-accent, #6eb441) !important;
  margin-bottom: 1.5rem !important;
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
  
  #infographicDiv,
  #NoInfographicDiv {
    padding: 2rem 0.5rem !important;
  }
  
  #infographicDiv img,
  #NoInfographicDiv img,
  #infographicSpan img,
  #VSinfographicSpan img,
  #SingleVSinfographicSpan img {
    padding: 0.75rem !important;
    border-radius: 10px !important;
    margin-bottom: 1rem !important;
  }
  
  #infographicDiv .row,
  #NoInfographicDiv .row {
    gap: 1rem !important;
  }
  
  #infographicDiv img:hover,
  #NoInfographicDiv img:hover {
    transform: translateY(-2px) !important;
  }
}

/* ============================================================================
   SINGLE INFOGRAPHIC (NoInfographicDiv) - Center it nicely
   ============================================================================ */

#NoInfographicDiv .container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#NoInfographicDiv .row {
  width: 100% !important;
  max-width: 600px !important;
}