/* =====================================================================
   CICM s.r.o. — stránka Reference
   Navazuje na tokeny a prvky ze style.css. Načítá se jen na /reference/
   ---------------------------------------------------------------------
   Obsah:
    1. Úvod
    2. Mapa: sekce a podklad
    3. Kabely
    4. Body a popisky
    5. Panel se zeměmi
    6. Přehled projektů
   ===================================================================== */


/* =====================================================================
   1. ÚVOD
   ===================================================================== */
.hero--reference{min-height:0}
.hero--reference .hero__inner{padding-top:clamp(124px,12vw,168px);padding-bottom:clamp(40px,5vw,72px);min-height:min(58svh,540px)}
.hero--reference .hero__title{font-size:clamp(2.25rem,4.6vw,4rem)}
.hero--reference .hero__lead{margin-top:var(--space-5)}
.hero--reference .hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero--reference .hero-band__inner{align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px)}
.hero--reference .hero-band__intro{flex:0 1 auto;margin-right:0}


/* =====================================================================
   2. MAPA: SEKCE A PODKLAD
   ===================================================================== */
.svet{position:relative;padding:var(--section-y) 0;color:var(--white);border-top:1px solid var(--border-inverse);
  background:radial-gradient(circle at 54% 42%,rgba(185,9,9,.2),transparent 46%),var(--graphite-900)}
.svet__obal{max-width:1560px}
.svet .section-heading{margin-bottom:var(--space-6);max-width:none}
.svet .section-heading h2{max-width:none}
.svet .eyebrow{color:var(--red-300)}

.svet__mrizka{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,368px);gap:var(--grid-gap);align-items:stretch}

/* --vx až --vw = aktuální výřez mapy, JavaScript je mění při přiblížení. --u = jednotek mapy na pixel. */
.svet__mapa{--vx:0;--vy:0;--vw:1000;--vh:453;--u:1;position:relative;height:clamp(420px,39vw,600px);overflow:clip;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.025);border:1px solid var(--border-inverse)}
.svet__svg{display:block;width:100%;height:100%}
.svet__pevnina{fill:#2A2F35}
#svet-tecky circle{fill:rgba(255,255,255,.16)}


/* =====================================================================
   3. KABELY
   ===================================================================== */
.kabel,.kabel-puls{fill:none;stroke-linecap:round}
.kabel{stroke:var(--red-400);stroke-width:calc(var(--u)*1.25px);opacity:.62;stroke-dasharray:1;stroke-dashoffset:0;
  transition:opacity var(--dur-fast) var(--ease-standard),stroke var(--dur-fast) var(--ease-standard)}
.kabel-puls{stroke:var(--white);stroke-width:calc(var(--u)*2.4px);stroke-dasharray:.05 .95;opacity:0}

.ma-vyber .kabel,.ma-nahled .kabel{opacity:.2}
.kabel.is-on,.kabel.is-nahled,.ma-vyber .kabel.is-on,.ma-nahled .kabel.is-nahled{opacity:1;stroke-width:calc(var(--u)*2.4px);stroke:#F0544D}
.kabel-puls.is-on{opacity:.95;animation:kabel-puls 2.2s linear infinite}
@keyframes kabel-puls{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Příjezd: kabely vyběhnou z Chyše od nejbližší země, na konci se rozsvítí bod */
.is-armed .kabel{stroke-dashoffset:1}
.is-armed.is-run .kabel{stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease-standard) calc(var(--i)*70ms)}
.is-armed .bod:not(.bod--domov) .bod__tecka{transform:scale(0)}
.is-armed.is-run .bod .bod__tecka{transform:none;transition:transform 300ms var(--ease-standard) calc(var(--i)*70ms + 760ms)}


/* =====================================================================
   4. BODY A POPISKY
   Pozice vychází z výřezu, proto body sedí na mapě i během přibližování.
   ===================================================================== */
.svet__body{position:absolute;inset:0}
.bod{position:absolute;left:calc((var(--x) - var(--vx))/var(--vw)*100%);top:calc((var(--y) - var(--vy))/var(--vh)*100%);
  width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:0;background:none;color:var(--white);cursor:pointer;display:block}
.bod__tecka{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--red-400);border:2px solid var(--white);
  box-shadow:0 0 0 0 rgba(217,58,51,.5);transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.bod:hover .bod__tecka,.bod.is-nahled .bod__tecka{transform:scale(1.25);box-shadow:0 0 0 6px rgba(217,58,51,.32)}
.bod.is-on{z-index:3}
.bod.is-on .bod__tecka{transform:scale(1.4);background:var(--white);border-color:var(--red-400);box-shadow:0 0 0 7px rgba(217,58,51,.36)}
.bod.is-nahled,.bod:hover{z-index:4}

/* Chyše je zdroj všech kabelů */
.bod--domov .bod__tecka{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;background:var(--white);border:3px solid var(--red-500);box-shadow:0 0 0 5px rgba(217,58,51,.3)}

.bod__nazev{position:absolute;left:calc(50% + 12px);top:50%;transform:translateY(-50%);padding:2px 7px;border-radius:var(--radius-sm);background:rgba(16,18,21,.86);
  font-size:var(--fs-caption);font-weight:var(--fw-medium);line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
.bod[data-popisek="l"] .bod__nazev{left:auto;right:calc(50% + 12px)}
.bod[data-popisek="t"] .bod__nazev{left:50%;top:auto;bottom:calc(50% + 10px);transform:translateX(-50%)}
.bod[data-popisek="b"] .bod__nazev{left:50%;top:calc(50% + 10px);transform:translateX(-50%)}
.bod:hover .bod__nazev,.bod:focus-visible .bod__nazev,.bod.is-on .bod__nazev,.bod.is-nahled .bod__nazev{opacity:1}
/* V přiblížené Evropě je na popisky místo, na malé mapě by se překrývaly */
@media (min-width:960px){
  .svet__mapa[data-pohled="evropa"] .bod__nazev{opacity:1}
}

.svet__pohledy{position:absolute;left:var(--space-3);bottom:var(--space-3);z-index:5;display:flex;padding:3px;border-radius:999px;background:rgba(16,18,21,.86);border:1px solid var(--border-inverse)}
.svet__pohledy button{padding:6px 14px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.72);font:inherit;font-size:var(--fs-caption);font-weight:var(--fw-medium);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.svet__pohledy button:hover{color:var(--white)}
.svet__pohledy button[aria-pressed="true"]{background:var(--surface-accent);color:var(--white)}
.svet button:focus-visible{outline:2px solid var(--white);outline-offset:2px}


/* =====================================================================
   5. PANEL SE ZEMĚMI
   ===================================================================== */
.svet__panel{height:clamp(420px,39vw,600px);overflow-y:auto;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--graphite-800);border:1px solid var(--border-inverse);scrollbar-width:thin;scrollbar-color:var(--graphite-500) transparent}
.svet__seznam h3{margin:0 0 var(--space-3);color:var(--white);font-size:var(--fs-h4)}
.svet__seznam ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-2)}
.zeme-kod{flex:none;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.04em;color:var(--red-300)}
.zeme-volba{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:7px 8px;border:0;border-radius:var(--radius-sm);background:none;color:var(--white);font:inherit;font-size:var(--fs-body-sm);text-align:left;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard)}
.zeme-volba:hover,.zeme-volba.is-nahled{background:rgba(255,255,255,.08)}

