/* Podstránka AI adopce pro lídry změn (260930). Načítá se po podstranky.css.
   Rytmus ploch: fotka (úvod, bílý a šedý blok) → inkoust (program) → papír (jak vznikal, kresba) →
   fotka (komunita, bílý blok vpravo) → světlá plocha (loga a ohlasy) → opona (termíny a kontakt). */

/* Jeviště 1: Daniel u obrazovky s účastníky. Fotka je širší než okno a zarovnaná vlevo, takže Daniel stojí
   v pravé třetině a obrazovka se stolem zůstávají pod bloky. */
.j-uvod .j-pozadi { background: #1B1C21; }
.j-uvod .j-pozadi img { position: absolute; left: 0; top: 0; width: 128%; max-width: none; height: auto; min-height: 100%; object-position: 0 0; }
/* Titulek: téma velkým písmem, publikum menším na vlastním řádku; kolem druhého řádku kreslí pero kroužek,
   proto má nad sebou i pod sebou volné místo (elipsa sahá 22 px za obdélník textu) a je mírně odsazený:
   elipsa sahá doleva o 30 px a řídicí body tahu musí zůstat nejméně 14 px uvnitř rámu bloku. */
.h1 .radek-2 { width: max-content; margin-top: 0.64em; margin-left: 0.34em; font-size: 0.56em; line-height: 1; letter-spacing: -0.035em; font-variation-settings: "wdth" 96, "opsz" 72; }
.blok-uvod .perex { margin-top: clamp(28px, 4.4vh, 40px); }
/* Portrét stojí po celou dobu úvodu a bloku Pro koho; přes něj pak vyjede program. */
.j-uvod .j-obsah { padding-bottom: 112vh; }
.blok-pruvodce { margin: calc(10vh + 24px) 0 0 var(--okraj); }
.blok-pruvodce .lead { color: var(--tma-text2); }
.h3-dvojice { font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 36; font-weight: 620; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.2; letter-spacing: -0.018em; margin-bottom: 8px; }

/* Program: nadpis vlevo připnutý, šest bloků pod sebou vpravo, v každém název vlevo a body vpravo.
   Odškrtnutí tak leží ve sloupci pod sebou: přelety pera jsou krátké a každé se nakreslí, když k bloku čtenář
   dojede. Mřížka tři sloupce na dvě řady stála pero kolem 6 s (přelety přes celou šířku) a poslední dvě
   odškrtnutí vznikala nad horním okrajem okna. */
.program { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(32px, 4vw, 64px); padding: clamp(84px, 13vh, 128px) var(--okraj) clamp(84px, 13vh, 124px); }
.program-hlava { position: sticky; top: calc(var(--hlavicka) + 36px); align-self: start; }
/* Rám seznamu sahá 24 px za levý okraj: odškrtnutí začíná u levého okraje bloku a řídicí body tahu musí
   zůstat nejméně 14 px uvnitř rámu. */
.program-seznam { margin-left: -24px; padding-left: 24px; }
.pb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 3vw, 48px); padding: clamp(22px, 3.6vh, 30px) 0 clamp(24px, 4vh, 34px); border-top: 1px solid var(--tma-vlasec); }
.pb:last-of-type { border-bottom: 1px solid var(--tma-vlasec); }
.pb h3 { padding-left: 38px; font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 36; font-weight: 620; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.16; letter-spacing: -0.02em; }
.pb ul { list-style: none; margin: 3px 0 0; padding: 0; }
.pb li { position: relative; padding-left: 18px; font-size: clamp(14.5px, 1.08vw, 15.5px); line-height: 1.5; color: var(--tma-text2); }
.pb li + li { margin-top: 8px; }
.pb li::before { content: ""; position: absolute; left: 0; top: 0.74em; width: 8px; height: 1.5px; background: var(--tma-tlumene); }

