/* Velké svislé slovo přes fotku na stránce řady grilů.

   Roman 13. 9. 2026 poslal pin z Pinterestu („London"): fotka končí bílou
   plochou a přes jejich hranu vede obří svislé slovo, uvnitř kterého fotka
   pokračuje. „Dokážeš udělat takový efekt?" — slovo SUMMIT, na mobilu také
   svisle.

   Jak to funguje: fotka (.rada-slovo-foto) i slovo (.rada-slovo-text) leží
   přes celou plochu a mají tentýž obrázek se stejným ořezem. Fotka je
   zprava odříznutá (clip-path) a za ní je bílá plocha; slovo si z obrázku
   bere jen tvar písmen (background-clip: text), takže fotka v písmenech
   přesně navazuje i nad bílou plochou. Obrys písmen je bílý tah.

   Pás ukazuje jen rada-slovo.js a jen u řady, která má slovo zapsané.
   Vlastní soubor a třída .rada-slovo — ostatních řad se nic nedotkne. */

.rada-slovo {
  padding: clamp(28px, 5vw, 64px) 0;
  background: #fff;
}

.rada-slovo-plocha {
  --hrana: 72%;                       /* kde fotka končí a začíná bílá */
  position: relative;
  width: min(calc(100% - 80px), var(--max, 1320px));
  height: clamp(460px, 52vw, 800px);
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  container-type: size;
}

.rada-slovo-foto,
.rada-slovo-text {
  position: absolute;
  inset: 0;
  margin: 0;
  background-image: var(--rada-slovo-foto);
  background-position: var(--rada-slovo-pozice, center);
  background-size: cover;
}

.rada-slovo-foto { clip-path: inset(0 calc(100% - var(--hrana)) 0 0); }

/* Slovo se usazuje rozložením, ne posunem (transform). Výřez fotky do písmen
   (background-clip: text) posun potomka nebere v úvahu — s transformem stál
   bílý obrys jinde než fotka v písmenech a slovo vypadalo rozdvojené. */
.rada-slovo-text {
  display: flex;
  align-items: center;
  /* Svislý sloupec slova je široký font-size × line-height (21cqh × 0,82),
     polovina je tedy 8,6cqh — o tolik se začátek posune před hranu. */
  padding-left: calc(var(--hrana) - 8.6cqh);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rada-slovo-text span {
  display: block;
  /* Čte se zdola nahoru jako na předloze. Starší prohlížeče bez
     sideways-lr ho ukážou shora dolů — pořád svisle a čitelně. */
  writing-mode: vertical-rl;
  writing-mode: sideways-lr;
  font-family: "Arial Black", "Arial Bold", Impact, Arial, sans-serif;
  font-size: 21cqh;
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.01em;
  white-space: nowrap;
  -webkit-text-stroke: clamp(3px, .9cqh, 8px) #fff;
  paint-order: stroke fill;
}

@media (max-width: 760px) {
  .rada-slovo-plocha {
    --hrana: 64%;
    width: calc(100% - 32px);
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .rada-slovo-text { padding-left: calc(var(--hrana) - 7.8cqh); }
  .rada-slovo-text span { font-size: 19cqh; }
}