/* Podstránka Vidět věci jinak (260930). Načítá se po podstranky.css.
   Motiv stránky je změna pohledu: dronová fotografie řeky se při čtení úvodu pomalu otáčí (dron se stáčí
   nad krajinou), tři tematické bloky jedou přes les shora schodovitě a kontakt leží na téže řece jako úvod,
   jen otočené o 180 stupňů.
   Rytmus ploch: fotka (úvod, bílý blok a šedý pruh) → papír (o setkání, dvě okna) → fotka (tematické bloky)
   → bílá plocha s připnutou fotkou (medailonek) → opona (kontakt). */

/* Jeviště 1: řeka shora. Okno s fotkou je o 22 % větší než jeviště na každou stranu, aby otočení o pár
   stupňů neodkrylo rohy. */
.j-uvod .j-pozadi { background: #E9EDEF; }
.j-uvod .j-pozadi .okno { inset: -22%; }
.j-uvod .j-pozadi img { object-position: 50% 50%; }
/* Úvod stojí na světlém sněhu: bloky dostanou stín, jinak by bílý blok splynul s fotkou. */
.j-uvod .blok-uvod, .j-uvod .pruh { box-shadow: 0 34px 70px -34px rgb(8 10 20 / 0.5); }
/* Titulek: „jinak“ na vlastním řádku, kolem něj kreslí pero kroužek, proto má nad sebou volné místo
   (elipsa sahá 22 px za obdélník textu) a je mírně odsazené (řídicí body tahu nejméně 14 px uvnitř rámu). */
.h1 .radek-2 { width: max-content; margin-top: 0.42em; margin-left: 0.34em; }
.blok-uvod .perex { margin-top: clamp(30px, 4.6vh, 42px); }
.j-uvod .j-obsah { padding-bottom: 112vh; }

/* O setkání: text vlevo, dvě okna s fotkami ze setkání vpravo, druhé přes spodní okraj prvního. */
.setkani { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 110px); align-items: start; padding: clamp(96px, 15vh, 150px) var(--okraj) clamp(110px, 18vh, 170px); }
.setkani-lead { margin: clamp(18px, 3vh, 26px) 0 clamp(26px, 4.4vh, 38px); font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 48; font-weight: 560; font-size: clamp(27px, 2.4vw, 36px); line-height: 1.16; letter-spacing: -0.026em; max-width: 19em; }
.setkani-text > p:not(.setkani-lead) { font-size: 17px; line-height: 1.62; color: var(--text2); max-width: 36em; }
.setkani-text > p:not(.setkani-lead) + p { margin-top: 14px; }
.setkani-fotky { position: relative; padding-top: clamp(20px, 5vh, 60px); }
.setkani-foto-1 { width: 78%; margin-left: auto; aspect-ratio: 1089 / 1365; }
.setkani-foto-2 { width: 56%; aspect-ratio: 997 / 1327; margin-top: -34%; box-shadow: 0 30px 60px -28px rgb(8 10 20 / 0.45); }

/* Jeviště 2: tematické bloky. Les shora stojí, přes něj inkoustový úvod a tři bílé bloky schodovitě
   (každý o kus níž než předchozí), takže jedou přes fotku po sobě zleva doprava. */
.j-bloky .j-pozadi img { object-position: 50% 50%; }
.anim .j-bloky .j-pozadi img { scale: 1.1; rotate: calc((var(--p, 0.5) - 0.5) * 6deg); }
.j-bloky .j-obsah { padding: 30vh var(--okraj) 34vh; }
.bloky-uvod .lead { margin-top: clamp(14px, 2.4vh, 20px); color: var(--tma-text2); }
.kaskada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 2.6vw, 40px); align-items: start; margin-top: clamp(90px, 16vh, 150px); }
.tb { padding: clamp(28px, 4.6vh, 40px) clamp(24px, 2.4vw, 36px) clamp(30px, 5vh, 42px); }
.tb:nth-child(2) { margin-top: 22vh; }
.tb:nth-child(3) { margin-top: 44vh; }
.tb .ousko { font-family: var(--nadpis); font-weight: 680; font-size: 17px; letter-spacing: 0; }
.tb h3 { padding-left: 38px; font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 48; font-weight: 620; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.026em; }
.tb p:not(.ousko) { margin-top: 12px; padding-left: 38px; font-size: clamp(15px, 1.12vw, 16.5px); line-height: 1.55; color: var(--text2); }

