/* ===== Tokeny ===== */
:root{
  --blue:#2563eb;
  --blue-deep:#1d4ed8;
  --red:#b91c1c;
  --red-deep:#991b1b;
  --ink:#111827;
  --muted:#64748b;
  --glass-light:rgba(255,255,255,.55);
  --glass-light-strong:rgba(255,255,255,.75);
  --glass-dark:rgba(15,18,28,.62);
  --glass-border:rgba(255,255,255,.55);
  --glass-border-dark:rgba(255,255,255,.10);
  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:12px;
}

*{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 10%, #eef2fb 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #fbecec 0%, transparent 45%),
    #eef1f6;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}

/* Rozostřené barevné "bloby" na pozadí — bez nich glass efekt nemá co rozostřovat */
.bg-blob{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;opacity:.55}
.blob-blue{width:520px;height:520px;top:-120px;left:-100px;background:radial-gradient(circle,#60a5fa,transparent 70%)}
.blob-red{width:560px;height:560px;bottom:-160px;right:-140px;background:radial-gradient(circle,#f87171,transparent 70%)}

/* ===== Layout ===== */
.layout{
  position:relative;z-index:1;
  display:grid;grid-template-columns:280px 1fr;
  gap:20px;padding:20px;min-height:100vh;
}

/* ===== Sidebar (tmavé sklo) ===== */
.sidebar{
  background:var(--glass-dark);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border-dark);
  border-radius:var(--radius-lg);
  color:#fff;padding:26px;
  position:sticky;top:20px;height:calc(100vh - 40px);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.sidebar h1{font-size:20px;letter-spacing:.5px;margin:4px 0 26px;line-height:1.3;font-weight:800}
#menu{flex:1;overflow-y:auto;overflow-x:hidden}

#menu .gov{
  display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--radius-md);
  margin:10px 0;cursor:pointer;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
#menu .gov:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
#menu .gov.active{transform:scale(1.02)}
.gov.blue.active{background:linear-gradient(135deg,rgba(37,99,235,.9),rgba(29,78,216,.9));box-shadow:0 10px 26px rgba(37,99,235,.45)}
.gov.red.active{background:linear-gradient(135deg,rgba(185,28,28,.9),rgba(127,29,29,.9));box-shadow:0 10px 26px rgba(185,28,28,.45)}

.avatar{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);
}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-fallback{
  position:absolute;inset:0;align-items:center;justify-content:center;
  display:none;font-weight:700;font-size:16px;color:#fff;
}

.donate-link{
  display:block;margin-top:16px;flex-shrink:0;
  border-radius:var(--radius-sm);overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.donate-link:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,221,0,.25)}
.donate-img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}

/* ===== Hlavní obsah ===== */
main{position:relative;z-index:1;min-width:0}

.tabs{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:20px;
  background:var(--glass-light);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(31,41,55,.06);
}
.tabs button{
  padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.6);
  cursor:pointer;background:rgba(255,255,255,.5);color:var(--ink);
  font-size:14px;font-weight:600;transition:all .18s ease;
}
.tabs button:hover{background:rgba(255,255,255,.8)}
.tabs button.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--blue),var(--blue-deep));box-shadow:0 8px 20px rgba(37,99,235,.35)}
.tabs button.active.red-tab{background:linear-gradient(135deg,var(--red),var(--red-deep));box-shadow:0 8px 20px rgba(185,28,28,.35)}

/* ===== Časová osa ===== */
#timeline{position:relative;padding:6px 10px 30px}

.axis-line{position:absolute;width:3px;background:rgba(100,116,139,.28);transform:translateX(-50%);z-index:0;border-radius:3px}

.row,.year-row{display:flex;align-items:center;margin:18px 0;position:relative}

.date,.year-label{width:90px;text-align:right;padding-right:20px;flex-shrink:0}
.date{color:var(--muted);font-size:14px}
.year-label{color:var(--ink);font-weight:800;font-size:20px}

.dot,.year-marker{
  width:14px;height:14px;border-radius:50%;margin-right:18px;flex-shrink:0;
  position:relative;z-index:1;
  box-shadow:0 0 0 6px #eef1f6, 0 2px 8px rgba(0,0,0,.15);
}
.year-marker{background:var(--ink);width:16px;height:16px;margin-right:17px}

.year-rule{flex:1;border-top:1px dashed rgba(100,116,139,.35)}

