/*
 * metric-section — "Why choose us" metrics band.
 *
 * AUTHORING (Google Doc / Word table). First row is the section header
 * (title | subtitle). Every following row is one stat:
 *   [ Icon image | Count | Label ]
 *
 *   +-------------------------------------------------------------+
 *   | metric-section                                              |
 *   +-----------------+---------+---------------------------------+
 *   | Why choose us   | Discover what sets us apart ...           |
 *   +-----------------+---------+---------------------------------+
 *   | <icon>          | 5.7L+   | Customer Homes Painted          |
 *   | <icon>          | 1200+   | Towns serviceable across india  |
 *   | <icon>          | 100%    | Dedicated site supervision      |
 *   +-----------------+---------+---------------------------------+
 *
 * Renders a heading + subheading and a row of stats (icon + big count + label),
 * marked up as a description list. Header row is optional.
 *
 * VARIANTS: none. Stats stack one per row (icon | count | label) on mobile
 * and sit in a row beside the header on desktop.
 *
 * STYLING reproduces the live asianpaints.com "Why choose us" band
 * (.explore-store.bhps-whychoos) value for value, with its breakpoint:
 * mobile below 992px, desktop from 992px. Side padding and the gaps above
 * and below the block come from the page (section / spacing classes such as
 * desktop-side-padding-40 / mobile-side-padding-16), as on the client site;
 * the source uses 40px (desktop) and 15px (mobile).
 */

/* --- mobile (source: 320–991px) --- */
.metric-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  column-gap: 15px;
  color: #222;
}

.metric-section .metric-section-header {
  width: 100%;
  margin: 0;
}

.metric-section .metric-section-title {
  width: 100%;
  max-width: 100%;
  margin: 0 0 5px;
  color: #232426;
  font-size: 24px;
  font-weight: 800;
  line-height: 27px;
  letter-spacing: -2px;
}

.metric-section .metric-section-subtitle {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #8c8e90;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* one stat per row: icon | count | label */
.metric-section .metric-section-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 30px 0 0;
}

.metric-section .metric-section-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0 0 16px;
}

/* fixed width: a global img max-width: 100% would otherwise let it shrink */
.metric-section .metric-section-stat-icon {
  flex: none;
  line-height: 0;
}

.metric-section .metric-section-stat-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.metric-section .metric-section-stat-count {
  width: 37%;
  margin: 0;
  color: #5d4f43;
  font-size: 38px;
  font-weight: 400;
  line-height: 68px;
  letter-spacing: 0.5px;
}

.metric-section .metric-section-stat-label {
  width: 85%;
  margin: 0;
  color: #5d4f43;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.5px;
}

@media (width <= 400px) {
  .metric-section .metric-section-stat-count {
    width: 50%;
  }
}

@media (width >= 991px) and (width <= 1524px) {
  .metric-section .metric-section-stat-label {
    width: 94%;
  }
}

@media (width >= 1225px) and (width <= 1438px) {
  .metric-section .metric-section-stat-label {
    width: 86%;
  }
}

/* --- desktop (source: 992px and up): header left, stats right --- */
@media (width >= 992px) {
  .metric-section {
    flex-direction: row;
    column-gap: 50px;
  }

  /* 35% + 65% + the 50px gap overflow slightly; both shrink in proportion,
     exactly as on the source */
  .metric-section .metric-section-header {
    width: 35%;
  }

  .metric-section .metric-section-title {
    max-width: 80%;
    margin-bottom: 15px;
    font-size: 70px;
    line-height: 70px;
  }

  .metric-section .metric-section-subtitle {
    color: #75787b;
    font-size: 20px;
    line-height: 28px;
  }

  /* four equal tracks for three stats, as on the source */
  .metric-section .metric-section-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    gap: 50px;
    width: 65%;
    margin: 0;
  }

  .metric-section .metric-section-stat {
    display: block;
    width: auto;
  }

  .metric-section .metric-section-stat-icon img {
    width: auto;
    height: auto;
  }

  .metric-section .metric-section-stat-count {
    width: auto;
    font-weight: 700;
  }
}