/* Bistro Pergola - styling for veldon-edit module sections.
   The engine's module views own their markup (ve-* class names); this file
   dresses them in the site's language so an owner-editable price list and
   event list read as part of the design, not as a bolted-on widget.
   Contract: _lead-pergola/_spec/DESIGN.md revision v3. */

/* ---------- shared module band ---------- */

.ve-module {
  background: var(--paper);
  padding: clamp(46px, 6vw, 78px) clamp(20px, 5vw, 48px);
}
/* One centred 1180px column, exactly like .container elsewhere on the page,
   with the content left-aligned inside it so module bands line up with the
   hand-built sections above and below. */
/* 1180 container minus its 2x48 padding: reproduces .container's content box,
   so a module band's heading lands on the same left edge as every hand-built
   section title above and below it. */
.ve-module > * {
  max-width: 1084px;
  margin-inline: auto;
}

/* ---------- ceník půjčovny (venue.menu-hours, menu-card view) ---------- */

.ve-venue-menu-hours--menu-card {
  background: var(--paper);
  padding-top: clamp(30px, 4vw, 48px);
}

.ve-venue-menu-hours__heading {
  display: flex; align-items: center; gap: 15px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.ve-menu-card__category {
  max-width: 640px;
  /* Narrower than the column but flush with its left edge, like the price
     card in the hand-built rental section. */
  margin-left: max(0px, calc((100% - 1084px) / 2));
  margin-right: auto;
  background: var(--paper-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px);
  box-shadow: 0 18px 38px -26px rgba(var(--ink-rgb), .5);
}
.ve-menu-card__category + .ve-menu-card__category { margin-top: 18px; }

.ve-menu-card__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .01em;
  margin-bottom: 14px;
  color: var(--ink);
}

.ve-menu-card__items { display: grid; gap: 10px; }

.ve-menu-card__line {
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  font-size: 16.5px;
}
.ve-menu-card__name { font-weight: 500; }
.ve-menu-card__leader {
  border-bottom: 2px dotted var(--hair);
  transform: translateY(-4px);
}
.ve-menu-card__price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ve-menu-card__desc {
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 52ch;
}

.ve-menu-card__variants { margin-top: 6px; display: grid; gap: 5px; }
.ve-menu-card__line--variant { font-size: 15px; color: var(--ink-soft); }
.ve-menu-card__variant-price { font-weight: 500; }

/* ---------- jídelní tabule (two venue.menu-hours instances) ---------- */

/* The renderer emits each module as a sibling section. A five-track grid
   keeps both instances in the same 1084px content band as .container while
   every other hand-built section continues to span the page normally. */
main:has(> #jidelak-l) {
  display: grid;
  grid-template-columns:
    minmax(clamp(20px, 5vw, 48px), 1fr)
    minmax(0, 525px)
    clamp(20px, 3vw, 34px)
    minmax(0, 525px)
    minmax(clamp(20px, 5vw, 48px), 1fr);
}
main:has(> #jidelak-l) > * { grid-column: 1 / -1; min-width: 0; }
main:has(> #jidelak-l) > #jidelak-l { grid-column: 2; }
main:has(> #jidelak-l) > #jidelak-r { grid-column: 4; }

/* The intro remains the editable freeform shell; its former bottom padding
   is now carried by the module row below. */
.board-wrap { padding-bottom: 34px; }
.board-intro { margin-bottom: 0; }

/* Exact approved .board-panel surface from site.css. The module section is
   itself the panel, so no extra design wrapper is required. */
#jidelak-l,
#jidelak-r {
  --mcol: 52px;
  --board-gap: 12px;
  align-self: start;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .028) 47% 53%, transparent 58%),
    radial-gradient(700px 420px at 50% -8%, rgba(255, 255, 255, .05), transparent 70%),
    var(--board);
  color: var(--board-text);
  border-radius: 18px;
  padding: clamp(26px, 3.4vw, 42px) clamp(22px, 3vw, 36px);
  margin-bottom: clamp(60px, 8vw, 100px);
  box-shadow: 0 34px 60px -34px rgba(var(--ink-rgb), .6);
}
#jidelak-l { transform: rotate(-.35deg); }
#jidelak-r { transform: rotate(.3deg); }

