/* ==========================================================================
   Czech AI Factory — style.css
   Všechny rozměry relativní (rem / em / vh / vw / % / clamp). Žádné px.
   ========================================================================== */

:root{
  /* barvy */
  --navy-950:#04091c;
  --navy-900:#071026;
  --steel:#3e6a8f;
  --blue-bright:#2c7be5;
  --red:#d1141f;
  --red-bright:#e4232e;
  --white:#ffffff;
  --muted:#a6bad4;
  --muted-dim:#7189a8;
  --line:rgba(255,255,255,.12);

  /* písmo */
  --ff-display:"Space Grotesk",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;

  /* fluidní tokeny (vše relativní) */
  --pad-x:clamp(1.25rem, 4vw, 3rem);      /* horizontální odsazení kontejneru */
  --sec-y:clamp(3rem, 8vh, 6rem);         /* vertikální padding sekcí */
  --maxw:75rem;                            /* hlavní kontejner */
  --maxw-wide:95rem;                       /* full-width řádek log */
  --hair:0.0625rem;                        /* vlasová linka (= relativní) */
  --logo-h:7vh;                            /* výška loga CZAI */
}

/* fluidní kořenová velikost -> všechny rem škálují s viewportem */
html{font-size:clamp(0.9rem, 0.75rem + 0.55vw, 1.125rem);scroll-behavior:smooth}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--ff-body);
  color:var(--white);
  background:var(--navy-950);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  hyphens:manual;              /* žádné automatické dělení slov */
  overflow-wrap:break-word;    /* jen nouzové zalomení extrémně dlouhých řetězců */
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* pozadí z dodané grafiky přes celý viewport */
.bg{
  position:fixed;inset:0;z-index:-2;
  background:var(--navy-950) url("../img/back.webp") no-repeat center right / cover;
}
/* Ostré pozadí na velkých i retina displejích.
   Volí se podle POTŘEBNÉHO počtu fyzických pixelů (šířka viewportu × DPR),
   ne jen podle DPR – 4K monitor běžně běží při DPR 1, zatímco telefon
   s DPR 3 potřebuje jen ~1200 px. Jednotky v em, žádné px. */
@media (min-width:100em),(min-width:40em) and (min-resolution:1.5dppx){
  .bg{background-image:url("../img/back@1440.webp")}
}
@media (min-width:150em),(min-width:60em) and (min-resolution:2dppx){
  .bg{background-image:url("../img/back@2x.webp")}
}
.bg-overlay{
  position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,var(--navy-950) 8%,rgba(4,9,28,.66) 46%,rgba(4,9,28,.15) 78%),
    linear-gradient(180deg,rgba(4,9,28,.5),transparent 24%,transparent 62%,var(--navy-950));
}

.page{min-height:100vh;display:flex;flex-direction:column}
.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}

/* ---------- header ---------- */
/* ---------- header (sticky, připravený na budoucí menu) ---------- */
.top{
  position:sticky;top:0;z-index:50;
  padding:clamp(.75rem,2vh,1.25rem) 0;
  border-bottom:var(--hair) solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.top.is-scrolled{
  background:rgba(6,13,30,.82);
  backdrop-filter:saturate(140%) blur(0.75rem);
  border-bottom-color:var(--line);
}
.top .shell{display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.brand img{height:var(--logo-h);width:auto}
.nav{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem)}
/* budoucí menu se vloží sem: .nav .menu{display:flex;gap:…} */
.status-pill{
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:.5em 1em;border:var(--hair) solid var(--line);border-radius:62.5rem;
  background:rgba(255,255,255,.03);backdrop-filter:blur(0.4rem);white-space:nowrap;
}
.status-pill .dot{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--red-bright);
  box-shadow:0 0 0 .25rem rgba(228,35,46,.18);animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.lang{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.25rem;border:var(--hair) solid var(--line);border-radius:62.5rem;
  background:rgba(255,255,255,.03);backdrop-filter:blur(.4rem);
}
.lang a{
  display:grid;place-items:center;
  width:2.15rem;height:2.15rem;border-radius:50%;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--white);opacity:.45;
  transition:opacity .2s ease,background .2s ease;
}
.lang a:hover{opacity:.8}
.lang a[aria-current="true"]{
  opacity:1;background:rgba(255,255,255,.16);
}

