/* Prostě Hukvaldy – onepage web
   Barvy a písmo podle brožury (Canva). */

:root {
  --blue: #09539C;        /* hlavní modrá z loga */
  --red: #D00002;         /* červená z loga */
  --navy: #052E5A;        /* patička */
  --navy-deep: #04284D;   /* ztmavení fotek */
  --band: #063F78;        /* podklad fotopásů */
  --tint: #1E64AE;        /* modrý duotón fotek */
  --ink: #12304F;         /* běžný text */
  --ink-strong: #0B2F57;  /* nadpisy bodů programu */
  --muted: #3B5470;       /* doplňkový text */
  --line: #DCE6F1;
  --pill: #E3EEF9;
  --alt: #F2F6FB;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-pad: clamp(64px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--blue); }
a:hover { color: var(--red); }
a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section-pad) 0; }
.section--alt { background: var(--alt); }

/* ---------- Společné typografické prvky ---------- */

.eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rule { width: 56px; height: 5px; background: var(--red); }
.rule--lg { width: 64px; }

.section-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 44px; }
.section-head--narrow { max-width: 760px; }
.section-head p { margin: 0; font-size: 18px; }

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 54px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--blue);
}

.subhead,
.section-head .subhead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  color: var(--red);
}

.hl { color: var(--red); font-weight: 600; }

/* ---------- Tlačítka ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { color: #fff; }
.btn--outline { border: 2px solid #fff; color: #fff; }
.btn--outline:hover { color: #fff; background: rgba(255,255,255,.08); }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: 19px; }
.btn .icon { width: 20px; height: 20px; stroke-width: 2.2; }

/* ---------- Hlavička ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-header__logo { display: flex; }
.site-header__logo img { display: block; height: 56px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.main-nav a { color: var(--blue); text-decoration: none; }
.main-nav a:hover { color: var(--red); }

/* ---------- Fotopásy (hero, citát, volby) ----------
   Výchozí je modrý duotón jako v brožuře.
   Pro barevné fotky přidej sekci třídu .photo-band--color */

.photo-band { position: relative; overflow: hidden; background: var(--band); color: #fff; }
.photo-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(1.18); }
.photo-band__tint { position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; }
.photo-band__shade { position: absolute; inset: 0; background: var(--navy-deep); opacity: .32; }
.photo-band__content { position: relative; }

.photo-band--color .photo-band__img { filter: saturate(1.05); }
.photo-band--color .photo-band__tint { display: none; }
.photo-band--color .photo-band__shade { opacity: .5; }

.corner { position: absolute; background: var(--red); }
.corner--top-right { top: 0; right: 0; width: 34%; height: 180px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.corner--bottom-right { right: 0; bottom: 0; width: 30%; height: 160px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ---------- Hero ---------- */

.hero {
  min-height: 680px;
  display: flex;
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
}
.hero .photo-band__img { object-position: 60% 50%; }
.hero__inner {
  width: 100%;
  padding-top: 96px;
  padding-bottom: 140px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.hero__text { flex: 1 1 560px; max-width: 780px; display: flex; flex-direction: column; gap: 24px; }
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(46px, 7vw, 98px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.hero__tagline { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0.02em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

.ballot {
  flex: 0 0 auto;
  background: var(--red);
  color: #fff;
  padding: 26px 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-display);
}
.ballot__label { font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: 0.06em; }
.ballot__number { font-weight: 800; font-size: 168px; line-height: 0.82; }
.ballot__date { margin-top: 10px; font-weight: 600; font-size: 19px; letter-spacing: 0.02em; }

/* ---------- Úvodní slovo ---------- */

.letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.letter { display: flex; flex-direction: column; gap: 20px; }
.letter .rule { margin-bottom: 8px; }
.letter p { margin: 0; font-size: 18px; }

.letter-photo { margin: 0; position: relative; padding: 0 18px 18px 0; }
.letter-photo::before { content: ""; position: absolute; right: 0; bottom: 0; width: 70%; height: 70%; background: var(--red); }
.letter-photo img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; }

/* ---------- Priority ---------- */

.priority-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; }
.priority { background: #fff; border: 1px solid var(--line); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.priority h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.15; text-transform: uppercase; color: var(--blue); }
.priority p { margin: 0; font-size: 16px; color: var(--muted); }

.icon-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--blue); }
.icon-circle--red { background: var(--red); }
.icon-circle .icon { width: 32px; height: 32px; }

/* ---------- Volební program ---------- */

.program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px 36px; align-items: start; }
.program-group { display: flex; flex-direction: column; gap: 22px; }

