//
// SUMMARY BOX
// ===========
// Status cards on the start summary page. Boxes flow in an auto-fit grid
// that picks how many fit per row based on viewport width — five-ish at
// 1240px, three at ~800px, two on phones — without the renderer needing
// to pre-chunk into rows.
//

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 1.5rem;
}

.summary-grid > .summaries,
.summary-grid > .summarybox {
  margin-bottom: 0;  // gap handles spacing; per-box margin would double up
}

// Hero KPI band — top-of-page band with oversized numbers for the few
// metrics most readers want at a glance (LCP, TBT, FCP, Coach perf
// score by default; see HERO_URLS in index.pug). 4-up at desktop,
// auto-fits down to 2 on smaller widths.
.summary-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.summary-hero > .summaries,
.summary-hero > .summarybox {
  margin-bottom: 0;
}

.summarybox.hero {
  min-height: 7.5rem;
  padding: 18px 20px;

  .summarytitle {
    font-size: 0.95rem;
    font-weight: $font--weight--medium;
    opacity: 0.85;
  }

  .summarynumber {
    font-size: 2.75rem;
    letter-spacing: -0.02em;
  }

  .summarysmall {
    font-size: 1rem;
  }
}

.summarybox {
  // Flex column so the number always sits at the bottom of the box
  // regardless of whether the title wraps to one or two lines, and a
  // min-height so single-line titles still look as tall as the wrapped
  // ones — keeps the grid visually even.
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 5.75rem;
  height: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid $color--border;
  background-color: $color--surface-card;
  border-radius: $radius--md;
  box-shadow: $shadow--sm;
  transition: box-shadow $motion--med, transform $motion--med;

  &.ok {
    color: $color--ok;
    background-color: $color--ok-bg;
    border-color: $color--ok-border;
  }

  &.warning {
    color: $color--warning;
    background-color: $color--warning-bg;
    border-color: $color--warning-border;
  }

  &.error {
    color: $color--error;
    background-color: $color--error-bg;
    border-color: $color--error-border;
  }

  &.info {
    background-color: $color--info-bg;
    border-color: $color--info-border;
    color: $color--info;
  }
}

a.summaries {
  text-decoration: none;
  display: block;
  height: 100%;  // let .summarybox stretch to the grid track height

  .summarybox:hover {
    box-shadow: $shadow--md;
    transform: translateY(-1px);
  }
}

.summarynumber {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: $font--weight--semibold;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.summarysmall {
  font-size: 0.85rem;
  line-height: 1.3;
  font-weight: $font--weight--medium;
  margin-top: 4px;
  display: block;
  opacity: 0.85;
}