/* =====================================================================
   CICM s.r.o. — stránka Kontakt
   Navazuje na tokeny a prvky ze style.css. Načítá se jen na /kontakt/
   ---------------------------------------------------------------------
   Obsah:
    1. Úvod a rychlý kontakt
    2. Výběr tématu
    3. Kabel a karty lidí
    4. Vedení společnosti
    5. Mapa
    6. Příjemce ve formuláři
   ===================================================================== */


/* =====================================================================
   1. ÚVOD A RYCHLÝ KONTAKT
   ===================================================================== */
.hero--kontakt{min-height:0}
.hero--kontakt .hero__inner{padding-top:clamp(124px,12vw,168px);padding-bottom:clamp(40px,5vw,72px);min-height:min(58svh,540px)}
.hero--kontakt .hero__title{font-size:clamp(2.25rem,4.6vw,4rem)}
.hero--kontakt .hero__lead{margin-top:var(--space-5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

.hero--kontakt .hero-band__inner{align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px)}
.hero--kontakt .hero-band__intro{flex:0 1 auto;margin-right:0}
.rychly{display:flex;align-items:center;gap:var(--space-3);color:var(--white);border-bottom:none}
.rychly:hover{border-bottom:none;color:var(--white)}
.rychly .round-icon{flex:none;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.rychly:hover .round-icon{background:var(--surface-accent);border-color:var(--surface-accent);color:var(--white)}
.rychly strong{display:block;font-family:var(--font-display);font-size:clamp(1rem,1.3vw,1.25rem);font-weight:var(--fw-semibold);white-space:nowrap}
.rychly small{display:block;margin-top:2px;font-size:var(--fs-body-sm);color:rgba(255,255,255,.66)}
.rychly:focus-visible{outline:2px solid var(--white);outline-offset:4px;border-radius:var(--radius-sm)}


/* =====================================================================
   2. VÝBĚR TÉMATU
   ===================================================================== */
.vyber{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-6)}
.chip-vyber{height:42px;padding:0 var(--space-4);font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-strong);background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.chip-vyber:hover{border-color:var(--graphite-900);transform:translateY(-1px)}
.chip-vyber.is-on{color:var(--white);background:var(--graphite-900);border-color:var(--graphite-900)}
.chip-vyber:focus-visible{outline:2px solid var(--red-500);outline-offset:2px}
.vyber__vysledek{margin:0 0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-muted)}
.vyber__vysledek a{margin-left:var(--space-2);color:var(--text-link);white-space:nowrap}


/* =====================================================================
   3. KABEL A KARTY LIDÍ
   ===================================================================== */
.lide{--bod-x:24px;--kabel-y:32px;--krok:420ms;--uzel:calc((100% + var(--grid-gap)) / 3);position:relative;margin-top:var(--space-6)}
.lide__kabel{position:absolute;left:0;right:0;top:var(--kabel-y);height:4px}
.lide__plast{position:absolute;inset:0 calc(var(--gutter) * -1) 0 0;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--graphite-300) 72%,transparent)}
/* Rozsvícená část kabelu: bez výběru vede ke všem lidem */
.lide__fill{position:absolute;top:0;height:100%;left:0;width:calc(var(--uzel) * 2 + var(--bod-x));border-radius:var(--radius-pill);background:var(--red-500);
  transition:left 600ms var(--ease-out),width 600ms var(--ease-out),background 300ms ease}
.lide[data-komu="sekretariat"] .lide__fill{width:var(--bod-x);background:#1E7A4A}
.lide[data-komu="obchod"] .lide__fill{left:calc(var(--uzel) + var(--bod-x));width:var(--uzel)}
.lide__fill i{position:absolute;right:-8px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--white);border:3px solid var(--red-500);opacity:0;transition:opacity 300ms ease}
.lide[data-komu="sekretariat"] .lide__fill i{border-color:#1E7A4A}
.lide.is-armed .lide__fill i{opacity:1;animation:lideJiskra 1500ms ease-in-out infinite}
@keyframes lideJiskra{0%,100%{box-shadow:0 0 0 3px rgba(185,9,9,.14),0 0 12px 2px rgba(255,150,70,.5)}50%{box-shadow:0 0 0 7px rgba(185,9,9,.06),0 0 24px 7px rgba(255,150,70,.75)}}

.lide__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.osoba{position:relative;display:flex;flex-direction:column;padding-top:calc(var(--kabel-y) + 40px);transition:opacity 300ms var(--ease-standard)}
.osoba::before{content:"";position:absolute;left:calc(var(--bod-x) - 8px);top:calc(var(--kabel-y) - 6px);z-index:1;width:16px;height:16px;border:3px solid var(--tema);border-radius:50%;background:var(--tema);transition:background 300ms ease,border-color 300ms ease}
.osoba::after{content:"";position:absolute;left:calc(var(--bod-x) - 1px);top:calc(var(--kabel-y) + 8px);height:32px;width:2px;background:var(--tema);transform-origin:top;transition:transform 300ms var(--ease-out)}
.osoba__oddeleni{position:absolute;left:calc(var(--bod-x) - 8px);top:0;font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-muted);white-space:nowrap}

