/* poptavky.veldon.cz - reakce na poptavku
   Contract: _spec/DESIGN.md. Fonts: Newsreader / Public Sans / JetBrains Mono. */

:root{
  --paper:#f4f2ec;
  --paper-2:#ebe8e0;
  --ink:#15171b;
  --ink-2:#5a5f68;
  --rule:#cfc9bd;
  --cover:#1b1e24;
  --accent:#0f6a4a;
  --accent-soft:#e2ece7;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --measure:62ch;
  --pad:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(1rem,.97rem + .18vw,1.075rem)/1.62 var(--sans);
  font-feature-settings:"liga" 1,"kern" 1;
}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
code{font:400 .88em/1.4 var(--mono);background:var(--paper-2);padding:.08em .3em;border-radius:2px}
.band code{background:#e2ded4}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:9;background:var(--ink);color:var(--paper);padding:.6rem .9rem}

.sheet{padding:clamp(2.75rem,6vw,5rem) var(--pad)}
.band{background:var(--paper-2)}
.wrap{max-width:74rem;margin:0 auto}
.measure{max-width:var(--measure)}

/* ---------- cover ---------- */
#cover{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.phead{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:baseline}
.plabel,.pmeta{margin:0;font:400 .74rem/1.5 var(--mono);letter-spacing:.06em;color:var(--ink-2)}
.plabel .sep{color:var(--rule);padding:0 .2em}
.rule{height:1px;background:var(--rule);margin:1rem 0 clamp(2rem,5vw,3.25rem)}

.verdict{
  margin:0 0 1rem;max-width:20ch;
  font:500 clamp(2.05rem,1.15rem + 3.4vw,3.5rem)/1.1 var(--serif);
  letter-spacing:-.012em;text-wrap:balance;
}
.verdict em{font-style:italic;font-weight:400;color:var(--accent)}
.lead{margin:0 0 .45rem;max-width:52ch;font-size:1.06em;color:var(--ink)}
.lead+.lead{color:var(--ink-2)}

.stamp{
  margin:clamp(2rem,5vw,3rem) 0 0;
  font:400 clamp(1.15rem,1rem + .7vw,1.5rem)/1.5 var(--serif);
}
.cover-foot{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:baseline;margin-top:clamp(2.25rem,5vw,3.25rem)}
.sig{margin:0;font:500 .95rem/1 var(--mono);letter-spacing:.14em;text-transform:lowercase}

/* ---------- the redaction bar ---------- */
/* nowrap only where the bar must cover ONE continuous line; inside a narrow
   grid cell (the flow schematic) it has to be free to wrap or it spills the card. */
.veil{position:relative}
.stamp .veil,.btn .veil{white-space:nowrap}
.js .veil::after{
  content:"";position:absolute;inset:-.14em -.22em;
  background:var(--cover);border-radius:1.5px;
  clip-path:inset(0 0 0 0);
  transition:clip-path .42s cubic-bezier(.2,.7,.2,1);
}
.js .veil.is-open::after{clip-path:inset(0 0 0 100%)}
@media (prefers-reduced-motion:reduce){
  .js .veil::after{display:none}
}

/* ---------- their checklist ---------- */
.shead-min{margin:0 0 1.1rem;font:400 .74rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.checklist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 2.5rem;max-width:64rem}
.checklist li{position:relative;padding-left:1.6rem;font:400 .97rem/1.55 var(--sans)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.62em;width:.85rem;height:1px;background:var(--accent)
}

/* ---------- numbered sections ---------- */
.sec{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0 2rem}
.gutter .num{font:500 .95rem/1 var(--mono);color:var(--accent);letter-spacing:.06em}
.body h2{margin:-.28rem 0 1.1rem;font:500 clamp(1.5rem,1.2rem + 1vw,2rem)/1.2 var(--serif);letter-spacing:-.008em}
.body p{margin:0 0 .95rem}
.body p:last-child{margin-bottom:0}
.fineprint{font:400 .82rem/1.55 var(--mono);color:var(--ink-2)}
.lede-min{font-size:1.1em}
.offer{font-weight:500}

.callout{
  margin:0 0 1.4rem;padding:.85rem 1.1rem;
  background:var(--accent-soft);border-left:2px solid var(--accent);
  max-width:var(--measure);font-weight:500;
}

/* ---------- flow schematic ---------- */
.flow{margin:1.6rem 0 1.8rem}
.flow-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.35rem}
.step{
  position:relative;padding:.85rem .9rem 1rem;background:var(--paper);
  border:1px solid var(--rule);border-left:2px solid var(--rule);
  transition:border-left-color .35s ease,transform .35s ease;
}
.band .step{background:var(--paper)}
.step.is-on{border-left-color:var(--accent);transform:translateY(-2px)}
.step-n{display:block;font:500 .72rem/1 var(--mono);color:var(--ink-2);letter-spacing:.08em;margin-bottom:.5rem}
.step-h{display:block;font:500 1.02rem/1.3 var(--serif);margin-bottom:.3rem}
.step-d{display:block;font:400 .84rem/1.5 var(--sans);color:var(--ink-2)}
.step-d code{font-size:.82em}
.step:not(:last-child)::after{
  content:"";position:absolute;right:-1.05rem;top:1.15rem;
  width:.75rem;height:1px;background:var(--rule);
}
.step:not(:last-child)::before{
  content:"";position:absolute;right:-1.05rem;top:.9rem;
  border:3px solid transparent;border-left:4px solid var(--rule);
}
.step:nth-child(3)::after{background:var(--accent);height:2px}
.step:nth-child(3)::before{border-left-color:var(--accent);top:.85rem}
.step.is-key{border-color:var(--ink)}
.flow figcaption{margin-top:.9rem;font:400 .82rem/1.55 var(--mono);color:var(--ink-2)}

