/* ===== VM V2 roles hub patch v1 =====
   Doplnky k CSS v page settings (head), ktere pres API nejde editovat.
   Nacita se z embedu v hero sekci, tj. kaskadove PO puvodnich pravidlech. */

/* 0) reset kosmetiky, ktera je ve Webflow tridach JEN kvuli prehlednemu Designer canvasu
      (dashed karty textu; grid layout hubu prebiji puvodni absolute/flex pravidla) */
.role_panel { margin: 0; border: 0; border-radius: 0; background: transparent; }

/* 1) male Sharry logo pod laptopem ve stredovem hexagonu */
.roles_center_default { flex-direction: column; row-gap: 5%; }
.roles_center_default img + img { max-width: 24%; }

/* 2) texty roli drzi uvnitr hexagonu - delsi popisy se nesmi roztahnout do rohu masky */
.role_panel > div { max-width: 68%; font-size: 15px; line-height: 1.5; }

@media (min-width: 768px) {
  /* 3) guest ma popisek NAD fotkou, aby spojnice do stredu nesla pres text */
  .roles_hub .role[data-role="guest"] { flex-direction: column-reverse; }
  .roles_hub .role[data-role="guest"] .role_label { padding-top: 0; padding-bottom: 1rem; }
}

@media (max-width: 767px) {
  /* texty roli v malem stredovem hexagonu: mensi pismo + hexagon se pri otevrenem panelu zvetsi */
  .role_panel { padding: 0 10px; }
  .role_panel > div { max-width: 78%; font-size: 12px; line-height: 1.45; }
  .roles_hub[data-active]:not([data-active=""]) .roles_center { width: min(80vw, 300px) !important; transition: width .35s ease, opacity .7s ease; }
}