/* ============================================================
   MAREK VÝBORNÝ — FINÁLNÍ WEB (vychází ze směru C)
   Plakátový editorial: plná žlutá #FFFA4B, kondenzované verzálky
   (Archivo wdth 72), černobílá fotografie, tlustá černá čára.
   Radius systém: 0 (vše ostré). Poslanec, ne startup: žádný křik,
   síla je v typografii a kompozici.
   ============================================================ */

:root {
  --yellow: #fffa4b;
  --ink: #111111;
  --white: #ffffff;
  --grey: #f2f2f2;
  --ink-on-yellow: #191910;
  --soft-on-white: #4c4c46;
  --soft-on-ink: #b5b5ac;
  --sans: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --line-thick: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible + .nav-burger { outline: 3px solid currentColor; outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

.display, h1, h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.01em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--yellow);
  padding: 12px 20px;
  z-index: 50;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Nav (na žluté) ---------- */

.nav { background: var(--yellow); position: relative; z-index: 20; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  border-bottom: var(--line-thick) solid var(--ink);
}
.nav-brand {
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.2rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links { display: flex; gap: 28px; font-size: 0.9rem; font-weight: 600; }
.nav-links a { text-decoration: none; border-bottom: 3px solid transparent; padding-bottom: 3px; transition: border-color 0.15s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--ink); }

/* mobilní menu — checkbox hack, bez závislosti na JS */
.nav-toggle { position: absolute; opacity: 0; width: 44px; height: 44px; right: 24px; top: 14px; margin: 0; cursor: pointer; z-index: 3; }
.nav-burger { display: none; width: 30px; height: 20px; flex-direction: column; justify-content: space-between; cursor: pointer; }
.nav-burger span { display: block; height: 4px; background: var(--ink); width: 100%; transition: transform 0.2s ease, opacity 0.2s ease; }

/* ---------- Hero (plná žlutá) ---------- */

.hero { background: var(--yellow); color: var(--ink-on-yellow); overflow: clip; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  align-items: end;
  min-height: min(88vh, 820px);
}
.hero-copy { padding: 56px 0 64px; }
.hero-emblem { height: 92px; width: auto; margin-bottom: 32px; display: block; }
.hero h1 {
  font-size: clamp(3rem, 7.2vw, 5.8rem);
}
.hero h1 .line { display: block; }
.hero-claim {
  margin-top: 28px;
  max-width: 46ch;
  font-size: 1.1rem;
  line-height: 1.55;
}
.hero-claim + .hero-claim { margin-top: 1.05em; }
.hero-claim strong { font-weight: 700; }
.hero-ctas { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 16px 30px;
  font-family: var(--display);
  font-variation-settings: "wdth" 75;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn:active { transform: translateY(2px); }
.btn-solid { background: var(--ink); color: var(--yellow); }
.btn-solid:hover { background: #2b2b26; }
.btn-line { border: 2px solid var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--yellow); }

.hero-visual { display: flex; align-items: flex-end; justify-content: center; }
.hero-visual img { width: min(100%, 470px); height: auto; }

/* ---------- Pásová sekce „Čemu se věnuji" (černá) ---------- */

.band-dark { background: var(--ink); color: var(--white); }
.band-dark .band-head { padding: 88px 0 40px; }
.band-head h2 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); color: var(--yellow); max-width: 18ch; }
.band-head .sub { margin-top: 18px; color: var(--soft-on-ink); max-width: 56ch; }

.tema-rows { border-top: 2px solid var(--white); }
.tema-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  padding: 32px 0;
  border-bottom: 2px solid var(--white);
  transition: background 0.2s ease, color 0.2s ease;
}
.tema-row h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.05;
  max-width: 15ch;
}
.tema-row h3 a { text-decoration: none; border-bottom: 4px solid transparent; transition: border-color 0.2s ease; }
.tema-row h3 a:hover { border-bottom-color: currentColor; }
.tema-row .tema-body p { color: var(--soft-on-ink); max-width: 56ch; transition: color 0.2s ease; }
.tema-row .tema-body p + p { margin-top: 0.9em; }
.tema-row:hover { background: var(--yellow); color: var(--ink); }
.tema-row:hover .tema-body p { color: var(--ink-on-yellow); }
.tema-row:hover h3 { color: var(--ink); }
.tema-row > * { padding-inline: 12px; }

.band-cta { padding: 34px 0 92px; }
.band-cta a {
  font-family: var(--display);
  font-variation-settings: "wdth" 75;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 4px solid var(--yellow);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.band-cta a:hover { color: var(--white); border-bottom-color: var(--white); }

/* ---------- Zkušenost, kterou využívám (žlutý pás) ---------- */

.zkusenost { background: var(--yellow); color: var(--ink-on-yellow); padding: 88px 0 96px; }
.zkusenost h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 40px; max-width: 20ch; }
.zkusenost-list { border-top: 3px solid var(--ink); }
.zkusenost-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 3px solid var(--ink);
}
.zkusenost-row dt {
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  line-height: 1.05;
}
.zkusenost-row dd {
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-variation-settings: "wdth" 78;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  white-space: nowrap;
}

