/**
 * Project facts — the ruled row of figures directly under the hero.
 *
 * A full-width band on the page ground with a hairline under it. Inside, the
 * header's 1800 frame holds one grid of cells, each a small caption over a
 * large display-face figure. The grid auto-fits, so two to seven cells share
 * one row on desktop and wrap on narrower screens; phones get two per row.
 *
 * Every cell draws a rule on its left and a rule above it that runs on to the
 * band's far edge, and the list is pulled up and left by 1px inside a clipping
 * box. That hides the rules on the outer edges whatever the column count, so
 * only the rules between cells and between rows remain, and a short last row
 * (5 cells over 4 columns, 3 over 2 on phones) still gets a full-width rule.
 * The clipping box also reaches past the frame by one cell padding on each
 * side, so the first column's text still lines up with the page gutter.
 *
 * One baseline per row: each cell is a subgrid over three shared row tracks —
 * caption, figure, note. A caption that runs to two lines grows the caption
 * track for the whole row, and a note (or a unit that had to wrap) grows only
 * the tracks below the figures, so every figure in a row starts at the same
 * height and nothing a neighbour carries can push it down. Units ("m²",
 * "-დან", "გაყიდულია") sit beside the figure on its baseline, in the body face
 * at a fraction of its size; only in a cell too narrow for both does the unit
 * wrap under the figure, which still leaves the figure where it was.
 *
 * Figures size with the width of their value box (container query units), so
 * a row of seven does not overflow and a row of three is not timid.
 */

.deka-project-facts {
  --deka-facts-rule: var(--deka-divider-warm);
  --deka-facts-pad: var(--deka-space-md);
  --deka-facts-gap: clamp(0.875rem, 0.6rem + 0.6vw, 1.25rem); /* caption to figure */

  background: var(--deka-surface-page);
  border-bottom: 1px solid var(--deka-facts-rule);
  color: var(--deka-text);
}

.deka-project-facts__inner {
  max-width: 112.5rem; /* 1800 — the header's width */
  margin-inline: auto;
  padding-inline: var(--deka-space-lg);
}

.deka-project-facts__clip {
  overflow: hidden;
  margin-inline: calc(-1 * var(--deka-facts-pad));
}

.deka-project-facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: -1px 0 0 -1px;
  padding: 0;
}

/* A column: caption, figure, note. Without subgrid the figure is pushed to the
   cell's foot, so figures still share a line when a caption wraps; "Shared row
   tracks" below replaces that wherever subgrid is supported. */
.deka-project-facts__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--deka-facts-gap);
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.5rem) var(--deka-facts-pad);
  border-left: 1px solid var(--deka-facts-rule);
}

/* The rule above the row, carried past the cell to the band's edge (the clip
   trims it) so a row with empty slots is not ruled only part of the way. */
.deka-project-facts__cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 200vw;
  height: 1px;
  background: var(--deka-facts-rule);
  pointer-events: none;
}

/* ==========================================================================
   Caption
   ========================================================================== */

.deka-project-facts__label {
  margin: 0;
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-medium);
  line-height: 1.35;
  color: var(--deka-text-muted);
}

/* ==========================================================================
   Figure
   ========================================================================== */

/* The size container the figure measures; the unit wraps under the figure
   only when the two cannot share the line. */
.deka-project-facts__value {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.25rem;
  min-width: 0;
  margin: 0;
  margin-top: auto; /* without subgrid: figures share the cell's foot */
}

.deka-project-facts__figure {
  font-family: var(--deka-font-display);
  font-size: 2.25rem; /* without container query units */
  /* At 18cqi "$101,200" and "-დან" (about 5.1em with the gap) share the line
     with a few px to spare. The floor keeps that margin down to a 320px phone
     and the narrowest desktop column (~127px); a 1.5rem floor would leave
     under 1px there, enough for another engine's text metrics to wrap it. */
  font-size: clamp(1.375rem, 18cqi, 3rem);
  font-weight: var(--deka-weight-regular);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  white-space: nowrap;
  color: var(--deka-text);
}

/* "/ 460" — the total, quieter than the count it qualifies. */
.deka-project-facts__of {
  font-size: 0.6em;
  color: var(--deka-text-muted);
}

/* "+", "%" — set with the number. */
.deka-project-facts__suffix {
  margin-left: 0.04em;
}

/* "m²", "-დან", "გაყიდულია", any suffix with letters — a unit beside the
   number, on its baseline. Set in the body face: the display face is all
   capitals and would print "m²" as "M²". */
.deka-project-facts__unit {
  font-family: var(--deka-font-body);
  font-size: 1rem; /* without container query units */
  font-size: clamp(0.61875rem, 8.1cqi, 1.35rem); /* 0.45 × the figure's size */
  line-height: 1; /* never taller than the figure's line */
  white-space: nowrap;
  color: var(--deka-text-muted);
}

/* ==========================================================================
   Note
   ========================================================================== */

/* A line under the figure (a second <dd>; none rendered today). In its own
   row track, so however long it runs it cannot move a figure. */
.deka-project-facts__note {
  margin: 0.625rem 0 0;
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-medium);
  line-height: 1.2;
  color: var(--deka-text-muted);
}

/* ==========================================================================
   Shared row tracks
   ========================================================================== */

/* Each cell spans three rows of the list and adopts them (see the top), so a
   row's captions, figures and notes each share one track. The figure starts a
   fixed step under the caption track — never pushed to the foot, where a
   taller neighbour would move it. */
@supports (grid-template-rows: subgrid) {
  .deka-project-facts__cell {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0;
  }

  .deka-project-facts__label {
    grid-row: 1;
    align-self: start;
  }

  .deka-project-facts__value {
    grid-row: 2;
    align-self: start;
    margin-top: var(--deka-facts-gap);
  }

  .deka-project-facts__note {
    grid-row: 3;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 40rem) {
  .deka-project-facts {
    --deka-facts-pad: 1.25rem;
  }

  .deka-project-facts__inner {
    padding-inline: 1.25rem;
  }

  .deka-project-facts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}