/* Zázemí Dr. Bacon · www.drbacon.cz/portfolio/
 * Značka Páska: tokeny, páska a písma jsou kopie z drbacon-platform/packages/brand (neupravovat tady).
 */
@import url("fonts/fonts.css");
@import url("tokens.css");
@import url("tape.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--db-ground);
  color: var(--db-ink);
  font-family: var(--db-font-body);
  font-size: var(--db-text-lg);
  line-height: var(--db-leading-normal);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--db-focus); outline-offset: 3px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* hero = černá páska přes celou šíři */
.hero {
  background: var(--db-shell);
  color: var(--db-ink-on-shell);
  padding: 32px 0 48px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* natržený spodní okraj pásky */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 12px;
  background: var(--db-ground);
  clip-path: polygon(0 100%, 0 40%, 2% 70%, 4% 30%, 6% 75%, 8% 35%, 10% 70%, 12% 25%, 14% 65%, 16% 40%, 18% 80%, 20% 30%, 22% 70%, 24% 45%, 26% 75%, 28% 30%, 30% 65%, 32% 40%, 34% 75%, 36% 25%, 38% 70%, 40% 45%, 42% 80%, 44% 35%, 46% 70%, 48% 30%, 50% 65%, 52% 40%, 54% 75%, 56% 30%, 58% 70%, 60% 45%, 62% 75%, 64% 25%, 66% 65%, 68% 40%, 70% 80%, 72% 35%, 74% 70%, 76% 30%, 78% 65%, 80% 45%, 82% 75%, 84% 30%, 86% 70%, 88% 40%, 90% 75%, 92% 25%, 94% 65%, 96% 40%, 98% 70%, 100% 35%, 100% 100%);
}
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { width: 200px; height: auto; }
@media (min-width: 720px) { .wordmark { width: 260px; } }

.hero h1 {
  font-size: clamp(32px, 6.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 48px 0 20px;
  max-width: 17ch;
}
.hero h1 .under {
  display: inline-block;
  background: var(--db-surface);
  color: var(--db-ink);
  padding: 0.02em 0.22em 0.08em;
  margin-top: 0.12em;
  transform: rotate(-1.2deg);
  clip-path: var(--db-tape-clip);
}
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--db-shell-muted); max-width: 56ch; margin: 0 0 32px; }

.counters { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counters li { border: 1px solid var(--db-shell-line); border-radius: var(--db-radius-md); padding: 14px 16px; }
.counters strong { display: block; font-family: var(--db-font-mono); font-size: 34px; line-height: 1; }
.counters span { display: block; margin-top: 6px; font-size: var(--db-text-sm); color: var(--db-shell-muted); }

.status-line { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--db-font-label); font-weight: 700; font-size: var(--db-text-xs); letter-spacing: var(--db-label-tracking); text-transform: uppercase; color: var(--db-shell-muted); }

/* sekce */
section { padding: 56px 0 8px; }
.section-head { max-width: 62ch; margin-bottom: 24px; }
.section-head h2 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 8px; }
.section-head p { margin: 0; color: var(--db-ink-muted); }

/* přepínač oddělení = štítky */
.switcher { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.chip {
  font-family: var(--db-font-label);
  font-weight: 700;
  font-size: var(--db-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6em 1em;
  background: var(--db-surface);
  color: var(--db-ink);
  border: var(--db-border-w) solid var(--db-line-strong);
  border-radius: var(--db-radius-sm);
  cursor: pointer;
  transition: transform var(--db-dur-fast) var(--db-ease), box-shadow var(--db-dur-fast) var(--db-ease);
}
.chip:hover { transform: rotate(-1.2deg); }
.chip.is-active { background: var(--db-shell); color: var(--db-ink-on-shell); box-shadow: var(--db-shadow-1); }

/* karty štábu */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--db-surface);
  border: 1px solid var(--db-line);
  border-top: 6px solid var(--db-app-tape);
  border-radius: var(--db-radius-md);
  padding: 20px 20px 18px;
  display: flex; flex-direction: column;
  transition: transform var(--db-dur-normal) var(--db-ease), box-shadow var(--db-dur-normal) var(--db-ease);
}
.card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--db-ink); }
.card[data-app="hub"] { border-top-color: var(--db-ink); }
.card[hidden] { display: none; }

.card-top { display: flex; align-items: center; gap: 12px; }
.card-top img { width: 44px; height: 44px; flex: none; }
.card-top .db-tape:not([data-state]) { font-size: var(--db-text-sm); }
.card-top [data-state] { margin-left: auto; }
.card:nth-child(even) .card-top .db-tape:not([data-state]) { --db-tilt: var(--db-tilt-b); }

/* bílá páska Hubu potřebuje na bílé linku */
[data-app="hub"].db-tape, [data-app="hub"] .db-tape:not([data-state]) { box-shadow: inset 0 0 0 1px var(--db-ink); }

.host { font-family: var(--db-font-mono); font-size: var(--db-text-sm); color: var(--db-ink-muted); margin: 14px 0 6px; overflow-wrap: anywhere; }
.card h3, .svc h3 { font-size: var(--db-text-xl); line-height: var(--db-leading-tight); letter-spacing: -0.01em; margin: 0 0 8px; }
.card p, .svc p { margin: 0 0 12px; }
.card > p:not(.host):not(.aside) { font-size: 15px; }
.aside {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 10px 12px;
  background: var(--db-live);
  border-left: 3px solid var(--db-ink);
  font-size: 14px;
  font-style: italic;
}
.card[data-app="hub"] .aside { background: var(--db-surface-2); }
.aside b { font-style: normal; font-family: var(--db-font-label); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 2px; }

.empty { font-style: italic; color: var(--db-ink-muted); }

/* služby bez obličeje */
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 880px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc {
  background: var(--db-surface-2);
  border: 2px dashed var(--db-line);
  border-radius: var(--db-radius-md);
  padding: 20px;
}
.svc > p:last-child { margin-bottom: 0; font-size: 15px; }

/* cue list: v tabulce se nic nenaklání */
.table-wrap { overflow-x: auto; background: var(--db-surface); border: 1px solid var(--db-line); border-radius: var(--db-radius-md); }
.cue-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.cue-table th {
  text-align: left;
  font-family: var(--db-font-label);
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-label-tracking);
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 2px solid var(--db-line-strong);
}
.cue-table td { padding: 12px 14px; border-bottom: 1px solid var(--db-line); vertical-align: middle; }
.cue-table tr:last-child td { border-bottom: 0; }
.cue-table .t { font-family: var(--db-font-mono); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cue-table .db-tape { transform: none; }
.cue-table tr.is-live td { background: var(--db-live); }
.cue-table tr.is-live .t::before { content: "▶ "; }

/* patička */
.foot { background: var(--db-shell); color: var(--db-shell-muted); margin-top: 64px; padding: 36px 0 44px; }
.foot img { width: 160px; height: auto; margin-bottom: 16px; }
.foot p { margin: 0 0 6px; font-size: var(--db-text-md); }
.foot .small { font-size: var(--db-text-sm); max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card:hover { transform: none; }
}