/* S1050 — THE THREE FIGURES ON A CARD.
 *
 * His ruling, 2026-09-07: every card says what the metal costs, what the DIY
 * kit costs and what a full assembled work costs — in shekels, with the dollar
 * card shown only to an American visitor.
 *
 * ONE FILE FOR THREE SURFACES ON PURPOSE. The front door, /works and /gallery
 * each style their cards from a different sheet (fab.css, site-pages.css and
 * their own inline blocks), and the same block written three times is the
 * stale-class pattern this repo has paid for three times — a rule drifts on one
 * page and only that page's readers see it. Every value here is a token the
 * three surfaces already declare, so nothing is invented and nothing is
 * hardcoded: --mono/--display/--ui come from type.css, --ink3 and --hair from
 * each page's own root.
 *
 * The class names are prefixed gk- because .price, .lab and .val already mean
 * DIFFERENT things in site-pages.css and in the two inline blocks (S367's name
 * collision, which was solved by scoping rather than by out-specifying). A new
 * name cannot collide with any of them. */

.gk-prices {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--hair, rgba(255, 255, 255, .1));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px 10px;
  align-items: end;
}

/* S1056 - A HANDLE THAT IS NOT A BOX. The three figures need one element the
   script can hide together, because a country nobody quotes must lose all three
   at once rather than have three cells blanked under their labels. But
   .gk-prices is a three-column GRID and .gk-t are its direct items, so a plain
   wrapper makes the three of them ONE cell and the row collapses. The render
   audit named it at all three viewports the moment it shipped - "class .gk-figs
   is used but defined in no stylesheet", which is that gate doing exactly the
   job it exists for.

   display:contents removes the wrapper from layout entirely: the tiers stay
   direct grid items, and display:none on it still takes them all away. */
.gk-prices .gk-figs { display: contents; }

/* the sentence that stands where the figures were - FAB001's words, shown by
   card-price.js when no workshop quotes this visitor */
.gk-prices .gk-ask {
  grid-column: 1 / -1;
  font-family: var(--ui, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink2, #b7bfd0);
}

.gk-prices .gk-t {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* WEIGHT 400 IS DECLARED, NOT INHERITED. /gallery's card body sits at 300, and
   JetBrains Mono ships 400/600 only — so on that one surface the browser was
   synthesising a light weight and the render audit named it at all three
   viewports. Two surfaces looked right and the third did not, for a reason
   invisible in this file: the stale-inheritance shape, one floor down. */
.gk-prices .gk-l {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3, #8a93a6);
  white-space: nowrap;
}

/* the figure is the only thing on a card allowed to be loud */
.gk-prices .gk-v {
  font-family: var(--display, Georgia, serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* S1058 - WHAT THE FIGURE COVERS, in one line. His ruling of 2026-09-08.
   It sits directly under the three tiers and above the estimate caveat, so a
   card reads: the figures, what they include, then how firm they are. Slightly
   darker than .gk-est because it is a statement of fact about the product and
   not a caveat about the number - a buyer should be able to read it without
   deciding to. */
.gk-prices .gk-scope {
  grid-column: 1 / -1;
  font-family: var(--ui, system-ui, sans-serif);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink2, #6b7a99);
  margin-top: 2px;
}

/* Eight of the twelve are an estimate in shekels and exact in dollars, so this
   line is shown or hidden per COUNTRY by card-price.js — never averaged, and
   never printed over a figure that was quoted exactly. */
.gk-prices .gk-est {
  grid-column: 1 / -1;
  font-family: var(--ui, system-ui, sans-serif);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink3, #8a93a6);
}

/* A card narrower than about 300px cannot hold three columns of a five-figure
   shekel amount without the figure wrapping mid-number, so below that the tiers
   stack. Measured on the 375px phone: the widest figure is ₪331,683. */
@media (max-width: 380px) {
  .gk-prices { grid-template-columns: 1fr 1fr; }
  .gk-prices .gk-t:nth-child(3) { grid-column: 1 / -1; }
}