/* Further illustration studies for Relevance (Profil firmy): new values of the `relevance` Pult axis.
   Kept in their own file so they can be built in parallel with the others. */

/* Profil s ukazateli vhodnosti (bars, segments, chart): the company profile card
   of the original, with an illustrative meter at every item showing how well a
   tender fits that area; the match score sums it up. Levels are data attributes
   (data-fit 1–5), a visual measure, not a claim. illustrations-relevance.js fills
   the meters with the scroll while the card rises from --fit-scroll-start to
   --fit-scroll-end of the window (scrub, the page never stops); without JS or
   with reduced motion they simply stand full at their level. */
:is([data-relevance="bars"], [data-relevance="segments"], [data-relevance="chart"]) .relevance-card { display: none; }
[data-relevance="bars"] .fit-bars,
[data-relevance="segments"] .fit-segments,
[data-relevance="chart"] .fit-chart { display: block; }
.fit-card {
  --fit-rule: color-mix(in srgb, var(--ink) 25%, transparent);
  --fit-track: color-mix(in srgb, var(--ink) 14%, transparent);
  --fit-bar: calc(var(--gap-xs) * .75);
  --fit-bar-total: calc(var(--gap-xs) * 1.5);
  --fit-seg-width: calc(var(--gap-md) + var(--gap-xs) / 2);
  --fit-seg-height: calc(var(--gap-sm) + var(--gap-xs) / 2);
  --fit-seg-gap: calc(var(--gap-xs) / 2);
  --fit-seg-skew: -14deg;
  --fit-seg-total: 1.25;
  --fit-graph-height: clamp(120px, 12vw, 170px);
  --fit-graph-bar: calc(var(--gap-md) + var(--gap-xs));
  --fit-graph-label: clamp(14px, 1.25vw, 19px);
  --fit-scroll-start: 90%;
  --fit-scroll-end: 40%;
  --fit-stagger: .15;
  max-width: var(--profile-width);
  margin: 0 auto;
  padding: var(--gap-lg);
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--radius);
  transform: rotate(var(--profile-tilt));
  text-align: left;
}
.fit-card [data-fit="1"] { --level: .2; }
.fit-card [data-fit="2"] { --level: .4; }
.fit-card [data-fit="3"] { --level: .6; }
.fit-card [data-fit="4"] { --level: .8; }
.fit-card [data-fit="5"] { --level: 1; }
.fit-title {
  display: block;
  margin-bottom: var(--gap-lg);
  font-size: var(--profile-title);
  line-height: 1.1;
  letter-spacing: var(--display-track);
}
.fit-card ul { list-style: none; margin: 0; padding: 0; min-width: 0; }
.fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); }
.fit-columns li {
  font-size: var(--profile-label);
  line-height: 1.3;
  padding: var(--gap-sm) 0;
  border-top: var(--hairline) solid var(--fit-rule);
}
.fit-meter { display: block; }

/* 1 · Pruhy vhodnosti: a thin bar under every item, the match score thicker;
   the bars themselves separate the rows, so the rules between them go. */
.fit-bars .fit-columns li { border-top: 0; padding: var(--gap-xs) 0 var(--gap-sm); }
.fit-bars .fit-meter {
  height: var(--fit-bar);
  margin-top: var(--gap-xs);
  background: var(--fit-track);
  border-radius: var(--fit-bar);
  overflow: hidden;
}
.fit-bars .fit-total .fit-meter { height: var(--fit-bar-total); border-radius: var(--fit-bar-total); }
.fit-bars .fit-meter i {
  display: block;
  height: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(calc(var(--level) * var(--fill, 1)));
}

/* 2 · Dílkové ukazatele: five slanted segments beside every item, lit up to its
   level; the match score sits apart in an ink band with larger yellow segments. */
.fit-segments .fit-columns li { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
.fit-segments .fit-meter { display: flex; gap: var(--fit-seg-gap); flex: none; }
.fit-segments .fit-meter i {
  position: relative;
  width: var(--fit-seg-width);
  height: var(--fit-seg-height);
  background: var(--fit-track);
  transform: skewX(var(--fit-seg-skew));
}
.fit-segments .fit-meter i::after { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: 0; }
.fit-segments [data-fit="1"] .fit-meter i:nth-child(-n+1)::after,
.fit-segments [data-fit="2"] .fit-meter i:nth-child(-n+2)::after,
.fit-segments [data-fit="3"] .fit-meter i:nth-child(-n+3)::after,
.fit-segments [data-fit="4"] .fit-meter i:nth-child(-n+4)::after,
.fit-segments [data-fit="5"] .fit-meter i:nth-child(-n+5)::after { opacity: var(--on, 1); }
.fit-segments .fit-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
  padding: var(--gap-sm) var(--gap-md);
  background: var(--ink);
  color: var(--accent);
  border-radius: var(--radius);
  font-size: var(--profile-label);
  line-height: 1.3;
}
.fit-segments .fit-total .fit-meter i {
  width: calc(var(--fit-seg-width) * var(--fit-seg-total));
  height: calc(var(--fit-seg-height) * var(--fit-seg-total));
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.fit-segments .fit-total .fit-meter i::after { background: var(--accent); }

/* 3 · Sloupcový graf: one narrow ink column per item over a shared baseline,
   the match score a double-width column behind a rule. */
.fit-graph {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.6fr);
  column-gap: var(--gap-md);
  align-items: start;
}
.fit-graph::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--fit-graph-height);
  border-top: var(--hairline) solid var(--fit-rule);
}
.fit-graph li { display: grid; grid-template-rows: var(--fit-graph-height) auto; row-gap: var(--gap-sm); min-width: 0; padding: 0; border-top: 0; }
.fit-graph .fit-meter { position: relative; width: var(--fit-graph-bar); height: 100%; }
.fit-graph .fit-meter i {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: bottom;
  transform: scaleY(calc(var(--level) * var(--fill, 1)));
}
.fit-graph .fit-label { font-size: var(--fit-graph-label); line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.fit-graph .fit-total { padding-left: var(--gap-md); border-left: var(--hairline) solid var(--fit-rule); }
.fit-graph .fit-total .fit-meter { width: calc(var(--fit-graph-bar) * 2); }

@media (max-width: 700px) {
  .fit-card {
    --fit-seg-width: calc(var(--gap-sm) + var(--gap-xs) / 2);
    --fit-seg-height: var(--gap-sm);
    padding: var(--gap-md);
  }
  .fit-title { margin-bottom: var(--gap-md); }
  .fit-columns { grid-template-columns: 1fr; gap: var(--gap-md); }
  .fit-segments .fit-total { margin-top: var(--gap-md); padding: var(--gap-sm); }
  /* The chart turns on its side: one row per item, the bar to the right of its label. */
  .fit-graph { grid-template-columns: 1fr; row-gap: 0; }
  .fit-graph::before { display: none; }
  .fit-graph li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto;
    align-items: center;
    column-gap: var(--gap-sm);
    padding: var(--gap-sm) 0;
    border-top: var(--hairline) solid var(--fit-rule);
  }
  .fit-graph .fit-label { order: -1; font-size: var(--profile-label); }
  .fit-graph .fit-meter { width: auto; height: var(--fit-bar-total); background: var(--fit-track); }
  .fit-graph .fit-meter i { transform-origin: left; transform: scaleX(calc(var(--level) * var(--fill, 1))); }
  .fit-graph .fit-total { padding-left: 0; border-left: 0; border-top-color: var(--ink); }
  .fit-graph .fit-total .fit-meter { width: auto; height: var(--gap-md); }
}