/* ==========================================================================
   Czech AI Factory — clanek.css
   Styly pro podstránky tiskových zpráv (článek + galerie + lightbox).
   Navazuje na proměnné a reset z css/style.css (musí být načtený první).
   Stejná pravidla jako style.css: relativní jednotky, žádné px.
   ========================================================================== */

/* ---------- článek: hlavička ---------- */
.article{padding:clamp(2rem,6vh,4rem) 0 clamp(3rem,7vh,5rem)}
/* Celý sloupec článku (odkaz zpět, hlavička, fotka, text) sdílí jednu
   užší šířku vycentrovanou v rámci .shell — čitelný sloupec místo
   roztažení přes celou (širokou) šířku hlavního kontejneru webu.
   Vždy přesně 50 % šířky viewportu, jen s dolní hranicí 20rem
   (mobil/menší okna, aby nevznikla "nudle" z textu) — bez horní
   hranice, ať se to neusadí na fixní hodnotě ani na velkých/4K
   monitorech. */
.article .shell{max-width:max(20rem,50vw)}

.article-back{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--muted);margin-bottom:clamp(1.5rem,4vh,2.5rem);
  transition:color .2s ease;
}
.article-back:hover{color:var(--white)}
.article-back svg{width:1em;height:1em}

.article-head{margin-bottom:clamp(2rem,5vh,3rem)}
.article-head .eyebrow{margin-bottom:1rem}
.article-head h1{
  font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.75rem,3.6vw,2.75rem);max-width:none;margin-bottom:1.25rem;
}
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75em 1.25em;
  font-family:var(--ff-mono);font-size:.78rem;color:var(--muted-dim);
}
.article-meta .dateline{color:var(--muted)}

/* ---------- hero fotka ---------- */
.article-hero-img{
  width:100%;margin:0 0 clamp(2rem,5vh,3rem);
  border-radius:.75rem;overflow:hidden;
  box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.5);
}
.article-hero-img img{width:100%;height:auto;display:block}

/* ---------- tělo textu ---------- */
.article-body{}
.article-body p{
  font-size:.9rem;color:var(--muted);line-height:1.75;margin-bottom:1.375rem;
}
.article-body p:first-of-type{
  font-size:clamp(.92rem,1.3vw,1.02rem);color:var(--white);
}
.article-body strong,.article-body b{color:var(--white);font-weight:600}

/* citace */
.article-quote{
  margin:clamp(1.75rem,4vh,2.5rem) 0;
  padding:1.25em 1.5em;
  border-left:.1875rem solid var(--red);
  background:rgba(255,255,255,.03);
  border-radius:0 .6rem .6rem 0;
}
.article-quote p{
  font-family:var(--ff-display);font-weight:400;font-size:.94rem;color:var(--white);
  line-height:1.55;margin-bottom:.75em;font-style:italic;
}
.article-quote p:last-of-type{margin-bottom:0}
.article-quote cite{
  display:block;font-style:normal;font-size:.78rem;color:var(--muted);
}
.article-quote cite b{color:var(--blue-bright);font-weight:400}

/* zdroj */
.article-source{
  margin-top:clamp(2rem,5vh,3rem);padding-top:1.5rem;
  border-top:var(--hair) solid var(--line);
  font-family:var(--ff-mono);font-size:.78rem;color:var(--muted-dim);
}
.article-source a{color:var(--muted);border-bottom:var(--hair) solid rgba(209,20,31,.6)}
.article-source a:hover{color:var(--white)}

/* ---------- galerie ---------- */
.article-gallery{
  padding:var(--sec-y) 0;
  background:rgba(4,9,28,.5);
  border-top:var(--hair) solid var(--line);
}
.article-gallery .c-head{margin-bottom:clamp(2rem,5vh,3rem)}
.article-gallery h2{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.01em;margin-top:.5rem;
}

.gallery-wrap{position:relative}
.gallery-grid{position:relative}
.gallery-item{
  position:absolute;overflow:hidden;border-radius:.4rem;cursor:pointer;
  opacity:0;transition:opacity .4s ease;background:rgba(255,255,255,.03);
}
.gallery-item.is-loaded{opacity:1}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94);
}
.gallery-item:hover img{transform:scale(1.06)}

.gallery-skeleton{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  gap:.4rem;
}
.gallery-skeleton span{
  border-radius:.4rem;aspect-ratio:3/2;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 75%);
  background-size:200% 100%;animation:gshimmer 1.5s infinite;
}
@keyframes gshimmer{to{background-position:-200% 0}}

/* ---------- lightbox ---------- */
.lightbox{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(2,5,14,.96);
  align-items:center;justify-content:center;flex-direction:column;
}
.lightbox.is-open{display:flex}
.lb-bar{
  position:absolute;top:0;left:0;right:0;height:3.75rem;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.25rem;
  background:linear-gradient(to bottom,rgba(2,5,14,.7),transparent);
}
.lb-counter{font-family:var(--ff-mono);font-size:.78rem;color:var(--muted)}
.lb-close{
  width:2.25rem;height:2.25rem;border-radius:50%;
  background:rgba(255,255,255,.07);border:var(--hair) solid var(--line);
  color:var(--white);font-size:1.05rem;cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease;
}
.lb-close:hover{background:rgba(255,255,255,.16)}
.lb-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:4.5rem 4.5rem 3rem;position:relative}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:.25rem;box-shadow:0 1.875rem 5rem rgba(0,0,0,.6);transition:opacity .2s ease}
.lb-img.is-fading{opacity:0}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.75rem;height:2.75rem;border-radius:50%;
  background:rgba(255,255,255,.06);border:var(--hair) solid var(--line);
  color:var(--white);font-size:1.05rem;cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease;
}
.lb-nav:hover{background:rgba(255,255,255,.14)}
.lb-nav:disabled{opacity:.2;pointer-events:none}
.lb-nav.prev{left:1rem}
.lb-nav.next{right:1rem}

/* ---------- responsivní ---------- */
@media(max-width:40em){
  /* Na mobilu je 20rem spodní hranice ze .article .shell (viz výše)
     větší než 50 % šířky obrazovky — sloupec se pak zbytečně
     vycentruje s velkými prázdnými okraji ("nudle" textu uprostřed).
     Na mobilu chceme naopak využít skoro celou šířku, jen s minimálním
     paddingem. */
  .article .shell{max-width:none;padding:0 .75rem}
  .article-body p:first-of-type{font-size:.92rem}
  .lb-stage{padding:4rem 1.5rem 2.5rem}
  .lb-nav{width:2.25rem;height:2.25rem;font-size:.9rem}
  .lb-nav.prev{left:.4rem}
  .lb-nav.next{right:.4rem}
}
@media(prefers-reduced-motion:reduce){
  .gallery-item,.gallery-item img,.lb-img{transition:none}
  .gallery-skeleton span{animation:none}
}