/* 👥 Panel „Kdo jsi?" — sdílený stránkou /kdo-jsi a titulkou.
 *
 * Proč zvlášť: od 26. 8. 2026 se tentýž panel vysouvá i na úvodní stránce (Honza:
 * „ať se obrázek posune doleva a objeví se menu"). Dvě kopie stylů by se dřív nebo
 * později rozešly — tohle je jeden zdroj pro obě místa. Markup je v šabloně
 * `_vstup_panel.html`.
 *
 * Barvy jsou tu PEVNÉ, ne z palety: panel patří k malované scéně a světlá paleta
 * by ho rozbila (stejné rozhodnutí jako u titulky).
 */
:root {
  --vp-panel: #342b1f;
  --vp-panel-mobil: #2a2724;
  --vp-text: #f6efe2;
  --vp-zelena: #4fbf94;
  --vp-btn: #16996b;
  --vp-btn-hover: #12855c;
}

/* Panel si nese i tyhle základy: na /kdo-jsi je měla stránka ve svém stylu, ale
   na titulce by odkazy jinak byly modré a podtržené. */
.panel, .panel * { box-sizing: border-box; }
.panel a { text-decoration: none; color: inherit; }

  /* Obsah panelu sedí VÝŠ, ne uprostřed (Bětka 26. 8. 2026: „posunout nahoru, je to malé").
     Když je okno nízké, `justify-content: center` ho zase srovná, ať nic nevyteče. */
  /* Rozměry se plynule přizpůsobují VÝŠCE okna. Honza 26. 8. 2026: na FullHD měl
     panel vlastní posuvník — obsah se do okna nevešel. Pevné pixely to řešit nešlo:
     mezi notebookem (660 px) a velkým monitorem (1200 px) je dvojnásobný rozdíl. */
  .panel { overflow-y: auto; display: flex; flex-direction: column; align-items: center;
           justify-content: flex-start;
           gap: clamp(5px, 1.5svh, 18px);
           padding: clamp(10px, 3.4svh, 6vh) 3.2% clamp(10px, 2.4svh, 40px);
           background: var(--vp-panel); }
  .znacka { display: flex; flex-direction: column; align-items: center;
           gap: clamp(4px, 1svh, 12px); text-align: center; }
  .znacka img { width: clamp(40px, 9.5svh, 116px); height: auto; }
  .znacka h1 { margin: 0; font-size: clamp(21px, 3.8svh, 40px); line-height: 1; font-weight: 800;
               letter-spacing: -.03em; }
  .znacka h1 span { color: var(--vp-zelena); }
  .znacka p { margin: 0; font-size: clamp(11px, 1.5svh, 16px); color: rgba(236,224,205,.68); }
  .znacka p strong { color: var(--vp-text); }

  .nadpis { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .nadpis h2 { margin: 0; font-size: clamp(17px, 2.9svh, 30px); line-height: 1.05;
               font-weight: 800; letter-spacing: -.02em; }
  .nadpis p { margin: 0; font-size: 14px; color: rgba(236,224,205,.5); }

  .volby { display: flex; flex-direction: column; gap: clamp(4px, .9svh, 10px);
           width: 100%; max-width: 360px; }
  .volba { display: flex; flex-direction: column; align-items: center; gap: 4px;
           padding: clamp(4px, 1.2svh, 15px) 20px; text-align: center; border-radius: 12px;
           background: rgba(255,255,255,.07); border: 1px solid rgba(236,224,205,.16);
           backdrop-filter: blur(6px);
           transition: background-color .15s ease, border-color .15s ease; }
  .volba:hover { background: rgba(255,255,255,.13); border-color: rgba(79,191,148,.5); }
  .volba:focus-visible, .skola a:focus-visible, .panel-projekt a:focus-visible {
           outline: 2px solid var(--vp-zelena); outline-offset: 2px; }
  .volba img { width: clamp(24px, 4.6svh, 54px); height: auto; aspect-ratio: 1; object-fit: contain; }
  .volba h3 { margin: 0; font-size: clamp(13px, 1.8svh, 19px); font-weight: 700; }
  .volba p { margin: 0; font-size: 14px; color: rgba(236,224,205,.58); }
  .volba .dal { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--vp-zelena); }

  .skola { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 3px;
           padding: clamp(4px, 1.2svh, 15px) 20px; border-radius: 12px; text-align: center;
           background: rgba(79,191,148,.10); border: 1px solid rgba(79,191,148,.28);
           backdrop-filter: blur(6px); }
  .skola h3 { margin: 0; font-size: 15px; font-weight: 700; }
  .skola p { margin: 0; font-size: 14px; color: rgba(236,224,205,.6); }
  .skola a { align-self: stretch; margin-top: 8px; min-height: 36px; padding: 0 16px;
             display: flex; align-items: center; justify-content: center; border-radius: 8px;
             background: var(--vp-btn); color: #fff; font-size: 14px; font-weight: 700;
             transition: background-color .15s ease; }
  .skola a:hover { background: var(--vp-btn-hover); }


  /* (Dřívější skoková úprava pro nízké monitory tu byla nahrazena `clamp()` výš —
     zmenšování je teď plynulé a nezačíná až pod nějakou hranicí.) */

  /* Sekundární tlačítko dole v panelu — vypadá jako „O projektu" na titulce. */
  .panel-projekt { margin-top: 2px; }
  .panel-projekt a { display: inline-flex; align-items: center; justify-content: center;
                     padding: clamp(6px, 1.2svh, 11px) 26px; border-radius: 999px;
                     border: 2px solid var(--vp-btn); color: var(--vp-zelena);
                     font-size: clamp(13px, 1.8svh, 16px); font-weight: 600; }
  .panel-projekt a:hover { background: rgba(21, 128, 96, .18); color: #6fd3ab; }

  /* Na hodně nízkém okně (starší notebooky, okno přes půl obrazovky) se vypustí
     dvě věty, které jen opakují, co je vidět jinde — jinak by panel začal rolovat.
     Pořadí obětí: nejdřív podtitulek značky, teprve pak výzva pod nadpisem. */
  @media (min-width: 860px) and (max-height: 680px) { .znacka p { display: none; } }
  @media (min-width: 860px) and (max-height: 600px) { .nadpis p { display: none; } }

@media (max-width: 859px) {
    .panel { background: var(--vp-panel-mobil); padding: 30px 24px 52px; gap: 22px;
             justify-content: flex-start; }
    .znacka img { width: 150px; margin-top: -30px; }
    .znacka h1 { font-size: 42px; }
    .znacka p { font-size: 17px; }
    .nadpis h2 { font-size: 34px; }
    .volby, .skola { max-width: none; }
    .volby { gap: 14px; }
    .volba h3 { font-size: 20px; }
    .skola a { min-height: 46px; }        /* palec se musí trefit */
}