/*
 * Structured At a Glance panel.
 *
 * Uses the shared article design tokens and presents summary facts as compact,
 * scannable metadata without turning the component into a spreadsheet.
 */

.single-post-layout .isp-glance {
  width: 100%;
  max-width: var(--isp-article-width-wide, 960px);
  margin-inline: auto;
  padding: var(--isp-article-space-4, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--isp-article-color-link, #2378aa) 12%, var(--isp-article-color-border, #eae9ea));
  border-radius: var(--isp-article-radius-callout, 16px);
  background: color-mix(in srgb, var(--isp-article-color-link, #2378aa) 2.5%, var(--isp-article-color-surface, #fff));
  box-shadow: var(--isp-article-shadow-none, none);
  color: var(--isp-article-color-body, #4f4c4e);
}

.single-post-layout .isp-glance__title {
  display: flex;
  align-items: center;
  gap: var(--isp-article-space-2, .75rem);
  margin: 0 0 var(--isp-article-space-3, 1rem);
  color: var(--isp-article-color-link, #2378aa);
  font-size: var(--isp-article-font-sm, .9rem);
  font-weight: 850;
  letter-spacing: .075em;
  line-height: var(--isp-article-line-ui, 1.45);
  text-transform: uppercase;
}

.single-post-layout .isp-glance__mark {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--isp-article-color-link, #2378aa) 20%, var(--isp-article-color-border, #eae9ea));
  border-radius: var(--isp-article-radius-pill, 999px);
  background: color-mix(in srgb, var(--isp-article-color-link, #2378aa) 7%, #fff);
  font-size: .68rem;
  line-height: 1;
}

/*
 * Facts behave like one metadata system, but each value gets enough local
 * containment to scan cleanly. Auto-fit keeps 3, 4, 5 or more facts balanced.
 */
.single-post-layout .isp-glance__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: var(--isp-article-space-2, .75rem);
  margin: 0;
  padding-top: var(--isp-article-space-3, 1rem);
  border-top: 1px solid color-mix(in srgb, var(--isp-article-color-link, #2378aa) 11%, var(--isp-article-color-border, #eae9ea));
}

.single-post-layout .isp-glance__stat {
  min-width: 0;
  padding: .85rem .95rem;
  border: 1px solid color-mix(in srgb, var(--isp-article-color-link, #2378aa) 10%, var(--isp-article-color-border, #eae9ea));
  border-radius: 12px;
  background: color-mix(in srgb, var(--isp-article-color-link, #2378aa) 1.5%, #fff);
}

.single-post-layout .isp-glance__stat dt,
.single-post-layout .isp-glance__secondary-label {
  display: block;
  margin: 0 0 .3rem;
  color: var(--isp-article-color-subtle, #8c898b);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: var(--isp-article-line-ui, 1.45);
  text-transform: uppercase;
}

.single-post-layout .isp-glance__stat dd {
  margin: 0;
  color: var(--isp-article-color-text, #444244);
  font-size: .98rem;
  font-weight: 780;
  line-height: 1.38;
  text-wrap: pretty;
}

.single-post-layout .isp-glance__best-for,
.single-post-layout .isp-glance__summary {
  width: min(100%, var(--isp-article-width-reading, 760px));
  margin: var(--isp-article-space-4, 1.5rem) auto 0;
  padding-top: var(--isp-article-space-3, 1rem);
  border-top: var(--isp-article-border, 1px solid #eae9ea);
}

.single-post-layout .isp-glance__best-for p,
.single-post-layout .isp-glance__summary {
  margin-bottom: 0;
}

.single-post-layout .isp-glance__best-for p {
  margin-top: 0;
  color: var(--isp-article-color-text, #444244);
  font-weight: 700;
  line-height: 1.55;
}

.single-post-layout .isp-glance__summary {
  color: var(--isp-article-color-muted, #6f6b6d);
  font-size: 1.02rem;
  line-height: 1.65;
}

.single-post-layout .isp-post-component--at-a-glance {
  margin-top: var(--isp-article-space-block);
}

@media (max-width: 900px) {
  .single-post-layout .isp-glance {
    max-width: var(--isp-article-width-reading, 760px);
  }

  .single-post-layout .isp-glance__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .single-post-layout .isp-glance {
    padding: var(--isp-article-padding-card, 1.25rem);
  }

  .single-post-layout .isp-glance__stats {
    gap: var(--isp-article-space-2, .75rem);
  }
}

@media (max-width: 480px) {
  .single-post-layout .isp-glance__stats {
    grid-template-columns: 1fr;
  }

  .single-post-layout .isp-glance__stat {
    padding: .8rem .9rem;
  }
}