/* ═══════════════════════════════════════════════════════════════════
   RÁNO S KARLEM — skutečná obrazovka Přehledu v sekci 01.
   Prefix rano-. Příkaz č. 185.

   Jiří 27. 8.: „Screenshot bych rád umístil přímo pod titulku… ale
   opravdu poutavě, musí to být top, musí to ukázat sílu KAI."

   ⛔ CO JE TU SÍLA KAI, ABY SE TO PŘI ÚPRAVÁCH NEZTRATILO.
   Není to hustota rozhraní. Ta se na obrázku širokém 1 200 px stejně
   nepřečte a každý ATS vypadá podobně. Síla je JEDNA VĚTA, kterou
   Karel napsal dřív, než někdo přišel do práce:

     „Sobota nám přeje: 61 nových přihlášek už dnes… Doporučuji nejdřív
      dořešit 6 kandidátů po termínu a pak otevřít 149 nových, ať do
      12 pohovorů tohoto týdne vstoupíme s čistým stolem." (č. 245)

   Spočítal frontu, ohlídal termíny a řekl, čím začít. Rámeček a
   nožička míří na řádek „KAI navrhuje 2 kandidáty…" v Dnes udělat. To je rozdíl mezi grafem
   a asistentem — a proto je ta věta na scéně vysázená ZNOVU,
   v čitelné velikosti. Obrázek dokazuje, že je opravdová; bublina
   ji dělá čitelnou. Kdyby zbylo jen jedno z toho, ať zbude bublina.

   ⛔ VÝCHOZÍ STAV JE HOTOVÝ OBRÁZEK (stejné pravidlo jako scena.css).
   Bez JavaScriptu, bez animace i s vypnutým pohybem je vidět všechno:
   okno, rámeček kolem KAI, bublina i tři sloupce. Třída .hraje jen
   přidá nájezd. Nic se neschovává.

   ⛔ A SNÍMEK ZŮSTÁVÁ V PLNÉ BARVĚ. Zdůrazňuje se PŘIDÁNÍM
   (rámeček), ne ubráním (závoj přes okolí). Rozhodl Jiří 27. 8.,
   podrobně u .rano-ram níž.
   ═══════════════════════════════════════════════════════════════════ */

.rano { margin: 4px 0 clamp(60px, 6.5vw, 92px); }

/* ── Nadřádek a jedna věta úvodu ─────────────────────────────────────
   ŽÁDNÝ DRUHÝ NADPIS. Nad tímhle blokem stojí citát „Ostatní lepí
   umělou inteligenci na kód…" a dva velké nadpisy pod sebou se perou.
   Proto sem patří nadřádek + jedna věta, a hlavní slovo má obrázek. */
.rano-uvod {
  max-width: 66ch;
  margin: 0 0 clamp(26px, 3vw, 38px);
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--body);
}
.rano-uvod strong { color: var(--text); font-weight: 750; }

/* ── SCÉNA ───────────────────────────────────────────────────────────
   Spodní odsazení je místo pro bublinu, která z okna vyčnívá dolů.
   Kdyby se měnila velikost bubliny, mění se i tohle číslo. */
.rano-scena {
  position: relative;
  margin: 0;
  /* č. 246: bublina už nepřekrývá okno (na novém snímku by zakryla panel
     Předvýběr), sedí POD oknem a nožičkou míří na řádek KAI. */
  padding-bottom: 0;
}

/* Fialová záře pod oknem. Není to stín — stín je šedý. Tohle je
   barva sekce (.pas-prechod začíná na #FAF5FF) zesílená pod obrázek,
   aby okno na světlém pozadí neplavalo bez opory. */
.rano-scena::before {
  content: "";
  position: absolute; z-index: 0;
  left: 50%; top: 4%;
  width: 88%; height: 76%;
  transform: translateX(-50%);
  background: radial-gradient(58% 58% at 50% 50%, rgba(124, 58, 237, .22), transparent 72%);
  filter: blur(52px);
  pointer-events: none;
}

.rano-okno {
  position: relative; z-index: 1;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .04),
              0 20px 44px -14px rgba(15, 23, 42, .24),
              0 54px 100px -34px rgba(76, 29, 149, .38);
}

