/* Nabídka · direction B "Quiet offer panels" (final).
   One flat white surface split into three equal columns by hairlines. It follows the divided-surface recipe of
   Produkt .ob-grid and O nás .on-pl (1 px ring, radius 8, no shadow), not the card recipe (radius 16 + shadow) of
   Srovnání's three cards further down, so the raised, yellow-badged OWN Build card stays the only elevated surface here.
   Rows are shared through subgrid: tile + number, title, copy and CTA sit on the same lines in all three columns.
   CTA = the site's outline pill (.btn .btn-l, 48 px, 40 % ink ring on hover) with the page's ↗ and the translate
   nudge of Kontakt / Srovnání; yellow stays with Srovnání.
   Ports (21st.dev): Pricing 3034 (preetsuthar17) column anatomy + bottom-pinned CTA · Grid Feature Cards 2070 (efferd)
   one divided container · Feature 08 26797 (mohammadshehadeh) icon tile · Services List 33903 (balick) numbered offer
   with its own link. Stripped: grid squares, spotlight, crosshair marks, prices, pills, tick lists.
   Global tokens only (base.css / style.css): --ground --card --paper-2 --ink --muted --label --hl --mono --tick --r-s --ease-out.
   Every selector starts with #nabidka; new classes are nb-. The head is the global .head + .kick as is (shared with #produkt).

   Old global rules that are dead once this ships (d4/style.css @ 01d71a0; .offer is used only by the old #nabidka):
     l.73–78   the "── offer ──" block: .offer{…} .offer div{…} .offer div+div{…} .offer h3{…} .offer p{…}
     l.109–111 inside @media (max-width:900px): .offer{…} .offer div,.offer div+div{…} .offer div+div{…} */
#nabidka{--nb-px:36px}
/* Nabídka + Mapa read as one chapter: no step under the offer, #audit (audit.css) opens at 3/4 of one */
#nabidka{padding-bottom:0}

/* ── panel ── */
#nabidka .nb-panel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);background:var(--card);border:1px solid var(--hl);border-radius:var(--r-s) var(--r-s) 0 0}
#nabidka .nb-offer{grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:0;min-width:0;padding:32px var(--nb-px) var(--nb-px)}
#nabidka .nb-offer+.nb-offer{border-left:1px solid var(--hl)}
#nabidka svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

#nabidka .nb-top{display:flex;align-items:center;justify-content:space-between}
#nabidka .nb-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-s);background:var(--ground);border:1px solid var(--hl)}
#nabidka .nb-ic svg{width:16px;height:16px}
#nabidka .nb-offer h3{margin-top:28px;font-size:22px;line-height:1.25}
#nabidka .nb-offer>p{margin-top:10px;max-width:40ch;font-size:15px;line-height:1.55;color:var(--muted)}
#nabidka .nb-nw{white-space:nowrap}

/* CTA: .btn-l as is, filled with --ground (the tile's fill) because .btn-l's 70 % white vanishes on the white panel */
#nabidka .nb-cta{justify-self:start;align-self:end;margin-top:28px;background:var(--ground)}
#nabidka .nb-arr{display:inline-block;transition:transform .25s var(--ease-out)}
#nabidka .nb-cta:hover .nb-arr{transform:translateX(2px)}

/* ── guarantee (.nb-foot): a Paper band fused to the panel's bottom edge, one ring and one radius with it.
      "Garance" is the .lbl recipe; each promise gets an ink disc with a white tick (ink, not green: a promise is not
      a done/running state). Kontakt repeats it in a compact size (kontakt.css .kt-vows). ── */
#nabidka .nb-vows{display:flex;align-items:center;gap:36px;min-height:56px;margin:0;padding:0 var(--nb-px);list-style:none;background:var(--paper-2);border:1px solid var(--hl);border-top:0;border-radius:0 0 var(--r-s) var(--r-s);font-size:15px;line-height:1.4;color:var(--ink)}
#nabidka .nb-vows li{display:flex;align-items:center;gap:10px;font-weight:500;letter-spacing:-.005em}
#nabidka .nb-vows b{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
#nabidka .nb-vows li+li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--ink) var(--tick) center/12px no-repeat}

/* ── reveal (section.js adds .nb-js, then .nb-in once the panel is on screen): the panel rises once as one surface
      (the site's .reveal: 16 px, .8 s, --ease-out), the strip follows. No JS, reduced motion or print: all there.
      Keyframes fill "backwards" only, so afterwards nothing overrides hover/active. ── */
#nabidka.nb-js:not(.nb-in) .nb-panel,#nabidka.nb-js:not(.nb-in) .nb-foot{opacity:0}
#nabidka.nb-in .nb-panel{animation:nb-rise .8s var(--ease-out) backwards}
#nabidka.nb-in .nb-foot{animation:nb-fade .8s var(--ease-out) .25s backwards}
@keyframes nb-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes nb-fade{from{opacity:0}}

