/* =====================================================================
   CICM s.r.o. — archiv článků
   Navazuje na tokeny a prvky ze style.css. Načítá se jen na /clanky/
   ---------------------------------------------------------------------
   Obsah:
    1. Úvod a filtr podle témat
    2. Časová osa: kabel, jiskra, počítadlo roku
    3. Článek
   ===================================================================== */


/* =====================================================================
   1. ÚVOD A FILTR PODLE TÉMAT
   ===================================================================== */
.hero--clanky{min-height:0}
.hero--clanky .hero__inner{padding-top:clamp(124px,12vw,168px);padding-bottom:clamp(40px,5vw,72px);min-height:min(58svh,540px)}
.hero--clanky .hero__title{font-size:clamp(2.25rem,4.6vw,4rem)}
.hero--clanky .hero__lead{margin-top:var(--space-5)}
.hero--clanky .slides-nav{margin-top:var(--space-6)}

.hero--clanky .hero-band__inner{align-items:center;justify-content:space-between}
.hero--clanky .hero-band__intro{flex:0 1 auto;margin-right:0}
.temata{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tema{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-4);font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--white);
  background:transparent;border:1px solid rgba(255,255,255,.28);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)}
.tema:hover{border-color:var(--white);transform:translateY(-1px)}
.tema.is-on{color:var(--tema-on);background:var(--tema);border-color:var(--tema)}
.tema:focus-visible{outline:2px solid var(--white);outline-offset:2px}
/* Průřez žíly: světlý obvod, aby tmavé barvy byly na tmavém pásu vidět */
.tema__zila{width:10px;height:10px;border-radius:50%;background:var(--tema);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.tema.is-on .tema__zila{background:var(--tema-on);box-shadow:none}

.subnav__link[hidden]{display:none}


/* =====================================================================
   2. ČASOVÁ OSA
   ===================================================================== */
.osa{--rok-w:clamp(112px,13vw,184px);--osa-gap:clamp(32px,4vw,56px);--osa-w:6px;--clanek-gap:clamp(28px,3.4vw,48px);--rok-top:clamp(64px,5vw,72px);position:relative}
.osa-sekce{padding-top:0}

/* Kabel: šedý plášť a výplň v barvě tématu */
.osa::before,.osa__fill{content:"";position:absolute;left:var(--rok-w);top:0;width:var(--osa-w);border-radius:var(--radius-pill)}
.osa::before{bottom:0;background:var(--graphite-200)}
.osa__fill{height:0;background:var(--tema);transition:background var(--dur-base) var(--ease-standard)}
/* Jiskra na konci výplně */
.osa__jiskra{position:absolute;left:50%;bottom:-9px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--white);border:4px solid var(--tema);
  animation:jiskra 1600ms ease-in-out infinite;transition:border-color var(--dur-base) var(--ease-standard)}
.osa__fill.is-off .osa__jiskra{display:none}
@keyframes jiskra{0%,100%{box-shadow:0 0 0 3px rgba(185,9,9,.14),0 0 14px 2px rgba(255,150,70,.5)}50%{box-shadow:0 0 0 8px rgba(185,9,9,.06),0 0 26px 8px rgba(255,150,70,.75)}}

/* Počítadlo roku: číslice se protáčejí podle toho, kde je uživatel */
.osa__rail{position:absolute;left:0;top:0;bottom:0;width:calc(var(--rok-w) - 16px);padding-top:var(--rok-top)}
.pocitadlo{position:sticky;top:calc(var(--header-scrolled) + var(--subnav-h) + var(--adminbar-h,0px) + 24px)}
.pocitadlo__rok{display:flex;height:1em;overflow:hidden;font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3.25rem);font-weight:var(--fw-bold);line-height:1;letter-spacing:-.03em;color:var(--text-strong)}
.pocitadlo__cislice{flex:0 0 .62em;text-align:center;transition:transform 800ms cubic-bezier(.16,1,.3,1)}
.pocitadlo__cislice span{display:block;height:1em}
/* Jádra: jeden článek roku = jedna žíla, kliknutím se k němu přejede */
.jadra{display:flex;flex-wrap:wrap;gap:2px;margin:var(--space-3) 0 0 -3px}
.jadro{width:20px;height:20px;padding:3px;background:none;border:0;cursor:pointer}
.jadro i{display:block;width:100%;height:100%;border-radius:50%;border:2px solid var(--tema);background:transparent;transition:background var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.jadro.is-reached i{background:var(--tema)}
.jadro:hover i{transform:scale(1.25)}

/* Mezi články je všude stejná mezera. Horní odsazení roku jen zajišťuje, že ho po skoku z navigace nezakryje lišta. */
.rok{display:grid;grid-template-columns:var(--rok-w) minmax(0,1fr);padding-top:var(--rok-top)}
.rok ~ .rok{margin-top:calc(var(--clanek-gap) - var(--rok-top))}
.rok[hidden]{display:none}
.rok__title{position:sticky;top:calc(var(--header-scrolled) + var(--subnav-h) + var(--adminbar-h,0px) + 24px);align-self:start;
  font-size:clamp(2rem,3.6vw,3.25rem);font-weight:var(--fw-bold);line-height:1;letter-spacing:-.03em;color:var(--text-strong)}
.rok__list{list-style:none;margin:0;padding:0 0 0 var(--osa-gap);display:grid;gap:var(--clanek-gap)}
/* S počítadlem jsou letopočty jen pro čtečky obrazovky */
@media (min-width:860px){
  .osa.has-pocitadlo .rok__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
  .osa.has-pocitadlo .rok{grid-template-columns:var(--rok-w) minmax(0,1fr)}
  .osa.has-pocitadlo .rok__list{grid-column:2}
}


/* =====================================================================
   3. ČLÁNEK
   ===================================================================== */
.clanek{position:relative;--bod-y:clamp(28px,3vw,40px)}
.clanek[hidden]{display:none}
/* Bod na ose: po dojetí jiskry zčervená a vyšle vlnu */
.clanek::before{content:"";position:absolute;left:calc(var(--osa-gap) * -1 - 5px);top:var(--bod-y);width:16px;height:16px;z-index:2;
  border:3px solid var(--graphite-300);border-radius:50%;background:var(--white);transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.clanek.is-reached::before{border-color:var(--tema);background:var(--tema);animation:bodVlna 900ms ease-out}
@keyframes bodVlna{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--tema) 45%,transparent)}to{box-shadow:0 0 0 16px transparent}}
/* Odbočka z kabelu k článku */
.clanek::after{content:"";position:absolute;left:calc(var(--osa-gap) * -1 + 3px);right:100%;top:calc(var(--bod-y) + 7px);height:2px;z-index:1;background:var(--tema);transform:scaleX(0);transform-origin:left;
  transition:transform 500ms var(--ease-out)}
