/* =============================================================================
   Divi legacy-content overrides (child theme)
   Small, targeted fixes for Divi-built page sections that can't be solved in
   the builder cleanly. Loaded site-wide after header/footer CSS.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Homepage stats block — "23 years of experience / 16 qualified professionals /
   5 areas of practice / 5 service languages" (Divi Number Counter row,
   .custom-2x2-grid).

   Target = the approved mockup: big number on the LEFT, title to its RIGHT,
   top-aligned, title wrapping to (up to) two lines.

   Mobile problem before this fix: the title (a flex child) refused to shrink
   below its longest word, so "qualified professionals" / "service languages"
   ran off the screen edge; the section's 80/60px vertical padding also left
   big empty bands.

   Mobile fix (<=767px): keep the number-beside-title layout, top-align it, and
   give the title `min-width:0` + word wrapping so it stays inside its column
   instead of overflowing the viewport. Tighten the surrounding padding.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* trim the empty top/bottom bands around the stats section */
  .et_pb_section:has(.custom-2x2-grid) {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
  }

  /* widen the usable column width a touch on phones */
  .custom-2x2-grid.et_pb_row {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* number beside title, top-aligned (matches the mockup) */
  .custom-2x2-grid .et_pb_number_counter {
    display: flex !important;
    flex-direction: row !important;
    /* align-items: flex-start !important; */
    gap: 10px !important;
    padding: 6px 0 !important;     /* was 20px 0 */
  }
  /* margin-left:38px is set by Divi with high specificity — out-specify it
     with #page-container so the counters sit flush-left */
  #page-container .custom-2x2-grid .et_pb_number_counter {
    margin-left: 0 !important;
  }

  /* big number, like the mockup; don't let it shrink */
  .custom-2x2-grid .et_pb_number_counter .percent {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .custom-2x2-grid .et_pb_number_counter .percent,
  .custom-2x2-grid .et_pb_number_counter .percent-value {
    font-size: 80px !important;
    line-height: 0.9 !important;
  }

  /* title beside the number: min-width:0 lets this flex item wrap its long
     words and stay inside the column instead of overflowing the screen */
  .custom-2x2-grid .et_pb_number_counter .title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* tighten the gap between grid rows */
  .custom-2x2-grid .et_pb_column {
    margin-bottom: 18px !important;
  }
}