/* ---------- Bio blok (bílý, editorial) ---------- */

.bio { padding: 96px 0; border-bottom: var(--line-thick) solid var(--ink); }
.bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.bio h2 { font-size: clamp(2.4rem, 5vw, 3.4rem); max-width: 10ch; }
.bio h2 .flag { background: var(--yellow); padding: 0 0.12em; }
.bio-text p { color: var(--soft-on-white); max-width: 58ch; }
.bio-text p + p { margin-top: 1.1em; }
.bio-text .more-link {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--display);
  font-variation-settings: "wdth" 75;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 4px solid var(--yellow);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.bio-text .more-link:hover { border-bottom-color: var(--ink); }

/* ---------- Feedy ---------- */

.feeds-section { padding: 92px 0; }
.feeds-section h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 40px; }
/* Odkazy na sítě: řádky ve stejném duchu jako témata na černém pásu — celý
   řádek je odkaz a při najetí se rozsvítí žlutě. Žádné vložené příspěvky,
   takže ani žádné prázdné boxy, když feed třetí strany nedojede. */
.social-rows { list-style: none; border-top: 3px solid var(--ink); }
.social-rows li { border-bottom: 3px solid var(--ink); }
.social-rows a {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 26px 12px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.social-rows a:hover { background: var(--yellow); }
.social-rows img { width: 22px; height: 22px; }
.social-rows .net {
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1;
}
.social-rows .handle { color: var(--soft-on-white); font-size: 0.95rem; }
.social-rows a:hover .handle { color: var(--ink-on-yellow); }
.social-rows .go {
  font-family: var(--display);
  font-variation-settings: "wdth" 78;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------- Kontakt (černý) ---------- */

.kontakt { background: var(--ink); color: var(--white); }
/* pozor: .kontakt-inner je zároveň .wrap — boční padding se musí zopakovat,
   jinak text sedne na okraj viewportu (projeví se hlavně na mobilu) */
.kontakt-inner { padding: 96px 28px; }
.kontakt h2 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); color: var(--yellow); max-width: 16ch; }
.kontakt-mail {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--display);
  font-variation-settings: "wdth" 74;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 2.1rem);
  text-transform: lowercase;
  color: var(--white);
  text-decoration: none;
  border-bottom: 5px solid var(--yellow);
  padding-bottom: 4px;
  transition: color 0.2s ease;
  word-break: break-word;
}
.kontakt-mail:hover { color: var(--yellow); }
.kontakt-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 3px solid rgba(255, 255, 255, 0.28);
}
.kontakt-cols h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 75;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--yellow);
  margin-bottom: 12px;
}
.kontakt-cols p { color: var(--soft-on-ink); font-size: 0.95rem; }
.kontakt-cols p + p { margin-top: 12px; }
.kontakt-cols a { color: var(--white); word-break: break-word; }

/* ---------- Footer ---------- */

.footer { background: var(--ink); color: var(--soft-on-ink); font-size: 0.85rem; border-top: 1px solid #2c2c28; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px;
}
.footer img.partylogo { height: 26px; width: auto; }
.footer .socials { display: flex; gap: 18px; }
.footer .socials img { width: 16px; height: 16px; filter: invert(1); opacity: 0.7; transition: opacity 0.2s ease; }
.footer .socials a:hover img { opacity: 1; }

/* ---------- Podstránky (hero) ---------- */

.page-hero { background: var(--yellow); color: var(--ink-on-yellow); overflow: clip; }
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  align-items: end;
}
.page-hero-copy { padding: 64px 0; align-self: center; }
.page-hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); }
.page-hero .sub { margin-top: 26px; max-width: 46ch; font-size: 1.12rem; line-height: 1.55; }
/* Portrét je zarovnaný dospodu, takže bez tohohle odsazení začínal těsně pod
   linkou hlavního menu — výšku sekce určovala samotná fotka. Odsazení visí na
   fotce, ne na výšce okna (`vh` se na nižším okně složí a mezera zmizí), takže
   je stejné na Tématech i na O mně. */
.page-hero-visual { display: flex; align-items: flex-end; justify-content: center; padding-top: 76px; }
.page-hero-visual img { width: min(100%, 420px); height: auto; }
.page-hero-bottom { border-top: var(--line-thick) solid var(--ink); }

/* ---------- Stránka O mně ---------- */

.omne-section { padding: 88px 0; }
.omne-section h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin-bottom: 34px; max-width: 22ch; }
.omne-section h2 .flag { background: var(--yellow); padding: 0 0.12em; }
.prose { max-width: 64ch; }
.prose p { color: var(--soft-on-white); }
.prose p + p { margin-top: 1.15em; }
.prose-lead p:first-child {
  color: var(--ink);
  font-size: 1.28rem;
  line-height: 1.5;
}

.band-yellow { background: var(--yellow); color: var(--ink-on-yellow); padding: 88px 0 96px; }
.band-yellow h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 36px; }