#jidelak-l > .ve-menu-card__category,
#jidelak-r > .ve-menu-card__category {
  max-width: none;
  margin: 0 0 34px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
#jidelak-l > .ve-menu-card__category + .ve-menu-card__category,
#jidelak-r > .ve-menu-card__category + .ve-menu-card__category { margin-top: 0; }
#jidelak-l > .ve-menu-card__category:last-of-type,
#jidelak-r > .ve-menu-card__category:last-of-type { margin-bottom: 0; }

#jidelak-l .ve-menu-card__heading,
#jidelak-r .ve-menu-card__heading {
  color: var(--citron);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* The two sublines are owner-editable MenuCategory data now (engine 44c19e07),
   so this only styles what the module renders. */
#jidelak-l .ve-menu-card__subline,
#jidelak-r .ve-menu-card__subline {
  color: var(--board-mut);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin: 6px 0 0;
}
#jidelak-r > [data-category-id="cep"] > .ve-menu-card__subline {
  width: max-content;
  color: var(--citron);
  font-family: var(--font-chalk);
  font-size: 18px;
  transform: rotate(-1.6deg);
}

#jidelak-l .ve-menu-card__items,
#jidelak-r .ve-menu-card__items { display: grid; gap: 7px; }
/* The approved row reads as ONE line - name, then its note in smaller muted
   type right where the name ends, then the price hard right. The module emits
   the note as a BLOCK sibling of the price line, which stacked it underneath
   and changed the board's rhythm. Flattening the line into the item lets the
   note sit inline; the note starts after each name rather than on a shared
   column, so this is an inline flow and not a grid column. */
#jidelak-l .ve-menu-card__item,
#jidelak-r .ve-menu-card__item {
  position: relative;
  padding-left: calc(var(--mcol) + var(--board-gap));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--board-gap);
  row-gap: 2px;
  font-size: 16.5px;
}
/* The gramáž column is back: `amount` is its own field since engine 44c19e07,
   so it sits in its own gutter exactly as the approved board had it, instead of
   being read as the first words of the note. Rows without one keep the indent. */
#jidelak-l .ve-menu-card__amount,
#jidelak-r .ve-menu-card__amount {
  /* Stays IN FLOW so it shares the row's baseline - absolute positioning put it
     above the name. The negative margin cancels its own width plus the gap, so
     it hangs in the item's left padding and costs the row nothing. */
  order: 0;
  flex: none;
  width: var(--mcol);
  margin-left: calc(-1 * (var(--mcol) + var(--board-gap)));
  color: var(--board-mut);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-align: right;
}
#jidelak-l .ve-menu-card__line,
#jidelak-r .ve-menu-card__line { display: contents; }
#jidelak-l .ve-menu-card__name,
#jidelak-r .ve-menu-card__name {
  min-width: 0;
  order: 1;
  color: var(--board-text);
  font-weight: 500;
}
#jidelak-l .ve-menu-card__desc,
#jidelak-r .ve-menu-card__desc {
  order: 2;
  max-width: 52ch;
  color: var(--board-mut);
  font-size: 13.5px;
  line-height: 1.3;
  margin: 0;
}
#jidelak-l .ve-menu-card__price,
#jidelak-r .ve-menu-card__price {
  order: 3;
  margin-left: auto;
  color: var(--board-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
#jidelak-l .ve-menu-card__leader,
#jidelak-r .ve-menu-card__leader { display: none; }

#jidelak-l .ve-menu-card__variants,
#jidelak-r .ve-menu-card__variants { margin-top: 6px; display: grid; gap: 5px; }
#jidelak-l .ve-menu-card__line--variant,
#jidelak-r .ve-menu-card__line--variant {
  color: var(--board-mut);
  font-size: 15px;
}
#jidelak-l .ve-menu-card__variant-price,
#jidelak-r .ve-menu-card__variant-price {
  color: var(--board-text);
  font-weight: 500;
}

