/*
 * Stats Counter block (template-parts/blocks/section_stats-counter.php).
 * Loaded by abefactors_acf_block_enqueue_assets() only on pages that contain the block (and in the editor).
 * Script: js/blocks_js/block_stats-counter.js (count-up).
 *
 * Design (Figma "Homel", "By the numbers"), at 1728px:
 *   section   Charcoal, 110px above the first line, 124px under the last line
 *   columns   504px title | 19px | 855px list (the same columns as Split Content); title 22px in
 *   title     Red Hat Display Bold 32px, #B0A7A0 (7:1 on Charcoal)
 *   rows      1px Steel line above each row and under the last one, about 140px high
 *   number    Black (900) 80px, Yellow; label Bold 30/30, Silver #E3E3E3, starting 372px into the row
 */

/* ------------------------------------------------------------------
 * Section
 * ------------------------------------------------------------------ */
.section_stats_counter {
  position: relative;
  color: var(--wp--preset--color--silver);
}

/* Charcoal unless a background colour is chosen in the block toolbar. */
.section_stats_counter:not(.has_bg_color) {
  background-color: var(--wp--preset--color--secondary);
}

.section_stats_counter.global-block-ptb {
  padding-top: clamp(56px, 6.37vw, 110px);
  padding-bottom: clamp(60px, 7.16vw, 124px);
}

/* Background Image (Settings): a 70% Charcoal overlay keeps the text readable. */
.section_stats_counter.has_bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--secondary);
  opacity: 0.7;
  pointer-events: none; /* decorative */
}

.section_stats_counter.has_bg > .container {
  position: relative;
}

/* ------------------------------------------------------------------
 * Columns
 * ------------------------------------------------------------------ */
.stats_counter_grid {
  display: grid;
  grid-template-columns: minmax(0, 504fr) minmax(0, 855fr);
  column-gap: 19px;
  align-items: start;
}

/* Layout "Title above": one column. */
.stats-layout-stacked .stats_counter_grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(32px, 3.7vw, 64px);
}

/* No title: the list keeps its column on the right. */
.stats_counter_grid > .stats_counter:only-child {
  grid-column: 2;
}

.stats-layout-stacked .stats_counter_grid > .stats_counter:only-child {
  grid-column: auto;
}

/* ------------------------------------------------------------------
 * Head
 * ------------------------------------------------------------------ */
.stats_counter_head {
  padding-left: clamp(0px, 1.3vw, 22px);
}

.stats-layout-stacked .stats_counter_head {
  padding-left: 0;
}

.stats_counter_head .section_title_above {
  margin: 0 0 12px;
  color: inherit;
}

.stats_counter_title {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0;
}

/* Default look; a size chosen in "Title Font Size" or a text colour from the toolbar is used instead. */
.stats_counter_title:not([class*='fontsize-']) {
  font-size: var(--wp--preset--font-size--medium-32);
  line-height: 1.3;
}

.section_stats_counter:not([class*='textcolor-']) .stats_counter_title {
  color: #b0a7a0; /* warm grey from the design, 7:1 on Charcoal */
}

.stats_counter_description {
  margin-top: 20px;
  max-width: 440px;
}

.stats_counter_description p {
  margin: 0 0 15px;
}

.stats_counter_description > :last-child {
  margin-bottom: 0;
}

.stats_counter_description a:not(.button) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stats_counter_button {
  margin-top: 32px;
}

/* ------------------------------------------------------------------
 * Stats list
 * ------------------------------------------------------------------ */
.section_stats_counter .stats_counter {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--wp--preset--color--steel);
}

.section_stats_counter .box_counter {
  display: grid;
  grid-template-columns: minmax(0, 372fr) minmax(0, 483fr); /* label starts 372px into the row */
  column-gap: 0;
  align-items: center;
  margin: 0;
  padding: clamp(28px, 2.3vw, 40px) 0;
  border-top: 1px solid var(--wp--preset--color--steel);
}

.section_stats_counter .box_counter::before {
  content: none; /* no theme list marker */
}

.section_stats_counter .number_box {
  display: flex;
  align-items: baseline;
  font-size: clamp(48px, 4.63vw, 80px);
  font-weight: 900;
  line-height: 0.75; /* 60px rows at 80px, as in the design */
  letter-spacing: 0;
  color: var(--wp--preset--color--primary);
  white-space: nowrap;
  padding-right: 12px; /* keeps a gap before the label when a number is long */
}

.section_stats_counter .label {
  font-size: clamp(20px, 1.74vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--silver);
}

.section_stats_counter[class*='textcolor-'] .label {
  color: inherit;
}

/* ------------------------------------------------------------------
 * Smaller screens
 * ------------------------------------------------------------------ */
@media screen and (max-width: 900px) {
  .stats_counter_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .stats_counter_grid > .stats_counter:only-child {
    grid-column: auto;
  }

  .stats_counter_head {
    padding-left: 0;
  }
}

@media screen and (max-width: 540px) {
  .section_stats_counter .box_counter {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    padding: 24px 0;
  }
}

/* Empty block in the editor. */
.stats_counter_empty {
  margin: 0;
  padding: 40px 20px;
  border: 1px dashed var(--wp--preset--color--mediumgrey);
  border-radius: 24px;
  text-align: center;
}