/* =====================================================================
   CICM s.r.o. — detail aktuality
   Navazuje na tokeny a prvky ze style.css. Načítá se jen na /aktuality/{slug}/
   ---------------------------------------------------------------------
   Obsah:
    1. Úvod a hlavní fotka
    2. Kabel časové osy v tmavém pásu
    3. Fotogalerie
    4. Novější a starší aktualita
    5. Prohlížeč fotek
   ===================================================================== */


/* =====================================================================
   1. ÚVOD A HLAVNÍ FOTKA
   ===================================================================== */
.hero--aktualita{min-height:0}
.hero--aktualita .hero__inner{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center;
  padding-top:clamp(124px,12vw,160px);padding-bottom:clamp(40px,5vw,64px)}
.hero--aktualita .hero__copy{position:relative;z-index:2;max-width:none}
.hero--aktualita .hero__title{max-width:none;font-size:clamp(1.875rem,3.5vw,3.25rem)}

/* Barevná atmosféra z hlavní fotky pod bílým závojem */
.aktualita__ambient{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(48px) saturate(1.5)}
.aktualita__zavoj{position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.62) 100%)}

.aktualita__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-muted)}
.aktualita__tema{display:inline-flex;align-items:center;height:24px;padding:0 var(--space-3);border-radius:var(--radius-xs);background:var(--tema);color:var(--tema-on);
  font-family:var(--font-display);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase}
.aktualita__text{margin-top:var(--space-5);max-width:60ch}
.aktualita__text p{margin:0;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-body)}
.aktualita__text p + p{margin-top:var(--space-3)}
.aktualita__pocet{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:var(--space-2);padding:0 6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.22);font-family:var(--font-mono);font-size:12px}
.aktualita__zpet{transform:rotate(180deg)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

/* Hlavní fotka s posunutým rámem v barvě tématu */
.aktualita__hlavni{position:relative;z-index:2;justify-self:center;display:flex;max-width:100%}
.aktualita__hlavni::before{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:var(--radius-lg);background:var(--tema)}
.fotka{position:relative;display:block;width:100%;padding:0;overflow:hidden;border:0;background:var(--graphite-200);cursor:zoom-in}
.fotka img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.fotka:hover img{transform:scale(1.04)}
.fotka:focus-visible{outline:3px solid var(--tema);outline-offset:3px}
.fotka--hlavni{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.fotka--hlavni img{width:auto;max-width:100%;height:auto;max-height:min(66svh,560px)}
.aktualita__hlavni.is-render .fotka{background:var(--white)}
.aktualita__hlavni.is-render img{padding:var(--space-6)}
.fotka__lupa{position:absolute;right:var(--space-3);bottom:var(--space-3);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--tema);color:var(--tema-on);
  opacity:0;transform:translateY(6px);transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-base) var(--ease-out)}
.fotka:hover .fotka__lupa,.fotka:focus-visible .fotka__lupa{opacity:1;transform:none}


/* =====================================================================
   2. KABEL ČASOVÉ OSY V TMAVÉM PÁSU
   ===================================================================== */
.hero--aktualita .hero-band__inner{flex-wrap:nowrap;align-items:center;gap:clamp(24px,5vw,72px)}
.hero--aktualita .hero-band__intro{flex:0 0 clamp(200px,24vw,320px);min-width:0;margin-right:0}
.hero--aktualita .hero-band__sub{min-height:2.8em}

.mini-osa{--bod:28px;position:relative;flex:1 1 auto;min-width:0;display:flex;justify-content:space-between;padding-bottom:22px}
.mini-osa__plast,.mini-osa__fill{position:absolute;left:calc(var(--bod) / 2);top:calc(var(--bod) / 2 - 2px);height:4px;border-radius:var(--radius-pill)}
.mini-osa__plast{right:calc(var(--bod) / 2);background:rgba(255,255,255,.2)}
.mini-osa__fill{width:calc((100% - var(--bod)) * var(--p));background:var(--tema);transform-origin:left}
html.is-ready .mini-osa__fill{animation:miniOsa 1300ms 500ms cubic-bezier(.16,1,.3,1) both}
@keyframes miniOsa{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.mini-osa__bod{position:relative;z-index:1;flex:0 1 var(--bod);min-width:0;display:flex;align-items:center;justify-content:center;height:var(--bod);border-bottom:none;color:rgba(255,255,255,.62)}
.mini-osa__bod:hover{border-bottom:none;color:var(--white)}
.mini-osa__bod i{display:block;width:12px;height:12px;border:2px solid var(--tema);border-radius:50%;background:var(--graphite-900);box-shadow:0 0 0 2px var(--graphite-900);
  transition:transform var(--dur-base) var(--ease-out),background var(--dur-fast) var(--ease-standard)}
.mini-osa__bod.is-past i{background:var(--tema)}
.mini-osa__bod:hover i,.mini-osa__bod:focus-visible i{transform:scale(1.5);background:var(--tema)}
.mini-osa__bod:focus-visible{outline:2px solid var(--white);outline-offset:1px;border-radius:50%}
.mini-osa__bod.is-current i{width:18px;height:18px;border-color:var(--white);background:var(--tema);animation:miniBod 1800ms ease-in-out infinite}
@keyframes miniBod{0%,100%{box-shadow:0 0 0 2px var(--graphite-900),0 0 0 4px color-mix(in srgb,var(--tema) 50%,transparent)}50%{box-shadow:0 0 0 2px var(--graphite-900),0 0 0 10px transparent}}
.mini-osa__rok{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.5}
.mini-osa__rok b{font-weight:inherit}


/* =====================================================================
   3. FOTOGALERIE
   Šířka každé fotky vychází z jejího poměru stran, řádky jsou proto vždy zarovnané.
   Horní mez výšky hlídá, aby osamocená fotka v posledním řádku nebyla obrovská.
   ===================================================================== */
.galerie{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.galerie__polozka{flex:calc(var(--ar) * 100) 1 calc(var(--ar) * 240px);aspect-ratio:var(--ar);min-width:0;max-width:min(100%,calc(var(--ar) * 440px))}
.galerie .fotka{height:100%;border-radius:var(--radius-md)}


/* =====================================================================
   4. NOVĚJŠÍ A STARŠÍ AKTUALITA
   ===================================================================== */
.sousede{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.soused{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);overflow:hidden;border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-md);color:inherit;border-bottom:none;
  transition:box-shadow var(--dur-base) var(--ease-out)}
.soused:hover{border-bottom:none;box-shadow:var(--shadow-lg)}
.soused__media{position:relative;min-height:140px;overflow:hidden;background:var(--graphite-200)}
.soused__media.clanek__media--contain{background:var(--white)}
.soused__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.soused__media.clanek__media--contain img{object-fit:contain;padding:var(--space-3)}
.soused:hover .soused__media img{transform:scale(1.06)}
.soused__body{display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);padding:clamp(16px,2vw,24px)}
.soused__smer{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--tema-text)}
.soused strong{font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--text-strong);transition:var(--transition-control)}
.soused:hover strong{color:var(--tema-text)}
.soused time{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-faint)}