/* Na čepu: flatten each pair of module variant rows into the approved
   name / 0,275 l / 0,475 l three-column board row. */
#jidelak-r > [data-category-id="cep"] > .ve-menu-card__items {
  position: relative;
  padding-top: 20px;
}
#jidelak-r > [data-category-id="cep"] > .ve-menu-card__items::before,
#jidelak-r > [data-category-id="cep"] > .ve-menu-card__items::after {
  position: absolute;
  top: 0;
  width: var(--mcol);
  color: var(--board-mut);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-align: right;
}
#jidelak-r > [data-category-id="cep"] > .ve-menu-card__items::before {
  content: "0,275 l";
  right: calc(var(--mcol) + 12px);
}
#jidelak-r > [data-category-id="cep"] > .ve-menu-card__items::after {
  content: "0,475 l";
  right: 0;
}
#jidelak-r > [data-category-id="cep"] .ve-menu-card__item {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  align-items: baseline;
}
#jidelak-r > [data-category-id="cep"] .ve-menu-card__name { order: 1; }
/* Both size columns are always present - an item priced in only one of them
   carries an empty variant for the other - so the prices stay under their
   0,275 l / 0,475 l headings without any per-row special casing. */
/* Keep the two prices GROUPED and anchored to the right edge. Flattening them
   into the row let each one start where the name ended, so a long name pushed
   its 0,275 l price out from under the heading. */
#jidelak-r > [data-category-id="cep"] .ve-menu-card__variants {
  order: 3;
  display: flex;
  column-gap: 12px;
  margin-top: 0;
  margin-left: auto;
}
#jidelak-r > [data-category-id="cep"] .ve-menu-card__variant-price {
  flex: none;
  width: var(--mcol);
  text-align: right;
}
/* An item sold in only one size leaves the other price empty. An empty inline
   box has no baseline, which grew that one row by 5px against its neighbours. */
#jidelak-r > [data-category-id="cep"] .ve-menu-card__variant-price:empty::after {
  content: " ";
}
#jidelak-r > [data-category-id="cep"] .ve-menu-card__item > .ve-menu-card__line,
#jidelak-r > [data-category-id="cep"] .ve-menu-card__line--variant {
  display: contents;
}
#jidelak-r > [data-category-id="cep"] .ve-menu-card__item > .ve-menu-card__line > .ve-menu-card__price,
#jidelak-r > [data-category-id="cep"] .ve-menu-card__variant-label { display: none; }
#jidelak-r > [data-category-id="cep"] .ve-menu-card__item > .ve-menu-card__desc {
  order: 2;
  margin-left: 0;
}

/* Was a CSS `content` string, which a screen reader, reader mode, a copy-paste
   and a printout all miss. It is real markup now (site/index.html, .board-fine),
   and this only styles it. */
.board-fine {
  display: block;
  color: var(--citron);
  font-size: 13px;
  letter-spacing: .04em;
  margin-top: 28px;
  opacity: .85;
}

