/* MP Support — spoločné štýly pre dokumenty, ponuky a prezentácie
   Pravidlá a odôvodnenie: podklady/design-system.md
   Použitie: <link rel="stylesheet" href="mp-support.css"> alebo vlepiť do <style> v jednosúborovom výstupe. */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #0B1F33;
  --orange: #FF5D00;
  --teal: #2DD4BF;
  --bg-a: #F6F9FC;
  --bg-b: #ECF2F8;
  --head: #313C4D;
  --body: #4A5768;
  --body-dark: #93A7BC;
  --line: rgba(11, 31, 51, .10);

  --f-head: "Archivo Black", "Arial Black", sans-serif;
  --f-body: Inter, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;

  --r-btn: 8px;
  --r-card: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg-a);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 900px; margin: 0 auto; padding: 0 48px; }

/* ---------- typografia ---------- */

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 900;
  text-transform: lowercase;   /* rozpoznávací znak značky — neprepisovať */
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--head);
  margin: 0 0 .4em;
}

h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

h1 em, h2 em, .hl { font-style: italic; color: var(--orange); }   /* práve jedno slovo */

p { margin: 0 0 1em; }
p.lead { font-size: 17px; color: var(--body); max-width: 62ch; }
a { color: var(--orange); text-decoration: none; }
strong { color: var(--head); font-weight: 600; }

/* mono popisok nad nadpisom sekcie */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--body-dark);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--teal); flex: none;
}

/* ---------- sekcie ---------- */

section { padding: 72px 0; }
section.alt { background: var(--bg-b); }
section.dark { background: var(--ink); }
section.dark h1, section.dark h2, section.dark h3 { color: #fff; }
section.dark p, section.dark li { color: var(--body-dark); }
section.dark .eyebrow { color: var(--teal); }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* ---------- hlavička a päta dokumentu ---------- */

.docheader {
  background: var(--ink); color: #fff;
  padding: 28px 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.docheader .brand { font-family: var(--f-head); font-style: italic; font-size: 20px; text-transform: lowercase; }
.docheader .meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--body-dark); text-transform: uppercase; }

.docfooter {
  background: var(--ink); color: var(--body-dark);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  padding: 20px 48px;
  display: flex; justify-content: space-between;
}

/* ---------- prvky ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: var(--r-btn); border: 0;
}
.btn.ghost { background: transparent; color: var(--head); }
section.dark .btn.ghost { color: #fff; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 28px;
  box-shadow: 0 1px 3px rgba(11, 31, 51, .06);
}
.card .num {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--orange); display: block; margin-bottom: 14px;
}
section.dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }

/* veľké číslo / KPI */
.kpi { font-family: var(--f-head); font-style: italic; font-size: 44px; color: var(--orange); line-height: 1; }
.kpi + .kpi-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--body-dark); }

/* odrážky so zaškrtnutím */
ul.check { list-style: none; padding: 0; margin: 0; }
ul.check li { position: relative; padding-left: 26px; margin-bottom: 10px; }
ul.check li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--teal); font-weight: 700;
}

/* ---------- tabuľka ---------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  background: var(--bg-b); text-align: left;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--head);
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* štítky stavu */
.tag {
  display: inline-block; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.tag.done { background: rgba(45,212,191,.15); color: #128577; }
.tag.wip  { background: rgba(255,93,0,.12);  color: var(--orange); }
.tag.todo { background: var(--bg-b); color: var(--body); }

/* ---------- tlač / PDF ---------- */

@page { size: A4; margin: 18mm 16mm; }
@media print {
  body { background: #fff; font-size: 11pt; }
  section { padding: 24px 0; break-inside: avoid; }
  .card, table { break-inside: avoid; }
  h1 { font-size: 26pt; } h2 { font-size: 17pt; } h3 { font-size: 13pt; }
  .docheader, .docfooter, section.dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- režim prezentácie (16:9) ---------- */

.slide {
  width: 1280px; height: 720px; margin: 0 auto 24px;
  padding: 72px 88px; background: var(--bg-a);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.slide.dark { background: var(--ink); color: var(--body-dark); }
.slide.dark h1, .slide.dark h2 { color: #fff; }
.slide h1 { font-size: 72px; }
.slide h2 { font-size: 44px; }
.slide p  { font-size: 20px; }
.slide .eyebrow { font-size: 13px; }
.slide .pagenum {
  position: absolute; right: 88px; bottom: 48px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--body-dark);
}