/* ── Lišta nad obrázkem ──────────────────────────────────────────────
   ŽÁDNÉ TŘI SEMAFOROVÉ PUNTÍKY. Je to obehraný cizí motiv a navíc
   tvrdí „aplikace pro Mac", což nejsme. Lišta tu je kvůli jediné
   informaci, která na obrázku sama není: že tohle NENÍ ilustrace.
   Karta Karla o kus níž má naopak napsáno „Ilustrace rozhraní" —
   ten rozdíl musí být vidět na první pohled. */
.rano-lista {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FDFDFE, #F5F6FA);
  font-size: 12.5px; color: var(--muted);
}
.rano-zive {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
  flex: none;
}
.rano-lista b { color: var(--text); font-weight: 700; }
.rano-pravda {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .09);
  color: var(--violet7);
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Obrázek ─────────────────────────────────────────────────────────
   Spodní hrana je useknutá uprostřed karet a je to tak správně:
   okno ukazuje, kam dohlédne, a že stránka pokračuje. Aby ten řez
   nevypadal jako chyba, má okno vevnitř dole měkký stín — hloubka,
   ne prolnutí do bílé. Prolnutí by rozsvítilo i tmavý postranní
   panel a to vypadá jako vada tisku. */
/* Bez overflow: hidden. Bylo tu kvůli závoji (ořez stínu o rozprostření
   100vmax); po jeho zrušení by už jen ořezávalo záři rámečku u pravé
   hrany obrázku. Okno .rano-okno ořezává samo, a to s oblými rohy. */
.rano-snimek { position: relative; display: block; }
.rano-snimek img { display: block; width: 100%; height: auto; }
.rano-snimek::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46px;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .085));
  pointer-events: none;
}

/* ── Rámeček kolem shrnutí od KAI ────────────────────────────────────
   Souřadnice jsou v PROCENTECH obrázku, ne v pixelech — obrázek se
   škáluje s oknem a rámeček musí jet s ním. Naměřeno na zdrojovém
   snímku (ořez 1920 × 940): karta KAI leží na x 292–1883, y 264–345.
   ⛔ KDYŽ SE OBRÁZEK VYMĚNÍ, TAHLE ČTYŘI ČÍSLA SE MUSÍ PŘEMĚŘIT.

   ⛔ ZÁVOJ PŘES ZBYTEK SNÍMKU TU BYL A JIŘÍ HO 27. 8. ZRUŠIL:
   „vím, že jsi chtěl zaostřit na Kaiova slova, ale jak jsi rozmazal
    ten zbytek obrázku, tak to není hezké, nech screenshot v plné
    barvě."

   MĚL JSEM PRO TEN ZÁVOJ DŮVOD a stojí za to ho tu nechat, ať se
   nevrací jako nápad: nejbarevnější věc na snímku je firemní baner
   zákazníka a oko šlo tam, ne k šedivému řádku od KAI. Jenže cena
   za to byla vysoká — ztlumený produkt vypadá jako vybledlá fotka
   a stránka má ukázat, že ten systém je živý a plný práce.
   ZTLUMIT PRODUKT, ABY VYNIKL POPISEK, JE ŠPATNÝ OBCHOD.

   CO TU ÚLOHU PŘEBÍRÁ MÍSTO NĚJ: silnější rámeček — dvojitá
   fialová aura a výraznější záře pod ním. Zvýraznění PŘIDÁNÍM,
   ne ubráním. Přesně to, co říká pravidlo „pojďme tam zatím
   pouze přidávat", jen o pixelech místo o textu. */
.rano-ram {
  position: absolute;
  /* Nový snímek (č. 238, sobota 3. 10.): řádek „KAI navrhuje 2 kandidáty
     pro Personalista… Shoda 91–93 %" v seznamu Dnes udělat leží na
     x 295–810, y 698–755 (z 1920 × 940). Přeměřeno 4. 10. 2026 (č. 246). */
  left: calc(15.36% - 6px);
  top: calc(74.26% - 6px);
  width: calc(26.8% + 12px);
  height: calc(6.06% + 12px);
  border: 2px solid var(--violet);
  border-radius: 17px;
  /* Dvě aury místo jedné: úzká sytá hned u hrany a širší měkká za ní.
     Jedna aura na bílém pozadí zanikne, dvě dělají hloubku. */
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .20),
              0 0 0 10px rgba(124, 58, 237, .09),
              0 14px 36px -8px rgba(124, 58, 237, .62);
  pointer-events: none;
}