@media (max-width: 960px) {
  main:has(> #jidelak-l) { grid-template-columns: minmax(0, 1fr); }
  main:has(> #jidelak-l) > #jidelak-l,
  main:has(> #jidelak-l) > #jidelak-r {
    grid-column: 1;
    margin-inline: clamp(20px, 5vw, 48px);
    transform: none;
    --mcol: 44px;
    --board-gap: 9px;
  }
  main:has(> #jidelak-l) > #jidelak-l { margin-bottom: 20px; }
  #jidelak-l .ve-menu-card__line,
  #jidelak-r .ve-menu-card__line,
  #jidelak-r > [data-category-id="cep"] .ve-menu-card__item { gap: 9px; }
  #jidelak-r > [data-category-id="cep"] > .ve-menu-card__items::before {
    right: calc(var(--mcol) + 9px);
  }

  /* The wide row is an inline flow - gramáž, name, note, then the price pushed
     right - which reads perfectly at 627px and falls apart at 350px: the note
     pushes the price onto a line of its own, orphaned from the item it belongs
     to, and the gramáž hangs above the name. 13 rows at 390, 17 at 768.
     (The approved design never hit this because its note lived INSIDE the name;
     the module emits the two as siblings.)

     Narrow gets a grid instead: gramáž, name and price share the first row, the
     note drops underneath the name where it has the width to breathe. */
  #jidelak-l .ve-menu-card__item,
  #jidelak-r .ve-menu-card__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 9px;
    row-gap: 1px;
    align-items: baseline;
    padding-left: 0;
  }
  #jidelak-l .ve-menu-card__amount,
  #jidelak-r .ve-menu-card__amount {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    margin-left: 0;
    text-align: left;
    /* An `auto` grid column is as narrow as it can be, and "250 g" duly broke
       across two lines with the "g" alone underneath. */
    white-space: nowrap;
  }
  #jidelak-l .ve-menu-card__name,
  #jidelak-r .ve-menu-card__name { grid-column: 2; grid-row: 1; }
  #jidelak-l .ve-menu-card__price,
  #jidelak-r .ve-menu-card__price { grid-column: 3; grid-row: 1; margin-left: 0; }
  #jidelak-l .ve-menu-card__desc,
  #jidelak-r .ve-menu-card__desc { grid-column: 2 / -1; grid-row: 2; max-width: none; }

  /* The tap board keeps its own two-price layout; it only needed its column
     headings to stop wrapping a stray "l" onto the next line. */
  #jidelak-r > [data-category-id="cep"] > .ve-menu-card__items::before,
  #jidelak-r > [data-category-id="cep"] > .ve-menu-card__items::after { white-space: nowrap; }
  #jidelak-r > [data-category-id="cep"] .ve-menu-card__item {
    display: flex;
    padding-left: 0;
  }
  #jidelak-r > [data-category-id="cep"] .ve-menu-card__desc { grid-column: auto; }
}

.ve-menu-card__allergens, .ve-menu-card__dayparts {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.ve-menu-card__meta-label { font-weight: 600; }

/* ---------- akce (content.events) ---------- */

.ve-events { background: var(--paper); }

.ve-events__heading {
  display: flex; align-items: center; gap: 15px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  margin-bottom: 20px;
}

.ve-events__grid { display: grid; gap: 16px; }

.ve-events__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  background: var(--paper-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 10px 26px -18px rgba(var(--ink-rgb), .4);
}
.ve-events__item:has(.ve-events__image) { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }

.ve-events__image {
  width: 100%;
  border-radius: 9px;
  object-fit: cover;
}

.ve-events__date {
  font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--terakota);
  margin-bottom: 4px;
}
.ve-events__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 4px;
}
.ve-events__location, .ve-events__desc {
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 60ch;
}
.ve-events__location { font-weight: 500; margin-bottom: 2px; }

.ve-events__cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  font-weight: 600; font-size: 15px;
  color: var(--hloubka);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- galerie (portfolio.collections) ---------- */

/* The preceding freeform section keeps the owner-editable heading and this
   module owns the ordered media grid, so the two bands read as one section. */
.galerie { padding-bottom: 0; }

.ve-portfolio-collections--grid {
  background: var(--paper);
  padding-top: 18px;
  padding-bottom: clamp(60px, 8vw, 104px);
}

.ve-portfolio-collections__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ve-portfolio-collections__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: 190px;
  gap: 14px;
}

.ve-portfolio-collections__item {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper-deep);
}

.ve-portfolio-collections__item:nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 3; }
.ve-portfolio-collections__item:nth-child(2) { grid-column: 6 / 13; grid-row: 1 / 2; }
.ve-portfolio-collections__item:nth-child(3) { grid-column: 6 / 10; grid-row: 2 / 4; }
.ve-portfolio-collections__item:nth-child(4) { grid-column: 10 / 13; grid-row: 2 / 3; }
.ve-portfolio-collections__item:nth-child(5) { grid-column: 1 / 6; grid-row: 3 / 4; }
.ve-portfolio-collections__item:nth-child(6) { grid-column: 10 / 13; grid-row: 3 / 4; }
.ve-portfolio-collections__item:nth-child(n + 7) { grid-column: span 4; }