/* engines without subgrid: each column pins its CTA to the bottom; nothing pretends to line up across columns */
@supports not (grid-template-rows:subgrid){
  @media (min-width:901px){#nabidka .nb-offer{grid-template-rows:auto auto 1fr auto}}
}

/* ── responsive. Title scale only steps down: 22 (>1100) → 20 (≤1100). ── */
@media (max-width:1100px){
  #nabidka{--nb-px:28px}
  #nabidka .nb-offer h3{font-size:20px}
}
@media (max-width:1000px){
  #nabidka{--nb-px:24px} /* keeps "Automatizace marketingu" on one line down to 901 */
}
@media (max-width:900px){
  /* one column; each offer keeps tile, title and number on one line (centred on the title's first line) */
  #nabidka .nb-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  #nabidka .nb-offer{grid-row:auto;grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:none;grid-template-areas:"ic t no" "p p p" "cta cta cta";align-items:start;column-gap:14px;padding:26px var(--nb-px) 28px}
  #nabidka .nb-offer+.nb-offer{border-left:0;border-top:1px solid var(--hl)}
  #nabidka .nb-top{display:contents}
  #nabidka .nb-ic{grid-area:ic}
  #nabidka .nb-no{grid-area:no;line-height:32px}
  #nabidka .nb-offer h3{grid-area:t;margin-top:4px;line-height:24px}
  #nabidka .nb-offer>p{grid-area:p;margin-top:14px;max-width:60ch}
  #nabidka .nb-cta{grid-area:cta;margin-top:24px}
  /* the guarantee becomes the panel's top band, so it is read before the first "Chci nabídku", not after the third */
  #nabidka .wrap{display:flex;flex-direction:column}
  #nabidka .nb-foot{order:1}
  #nabidka .nb-panel{order:2;border-radius:0 0 var(--r-s) var(--r-s)}
  #nabidka .nb-vows{flex-wrap:wrap;gap:12px 32px;min-height:0;padding:18px var(--nb-px);border:1px solid var(--hl);border-bottom:0;border-radius:var(--r-s) var(--r-s) 0 0}
  #nabidka .nb-vows li:first-child{flex-basis:100%}
}
@media (max-width:600px){
  #nabidka{--nb-px:20px}
  #nabidka .nb-offer{padding:24px var(--nb-px)}
  #nabidka .nb-offer>p{margin-top:12px}
  #nabidka .nb-cta{margin-top:20px}
  #nabidka .nb-vows{flex-direction:column;align-items:stretch;gap:10px;padding:16px var(--nb-px)}
  #nabidka .nb-vows li{align-items:flex-start;text-wrap:pretty}
  #nabidka .nb-vows li:first-child{flex-basis:auto;margin-bottom:2px}
  #nabidka .nb-vows li+li::before{margin-top:1.5px}
}
@media print,(prefers-reduced-motion:reduce){
  #nabidka .nb-panel,#nabidka .nb-foot{opacity:1!important;animation:none!important}
}
@media (prefers-reduced-motion:reduce){
  #nabidka .nb-arr{transition:none}
  #nabidka .nb-cta:hover .nb-arr{transform:none}
}
/* Windows high contrast: .btn-l's ring is a box-shadow, so give it a real line; the disc fill is dropped, so the
   tick itself is drawn in the text colour */
@media (forced-colors:active){
  #nabidka .nb-cta{border:1px solid ButtonText}
  #nabidka .nb-vows li+li::before{forced-color-adjust:none;border-radius:0;background:CanvasText;-webkit-mask:var(--tick) center/100% no-repeat;mask:var(--tick) center/100% no-repeat}
}

/* Nabídka: kombinace modulů, co je v ceně a co chceme od klienta (31. 10. 2026) */
.nb-mix{margin:26px auto 0;text-align:center;color:var(--label);font-size:15px}

/* ── layout of the new copy (1. 11. 2026): combine-line in the head, three promises in the band ── */
/* the combine-line closes the head lead (moved in the markup), so panel + guarantee band stay one fused surface */
#nabidka .head>div>p:first-child{margin-bottom:0}
#nabidka .head .nb-mix{margin:14px 0 0;max-width:52ch;text-align:left;font-size:15px;line-height:1.5;color:var(--label)}
/* 901–1100: the label + 3 promises no longer fit one row; "Garance" takes its own line and the promises sit on the
   panel's three offer columns (same width, same inner padding) */
@media (min-width:901px) and (max-width:1100px){
  #nabidka .nb-vows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 0;align-items:start;padding:16px 0 18px}
  #nabidka .nb-vows li{padding:0 var(--nb-px);align-items:flex-start;text-wrap:balance}
  #nabidka .nb-vows li:first-child{grid-column:1/-1}
  #nabidka .nb-vows li+li::before{margin-top:1px}
}
/* ≤900: one promise per line (the phone recipe), instead of 2 + 1 ragged rows */
@media (max-width:900px){
  #nabidka .nb-vows{flex-direction:column;align-items:stretch;gap:10px;padding:16px var(--nb-px) 18px}
  #nabidka .nb-vows li{align-items:flex-start;text-wrap:pretty}
  #nabidka .nb-vows li:first-child{flex-basis:auto;margin-bottom:2px}
  #nabidka .nb-vows li+li::before{margin-top:1px}
}