.osoba__karta{flex:1 1 auto;padding:clamp(18px,2vw,26px);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-md);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),opacity 420ms var(--ease-standard)}
.osoba__karta:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.osoba__hlava{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}
.osoba__iniciala{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--tema);color:var(--tema-on);font-family:var(--font-display);font-size:1.125rem;font-weight:var(--fw-semibold);letter-spacing:.02em}
.osoba h3{font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--text-strong)}
.osoba__hlava p{margin:2px 0 0;font-size:var(--fs-body-sm);color:var(--text-muted)}
.osoba__spojeni{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;font-weight:var(--fw-medium);color:var(--text-strong);border-bottom:none;overflow-wrap:anywhere}
.osoba__spojeni:hover{color:var(--tema-text);border-bottom:none}
.osoba__spojeni .icon{flex:none;color:var(--tema-text)}
.osoba__mail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-3)}
.kopirovat{padding:2px var(--space-2);font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-muted);background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-xs);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.kopirovat:hover{color:var(--text-strong);border-color:var(--graphite-500)}
.kopirovat.is-hotovo{color:var(--tema-on);background:var(--tema);border-color:var(--tema)}
.kopirovat:focus-visible{outline:2px solid var(--tema);outline-offset:2px}

/* Po výběru tématu lidé mimo něj ustoupí */
.osoba.is-mimo{opacity:.42}
.osoba.is-mimo::before{background:var(--white);border-color:var(--graphite-300)}
.osoba.is-mimo::after{transform:scaleY(0)}

/* Výchozí stav animace: připraví ho až JavaScript, bez něj je vše vidět */
.lide.is-armed:not(.is-run) .lide__fill{width:0}
.lide.is-armed:not(.is-run) .osoba::before{background:var(--white);border-color:var(--graphite-300)}
.lide.is-armed:not(.is-run) .osoba::after{transform:scaleY(0)}
.lide.is-armed:not(.is-run) .osoba__karta{opacity:0;transform:translateY(18px)}
.lide.is-run:not(.is-done) .lide__fill{transition-duration:calc(var(--krok) * 2 + 160ms);transition-timing-function:linear}
.lide.is-run:not(.is-done) .osoba::before,.lide.is-run:not(.is-done) .osoba::after{transition-delay:calc(var(--i) * var(--krok))}
.lide.is-run:not(.is-done) .osoba__karta{transition-delay:calc(var(--i) * var(--krok) + 120ms)}


/* =====================================================================
   4. VEDENÍ SPOLEČNOSTI
   ===================================================================== */
/* Tmavý panel se září jako nejnovější aktualita: vedení nemá působit jako poznámka pod kontakty */
.vedeni{margin-top:var(--grid-gap);padding:clamp(24px,3.4vw,44px);border-radius:var(--radius-lg);background:radial-gradient(circle at 100% 0,rgba(185,9,9,.42),transparent 58%),var(--graphite-900);box-shadow:var(--shadow-lg);color:var(--white)}
.vedeni__nadpis{font-size:var(--fs-h3);line-height:var(--lh-snug);color:var(--white)}
.vedeni__list{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.vedeni__clen{display:flex;align-items:center;gap:var(--space-4);min-width:0}
.vedeni__iniciala{flex:none;display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border:2px solid var(--red-400);border-radius:50%;font-family:var(--font-display);font-size:1.375rem;font-weight:var(--fw-semibold);letter-spacing:.02em;color:var(--white)}
.vedeni__clen strong{display:block;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--white)}
.vedeni__clen span:not(.vedeni__iniciala){display:block;margin-top:2px;font-size:var(--fs-body-sm);color:rgba(255,255,255,.72)}