/* ── Nožička od řádku KAI dolů k bublině (č. 246) ────────────────────
   Vede MEZEROU mezi tmavým postranním panelem (končí na 13,5 %) a kartami
   (začínají na 15,4 %), takže nic nezakrývá: svisle na x 14,4 % od středu
   řádku (77,3 %) ke spodní hraně okna, nahoře krátký háček doprava
   k levému okraji řádku a tečka. Souřadnice v procentech obrázku jako
   u .rano-ram — při výměně snímku přeměřit. */
.rano-spoj {
  position: absolute;
  left: 14.4%;
  top: 77.3%;
  width: 2px;
  height: 22.7%;
  background: var(--violet);
  pointer-events: none;
}
.rano-spoj::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 1.3vw; max-width: 20px; min-width: 12px; height: 2px;
  background: var(--violet);
}
.rano-spoj::after {
  content: "";
  /* Střed tečky na lince: posun přes transform, ne zápornou souřadnicí
     (hlídač přetečení, kontrola-preteceni.py). */
  position: absolute; left: 0; top: 0;
  transform: translate(-4px, -4px);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .22);
}

/* ── Bublina s tím, co Karel napsal ──────────────────────────────────
   Vyčnívá z okna dolů. Dvě věci naráz: zakryje část useknuté spodní
   hrany a udělá vrstvu — plochý obrázek na plochém pozadí je nudný. */
.rano-bublina {
  position: relative; z-index: 2;
  /* Levý okraj tak, aby špička (28 px od kraje) navazovala na nožičku
     na 14,4 % šířky okna. */
  margin: 14px 0 0 calc(14.4% - 28px);
  width: min(596px, 62%);
  padding: 20px 24px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet);
  border-radius: 18px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .05),
              0 28px 64px -20px rgba(15, 23, 42, .32);
}
.rano-bublina::before {
  content: "";
  position: absolute;
  left: 20px; top: -9px;
  width: 16px; height: 16px;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.rano-kdo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--violet7);
}
.rano-kdo span { color: var(--muted); font-weight: 600; letter-spacing: 0; }
.rano-veta {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--text);
}
.rano-veta b { font-weight: 800; color: var(--violet7); white-space: nowrap; }

/* ── Tři sloupce: co z toho Karel udělal ─────────────────────────────
   Stejný sled jako uzavírací pruh výkladní skříně (štítek → hodnota
   → detail). Není to náhoda: čtenář ten rytmus o kus níž potká znovu
   a nemá se učit dvě různé mřížky. */
.rano-mriz {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 46px);
  margin: 0;
  padding: clamp(26px, 2.6vw, 34px) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.rano-stitek {
  margin: 0 0 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--violet7);
}
.rano-hodnota {
  margin: 0 0 6px;
  font-size: clamp(15.5px, 1.15vw, 17px); font-weight: 750;
  line-height: 1.35; color: var(--text);
}
.rano-detail {
  margin: 0;
  font-size: 13px; line-height: 1.55; color: var(--muted);
}

.rano-ilu {
  margin: 18px 0 0;
  font-size: 12px; color: var(--faint);
}

/* ═══ NÁJEZD ═════════════════════════════════════════════════════════
   Třídu .hraje přidává assets/js/rano.js při doscrollování.
   Bez ní se neuplatní nic z tohohle bloku — a stránka vypadá jako
   po dohrání. Viz varování v hlavičce souboru.

   POŘADÍ JE VÝKLAD, NE OZDOBA:
     okno → rámeček → bublina → tři sloupce
   tedy „tady je obrazovka" → „všimněte si tohohle" → „co v ní stojí"
   → „co z toho plyne". Kdo se dívá, čte to v tomhle
   pořadí i bez animace; animace mu to jen podá po částech. */
