/* =====================================================================
   CICM s.r.o. — stránka O nás
   Navazuje na tokeny a prvky ze style.css. Načítá se jen na /o-nas/
   ---------------------------------------------------------------------
   Obsah:
    1. Úvod
    2. O společnosti
    3. Průřez: sekce a kabel
    4. Průřez: kroky
    5. Závod v Chyši
   ===================================================================== */


/* =====================================================================
   1. ÚVOD
   ===================================================================== */
.hero--onas{min-height:0}
.hero--onas .hero__inner{padding-top:clamp(124px,12vw,168px);padding-bottom:clamp(40px,5vw,72px);min-height:min(58svh,540px)}
.hero--onas .hero__title{font-size:clamp(2.25rem,4.6vw,4rem)}
.hero--onas .hero__lead{margin-top:var(--space-5)}
.hero--onas .hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero--onas .hero-band__inner{align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px)}
.hero--onas .hero-band__intro{flex:0 1 auto;margin-right:0}
.hero--onas .hero-stat{max-width:none}
/* Místo čísel krátká slova, proto menší písmo než u statistik */
.hero--onas .hero-stat__value{font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1.2;letter-spacing:-.015em}
.hero--onas .hero-stat__label{margin-top:var(--space-1)}


/* =====================================================================
   2. O SPOLEČNOSTI
   ===================================================================== */
.firma{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.firma__text .section-heading{margin-bottom:var(--space-5)}
.firma__text p{margin:0;color:var(--text-body)}
.firma__text .firma__lead{margin-bottom:var(--space-4);font-size:var(--fs-body-lg);color:var(--text-strong)}
.sortiment{padding:clamp(24px,3vw,36px);border-radius:var(--radius-lg);background:var(--surface-subtle);border:1px solid var(--border-hairline)}
.sortiment h3{margin:0 0 var(--space-4);font-size:var(--fs-h3)}
.sortiment ul{list-style:none;margin:0 0 var(--space-5);padding:0}
.sortiment li{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-2) 0;color:var(--text-strong);font-weight:var(--fw-medium)}
.sortiment li .icon{flex:none;margin-top:3px;color:var(--text-accent)}
.sortiment .btn{padding-left:0}


/* =====================================================================
   3. PRŮŘEZ: SEKCE A KABEL
   ===================================================================== */