.ve-portfolio-collections__item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(52deg, rgba(var(--paper-rgb), .55) 0 9px, transparent 9px 26px);
  background-size: 300% 300%;
  background-position: 0% 0%;
  opacity: 0;
  transition: opacity .3s ease, background-position .55s ease;
}

.ve-portfolio-collections__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.ve-portfolio-collections__item:nth-child(2) .ve-portfolio-collections__image {
  object-position: 50% 74%;
}

.ve-portfolio-collections__caption {
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--paper);
  background: rgba(var(--ink-rgb), .72);
  font-size: 14px;
}

.ve-portfolio-collections__item:hover .ve-portfolio-collections__image { transform: scale(1.035); }
.ve-portfolio-collections__item:hover::after { opacity: .5; background-position: 42% 30%; }

.ve-venue-menu-hours__empty-state,
.ve-events__empty-state {
  font-size: 16.5px;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: 22px 26px;
  max-width: 640px;
}

@media (max-width: 640px) {
  .ve-events__item:has(.ve-events__image) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .ve-portfolio-collections__grid { grid-auto-rows: 150px; }
  .ve-portfolio-collections__item:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
  .ve-portfolio-collections__item:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 2; }
  .ve-portfolio-collections__item:nth-child(3) { grid-column: 8 / 13; grid-row: 2 / 3; }
  .ve-portfolio-collections__item:nth-child(4) { grid-column: 1 / 6; grid-row: 3 / 4; }
  .ve-portfolio-collections__item:nth-child(5) { grid-column: 6 / 13; grid-row: 3 / 4; }
  .ve-portfolio-collections__item:nth-child(6) { grid-column: 1 / 13; grid-row: 4 / 5; }
  .ve-portfolio-collections__item:nth-child(n + 7) { grid-column: span 6; grid-row: auto; }
}

@media (max-width: 520px) {
  .ve-portfolio-collections__grid { grid-auto-rows: 130px; }
}


/* ---------------------------------------------------------- otevírací doba --
   The rows come from the `venue.menu-hours` hours view, moved into the contact
   card by placeOpeningHours() in server/render.ts. These mirror the approved
   `.hours-table` exactly - same hairline rows, same right-aligned tabular time,
   same 340px cap - so gaining per-day editing changed nothing on the page. */
.ve-hours__rows {
  display: grid;
  max-width: 340px;
  margin: 14px 0 0;
}
.ve-hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--hair);
  font-size: 16px;
}
.ve-hours__day { font-weight: 600; }
.ve-hours__time {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ve-hours__row--exception .ve-hours__day { font-weight: 500; }
.ve-hours__exceptions-heading {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* --------------------------------------------------------- ceník půjčovny --
   `services.list` in the price-list view. The approved design carried this as
   `.sup-cenik`: a paper card, name left, price right on tabular figures. The
   module owns the rows, so these are the same values against its own classes -
   the band appears only once the owner has entered a price. */
#cenik.ve-services-list {
  padding-block: 8px 40px;
}
#cenik .ve-services-list__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
#cenik .ve-services-list__group {
  max-width: 370px;
  /* `.ve-module > *` centres each child, which centred a 370px card in the
     band. The section already carries the page inset, so this only adds back
     the centring overflow the 1084px content box would have had. */
  margin-inline: max(0px, calc((100% - 1084px) / 2)) auto;
  margin-bottom: 18px;
  padding: 18px 22px 16px;
  border-radius: var(--radius);
  background: var(--paper-card);
  color: var(--ink);
  box-shadow: 0 20px 38px -22px rgba(13, 34, 42, .55);
}
#cenik .ve-services-list__group-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 10px;
}
#cenik .ve-services-list__items {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Name and price on one baseline, the duration a quiet second line under the
   name - the module emits three siblings, so the row is a two-column grid. */
#cenik .ve-services-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 16px;
  font-size: 15.5px;
}
#cenik .ve-services-list__name {
  grid-column: 1;
  font-size: inherit;
  font-weight: 500;
}
#cenik .ve-services-list__price {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#cenik .ve-services-list__duration {
  grid-column: 1;
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}