/**
 * @file
 * Department statistics counters.
 */

.statistics .col-xs-12{
  padding-bottom:2em;
}

/* 1. The Ribbon Container */
#views-bootstrap-statistics-block-1 .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px 0;
  margin: 20px 0 40px 0;
  /* Very light background to "ground" the numbers without a box */
  background-color: rgba(var(--mt-color-base-value), 0.03);
  border-radius: 12px;
}

/* 2. Individual Statistic Item */
#views-bootstrap-statistics-block-1 .row > div {
  text-align: center;
  padding: 20px;
  position: relative;
  margin-bottom: 10px;
}

/* 3. The Vertical Separators (except on last items or mobile) */
@media (min-width: 768px) {
  #views-bootstrap-statistics-block-1 .row > div:not(:nth-child(3n))::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: rgba(var(--mt-color-base-value), 0.1);
  }
}

/* 4. The Big Teal Number */
.counter-count {
  display: block;
  font-size: 2rem; /* Large and impactful */
  font-weight: 600;
  color: var(--mt-color-primary);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -1px;
}

/* 5. The Label (Slate Grey) */
.views-field-title {
  margin: 0;
}

.design-p {
  font-size: 1rem;
  font-weight: 600;
  color: var(--mt-color-base-dark);
  letter-spacing: 0.5px;
  display: block;
  padding: 0 10px;
}

/* 6. Responsive adjustments */
@media (max-width: 767px) {
  .counter-count {
    font-size: 2.2rem;
  }
  #views-bootstrap-statistics-block-1 .row {
    padding: 20px 0;
  }
}