/* Medailonek: dělená obrazovka, fotka z výstavy připnutá vlevo přes celou výšku, text na bílé ploše. */
.medailonek { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--bila); }
.medailonek-foto { position: sticky; top: 0; height: 100vh; min-height: 560px; align-self: start; }
.medailonek-foto .okno { position: absolute; inset: 0; }
.medailonek-foto img { object-position: 92% 30%; }
.anim .medailonek-foto img { scale: 1.08; translate: 0 calc((var(--p, 0.5) - 0.5) * -6%); }
.medailonek-text { align-self: center; padding: clamp(90px, 15vh, 150px) var(--okraj) clamp(90px, 15vh, 150px) clamp(44px, 6vw, 96px); }
.medailonek-lead { margin: clamp(24px, 3.8vh, 34px) 0 18px; font-size: clamp(18.5px, 1.4vw, 20.5px); line-height: 1.52; max-width: 34em; }
.medailonek-text > p:not(.medailonek-lead) { font-size: clamp(18.5px, 1.4vw, 20.5px); line-height: 1.52; max-width: 34em; }

/* Opona: tatáž řeka jako v úvodu, otočená o 180 stupňů; při odhalení se dotočí. Ztmavená vlevo pod textem. */
.opona-foto { inset: -22%; }
.opona-foto img { rotate: 180deg; }
.anim .opona-foto img { rotate: calc(180deg - (1 - var(--p, 1)) * 10deg); }
.opona-foto::after { background: linear-gradient(to right, rgb(13 11 30 / 0.94) 22%, rgb(13 11 30 / 0.84) 44%, rgb(13 11 30 / 0.42) 64%, rgb(13 11 30 / 0.28) 78%); }
.kontakt .h2 { max-width: 9em; font-size: clamp(40px, 3.8vw, 58px); }

/* ---------- pohyb (jen s třídou anim) ---------- */
/* Úvod: po načtení se fotka oddálí a dotočí na místo; při čtení se okno s fotkou pomalu otáčí dál. */
.anim .j-uvod .j-pozadi .okno { rotate: calc(var(--p, 0) * 9deg); }
.anim .j-uvod .j-pozadi img { transition: scale 2800ms var(--dojezd) 80ms, rotate 2800ms var(--dojezd) 80ms; }
.anim:not(.nacteno) .j-uvod .j-pozadi img { scale: 1.12; rotate: -5deg; }

/* ---------- telefon a tablet na výšku (261001, hranice v podstranky.css) ---------- */
@media screen and (max-width: 960px) {
  /* Kroužek kolem „jinak“: elipsa sahá 27 px vlevo od textu (řídicí body tahu nejméně 14 px uvnitř rámu)
     a 20 px nad text; s odstupem řádků z desktopu (0,42 em) by na menším písmu přejela spodek „Vidět věci“. */
  .h1 .radek-2 { margin-top: 0.66em; margin-left: 0.5em; }
  .blok-uvod .perex { margin-top: 34px; }

  /* O setkání: text, pod ním dvě okna s fotkami přes sebe. */
  .setkani { display: block; padding: 76px var(--okraj) 84px; }
  .setkani-lead { font-size: clamp(25px, 7vw, 30px); }
  .setkani-text > p:not(.setkani-lead) { font-size: 16.5px; }
  .setkani-fotky { max-width: 520px; margin-top: 44px; padding-top: 0; }

  /* Tematické bloky: les stojí, bloky jedou přes něj po jednom (mezi nimi kus lesa) a schodovitě od levého
     okraje okna k pravému. */
  .j-bloky .j-obsah { padding: 26vh 0 30vh; }
  .kaskada { display: block; margin-top: 16vh; }
  .tb { width: 86%; max-width: 560px; padding: 26px var(--blok-p) 28px var(--blok-l); }
  .tb:nth-child(2) { margin: 18vh 0 0 7%; }
  .tb:nth-child(3) { margin: 18vh 0 0 14%; }
  .tb h3 { font-size: clamp(23px, 6.4vw, 27px); }
  .tb p:not(.ousko) { font-size: 16px; }

  /* Medailonek: fotka z výstavy stojí přes celé okno a bílý blok s textem přes ni vyjede (jako jeviště). */
  /* Pod blokem ještě kus fotky: jako spodní okraj bloku, ne odsazení sekce (připnutá fotka nesahá do odsazení
     svého obalu, zbyl by pruh tmy); flow-root drží okraj uvnitř sekce. */
  .medailonek { display: flow-root; background: #1B1C21; }
  .medailonek-foto { height: 100vh; min-height: 0; }
  .medailonek-foto img { object-position: 78% 30%; }
  .medailonek-text { position: relative; z-index: 1; width: var(--sloupec); margin: -36vh 0 14vh; padding: 30px var(--blok-p) 34px var(--blok-l); background: var(--bila); }
  .medailonek-lead, .medailonek-text > p:not(.medailonek-lead) { font-size: 17.5px; }

  /* Opona: řeka nahoře, text dole na ztmavené části. */
  .opona-foto::after { background: linear-gradient(to bottom, rgb(13 11 30 / 0.2) 0%, rgb(13 11 30 / 0.34) 30%, rgb(13 11 30 / 0.86) 54%, rgb(13 11 30 / 0.94) 100%); }
  .kontakt .h2 { font-size: clamp(32px, 9vw, 40px); }
}