/* ---------- price ---------- */
.price{margin:1.3rem 0 1.5rem;display:grid;max-width:44rem}
.price>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1.5rem;align-items:baseline;padding:.65rem 0;border-top:1px solid var(--rule)}
.price>div:last-child{border-bottom:1px solid var(--rule)}
.price dt{font-size:.97rem}
.price dd{margin:0;text-align:right}
.price .sum dt{font-weight:500}
.price .sum .fig{color:var(--accent)}
.fig{font:500 1rem/1.4 var(--mono);white-space:nowrap}
.vat{margin:-.9rem 0 1.5rem;font:400 .88rem/1.5 var(--sans);color:var(--ink-2)}
.note{display:block;font:400 .78rem/1.5 var(--mono);color:var(--ink-2)}

/* ---------- references ---------- */
.works{margin:.6rem 0 1.6rem;padding:0;list-style:none;display:grid;gap:.1rem;max-width:56rem}
.works:last-child{margin-bottom:0}
.works li{padding:.7rem 0;border-top:1px solid var(--rule)}
.works li:last-child{border-bottom:1px solid var(--rule)}
.works a{font:500 .92rem/1.5 var(--mono);letter-spacing:-.01em}
.wip{font:400 .78rem/1.5 var(--mono);color:var(--ink-2)}
.works p{margin:.12rem 0 0;font-size:.95rem;color:var(--ink-2);max-width:var(--measure)}

/* ---------- cta ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.btn{
  display:inline-block;padding:.72rem 1.15rem;border:1px solid var(--ink);
  font:500 .95rem/1.2 var(--mono);text-decoration:none;letter-spacing:-.01em;
}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- colophon ---------- */
.colophon{padding-top:1.75rem;padding-bottom:2.25rem}
.colophon .rule{margin:0 0 1rem}
.colophon p{margin:0;font:400 .8rem/1.6 var(--mono);color:var(--ink-2)}
.colophon .cl-sep{color:var(--rule);padding:0 .35em}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
  .step:not(:last-child)::after,.step:not(:last-child)::before{display:none}
  .step:last-child{grid-column:1/-1}
}
@media (max-width:720px){
  .sec{grid-template-columns:1fr}
  .gutter{margin-bottom:.35rem}
  .body h2{margin-top:0}
  .checklist{grid-template-columns:1fr;gap:.5rem}
  .flow-steps{grid-template-columns:1fr}
  .step:last-child{grid-column:auto}
  .price>div{grid-template-columns:1fr}
  .price dd{text-align:left}
  .stamp .veil{white-space:normal}
}