/* ---------- hero ---------- */
/* Hero: obsah je ukotven shora (ne vycentrován), aby nadpis neposkakoval
   při přepnutí jazyka — CS a EN se lámou na jiný počet řádků. */
.hero{
  display:flex;align-items:flex-start;
  padding:clamp(1.5rem,5vh,4.5rem) 0 clamp(1.5rem,4vh,2.5rem);
}
.eyebrow{
  font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue-bright);display:inline-flex;align-items:center;gap:.7em;margin-bottom:1.25rem;
}
.eyebrow::before{content:"";width:1.6em;height:var(--hair);background:var(--red);display:inline-block}
h1{
  font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(2.3rem,5.2vw,4rem);max-width:20ch;margin-bottom:1.5rem;
  /* ZÁMĚRNĚ bez text-wrap:balance — balance vyrovnává délky řádků a odsouvá
     slova dolů i tam, kde je na řádku místo (např. „AI." na mobilu).
     Normální lámání řádky zaplňuje. */
  text-wrap:normal;
}
h1 .accent{
  background:linear-gradient(120deg,var(--red-bright),var(--blue-bright));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lead{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--muted);max-width:60ch;margin-bottom:1.625rem;text-wrap:pretty}

/* nezalomitelný celek (spřežky typu „AI-optimalizovanou") */
.nowrap{white-space:nowrap}
.notice{
  display:inline-flex;align-items:center;gap:.875em;
  font-family:var(--ff-display);font-weight:500;font-size:1.05rem;color:var(--white);
  padding:1em 1.4em;border:var(--hair) solid var(--line);border-left:.1875rem solid var(--red);
  border-radius:.75rem;background:rgba(255,255,255,.03);margin-bottom:1.625rem;
}
.notice svg{flex:0 0 auto;width:1.3em;height:1.3em;color:var(--red-bright)}
.contact-line{font-size:1.02rem;color:var(--muted)}
.contact-line a{
  color:var(--white);font-family:var(--ff-display);font-weight:500;
  border-bottom:.125rem solid var(--red);padding-bottom:.15em;transition:color .2s,border-color .2s;
}
.contact-line a:hover{color:var(--red-bright);border-color:var(--red-bright)}

/* ---------- promo (bannery: letní škola, tisková zpráva) ---------- */
.promo{
  padding:clamp(1.5rem,4vh,2.5rem) 0;
  background:rgba(4,9,28,.5);
  border-top:var(--hair) solid var(--line);
  backdrop-filter:blur(0.4rem);
}
.promo-row{
  display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:clamp(1rem,2.5vw,1.5rem);
}
.promo-card{
  display:flex;align-items:center;gap:1rem;
  width:100%;max-width:26rem;min-height:12rem;flex:1 1 20rem;
  padding:1em 1.25em;border:var(--hair) solid var(--line);border-radius:.75rem;
  background:rgba(255,255,255,.03);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.promo-card:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.055);transform:translateY(-.0625rem)}
.promo-card__body{display:flex;flex-direction:column;gap:.3em;min-width:0}
.promo-card__title{
  font-family:var(--ff-display);font-weight:600;font-size:.98rem;color:var(--white);
}
.promo-card__meta{font-size:.82rem;color:var(--muted);line-height:1.5}
.promo-card__cta{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.04em;color:var(--blue-bright);margin-top:.15em;
}

/* ---------- LS banner (Letní škola CZAI) ----------
   container-type: velikost písma se odvíjí od skutečné šířky banneru (cqi),
   ne od viewportu — zůstane čitelný v plné šířce stránky i v užším náhledu. */