.prurez{position:relative;padding:var(--section-y) 0;color:var(--white);background:radial-gradient(circle at 25% 45%,rgba(185,9,9,.26),transparent 44%),var(--graphite-900)}
.prurez .eyebrow{color:var(--red-300)}
.prurez .section-heading{margin-bottom:var(--space-6)}
.prurez__mrizka{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.prurez__stage{position:sticky;top:calc(var(--header-scrolled) + var(--adminbar-h,0px) + 16px);align-self:start;display:flex;flex-direction:column;align-items:center}
.prurez__kabel{width:min(100%,calc(100svh - 220px));max-width:560px}
.prurez__kabel svg{display:block;width:100%;height:auto;overflow:visible}

/* Vrstva se objeví, až když ji kabel při skládání dosáhne. Aktuální je plně vidět, předchozí ustoupí. */
.vrstva{cursor:pointer;transform-origin:300px 300px;transition:opacity 420ms var(--ease-standard),transform 520ms cubic-bezier(.16,1,.3,1),filter 420ms var(--ease-standard)}
.prurez__kabel .vrstva{opacity:.62;filter:saturate(.75)}
.prurez__kabel[data-krok="1"] .vrstva[data-vrstva="1"],
.prurez__kabel[data-krok="2"] .vrstva[data-vrstva="2"],
.prurez__kabel[data-krok="3"] .vrstva[data-vrstva="3"],
.prurez__kabel[data-krok="4"] .vrstva[data-vrstva="4"],
.prurez__kabel[data-krok="5"] .vrstva[data-vrstva="5"]{opacity:1;filter:none}
.prurez__kabel[data-krok="1"] .vrstva:not([data-vrstva="1"]),
.prurez__kabel[data-krok="2"] .vrstva[data-vrstva="3"],.prurez__kabel[data-krok="2"] .vrstva[data-vrstva="4"],.prurez__kabel[data-krok="2"] .vrstva[data-vrstva="5"],
.prurez__kabel[data-krok="3"] .vrstva[data-vrstva="4"],.prurez__kabel[data-krok="3"] .vrstva[data-vrstva="5"],
.prurez__kabel[data-krok="4"] .vrstva[data-vrstva="5"]{opacity:0;transform:scale(1.06);pointer-events:none}

.vrstva__plast{fill:#1B1E22;stroke:var(--red-500);stroke-width:5}
.vrstva__podklad{fill:#23272C}
.vrstva__stineni{fill:none;stroke:#8A5A30;stroke-width:15}
.vrstva__oplet{fill:none;stroke:#E2A873;stroke-width:15;stroke-dasharray:3 4}
.vrstva__bariera{fill:none;stroke:#DBA514;stroke-width:21}
.vrstva__vypln{fill:#2C3137}
.vodic{transition:opacity var(--dur-fast) var(--ease-standard)}
.vodic__jadro{fill:#5A3417}
.vodic[data-vodic="0"] .vodic__izolace{fill:var(--red-500)}
.vodic[data-vodic="1"] .vodic__izolace{fill:var(--signal-cyan)}
.vodic[data-vodic="2"] .vodic__izolace{fill:#DDE1E4}
.ma-vodic .vodic:not(.is-svit){opacity:.28}

.prurez__volby{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.prurez__volba{width:36px;height:36px;padding:0;border:1px solid var(--border-inverse);border-radius:50%;background:none;color:rgba(255,255,255,.7);font-family:var(--font-mono);font-size:var(--fs-caption);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)}
.prurez__volba:hover{border-color:var(--white);color:var(--white)}
.prurez__volba.is-on{background:var(--surface-accent);border-color:var(--surface-accent);color:var(--white)}
.prurez__nazev{margin:var(--space-2) 0 0;font-family:var(--font-mono);font-size:var(--fs-mono);color:rgba(255,255,255,.72)}
.prurez button:focus-visible,.krok__vodice li:focus-visible{outline:2px solid var(--white);outline-offset:2px}


/* =====================================================================
   4. PRŮŘEZ: KROKY
   ===================================================================== */
.kroky{list-style:none;margin:0;padding:0;border-left:2px solid var(--border-inverse)}
.krok{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:min(58svh,480px);padding:var(--space-5) 0 var(--space-5) clamp(20px,3vw,40px);opacity:.42;transition:opacity 320ms var(--ease-standard)}
.krok::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--red-400);transform:scaleY(0);transition:transform 420ms cubic-bezier(.16,1,.3,1)}
.krok.is-on{opacity:1}
.krok.is-on::before{transform:none}
.krok__vrstva{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--red-300)}
.krok h3{margin:var(--space-2) 0 var(--space-3);color:var(--white);font-size:clamp(1.375rem,2.2vw,1.875rem)}
.krok p{margin:0;max-width:52ch;color:rgba(255,255,255,.78)}

.krok__vodice{list-style:none;margin:var(--space-4) 0 0;padding:0}
.krok__vodice li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);margin-left:calc(var(--space-3)*-1);border-radius:var(--radius-sm);color:var(--white);font-weight:var(--fw-medium);cursor:default;transition:background var(--dur-fast) var(--ease-standard)}
.krok__vodice li.is-svit{background:rgba(255,255,255,.08)}
.krok__vodice i{flex:none;width:14px;height:14px;border-radius:50%}
.krok__vodice li[data-vodic="0"] i{background:var(--red-500)}
.krok__vodice li[data-vodic="1"] i{background:var(--signal-cyan)}
.krok__vodice li[data-vodic="2"] i{background:#DDE1E4}

.krok__stitky{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0 0;padding:0}
.krok__stitky li{padding:4px 12px;border-radius:999px;background:#DBA514;color:var(--graphite-900);font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:var(--fw-semibold)}
.krok__odkaz{display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;margin-top:var(--space-4);color:var(--white);font-weight:var(--fw-semibold);border-bottom:1px solid var(--red-400)}
.krok__odkaz:hover{color:var(--red-200);border-bottom-color:var(--red-200)}


/* =====================================================================
   5. ZÁVOD V CHYŠI
   ===================================================================== */
.chyse{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.chyse .section-heading{margin-bottom:var(--space-5)}
.milniky{list-style:none;margin:0;padding:0}
.milnik{display:flex;gap:var(--space-5);padding:var(--space-4) 0;border-top:1px solid var(--border-hairline)}
.milnik__rok{flex:none;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--text-accent);line-height:1.2}
.milnik h3{margin:0 0 var(--space-1);font-size:var(--fs-h4)}
.milnik p{margin:0 0 var(--space-2);font-size:var(--fs-body-sm);color:var(--text-muted)}
.milnik a{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold)}


/* =====================================================================
   RESPONZIVITA
   ===================================================================== */
@media (max-width:959px){
  .firma,.chyse{grid-template-columns:minmax(0,1fr)}
  .hero--onas .hero-band__inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:var(--space-5)}
  .hero--onas .hero-band__intro{grid-column:1/-1}

  /* Kabel zůstává nahoře a texty pod ním ubíhají. Jednolité pozadí, aby přilepený blok nebyl vidět jako obdélník. */
  .prurez{background:var(--graphite-900)}
  .prurez__mrizka{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .prurez__stage{top:calc(var(--header-scrolled) + var(--adminbar-h,0px));z-index:6;flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:var(--space-4);padding:var(--space-3) 0;background:var(--graphite-900)}
  .prurez__kabel{width:clamp(120px,28svh,210px)}
  .prurez__volby{margin-top:0;flex-wrap:wrap;justify-content:center}
  .prurez__nazev{flex-basis:100%;text-align:center}
  .krok{min-height:0;padding-top:var(--space-6);padding-bottom:var(--space-6)}
}
@media (max-width:639px){
  .hero--onas .hero-band__inner{grid-template-columns:minmax(0,1fr)}
  .prurez__volba{width:30px;height:30px}
  .prurez__volby{gap:var(--space-1)}
  .milnik{gap:var(--space-3);flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  .vrstva,.krok,.krok::before{transition:none}
}