/* /veleprodaja. The stage, lead, headline optics, form title, labels, inputs, check circle and
   caps links all come from vb-site.css (.vb-cols, .vb-lead, .vb-sub, .vb-tlink, .vb-check).
   This file describes only what is /veleprodaja: three steps, one chip row. (The three fact
   cards above the steps and the step numerals went 2026-09-17, owner's call.) */

.vp-cols { grid-template-columns: 1fr 1fr; }
.vp-left h1 { max-width: 13ch; }

/* steps: hairline rows. Vertical rhythm is vh-aware, not fixed: at a fixed rhythm this
   composition overran the stage on shorter screens, and used to only look like it fitted
   because main's overflow:hidden clipped the tail. */
.vp-how-kicker {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vb-gold); margin-bottom: clamp(5px, .9vh, 12px);
}
.vp-steps { list-style: none; margin: 0 0 clamp(6px, 1.2vh, 14px); padding: 0; }
/* three rows of padding is 6 gaps: the vh term here is worth ~15px on a 700px window */
.vp-steps li {
  padding-block: clamp(5px, 1.05vh, 13px);
  border-bottom: 1px solid var(--vb-hair-soft);
}
.vp-steps li:first-child { border-top: 1px solid var(--vb-hair-soft); }
.vp-step-t {
  display: block;
  font-family: 'Anton', var(--font-display); font-weight: 400; font-size: 20px;
  line-height: 1.2; letter-spacing: .014em; text-transform: uppercase; color: var(--vb-gold);
}
.vp-step-s { display: block; font-size: 13.5px; line-height: 1.5; color: var(--vb-flour); margin-top: 4px; }

/* ---- right column: the form, on the board ---- */
.vp-form-card { padding: 0; }
.vp-form-sub { font-size: 12.5px; color: var(--vb-flour); margin: 0 0 clamp(10px, 2vh, 20px); }
.vp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(18px, 2.4vw, 36px); }
.vp-field { display: grid; gap: 5px; margin-bottom: clamp(9px, 1.8vh, 18px); }
.vp-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vp-form-err { margin-bottom: 10px; }
.vp-submit { margin-top: 10px; }
.vp-noscript { font-size: 13px; color: var(--vb-flour-dim); margin-top: 12px; }
.vp-noscript a { color: var(--vb-gold-link); }

/* chips keep the pill grammar: they are controls, so the outline is the affordance */
.vp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-chip {
  padding: 8px 15px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--vb-hair-strong); background: transparent;
  font-size: 12.5px; font-weight: 600; color: var(--vb-flour);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.vp-chip:hover { border-color: var(--vb-gold-line); color: #fff; }
/* Selected = solid gold, dark ink: the site's "this one / done" idiom (.vb-check, .skip-link).
   Was a gold outline + gold text over a .09 tint, which at rest on a photograph sat within a
   hair of the unselected white outline (design review 2026-09-03: "states too close"). ~10:1
   by construction. Declared after :hover on purpose — equal specificity, so source order keeps
   a hovered selected chip gold, not white. */
.vp-chip.is-selected { border-color: var(--vb-gold); color: #2a1508; background: var(--vb-gold); }

/* ---- sent state ---- */
.vp-sent { padding: 6px 0; }
.vp-sent-s { font-size: 15px; line-height: 1.7; color: var(--vb-flour); margin: 10px 0 18px; max-width: 44ch; }

/* Narrow only. Stacking answers a narrow window, not a short one: adding
   `(max-height: 720px)` here is what made the page scroll (see vb-site.css). */
@media (max-width: 980px) {
  .vp-cols { grid-template-columns: 1fr; }
  .vp-left h1 { max-width: 18ch; }
  .vp-form-card { padding-top: 0; }
}
/* ---- tablet portrait: one column for the copy, two for the steps ----
   Stretched to the full 691px track the lead ran 56 characters and each step row was
   two-thirds empty. */
@media (min-width: 720px) and (max-width: 979.98px) {
  .vp-left .vb-lead { max-width: 35ch; }
  .vp-sent-s { max-width: 35ch; }
  .vp-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 40px); }
  .vp-steps li:nth-child(2) { border-top: 1px solid var(--vb-hair-soft); }
  /* an odd final step would leave half a rule hanging, so it takes the whole row */
  .vp-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .vp-row2 { grid-template-columns: 1fr; }
}


/* The venue-type chips are the only control on this form and were 32px. Height comes from
   padding so the chip's own outline grows with the target rather than floating inside it. */
@media (max-width: 979.98px) {
  .vp-chip { min-height: 44px; padding-block: 0; }
}