/* ===== Základ ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
:root {
  --container-max: 1100px;
  --section-max: 900px;
  --gap: 1.25rem;
  --radius: 12px;
  --pad: 2rem;
  --page-x: 1rem;
  --header-h: 64px;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: white;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.2) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(200,200,200,0.15) 0%, transparent 65%),
    linear-gradient(180deg, #0a0f25 0%, #000 100%);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;

  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); margin: 0; letter-spacing: 2px; }
h2 { font-size: clamp(1.2rem, 3.6vw, 1.6rem); margin: 0 0 .5rem; }
p  { line-height: 1.6; margin: .25rem 0 .75rem; }

/* ===== Header ===== */
header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  padding: 0.75rem 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20;
}
header .wrap {
  max-width: min(var(--container-max), 100%);
  margin: 0 auto;
  padding: 0 var(--page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  position: relative; /* kotva pro mobilní nav */
}

/* Značka (TAJFUNDART) – umí se smrštit */
.brand {
  min-width: 0;              /* dovolí zmenšení v grid/flex kontextu */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tlačítko menu – fixní šířka, bez smrštění */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Navigace */
header nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  min-width: 0;              /* zabrání přetečení, umožní zalomení */
  justify-content: flex-end;
}
header nav a {
  color: #3ec5ff;
  text-decoration: none;
  font-weight: 700;
  padding: .35rem .6rem;
  border-radius: 6px;
  white-space: nowrap;
}
header nav a:hover { color: #1e90ff; background: rgba(62,197,255,0.08); }

/* Desktop: nav je v řádku, tlačítko menu skryté */
@media (min-width: 601px) {
  .menu-toggle { display: none; }
  header nav { position: static; max-height: none !important; background: transparent; }
}

/* Mobil: nav pod header, tlačítko viditelné */
@media (max-width: 600px) {
  header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    align-self: stretch; /* zajistí plnou šířku ve flex rodiči */
    padding-top: max(0px, env(safe-area-inset-top));
  }
  .menu-toggle { display: inline-flex; align-self: center; }
  header .wrap { flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .75rem; }
  header .brand { text-align: center; inline-size: 100%; }
  header .brand { font-size: clamp(1.25rem, 6vw, 1.6rem); }
  header nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: rgba(0,0,0,0.88);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
    display: block;                  /* pro animaci výšky */
    max-height: 0;                   /* zavřeno */
    transition: max-height .25s ease;
  }
  header nav.open { max-height: 320px; }
  header nav a { display: block; padding: .7rem .85rem; text-align: center; }
}

/* ===== Main / sekce ===== */
main {
  inline-size: 100%;
  max-inline-size: min(var(--container-max), 100%);
  margin: calc(var(--header-h) + 1rem) auto 2rem;
  padding: 0 var(--page-x);
  text-align: center;
  display: grid;
  gap: var(--gap);
}

section {
  inline-size: 100%;
  max-inline-size: min(var(--section-max), 100%);
  background: rgba(0,0,0,0.4);
  padding: var(--pad);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin-inline: auto;
}

/* ===== Karty / Mřížky ===== */
.card {
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}
.cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  justify-items: stretch;
}
@media (min-width: 780px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.poster {
  inline-size: 100%;
  max-inline-size: min(var(--section-max), 100%);
  block-size: auto;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  margin: 0 auto;
}
.subtle { opacity: .9; }

/* ===== Event meta ===== */
.event-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 2.25rem;
  row-gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.event-meta .meta { min-inline-size: 120px; text-align: center; }
.event-meta .label { font-size: .9rem; font-weight: 700; letter-spacing: .3px; }
.event-meta .value { font-weight: 800; font-size: clamp(1.1rem, 3.2vw, 1.6rem); }
.event-meta .label::after { content: ':'; margin-left: .25rem; opacity: .9; }

/* ===== Sekce Další turnaj ===== */
@media (min-width: 780px) {
  #dalsi-turnaj .card { margin-inline: auto; }
  #dalsi-turnaj .event-meta { justify-content: center; }
}
#dalsi-turnaj { text-align: center; }
#dalsi-turnaj .cards { justify-content: center; justify-items: center; }
#dalsi-turnaj .cards > .card { inline-size: 100%; max-inline-size: 420px; }
@media (min-width: 780px) {
  #dalsi-turnaj .cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  #dalsi-turnaj .cards > .card:only-child { grid-column: 1 / -1; justify-self: center; }
}

/* ===== Tlačítka ===== */
button, .btn {
  padding: 0.8rem 1.2rem;
  background: #1e90ff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  color: white;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button:hover, .btn:hover { background: #3ec5ff; }

/* ===== Form prvky ===== */
input, select, textarea {
  color: white;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: .6rem .7rem;
  inline-size: 100%;
}
input::placeholder { color: rgba(255,255,255,0.65); }

.results-entry {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  background: rgba(0,0,0,0.35);
  padding: .6rem .8rem;
  border-radius: 8px;
  margin-top: 1rem;
}
@media (max-width: 600px) {
  .results-entry { inline-size: 100%; justify-content: center; }
}

/* ===== Mobilní proměnné ===== */
@media (max-width: 600px) {
  /* Na mobilech nepoužívej flex na <body>,
     jinak header a main stojí vedle sebe a vzniká levý pruh */
  body { display: block; background-attachment: scroll; }
  :root {
    --container-max: 100%;
    --section-max: 100%;
    --pad: clamp(.9rem, 3.6vw, 1.25rem);
    --radius: 0;
    --page-x: 0;
    --header-h: 10px;
  }
}

/* ===== Přístupnost pohybu ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* (Removed global main width override that caused side gutters on mobile) */

    h2 {
      margin-top: 1rem;
      margin-bottom: 0.75rem;
      font-size: 1.5rem;
    }

    .card {
      background: rgba(0,0,0,0.3);
      border-radius: 10px;
      padding: 1rem;
      margin-top: 1rem;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
      background: rgba(0,0,0,0.2);
      border-radius: 8px;
      overflow: hidden;
    }

    table th,
    table td {
      padding: 0.6rem 0.9rem;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      text-align: left;
    }

    table th {
      background: rgba(255,255,255,0.08);
      color: #3ec5ff;
    }

    table tr:last-child td { border-bottom: none; }

    .controls {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }

    .controls .row {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      align-items: center;
    }

    textarea { width: 100%; min-height: 200px; }

    .btn { cursor: pointer; }

    .muted { color: #b9b9b9; font-size: 0.9rem; }

    iframe {
      width: 100%;
      height: 600px;
      border: none;
      margin-top: 1rem;
      border-radius: 8px;
    }

    footer {
      margin-top: 2rem;
      color: #aaa;
      font-size: 0.85rem;
    }