/* Jak workshop vznikal: text vlevo, kresba workshopu vpravo (kreslí se, až je celá v okně, tedy po textu). */
.vznik { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; padding: clamp(90px, 14vh, 140px) var(--okraj) clamp(60px, 9vh, 90px); }
.vznik-lead { margin-top: clamp(18px, 3vh, 26px); font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 48; font-weight: 560; font-size: clamp(27px, 2.4vw, 36px); line-height: 1.14; letter-spacing: -0.026em; max-width: 17em; }
.vznik-dal { margin-top: clamp(18px, 3vh, 26px); font-size: 17px; line-height: 1.62; color: var(--text2); max-width: 36em; }
.vznik-kresba { pointer-events: none; margin: -10% 0 -13%; }
.vznik-kresba .kresba { width: 100%; }

/* Jeviště 2: komunita. Fotka absolventů u stolu stojí, bílý blok přes ni vyjede u pravého okraje. */
.j-komunita .j-pozadi img { object-position: 50% 40%; }
.anim .j-komunita .j-pozadi img { scale: 1.08; translate: 0 calc((var(--p, 0.5) - 0.5) * -5%); }
.j-komunita .j-obsah { display: flex; justify-content: flex-end; padding: 62vh var(--okraj) 30vh; }
.blok-komunita .nazev-bloku { max-width: 12em; }
.komunita-text { margin-top: clamp(16px, 2.8vh, 22px); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--text2); max-width: 34em; }
.komunita-seznam { margin-top: 14px; }
.komunita-seznam li { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; padding-top: 5px; padding-bottom: 5px; }
.komunita-zaver { margin-top: clamp(20px, 3.4vh, 28px); padding-top: 16px; border-top: 1px solid var(--vlasec); font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 48; font-weight: 560; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -0.022em; }

/* Účastníci a ohlasy: světlá plocha, loga v řadě, tři ohlasy ve sloupcích. */
.ohlasy { background: var(--bila); padding: clamp(80px, 13vh, 124px) var(--okraj) clamp(90px, 15vh, 140px); }
.loga { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); align-items: center; margin-top: clamp(28px, 4.6vh, 40px); padding-bottom: clamp(40px, 7vh, 64px); border-bottom: 1px solid var(--vlasec); }
.loga img { width: 100%; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.citace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); margin-top: clamp(40px, 7vh, 64px); }
.citace blockquote { margin: 0; font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 48; font-weight: 500; font-size: clamp(23px, 2vw, 29px); line-height: 1.24; letter-spacing: -0.022em; }

/* Opona: fotka z workshopu, Daniel s kolegou vpravo, text vlevo na ztmavené obrazovce. */
.opona-foto { inset: 0 -8% 0 0; }
.opona-foto img { object-position: 70% 40%; }
.anim .opona-foto img { scale: calc(1.12 - 0.12 * var(--p, 1)); transform-origin: 70% 40%; }
.opona-foto::after { background: linear-gradient(to right, rgb(13 11 30 / 0.95) 0%, rgb(13 11 30 / 0.9) 36%, rgb(13 11 30 / 0.2) 64%, rgb(13 11 30 / 0.05)); }

/* ---------- pohyb (jen s třídou anim) ---------- */
/* Úvod po načtení: fotka se oddálí; při scrollu pomalu ujíždí nahoru, takže bloky jedou rychleji než fotka. */
.anim .j-uvod .j-pozadi img { translate: 0 calc(var(--p, 0) * -5%); transition: scale 2600ms var(--dojezd) 80ms; transform-origin: 66% 30%; }
.anim:not(.nacteno) .j-uvod .j-pozadi img { scale: 1.1; }