.pill { display: flex; align-items: center; gap: 14px; background: var(--pill); border-radius: 999px; padding: 6px 22px 6px 6px; }
.pill .icon-circle { width: 48px; height: 48px; }
.pill .icon-circle .icon { width: 26px; height: 26px; stroke-width: 1.9; }
.pill h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--blue); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.step { display: grid; grid-template-columns: 42px 1fr; gap: 4px; }
.step__num { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--red); }
.step__body { display: flex; flex-direction: column; gap: 4px; }
.step h4 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink-strong); }
.step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* ---------- Citát ---------- */

.quote-band { clip-path: polygon(0 64px, 100% 0, 100% calc(100% - 64px), 0 100%); }
.quote-band .photo-band__img { object-position: 50% 45%; }
.quote-band .photo-band__shade { opacity: .42; }
.quote-band.photo-band--color .photo-band__shade { opacity: .6; }
.quote-band__inner { max-width: 880px; margin: 0 auto; padding: 160px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.quote-band__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.4vw, 68px); line-height: 1; text-transform: uppercase; }
.quote-band__text { margin: 0; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.6; text-wrap: pretty; }
.quote-band__cta { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 26px); }

/* ---------- Kandidáti ---------- */

.team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.candidate { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.candidate__photo { position: relative; }
.candidate__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.candidate__num {
  position: absolute; left: 0; top: 0;
  width: 50px; height: 50px;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
}
.candidate__info { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.candidate h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.1; color: var(--blue); }
.candidate p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
.candidate__place { display: flex; align-items: center; gap: 6px; }
.candidate__place .icon { width: 16px; height: 16px; color: var(--red); stroke-width: 2; }

/* ---------- Volby ---------- */

.vote-band { clip-path: polygon(0 0, 100% 64px, 100% 100%, 0 100%); }
.vote-band .photo-band__img { object-position: 50% 40%; }
.vote-band__inner {
  padding-top: 152px;
  padding-bottom: 128px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}
.vote-band__info { display: flex; flex-direction: column; gap: 20px; }
.vote-band__date { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6vw, 80px); line-height: 0.95; text-transform: uppercase; }
.vote-band__times { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.vote-band__times p { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 500; }
.vote-band__times .icon { width: 22px; height: 22px; stroke-width: 1.9; }

.how-to { background: #fff; color: var(--ink); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.how-to__head { display: flex; align-items: center; gap: 16px; }
.how-to__icon { width: 72px; height: 72px; flex: 0 0 72px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; }
.how-to__icon .icon { width: 44px; height: 44px; stroke-width: 2; }
.how-to h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; color: var(--blue); }
.how-to p { margin: 0; font-size: 18px; }
.how-to strong { color: var(--red); }
.how-to .how-to__thanks { font-family: var(--font-display); font-weight: 700; font-size: 26px; text-transform: uppercase; color: var(--red); }

/* ---------- Patička ---------- */

.site-footer { background: var(--navy); color: #fff; }
.site-footer__inner { padding-top: 56px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 36px; }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer__brand img { display: block; height: 84px; width: auto; max-width: 100%; max-height: 100%; align-self: flex-start; }
.site-footer__brand p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: 0.02em; }
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__links a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #fff; text-decoration: none; font-size: 18px; font-weight: 500; }
.site-footer__links a:hover { color: #fff; text-decoration: underline; }
.site-footer__links span { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: center; }
.site-footer__links .icon { width: 22px; height: 22px; }
.site-footer__divider { height: 1px; background: #2A5585; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 15px; color: #C9D8EA; }
.site-footer__bottom a { color: #C9D8EA; }
.site-footer__bottom a:hover { color: #fff; }

/* ---------- Responzivita ---------- */

@media (max-width: 1060px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .main-nav { display: none; }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header__logo img { height: 46px; }
  .hero__inner { padding-top: 64px; padding-bottom: 120px; }
  .ballot__number { font-size: 128px; }
  .candidate h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}