/* =====================================================================
   5. PROHLÍŽEČ FOTEK
   ===================================================================== */
.prohlizec{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:var(--graphite-900);color:var(--white);overflow:hidden}
.prohlizec[open]{display:flex;flex-direction:column;animation:prohlizecIn 280ms var(--ease-out) both}
.prohlizec::backdrop{background:transparent}
@keyframes prohlizecIn{from{opacity:0}to{opacity:1}}
.prohlizec__lista{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--gutter)}
.prohlizec__pocet{font-family:var(--font-mono);font-size:var(--fs-mono);color:rgba(255,255,255,.72)}
.prohlizec__scena{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--gutter);touch-action:pan-y}
.prohlizec__scena img{max-width:100%;max-height:calc(100dvh - 190px);object-fit:contain;border-radius:var(--radius-sm);user-select:none}
.prohlizec__scena img.is-new{animation:fotkaIn 360ms var(--ease-out) both}
@keyframes fotkaIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.prohlizec__tlacitko{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(16,18,21,.6);color:var(--white);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)}
.prohlizec__tlacitko:hover{background:var(--tema);border-color:var(--tema);color:var(--tema-on)}
.prohlizec__tlacitko:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.prohlizec__sipka{position:absolute;top:50%;right:var(--gutter);margin-top:-23px;z-index:1}
.prohlizec__sipka--zpet{right:auto;left:var(--gutter)}
.prohlizec__sipka--zpet .icon{transform:rotate(180deg)}
.prohlizec__nahledy{flex:none;display:flex;justify-content:safe center;gap:var(--space-2);padding:var(--space-3) var(--gutter);overflow-x:auto;scrollbar-width:none}
.prohlizec__nahledy::-webkit-scrollbar{display:none}
.prohlizec__nahled{flex:0 0 auto;width:64px;height:46px;padding:0;overflow:hidden;border:2px solid transparent;border-radius:var(--radius-sm);background:none;cursor:pointer;opacity:.55;transition:opacity var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.prohlizec__nahled img{display:block;width:100%;height:100%;object-fit:cover}
.prohlizec__nahled:hover{opacity:.9}
.prohlizec__nahled.is-on{opacity:1;border-color:var(--tema)}
.prohlizec.is-jedna .prohlizec__sipka,.prohlizec.is-jedna .prohlizec__nahledy,.prohlizec.is-jedna .prohlizec__pocet{visibility:hidden}
.prohlizec.is-jedna .prohlizec__nahledy{height:var(--space-3);padding:0}
.prohlizec.is-jedna .prohlizec__scena img{max-height:calc(100dvh - 110px)}
html.is-prohlizec{overflow:hidden}


/* =====================================================================
   ÚZKÉ OBRAZOVKY A OMEZENÉ ANIMACE
   ===================================================================== */
@media (max-width:959px){
  .hero--aktualita .hero__inner{grid-template-columns:minmax(0,1fr)}
  .aktualita__hlavni{justify-self:start;margin-right:14px}
  .fotka--hlavni img{max-height:62svh}
  .aktualita__zavoj{background:rgba(255,255,255,.9)}
}
@media (max-width:759px){
  .hero--aktualita .hero-band__inner{flex-direction:column;align-items:stretch;gap:var(--space-4)}
  .hero--aktualita .hero-band__intro{flex:none}
  .hero--aktualita .hero-band__sub{min-height:1.4em}
  .mini-osa{--bod:24px}
  .mini-osa__rok b{display:none}
  .mini-osa__rok::before{content:"’"}
  .galerie__polozka{flex-basis:calc(var(--ar) * 150px);max-width:100%}
  .prohlizec__sipka{top:auto;bottom:var(--space-2);margin-top:0}
  .prohlizec__scena{padding-bottom:62px}
  .prohlizec__scena img{max-height:calc(100dvh - 252px)}
}
@media (prefers-reduced-motion: reduce){
  html.is-ready .mini-osa__fill,.mini-osa__bod.is-current i,.prohlizec[open],.prohlizec__scena img.is-new{animation:none}
  .fotka img,.soused__media img,.mini-osa__bod i,.fotka__lupa{transition:none}
}