/* ---------- telefon a tablet na výšku (261001, hranice v podstranky.css) ---------- */
@media screen and (max-width: 960px) {
  /* Úvodní fotka na výšku: výřez s Danielem u pravého okraje a pravou polovinou obrazovky (obojí dohromady je
     na výšku širší než okno); lidé u stolu zůstávají pod blokem. */
  .j-uvod .j-pozadi img { width: 100%; height: 100%; min-height: 0; object-position: 41% 50%; }
  /* Kroužek kolem „pro lídry změn“ (ai-adopce.js, na telefonu pad 16): elipsa sahá 22 px vlevo a 16 px nad
     a pod text, řídicí body tahu nejméně 14 px uvnitř rámu bloku. */
  .h1 .radek-2 { margin-top: 0.8em; margin-left: 0.72em; }
  .blok-uvod .perex { margin-top: 30px; }
  .blok-pruvodce { margin: 10vh 0 0; }
  .h3-dvojice { font-size: 20px; }

  /* Program: nadpis nad bloky, připnutý nahoře jako pruh (pod hlavičkou, když je vidět), bloky pod sebou,
     v každém název a pod ním body. Odškrtnutí zůstávají ve sloupci u levého okraje. */
  .program { display: block; padding: 60px var(--okraj) 72px; }
  .program-hlava { top: 0; z-index: 6; margin: 0 calc(-1 * var(--okraj)); padding: 14px var(--okraj) 14px; background: var(--tma); transition: top 560ms var(--dojezd); }
  .program-hlava::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: linear-gradient(var(--tma), rgb(21 22 26 / 0)); pointer-events: none; }
  .hlavicka:not(.skryta) ~ main .program-hlava { top: var(--hlavicka); }
  .program-hlava .h2 { font-size: clamp(30px, 8.4vw, 36px); }
  .program-seznam { margin: 8px 0 0 calc(-1 * var(--okraj)); padding-left: var(--okraj); }
  .pb { display: block; padding: 22px 0 24px; }
  .pb h3 { font-size: 21px; }
  .pb ul { margin: 12px 0 0 38px; }
  .pb li { font-size: 16px; }

  /* Jak workshop vznikal: text, pod ním kresba. */
  .vznik { display: block; padding: 76px var(--okraj) 36px; }
  .vznik-lead { font-size: clamp(25px, 7vw, 30px); }
  .vznik-dal { font-size: 16.5px; }
  /* Rámeček kresby oříznutý na tahy (22 až 86 % výšky dat): nahoře jen část prázdného pásu, ať kresba nesedí
     na textu. Okraje v procentech šířky obalu, proto s mezí šířky kresby na tabletu. */
  .vznik-kresba { max-width: 560px; margin: calc(min(100%, 560px) * -0.04) 0 calc(min(100%, 560px) * -0.09); }

  /* Komunita: fotka na výšku s lidmi u stolu, blok přes ni u pravého okraje jako na desktopu. */
  .j-komunita .j-pozadi img { object-position: 40% 40%; }
  .j-komunita .j-obsah { display: block; padding: 58vh 0 28vh; }
  .blok-komunita { margin-left: auto; }
  .komunita-text, .komunita-seznam li { font-size: 17px; }
  .komunita-zaver { font-size: clamp(20px, 5.8vw, 24px); }

  /* Ohlasy: loga ve třech sloupcích, ohlasy pod sebou. */
  .ohlasy { padding: 72px var(--okraj) 84px; }
  .loga { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
  .loga img { height: 34px; }
  .citace { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .citace blockquote { max-width: 30em; font-size: clamp(22px, 6.2vw, 26px); }

  /* Opona: Daniel s kolegou nahoře, text dole na ztmavené části. */
  .opona-foto img { object-position: 74% 30%; }
  .opona-foto::after { background: linear-gradient(to bottom, rgb(13 11 30 / 0.15) 0%, rgb(13 11 30 / 0.3) 26%, rgb(13 11 30 / 0.86) 46%, rgb(13 11 30 / 0.94) 100%); }
}
@media screen and (min-width: 600px) and (max-width: 960px) {
  .loga { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .loga img { height: 40px; }
}