/* FOX&fellows — SLUŽBY */
.services-page { padding-top: 112px; padding-bottom: 50px; }
.services-page__title {
  font-family: var(--font-x); font-weight: 500; font-size: 60px; line-height: 60px;
  color: var(--orange); max-width: 1000px; margin-bottom: 40px;
}
/* 2026-08-24 (Kristian: „Networking a Poradenství jsou strašně daleko od sebe,
   ať je to stejně jako mezi ostatními"): výšku sekce určoval kruh, ne text.
   Networking má jen dvě položky, pod nimi zbývalo 136 px prázdna a mezera
   k další sekci vyšla čtyřikrát větší než jinde. Text proto stojí svisle na
   středu svého kruhu, takže volné místo se rozdělí nad a pod něj. */
/* Kristian 24. 8. večer: „přidej ten obrázek zpátky, ale ať jsou všechny stejně
   velké, aby Reputace, Digital, Creative, Networking i Poradenství byly ve
   stejné linii a symetricky." Všech pět sekcí je proto stejně vysokých a text
   i kruh v nich stojí svisle na středu. Kruhy tak jdou pod sebou
   v pravidelném rytmu.

   Kristian tamtéž: „obrázky jsou malé, ať je nahoře větší a Reputace taky, a jak
   scrolluješ, tak se to zmenšuje a další se zvětšuje." Sekce, která je zrovna
   uprostřed okna, je tedy největší a při odrolování se zmenší ve prospěch
   další. Zvětšuje se jen obrazem (transform), ne skutečnou velikostí, takže se
   nic nepřepočítává a rolování zůstane hladké. Míru řídí main.js proměnnou
   --k (0 daleko od středu, 1 přesně uprostřed). */
.servis {
  --k: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 400px;
  margin-bottom: 40px;
}
.servis__text { padding-right: 60px; }
.servis__text h2 {
  font-family: var(--font-x); font-weight: 300; font-size: 40px; line-height: 44px;
  color: var(--ink); margin-bottom: 20px;
}
.servis__text li {
  font-family: var(--font-x); font-weight: 800; font-size: 21px; line-height: 25px;
  color: var(--ink); margin-bottom: 30px;
}
.servis__text li:last-child { margin-bottom: 0; }
/* Kristian 24. 8. večer: „udělej to tak, aby všechny ty obrázky byly stejně
   velké, klidně jeden dej pryč." Kruhy tedy mají všechny stejných 280 px.
   Rovnoměrnou mezeru řeší svisle vystředěný text a vynechaný kruh u sekce
   s nejkratším seznamem (viz níže). */
.servis .collage-circle {
  flex: 0 0 360px; width: 360px; height: 360px;
  /* zvětšuje se doleva od svého pravého okraje, aby pravá linie držela */
  transform: scale(calc(.72 + .28 * var(--k)));
  transform-origin: 100% 50%;
  will-change: transform;
}
/* nadpis kategorie roste spolu s obrázkem, od levé linie textu */
.servis__text h2 {
  display: inline-block;
  transform: scale(calc(1 + .3 * var(--k)));
  transform-origin: 0 50%;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .servis { --k: .5; }
  .servis .collage-circle, .servis__text h2 { will-change: auto; }
}


@media (max-width: 700px) {
  .services-page { padding-top: 40px; }
  .services-page__title { font-size: 40px; line-height: 44px; }
  /* dle Figmy: velký kruh u pravého okraje, zpola přetéká za hranu obrazovky.
     Sekce je přes celou šířku viewportu a přetok kruhu ořízne (žádné vodorovné
     rolování stránky). Text zůstává vlevo, odsazený od kruhu. */
  .servis {
    position: relative; flex-direction: column; gap: 0; margin-bottom: 56px;
    /* kruh je 300px vysoký a začíná na top:30px (spodek v 330px). Krátké
       kategorie (Entertainment, Advisory) mají méně textu, tak si vynutíme
       výšku sekce, aby kruh nikdy nezasahoval do kruhu následující sekce. */
    min-height: 350px;
    width: 100vw; margin-left: calc(50% - 50vw);
    padding-left: var(--pad); padding-right: var(--pad);
    overflow-x: clip;
  }
  .servis__text { padding-right: 158px; }
  .servis__text h2 { font-size: 34px; line-height: 37px; }
  .servis .collage-circle {
    flex: none; width: 300px; height: 300px;
    position: absolute; top: 30px; right: -150px;
  }
  /* zvětšování podle středu okna je jen pro velké obrazovky; na mobilu drží
     kruh i nadpis figmovou velikost */
  .servis .collage-circle, .servis__text h2 { transform: none; }
}

/* ---------- Rozbalovací položky služeb (klik jako v prototypu) ---------- */
.servis-item__head {
  font-family: var(--font-x); font-weight: 800; font-size: 21px; line-height: 25px;
  color: var(--ink); text-align: left; padding: 0; cursor: pointer; transition: color .2s;
}
.servis-item__head:hover,
.servis-item.is-open .servis-item__head { color: var(--orange); }
/* rozbalení stačí na najetí (desktop); klik zůstává pro dotykové obrazovky.
   2026-08-18: dřív se animovala max-height z 0 na pevných 460 px, ale text měří
   kolem 100 px. Rozbalení proto skončilo v první čtvrtině průběhu a při sbalování
   se skoro celou dobu nic nedělo a pak to seklo. Nově se animuje grid-template-rows
   0fr → 1fr, což jede přesně na výšku obsahu, takže rozbalení i sbalení trvá
   stejně dlouho a nikde to neškube. Doba zkrácena na .3 s.

   2026-08-24: samotné :hover na otevírání už nestačilo. Jakmile myš opustila
   otevřenou položku, hned se začala zavírat, obsah pod ní vyskočil nahoru a
   člověk minul to, na co mířil. Otevřenou položku proto řídí main.js (třída
   .is-open) s malou prodlevou a přepnutím obou položek naráz. Tady zůstává jen
   obarvení názvu při najetí. */
@media (hover: hover) {
  .servis-item:hover .servis-item__head { color: var(--orange); }
}
.servis-item__body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, margin .3s cubic-bezier(.4, 0, .2, 1);
}
.servis-item__body > * { overflow: hidden; min-height: 0; }
.servis-item.is-open .servis-item__body { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.servis-item__body p {
  font-family: var(--font-sx); font-weight: 400; font-size: 16px; line-height: 31px;
  color: var(--ink); max-width: 560px; white-space: pre-line;
}