/* ===== 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; }
}

/* ===== Jednotne nadpisy sekci (od SWP slideru po Resources | News & Blog) =====
   Sjednoceno na velikost .swp-heading vcetne jeho responzivni rady:
   32px (desktop) / 26px (<992px) / 22px (<480px), line-height 1.2em, weight 300.
   h1-new nadpisy V ROZSAHU maji navic .center-align, hlavni hero nadpis nahore
   (h1-new bez center-align) zustava 48px. Selektory s tagem prebiji .h2
   (weight 400), tiny overridy .h2 / .h2-upsize / .h2.light.middle i media
   pravidla v swp/tdp assetech. */
h2.h2,
h2.h2.light.middle,
h2.h2-upsize,
h2.swp-heading,
h2.tdp-heading,
h2.h1-new.center-align {
  font-size: 32px;
  line-height: 1.2em;
  font-weight: 300;
}
@media (max-width: 991px) {
  h2.h2,
  h2.h2.light.middle,
  h2.h2-upsize,
  h2.swp-heading,
  h2.tdp-heading,
  h2.h1-new.center-align { font-size: 26px; }
}
@media (max-width: 479px) {
  h2.h2,
  h2.h2.light.middle,
  h2.h2-upsize,
  h2.swp-heading,
  h2.tdp-heading,
  h2.h1-new.center-align { font-size: 22px; }
}

/* ===== Konfigurator: HubSpot form misto nativnich kontaktnich poli =====
   Na poslednim kroku (data-step 9) se misto Webflow inputu a submitu zobrazi
   embedovany HubSpot formular (blok #config-hubspot za formularem, rizeny
   patch JS). Nativni pole zustavaji v DOM kvuli sync skriptu v page footeru. */
.config-form .config-step[data-step="9"] .config-input { display: none; }
.config-form .config-submit { display: none !important; }
/* HS blok zije primo uvnitr modre karty (.config-form) jako bila karta s nadpisem */
.config-hubspot { width: 100%; max-width: none; margin: 0; padding: 28px; text-align: left;
  background: #fff; border-radius: 1.25rem; box-shadow: 0 10px 30px rgba(20, 33, 61, .08); }
.config-hubspot-title { font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0 0 16px; color: #12253a; }
/* Posledni krok: rekapitulace vlevo (sticky), formular vpravo - trida is-final-step
   pridava patch JS, karta se pro tento krok rozsiri */
@media (min-width: 768px) {
  .config-form.is-final-step { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 24px; align-items: start; max-width: 1080px; }
  .config-form.is-final-step .progress_bar_wrapper { grid-column: 1 / -1; }
  .config-form.is-final-step .form_wrapper { position: sticky; top: 96px; }
  .config-form.is-final-step .success-msg { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .config-hubspot { padding: 20px 16px; margin-top: 20px; }
}
/* HubSpot default styl omezuje fieldset na 500px - pustit na plnou sirku karty,
   dvousloupcove radky (form-columns-2 z HS editoru) pak funguji samy */
#config-hubspot .hs-form fieldset { max-width: none; }
#config-hubspot .hs-form fieldset .input { margin-right: 0; }
#config-hubspot .form-columns-2 .hs-form-field { padding-right: 8px; }
#config-hubspot .form-columns-2 .hs-form-field + .hs-form-field { padding-right: 0; padding-left: 8px; }
/* potvrzeni po odeslani */
#config-hubspot .submitted-message { font-size: 16px; line-height: 1.6; padding: 16px 0; text-align: center; }
/* rekapitulace vyberu (na kroku 9 i v success message) - radky otazka/odpoved */
.config-recap { max-width: 636px; margin: 4px auto 24px; font-size: 14px; line-height: 1.5; text-align: left; }
.config-recap:empty { display: none; }
.config-recap-title { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .55; margin-bottom: 6px; }
.config-recap-row { display: flex; gap: 16px; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(20, 33, 61, .10); }
.config-recap-row:last-child { border-bottom: 0; }
.config-recap-q { opacity: .65; flex: 0 1 auto; }
.config-recap-a { font-weight: 500; text-align: right; flex: 0 1 auto; }
@media (max-width: 479px) {
  .config-recap-row { flex-direction: column; gap: 2px; }
  .config-recap-a { text-align: left; }
}

/* HubSpot form - zakladni sladeni se stylem konfiguratoru
   (chyta se jen kdyz HubSpot renderuje form inline / raw HTML, ne v iframe) */
#config-hubspot .hs-form-field { margin-bottom: 14px; text-align: left; }
#config-hubspot .hs-form label { font-size: 14px; font-weight: 500; display: block; margin-bottom: 4px; }
#config-hubspot .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; padding: 10px 14px; border: 2px solid #d7e0ec; border-radius: 7px;
  background: #fff; font-size: 15px; font-family: inherit;
}
#config-hubspot .hs-input:focus { border-color: #638dff; outline: none; }
#config-hubspot .hs-button {
  padding: 12px 28px; border: 0; border-radius: 7px; background: #638dff; color: #fff;
  font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s ease;
}
#config-hubspot .hs-button:hover { background: #4a76f5; }
#config-hubspot .hs-error-msgs { color: #e50e59; font-size: 13px; margin: 4px 0 0; padding-left: 0; list-style: none; }

/* ===== Why Sharry VM taby: jednotna vyska panelu + zarovnani nadpisu s obrazkem =====
   Puvodne vysku radku ridil pomer stran obrazku (image-full ma height 100 %,
   v auto grid radku se pocita intrinsic vyska) a text box mel margin-top 10 %,
   takze kazdy tab mel jinou vysku a nadpis nelicoval s horni hranou obrazku.
   Plati jen na teto strance (patch CSS), sdilene tridy zustavaji netknute. */
@media (min-width: 992px) {
  .credentials-slide { align-items: start; }
  .credentials-slide > .image-full,
  .credentials-slide > .image-link { height: 440px; }
  .credentials-slide > .image-link .image-full { height: 100%; }
  /* v14: obrazky maji ruzne pomery stran, presne licovani s horni hranou nejde
     zarucit u vsech tabu - texty jsou proto svisle na stred vysky obrazku */
  .credentials-slide .credentials-text-wrap { margin-top: 0; min-height: 440px; justify-content: center; }
  /* screenshot s object-contain drzi u horni hrany, aby liceval s nadpisem */
  .credentials-slide .image-full.object-contain { object-position: 50% 0; }
}

/* ===== Roles hub: drobnosti z klientskeho feedbacku (2026-09-07) =====
   1) Kulate zakonceni spojnic (stroke-linecap: round z page-settings CSS)
      vykukovalo u aktivniho hexagonu zpod obrysu jako "puntik" - rovne
      zakonceni konci schovane pod obrysovou linkou. */
.roles_lines path { stroke-linecap: butt; }
/* 2) Laptop se Sharry logem ve stredovem hexagonu mirne niz */
.roles_center_default { padding-top: 7%; }


/* ===== Dekorativni cloud vrstvy (fixed, z-index 1) blokovaly kliky na obsah,
   napr. proklik obrazku integraci v Why Sharry tabech =====
   v15: cookieconsent banner (#cm) ma taky tridu .cloud - nesmi ji to vypnout */
.cloud:not(#cm) { pointer-events: none; }
.credentials-slide .image-link { position: relative; z-index: 2; display: block; }