.zeme__zpet{display:inline-flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-5);padding:0;border:0;background:none;color:rgba(255,255,255,.72);font:inherit;font-size:var(--fs-caption);cursor:pointer}
.zeme__zpet:hover{color:var(--white)}
.zeme__zpet .icon,.zeme__listovani button:first-child .icon{transform:scaleX(-1)}
.zeme__hlava h3{margin:var(--space-1) 0;color:var(--white);font-size:var(--fs-h3);outline:none}
.zeme__hlava p{margin:0;color:rgba(255,255,255,.66);font-size:var(--fs-body-sm)}

.projekty{list-style:none;margin:0;padding:0}
.projekty li{position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-5)}
.projekty li::before{content:"";position:absolute;left:0;top:calc(var(--space-2) + .55em);width:9px;height:9px;border-radius:50%;border:2px solid var(--red-500)}
.projekty strong{display:block;font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);line-height:1.4}
.projekty span{display:block;font-size:var(--fs-caption);line-height:1.4;margin-top:2px}

.zeme .projekty{margin-top:var(--space-5)}
.zeme .projekty strong{color:var(--white)}
.zeme .projekty span{color:rgba(255,255,255,.66)}
.zeme__dotaz{margin:var(--space-5) 0 0;color:rgba(255,255,255,.8);font-size:var(--fs-body-sm)}
.zeme__dotaz a{color:var(--white);display:block;margin-top:var(--space-2);text-decoration:underline;text-underline-offset:3px}

.zeme__listovani{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-inverse)}
.zeme__listovani button{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0;padding:0;border:0;background:none;color:rgba(255,255,255,.8);font:inherit;font-size:var(--fs-caption);text-align:left;cursor:pointer}
.zeme__listovani button:hover{color:var(--white)}
.zeme__listovani .icon{flex:none}


/* =====================================================================
   6. PŘEHLED PROJEKTŮ
   ===================================================================== */
.prehled{columns:3;column-gap:var(--grid-gap);margin-top:var(--space-6)}
.prehled__karta{break-inside:avoid;margin:0 0 var(--grid-gap);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-hairline)}
.prehled__hlava{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.prehled__hlava h3{flex:1;min-width:0;margin:0;font-size:var(--fs-h4)}
.prehled .zeme-kod{color:var(--text-accent)}
.prehled__mapa{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--border-hairline);border-radius:50%;background:none;color:var(--text-muted);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.prehled__mapa:hover{background:var(--surface-accent);border-color:var(--surface-accent);color:var(--white)}
.prehled .projekty strong{color:var(--text-strong)}
.prehled .projekty span{color:var(--text-muted)}
.prehled__dotaz{margin:0;color:var(--text-muted);font-size:var(--fs-body-sm)}


/* =====================================================================
   RESPONZIVITA
   ===================================================================== */
@media (max-width:1079px){
  .prehled{columns:2}
  .svet__mrizka{grid-template-columns:minmax(0,1fr)}
  /* Mapa zůstává nahoře, aby byl při procházení seznamu vidět kabel k vybrané zemi */
  .svet__mapa{position:sticky;top:calc(var(--header-scrolled) + var(--adminbar-h,0px));z-index:6;height:min(62.5vw,56svh);background:var(--graphite-900)}
  .svet__panel{height:auto;overflow:visible}
  .svet__seznam ul{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .hero--reference .hero-band__inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:var(--space-5)}
  .hero--reference .hero-band__intro{grid-column:1/-1}
}
@media (max-width:639px){
  .prehled{columns:1}
  .bod{width:24px;height:24px;margin:-12px 0 0 -12px}
  .bod__tecka{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-width:1.5px}
  .bod--domov .bod__tecka{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-width:2px;box-shadow:0 0 0 3px rgba(217,58,51,.3)}
  .svet__pohledy{left:var(--space-2);bottom:var(--space-2)}
  .svet__pohledy button{padding:4px 10px}
}
@media (max-width:379px){
  .svet__seznam ul{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .kabel-puls.is-on{animation:none;opacity:0}
}