.ls-banner{
  container-type:inline-size;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  width:100%;max-width:26rem;min-height:12rem;flex:1 1 20rem;
  background:var(--navy-950) url("../img/back.webp") no-repeat right 30% / cover;
  border-radius:.75rem;
  transition:transform .2s ease;
}
.ls-banner:hover{transform:translateY(-.0625rem)}
.ls-top{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1em;
  padding:4.5cqi 5cqi 0;
}
.ls-headline{min-width:0}
.ls-tag{
  font-family:var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(.58rem,1.7cqi,.8rem);
  color:var(--blue-bright);font-weight:600;margin-bottom:.4em;
}
.ls-title{
  font-family:var(--ff-display);font-weight:700;color:var(--white);
  font-size:clamp(1.15rem,4.4cqi,2.2rem);line-height:1.1;letter-spacing:-.01em;
}
.ls-logo{flex:0 0 auto;height:clamp(1.4rem,6.5cqi,2.1rem);display:block}
.ls-logo img{height:100%;width:auto;display:block}
.ls-info{
  position:relative;z-index:1;
  display:flex;align-items:center;flex-wrap:wrap;gap:.4em 1.1em;
  padding:2.6cqi 5cqi;
  background:linear-gradient(90deg,var(--red) 0%,var(--red-bright) 38%,rgba(4,9,28,.85) 92%);
}
.ls-info__item{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--ff-display);font-weight:600;color:var(--white);
  font-size:clamp(.72rem,3cqi,.88rem);
  white-space:nowrap;
}
.ls-info__item b{font-weight:700}
.ls-icon{flex:0 0 auto;width:1.15em;height:1.15em;color:var(--white)}
.ls-icon svg{width:100%;height:100%}

/* ---------- konsorcium (full-width, bílá loga bez boxů) ---------- */
.consortium{
  padding:var(--sec-y) 0;
  background:rgba(4,9,28,.5);
  border-top:var(--hair) solid var(--line);
  backdrop-filter:blur(0.4rem);
}
.consortium .c-head{text-align:center;margin-bottom:clamp(2rem,5vh,3rem)}
.consortium .c-head .eyebrow{justify-content:center}
.consortium h2{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;margin-top:.5rem;
}
.logo-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.5rem,3vw,3rem);
  width:100%;max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--pad-x);
}
/* jedno logo = bílá mono verze; hover jen jemně zvýrazní (bez probarvení) */
.plogo{
  position:relative;display:inline-grid;place-items:center;
  padding:.55em .85em;border-radius:.6rem;
  transition:transform .25s ease;
}
.plogo img{
  grid-area:1/1;height:clamp(2rem,4.5vh,3rem);width:auto;max-width:10.75rem;
  object-fit:contain;opacity:.74;filter:drop-shadow(0 .0625rem .375rem rgba(0,0,0,.25));
  transition:opacity .25s ease;
}
.plogo:hover{transform:translateY(-.125rem)}
.plogo:hover img{opacity:1}

/* ---------- footer ---------- */
.foot{padding:clamp(2rem,4vh,3rem) 0 clamp(1.5rem,3vh,2.2rem);border-top:var(--hair) solid var(--line);text-align:center}

/* EU povinná publicita — logolink v ORIGINÁLNÍ podobě, bez barevných úprav.
   Bílá podložka zajišťuje korektní kontrast na tmavém pozadí a ochrannou zónu. */
.foot-eu{margin-bottom:clamp(1.5rem,3vh,2.2rem)}
.foot-eu__plate{
  display:inline-block;background:#fff;border-radius:.75rem;
  padding:clamp(.9rem,1.8vh,1.4rem) clamp(1.2rem,2.5vw,2rem);
  max-width:100%;box-shadow:0 .5rem 1.5rem -.6rem rgba(0,0,0,.5);
}
.foot-eu__plate img{height:auto;width:100%;max-width:44rem;display:block}
.foot-eu figcaption{
  font-family:var(--ff-mono);font-size:.68rem;color:var(--muted-dim);
  margin-top:1rem;max-width:52ch;margin-inline:auto;line-height:1.6;letter-spacing:.02em;
}
.foot-sep{border:0;border-top:var(--hair) solid rgba(255,255,255,.06);margin:0 0 clamp(1.2rem,2.5vh,1.8rem)}
.foot p{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.04em;color:var(--muted-dim)}
.foot a{color:var(--muted);border-bottom:var(--hair) solid rgba(209,20,31,.6)}
.foot a:hover{color:var(--white)}



/* ---------- responsivní (media queries v em) ---------- */
@media(max-width:40em){
  .status-pill{font-size:.62rem;padding:.45em .75em;letter-spacing:.1em}
  .hero{min-height:auto;padding:1rem 0 clamp(2rem,5vh,3rem)}
  .notice{font-size:.96rem;padding:.9em 1em}
  .logo-row{gap:clamp(1.5rem,6vw,2.25rem)}
  .logo-row img{height:clamp(1.75rem,4vh,2.5rem)}
  .promo-card{flex-direction:column;align-items:flex-start;text-align:left}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto;transition:none!important}
}

/* Přepnutí jazyka bez reloadu: prolne se jen obsah, pozadí zůstává. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}