/* ==========================================================================
   At a glance  (.pf-glance)
   The case-study overview block under the title: a few facts (role, timeline,
   team, what shipped) as a definition list, with an optional stat strip
   (.pf-stats) slotted beneath. Answers the hiring-manager scan — role, scale,
   outcome — in the first screen, before the TL;DR prose.

   <div class="pf-glance">
     <dl class="pf-glance__facts">
       <div class="pf-glance__fact">
         <dt class="pf-glance__term">Role</dt>
         <dd class="pf-glance__desc">Product Designer &amp; Researcher</dd>
       </div>
       …
     </dl>
     <ul class="pf-stats pf-glance__stats">…</ul>
   </div>

   Composes the stat strip rather than restyling it: the glance owns the outer
   band (the gray stage panel, v0.9.73; hairlines top + bottom before that) and the
   seam between facts and stats, so the slotted .pf-stats is used WITHOUT its own
   --rule modifier. v0.9.84: each fact is a white tile like a stat tile (Louis: the
   text columns wanted their own box to match the data below), and the facts step in
   EVEN counts, 4 → 2 → 1, via a container query on the band's own width (auto-fit
   used to land on 3 + 1 at tablet widths and the band read chaotic); the band carries
   the stage's edge glow like every gray panel. Colours are text tokens only; pink
   appears nowhere here (R5, R11).
   ========================================================================== */

.pf-glance {
  position: relative;                       /* anchors the edge glow (v0.9.84) */
  container-type: inline-size;              /* the facts grid steps by the band's width, not the viewport (v0.9.84) */
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2);                   /* v0.9.84: the tile gap, so facts and stats read as one grid of tiles (was space-4) */
  /* v0.9.73: the band sits on the same gray stage as a figure (--pf-ui-panel, the stage
     padding) and breaks out to --pf-measure-wide like one, centered on the reading axis with
     the figure's margin/translate trick, so data and screenshots read as the same class of
     evidence object instead of the facts bleeding into the prose. Capped at the viewport minus
     gutters (R12); the translate is static, not motion (no R6 pair). Replaces the hairlines. */
  width: min(var(--pf-measure-wide), calc(100vw - 2 * var(--pf-gutter)));
  margin-left: 50%;
  transform: translateX(-50%);
  padding: var(--pf-figure-stage-pad, clamp(1.5rem, 3vw, 2.5rem));
  background: var(--pf-ui-panel);
}
/* The stage's per-edge inset glow (v0.9.84; the same gradients as a figure stage, painted above
   the tiles, off in dark via the tokens). pointer-events:none keeps the band's text selectable. */
.pf-glance::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--pf-ui-inset) 0%, transparent var(--pf-ui-inset-blur, 12px)),
    linear-gradient(to bottom, var(--pf-ui-inset-top) 0%, transparent var(--pf-ui-inset-blur, 12px)),
    linear-gradient(to right, var(--pf-ui-inset-side) 0%, transparent var(--pf-ui-inset-blur, 12px)),
    linear-gradient(to left, var(--pf-ui-inset-side) 0%, transparent var(--pf-ui-inset-blur, 12px));
}

.pf-glance__facts {
  display: grid;
  /* Wide band: the facts share one row (10rem is the least a tile needs; the usual four fit
     from ~40rem of band). The container steps below force EVEN counts (v0.9.84): auto-fit
     alone landed on three + one at tablet widths, which read as a broken pattern. */
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--pf-space-2);
  margin: 0;
}
/* Container queries: Safari 16 (the compat target) supports them; the thresholds are the band's
   own inline size, so they are component-intrinsic and not viewport breakpoints (R12 governs
   @media). Below 44rem two columns (four 10rem tiles plus their gaps need 41.5rem; the
   band's content box at a 760 viewport is ~40.4rem, which is where three + one appeared);
   below 22rem one. */
@container (max-width: 44rem) {
  .pf-glance__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The slotted stat strip steps with the facts (its own auto-fit put four 150px tracks in a
     630px band, the meter spanning two and the two stat tiles wrapping their numbers mid-figure):
     two columns, the wide meter on its own full row above them. (0,2,0) so it outranks the
     strip's own grid rule regardless of load order. */
  .pf-glance .pf-glance__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pf-glance__stats .pf-stats__item--wide {
    grid-column: 1 / -1;
  }
}
@container (max-width: 22rem) {
  .pf-glance__facts,
  .pf-glance .pf-glance__stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A <div> wrapping each dt+dd pair is valid HTML and keeps the pair together
   as one grid cell. v0.9.84: a white tile, the same padding and surface as a
   .pf-stats--tiles item, so the facts and the numbers are one class of card. */
.pf-glance__fact {
  min-width: 0;
  padding: var(--pf-space-3);
  background: var(--pf-surface);
}

/* v0.9.81: the display face, so every label on the site shares one voice (the pane labels,
   the stat values, the buttons); the serif stays for sentences. Same size, gray and place. */
.pf-glance__term {
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  font-size: var(--pf-text-small);
  line-height: var(--pf-lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
  color: var(--pf-ink-secondary);
  margin-bottom: var(--pf-space-1);
}

.pf-glance__desc {
  margin: 0;
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-body);
  line-height: 1.4;
  color: var(--pf-ink);
}

/* A second line under a fact (v0.9.82): the relationship behind a plain value, e.g. the
   timeline "Mar to Sep 2026" over "Validation in Mar, beta Jul to Sep". Secondary ink, small,
   so the value leads and the note reads as its footnote; a span inside the dd, so a screen
   reader gets both as one description. Secondary on the panel is a manifest pair (R4). */
.pf-glance__note {
  display: block;
  margin-top: var(--pf-space-1);
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-small);
  line-height: 1.4;
  color: var(--pf-ink-secondary);
}

/* The stat-strip slot: a hairline seam above it, so facts and numbers read as
   two rows of one band (the strong hairline, so it still reads on the panel).
   With the strip's --tiles modifier (v0.9.82) the white tiles are the division,
   so the seam goes and the band's own gap separates the two rows. */
.pf-glance__stats {
  padding-top: var(--pf-space-4);
  border-top: var(--pf-border) solid var(--pf-hairline-strong);
}
.pf-glance__stats.pf-stats--tiles {
  padding-top: 0;
  border-top: 0;
}