.timeline { border-top: 3px solid var(--ink); max-width: 860px; }
.timeline-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  padding: 20px 0;
  border-bottom: 3px solid var(--ink);
}
.timeline-row dt {
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}
.timeline-row dd { color: var(--ink-on-yellow); align-self: center; }

.funkce-list { list-style: none; max-width: 800px; }
.funkce-list li {
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid #dcdcd6;
  position: relative;
  color: var(--soft-on-white);
}
.funkce-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 18px;
  height: 6px;
  background: var(--yellow);
}

/* ---------- Stránka Témata ---------- */

.tema-nav { background: var(--ink); color: var(--white); }
/* Proužek témat, dvě věci k zapamatování:
   1) Výchozí stav je lámání, aby bylo všech šest témat vždycky vidět. Jeden
      řádek se zapíná až od 1200px, kde se prokazatelně vejde (potřebuje 1119px
      z 1144 dostupných) — po přejmenování témat 17. 8. se na širokém okně lomil
      na 5+1 a vypadalo to jako chyba. Odsouvání je jen pojistka pro případ
      náhradního písma, na skutečných šířkách se nezapne.
   2) Oddělovače nejsou čáry na položkách, ale 2px mezery, kterými prosvítá
      podklad seznamu. Čára na položce totiž při zalomení zůstane viset uprostřed
      pruhu za poslední položkou řádku a nic neodděluje; „poslední v řádku" se
      v CSS vybrat nedá. Za poslední položkou řádku ale žádná mezera není, takže
      problém mizí sám. Podmínkou je, aby položky řádek vyplnily (flex-grow
      níže) — jinak by na jeho konci prosvítal světlý podklad. */
.tema-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0;
  background: rgba(255, 255, 255, 0.25);
}
@media (min-width: 1200px) {
  .tema-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .tema-nav ul::-webkit-scrollbar { display: none; }
}
/* Roste, ale nesmršťuje se: položky vyplní řádek beze zbytku, takže světlý
   podklad prosvítá jen v mezerách mezi nimi. */
.tema-nav li { flex: 1 0 auto; display: flex; background: var(--ink); }
.tema-nav a {
  flex: 1 0 auto;
  padding: 18px 14px;
  white-space: nowrap;
  font-family: var(--display);
  font-variation-settings: "wdth" 78;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.tema-nav a:hover { background: var(--yellow); color: var(--ink); }

.tema-block { padding: 80px 0; border-bottom: 3px solid var(--ink); scroll-margin-top: 20px; }
.tema-block:nth-child(even) { background: var(--grey); }
.tema-block-grid {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.tema-num {
  font-family: var(--display);
  font-variation-settings: "wdth" 78;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--yellow);
  padding: 8px 12px;
  justify-self: start;
}
.tema-block h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: 26px; max-width: 24ch; }
.tema-block-body .lead {
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 52ch;
}
.tema-block-body p { color: var(--soft-on-white); max-width: 66ch; }
.tema-block-body p + p { margin-top: 1.15em; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero-grid, .page-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding: 44px 0 12px; }
  .page-hero-copy { padding: 44px 0 8px; }
  .page-hero-visual { padding-top: 0; }
  .hero-visual img, .page-hero-visual img { width: min(100%, 340px); }
  .tema-row { grid-template-columns: 1fr; gap: 12px; }
  .tema-row h3 { max-width: none; }
  .bio-grid { grid-template-columns: 1fr; gap: 32px; }
  .kontakt-cols { grid-template-columns: 1fr; gap: 26px; }
  .tema-block-grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 700px) {
  .wrap { padding: 0 20px; }
  .nav-inner { height: 64px; position: relative; }
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    flex-direction: column;
    gap: 0;
    background: var(--yellow);
    border-bottom: var(--line-thick) solid var(--ink);
    font-size: 1rem;
    z-index: 2;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav-links a {
    padding: 15px 20px;
    border-bottom: none;
    border-top: 2px solid rgba(0, 0, 0, 0.15);
  }
  .nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--ink); color: var(--yellow); border-bottom: none; }

  .hero-emblem { height: 74px; margin-bottom: 24px; }
  .bio, .feeds-section, .omne-section, .tema-block { padding: 60px 0; }
  .zkusenost, .band-yellow { padding: 60px 0 68px; }
  .kontakt-inner { padding: 64px 20px; }
  .footer-inner { padding: 24px 20px; }
  .timeline-row { grid-template-columns: 82px 1fr; gap: 18px; }
  .timeline-row dt { font-size: 1.25rem; }
  .zkusenost-row { gap: 10px 20px; }
  .tema-nav a { padding: 14px 16px; font-size: 0.8rem; }

  .social-rows a { grid-template-columns: 22px minmax(0, 1fr); gap: 8px 14px; padding: 20px 8px; }
  .social-rows .handle, .social-rows .go { grid-column: 2; }
  .social-rows .go { margin-top: 6px; }
}