.card{
  flex:1;min-width:0;padding:18px 20px;border-radius:var(--radius-md);cursor:pointer;position:relative;z-index:1;
  background:var(--glass-light-strong);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow:0 8px 22px rgba(31,41,55,.08);
  overflow-wrap:break-word;word-break:break-word;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.card b{font-size:15px}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(31,41,55,.16);background:#fff}

/* ===== Vysouvací panel ===== */
#panel{
  position:fixed;top:20px;right:20px;bottom:20px;width:400px;max-width:calc(100vw - 40px);
  background:var(--glass-light-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:24px;overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
  transform:translateX(calc(100% + 40px));
  transition:transform .32s cubic-bezier(.22,.9,.32,1);
  z-index:50;
}
#panel.open{transform:translateX(0)}
#close{
  position:sticky;top:0;float:right;border:none;background:rgba(0,0,0,.06);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px;
  transition:background .15s ease;
}
#close:hover{background:rgba(0,0,0,.12)}
#detail h2{margin:36px 0 6px;font-size:22px}
#detail h3{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:22px}
.person{display:inline-block;background:rgba(37,99,235,.1);color:var(--blue-deep);padding:5px 12px;border-radius:999px;margin:3px 4px 0 0;font-size:13px;font-weight:600}

/* ===== Responzivita ===== */
@media (max-width:860px){
  .layout{grid-template-columns:1fr;padding:10px;gap:10px}
  .sidebar{position:relative;height:auto;top:0;padding:16px;min-width:0}
  #menu{display:flex;flex-direction:column;gap:8px}
  #menu .gov{padding:10px;margin:0}
  .avatar{width:40px;height:40px;border-radius:10px}
  .avatar-fallback{font-size:13px}
  #menu .gov b{font-size:14px}

  /* Horní "pilulky" dělají to samé co karty vlád nahoře v tmavém panelu — na mobilu
     je to zbytečná duplicita, která navíc zabírá místo, takže je schováme. */
  .tabs{display:none}

  main{min-width:0}
  #panel{top:auto;bottom:0;right:0;left:0;width:auto;max-width:none;height:88vh;height:88dvh;border-radius:24px 24px 0 0;
    transform:translateY(100%);padding:18px}
  #panel.open{transform:translateY(0)}
  #close{width:44px;height:44px}
  .date,.year-label{width:60px;font-size:13px;padding-right:12px}
  .dot,.year-marker{margin-right:12px}
  #timeline{padding:6px 2px 30px}
  .row,.year-row{margin:14px 0}
  .card{padding:16px 18px}
}

/* Malé telefony (do ~400px šířky) — ještě kompaktnější rozestupy a menší fonty */
@media (max-width:400px){
  .layout{padding:8px;gap:8px}
  .sidebar{padding:14px}
  .sidebar h1{font-size:17px;margin-bottom:16px}
  #menu .gov{min-width:180px;padding:10px}
  .avatar{width:44px;height:44px}
  .date,.year-label{width:52px;font-size:12px;padding-right:12px}
  .dot,.year-marker{margin-right:12px}
  .card{padding:14px 16px}
  .card b{font-size:14px}
  #timeline{padding:4px 2px 24px}
}

/* Nižší výkon / mobil — zjednodušit blur, ať to nesekání */
@media (max-width:860px){
  .sidebar,.tabs,.card,#panel{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
  .bg-blob{filter:blur(60px);opacity:.4}
}

/* Uživatelé preferující omezené animace */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* ===== Hashtagy ===== */

.hashtags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 20px;
}

.hashtag{
    display:inline-block;
    padding:4px 10px;
    border-radius:20px;
    background:#eef2ff;
    border:1px solid #c7d2fe;
    color:#1d4ed8;
    font-size:.9rem;
    text-decoration:none;
}

/* ===== Zdroje ===== */

.sources{
    margin:10px 0;
    padding-left:20px;
}

.sources li{
    margin:6px 0;
}

.sources a{
    color:#2563eb;
    text-decoration:none;
}

.sources a:hover{
    text-decoration:underline;
}

/* ===== Osoby (klikací odkazy na Wikipedii) ===== */

.person{
    display:inline-block;
    margin:4px 6px 4px 0;
    padding:4px 10px;
    border-radius:20px;
    background:#f3f4f6;
    color:#111827;
    text-decoration:none;
    transition:.2s;
}

.person:hover{
    background:#dbeafe;
    color:#1d4ed8;
}