/* =====================================================================
   5. MAPA
   ===================================================================== */
.mapa{position:relative;overflow:hidden;background:var(--graphite-800)}
.mapa__podklad{position:absolute;inset:0}
.mapa__foto{position:absolute;inset:0;background-size:cover;background-position:center 60%}
.mapa__podklad::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(16,18,21,.5) 0%,rgba(16,18,21,.08) 60%,rgba(16,18,21,0) 100%)}
.mapa__podklad iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa.is-mapa .mapa__podklad::after{display:none}
.mapa__obal{position:relative;display:flex;align-items:center;min-height:clamp(440px,48vw,600px);padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px);pointer-events:none}
.mapa__karta{pointer-events:auto;width:min(100%,440px);padding:clamp(20px,2.6vw,36px);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-lg)}
.mapa__karta h2{margin-top:var(--space-3);font-size:var(--fs-h3);line-height:var(--lh-snug)}
.mapa__karta address{margin-top:var(--space-4);font-style:normal;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-body)}
.mapa__akce{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.mapa__zobrazit{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:0;font-family:var(--font-display);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-link);background:none;border:0;cursor:pointer}
.mapa__zobrazit[hidden],.mapa__poznamka[hidden]{display:none}
.mapa__zobrazit:hover{color:var(--red-700)}
.mapa__zobrazit:focus-visible{outline:2px solid var(--red-500);outline-offset:3px}
.mapa__poznamka{display:block;margin-top:var(--space-1);font-size:var(--fs-caption);color:var(--text-faint)}


/* =====================================================================
   6. PŘÍJEMCE VE FORMULÁŘI
   ===================================================================== */
.prijemce{display:inline-flex;flex-direction:column;gap:2px;margin-top:var(--space-6);padding:var(--space-3) var(--space-4);border:1px solid rgba(255,255,255,.2);border-left:3px solid var(--red-400);border-radius:var(--radius-sm);color:var(--white)}
.prijemce[hidden]{display:none}
.prijemce span{font-family:var(--font-mono);font-size:var(--fs-mono);color:rgba(255,255,255,.66)}
.prijemce strong{font-family:var(--font-display);font-weight:var(--fw-semibold)}


/* =====================================================================
   ÚZKÉ OBRAZOVKY A OMEZENÉ ANIMACE
   ===================================================================== */
@media (max-width:1079px){
  .hero--kontakt .hero-band__inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:var(--space-5)}
  .hero--kontakt .hero-band__intro{grid-column:1/-1}
  .rychly strong{white-space:normal;overflow-wrap:anywhere}
}
@media (max-width:859px){
  .hero--kontakt .hero-band__inner{grid-template-columns:minmax(0,1fr)}
  .vyber__vysledek{flex-basis:100%;margin:var(--space-2) 0 0}
  .lide{--bod-x:0px}
  .lide__kabel{left:0;right:auto;top:0;bottom:0;width:4px;height:auto}
  .lide__plast{inset:0;background:var(--graphite-300)}
  /* Na svislé ose se rozsvítí celý kabel, správné lidi ukáže ustoupení ostatních */
  .lide__fill,.lide[data-komu="sekretariat"] .lide__fill,.lide[data-komu="obchod"] .lide__fill{left:0;width:100%;height:100%}
  .lide.is-armed:not(.is-run) .lide__fill{width:100%;height:0}
  .lide.is-run:not(.is-done) .lide__fill{transition:height calc(var(--krok) * 2 + 160ms) linear}
  .lide__fill i{right:auto;top:auto;left:50%;bottom:-8px;margin:0 0 0 -8px}
  .lide__list{grid-template-columns:minmax(0,1fr);gap:28px}
  .vedeni__list{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .osoba{padding:0 0 0 26px}
  .osoba::before{left:-6px;top:2px}
  .osoba::after{display:none}
  .osoba__oddeleni{position:static;min-height:1.4em;margin-bottom:var(--space-2)}
  .osoba__oddeleni:empty{display:none}
  .mapa__podklad{position:relative;height:240px}
  .mapa__obal{min-height:0;padding-top:0;margin-top:-48px;padding-bottom:var(--space-8)}
}
@media (prefers-reduced-motion: reduce){
  .lide__fill i{display:none}
  .lide__fill,.osoba,.osoba::before,.osoba::after,.osoba__karta{transition:none}
}