/**
 * DSG Blocks — Plugin Styles
 * Styles for custom block patterns and utility classes.
 * These extend the base styles in THEME.md Additional CSS.
 */

/* ============================================================
   PROBLEM LIST — styled card items
   ============================================================ */
ul.dsg-problem-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
ul.dsg-problem-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: #fff;
  border-radius: 8px;
  border-left: 3px solid #D8DCE4;
  box-shadow: 0 1px 4px rgba(45,62,80,0.07);
  font-size: 0.9375rem;
  color: #4A5568;
  line-height: 1.55;
  transition: border-color 0.2s ease;
}
ul.dsg-problem-list li:hover {
  border-left-color: #7BBFBC;
}
ul.dsg-problem-list li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8A9BB0;
  flex-shrink: 0;
  margin-top: 0.45rem;
}

/* ============================================================
   STEP NUMBERS
   ============================================================ */
.dsg-step-num {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  color: rgba(123, 191, 188, 0.25) !important;
  line-height: 1 !important;
  margin-bottom: 0.875rem !important;
}

/* ============================================================
   EYEBROW TEXT
   ============================================================ */
.dsg-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #5A9E9B !important;
  margin-bottom: 0.75rem !important;
}

/* ============================================================
   DARK SECTION UTILITY
   ============================================================ */
.dsg-dark {
  background-color: #1E2D3D !important;
}
.dsg-dark h1,
.dsg-dark h2,
.dsg-dark h3,
.dsg-dark h4,
.dsg-dark h5,
.dsg-dark h6 {
  color: #ffffff !important;
}
.dsg-dark p,
.dsg-dark li {
  color: #B8C6D4 !important;
}

/* ============================================================
   CARDS
   ============================================================ */
.dsg-card {
  background: #ffffff !important;
  border: 1px solid #D8DCE4 !important;
  border-radius: 8px !important;
  padding: 2rem !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  height: 100%;
}
.dsg-card:hover {
  box-shadow: 0 4px 20px rgba(45,62,80,0.13) !important;
  transform: translateY(-3px);
}

/* ============================================================
   TESTIMONIAL QUOTE MARK
   ============================================================ */
.dsg-quote {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 4.5rem !important;
  color: #7BBFBC !important;
  opacity: 0.3;
  line-height: 1 !important;
  margin-bottom: -1.25rem !important;
  padding: 0 !important;
}
.dsg-quote::before {
  content: '\201C';
}

/* ============================================================
   STAT DISPLAY
   ============================================================ */
.dsg-stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  font-weight: 700 !important;
  color: #7BBFBC !important;
  line-height: 1 !important;
  display: block;
}
.dsg-stat-label {
  font-size: 0.78rem !important;
  color: #8A9BB0 !important;
  letter-spacing: 0.05em !important;
  margin-top: 0.35rem;
}

/* ============================================================
   ACCENT LINE
   ============================================================ */
.dsg-accent-line {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #7BBFBC, #6BA368);
  border-radius: 2px;
  border: none;
  margin: 1rem 0 1.5rem;
}

/* ============================================================
   FADE ANIMATION
   ============================================================ */
.dsg-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.dsg-fade.dsg-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  .dsg-step-num { font-size: 2.5rem !important; }
  ul.dsg-problem-list li { padding: 1rem 1.125rem; }
  .dsg-card { padding: 1.5rem !important; }
}