.clanek.is-reached::after{transform:scaleX(1)}

.clanek__link{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);overflow:hidden;border-radius:var(--radius-lg);background:var(--surface-card);color:inherit;border-bottom:none;box-shadow:var(--shadow-md);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-standard)}
.clanek__link:hover{border-bottom:none;transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.clanek__link:focus-visible{outline:2px solid var(--tema);outline-offset:3px}
/* Ostatní články ustoupí, aby vynikl ten pod myší */
@media (hover:hover){
  .osa:has(.clanek__link:hover) .clanek__link:not(:hover){opacity:.62}
}

.clanek__media{position:relative;min-height:230px;overflow:hidden;background:var(--graphite-200)}
.clanek__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.clanek__media--contain{background:var(--white)}
.clanek__media--contain img{object-fit:contain;padding:var(--space-8) var(--space-4) var(--space-4)}
.clanek__link:hover .clanek__media img{transform:scale(1.06)}
.clanek__media .article-card__tag{z-index:2;background:var(--tema);color:var(--tema-on)}
/* Barevná clona, která fotku odkryje při dojetí článku */
.clanek__media::after{content:"";position:absolute;inset:0;z-index:1;background:var(--tema);transform-origin:right;transition:transform 900ms cubic-bezier(.76,0,.24,1) 120ms}
.clanek.is-in .clanek__media::after{transform:scaleX(0)}

/* Fotka se u článků střídá vlevo a vpravo */
.clanek--vpravo .clanek__link{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.clanek--vpravo .clanek__media{order:2}
.clanek--vpravo .clanek__media::after{transform-origin:left}

.clanek__body{align-self:center;padding:clamp(20px,2.6vw,36px)}
.clanek__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-faint)}
.clanek__novy{color:var(--text-accent)}
.clanek h3{margin-top:var(--space-2);font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--text-strong);transition:var(--transition-control)}
.clanek__link:hover h3{color:var(--tema-text)}
.clanek p{margin:var(--space-3) 0 0;max-width:62ch;font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-muted)}
.clanek__cta{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);font-family:var(--font-display);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)}
.clanek__sipka{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border-subtle);border-radius:50%;color:var(--tema-text);
  transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.clanek__sipka .icon{transition:transform var(--dur-base) var(--ease-out)}
.clanek__link:hover .clanek__sipka{color:var(--tema-on);background:var(--tema);border-color:var(--tema)}
.clanek__link:hover .clanek__sipka .icon{transform:translate(1px,-1px) scale(1.1)}

/* Nejnovější článek: tmavá karta s červenou září a větší fotkou */
.clanek--hlavni .clanek__link{grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:radial-gradient(circle at 100% 0,rgba(185,9,9,.42),transparent 60%),var(--graphite-900)}
.clanek--hlavni .clanek__media{min-height:320px}
.clanek--hlavni .clanek__meta{color:rgba(255,255,255,.62)}
.clanek--hlavni .clanek__novy{color:var(--red-300)}
.clanek--hlavni h3{font-size:var(--fs-h3);color:var(--white)}
.clanek--hlavni .clanek__link:hover h3{color:var(--white)}
.clanek--hlavni p{color:rgba(255,255,255,.76);font-size:var(--fs-body)}
.clanek--hlavni .clanek__cta{color:var(--white)}
.clanek--hlavni .clanek__sipka{color:var(--white);border-color:rgba(255,255,255,.36)}

/* Přeskupení článků při filtrování */
::view-transition-group(*){animation-duration:480ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}

@media (max-width:859px){
  .osa{--rok-w:0px;--osa-gap:26px}
  .osa__rail{display:none}
  .rok{grid-template-columns:minmax(0,1fr)}
  .rok__title{position:static;padding-left:var(--osa-gap);margin-bottom:var(--space-5)}
  .clanek__link,.clanek--vpravo .clanek__link,.clanek--hlavni .clanek__link{grid-template-columns:minmax(0,1fr)}
  .clanek--vpravo .clanek__media{order:0}
  .clanek__media,.clanek--hlavni .clanek__media{min-height:0;aspect-ratio:16/10}
  .clanek{--bod-y:20px}
}

@media (prefers-reduced-motion: reduce){
  .osa__jiskra,.clanek.is-reached::before{animation:none}
  .clanek__media::after{display:none}
  .clanek__media img,.clanek__sipka .icon,.clanek__link,.pocitadlo__cislice,.clanek::after{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}