.rano.hraje .rano-okno    { animation: rano-vzlet .72s ease backwards; }
.rano.hraje .rano-ram     { animation: rano-ram-in .5s .62s ease backwards,
                                       rano-ram-tep 1.5s 1.12s ease-in-out 2; }
.rano.hraje .rano-bublina { animation: rano-bublina-in .55s 1.04s cubic-bezier(.2,.7,.3,1) backwards; }
/* VĚTA SE PÍŠE. Ne po písmenech — to se dělá měněním textu a je to
   práce pro JavaScript. Tohle je odclonění shora dolů, které vypadá
   jako psaní odstavce a je to jedna vlastnost.
   ⛔ A JE TO POINTA CELÉHO BLOKU: Karel tu větu píše před vámi.
   Kdyby se mělo něco z nájezdu vyhodit, tohle ať zůstane. */
.rano.hraje .rano-veta    { animation: rano-psani 1.25s 1.38s linear backwards; }
.rano.hraje .rano-mriz > li:nth-child(1) { animation: rano-sloupec .45s 1.30s ease backwards; }
.rano.hraje .rano-mriz > li:nth-child(2) { animation: rano-sloupec .45s 1.42s ease backwards; }
.rano.hraje .rano-mriz > li:nth-child(3) { animation: rano-sloupec .45s 1.54s ease backwards; }

@keyframes rano-vzlet {
  from { opacity: 0; transform: translateY(20px) scale(.988); }
  to   { opacity: 1; transform: none; }
}
@keyframes rano-ram-in {
  0%   { opacity: 0; transform: scale(1.035); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* ⛔ VŠECHNY TŘI STÍNY MUSÍ BÝT V OBOU ZASTÁVKÁCH. Když se
   v keyframu přepíše box-shadow, přepíše se CELÝ — vypsat jen
   ten, který se mění, znamená, že zbylé dva na dobu tepu zmizí
   a rámeček dvakrát bliknul. */
@keyframes rano-ram-tep {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124, 58, 237, .20),
                         0 0 0 10px rgba(124, 58, 237, .09),
                         0 14px 36px -8px rgba(124, 58, 237, .62); }
  50%      { box-shadow: 0 0 0 4px rgba(124, 58, 237, .26),
                         0 0 0 17px rgba(124, 58, 237, .07),
                         0 14px 40px -8px rgba(124, 58, 237, .70); }
}
@keyframes rano-psani {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes rano-bublina-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes rano-sloupec {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── VYPNUTÝ POHYB ───────────────────────────────────────────────────
   Nic se nehýbe a nic nechybí: výchozí stav JE hotový obrázek. */
@media (prefers-reduced-motion: reduce) {
  .rano.hraje .rano-okno,
  .rano.hraje .rano-ram,
  .rano.hraje .rano-bublina,
  .rano.hraje .rano-veta,
  .rano.hraje .rano-mriz > li { animation: none; }
}

/* ── ÚZKÁ OKNA ───────────────────────────────────────────────────────
   Pod 1000 px už bublina zabírá tolik místa, že by z obrázku zakryla
   půlku. Sesedne pod okno a scéna přestane potřebovat spodní rezervu.
   Spojnice tam nemá co spojovat, takže mizí. */
@media (max-width: 1000px) {
  .rano-bublina {
    width: auto;
    margin: 20px 0 0;
    box-shadow: var(--stin-karty, 0 2px 4px rgba(15, 23, 42, .04));
  }
  .rano-bublina::before { left: calc(14.4% - 8px); }
}

@media (max-width: 760px) {
  .rano-mriz { grid-template-columns: 1fr; gap: 22px; }
  .rano-lista { font-size: 11.5px; padding: 9px 12px; gap: 8px; }
  .rano-pravda { font-size: 10px; padding: 2px 8px; }
}

/* Pod 560 px je obrázek tak malý, že rámeček kolem shrnutí ohraničuje
   pruh vysoký pár pixelů a vypadá jako vada. Zůstane samotné okno —
   větu od Karla si člověk přečte v bublině pod ním, kde je stejně
   jediná čitelná. */
@media (max-width: 560px) {
  .rano-ram, .rano-spoj { display: none; }
  .rano-bublina::before { display: none; }
  .rano-okno { border-radius: 14px; }
}