/* =========================
   Graseko – LP CSS
   ========================= */
.gr-page{
  padding-right: 12px;   /* klidně 8–16 px podle oka */
}
.gr-hero{
  margin: 0;
}

.gr-hero__img{
  display: block;
  width: 100%;
  height: auto !important;
}

/* Výchozí: desktop */
.gr-hero__img--mobile{ display: none; }

/* Mobil */
@media (max-width: 900px){
  .gr-hero__img--desktop{ display: none; }
  .gr-hero__img--mobile{ display: block; }
}
/* =========================================================
   LP: H1 schovat a zobrazit až za hero obrázkem
   Aktivuje se jen, když stránka obsahuje .gr-hero
   ========================================================= */

body.gr-h1-after-hero-active .pageArticleDetail > header {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.gr-h1-after-hero-active .gr-h1-after-hero {
  margin: 18px 0 10px;
}

/* „vizuální H1“ */
body.gr-h1-after-hero-active .gr-h1-visual {
  margin: 0;
  font-family: var(--template-headings-font, "Open Sans"), sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
}

/* Základní text LP */
.gr-page p,
.gr-page li {
  font-size: 18px;
  line-height: 2;
}
.gr-page h2{
  margin-top: 30px;
}

.gr-page h3{
  margin-top: 30px;
}
/*  spacing */
.gr-mb-18{ margin-bottom: 18px; }

/* ---------------------------------
   Steps (text + obrázek)
   --------------------------------- */
.gr-altsteps{
  width: 100%;
  max-width: none;
  margin: 0;                 /* žádné breakout */
  padding: 10px 0;           /* jen vertikální spacing */
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.gr-altstep{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 80px);
  flex-wrap: nowrap; 
}

.gr-altstep--reverse{
  flex-direction: row-reverse;
}

.gr-altstep__text,
.gr-altstep__img{
  flex: 0 0 calc(50% - (clamp(24px, 4vw, 80px) / 2)); /* půlka minus půl gapu */
  max-width: calc(50% - (clamp(24px, 4vw, 80px) / 2));
  min-width: 0;
}

.gr-altstep__img{
  display: flex;
  align-items: center;
  justify-content: center;
}

.gr-altstep__img img{
  max-width: 450px;
  height: auto !important;
  display: block;
}

/* Mobilní chování altsteps  */
@media (max-width: 900px){
  .gr-altsteps{
    padding: 5px 0;
    gap: 48px;
  }

  .gr-altstep,
  .gr-altstep--reverse{
    flex-direction: column;
    align-items: flex-start;
  }

  
 .gr-altstep__text,
  .gr-altstep__img{
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  
  .gr-altstep__img{
    max-width: 100%;
    justify-content: flex-start; 
  }
  .gr-altstep__img img{
    width: min(350px, 100%);
    max-width: 100%;
    height: auto !important;
  }
}

/* ---------------------------------
   Kroky spolupráce 
   --------------------------------- */
.gr-steps{ margin: 24px 0; }

.gr-steps__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.gr-step{
  border: 2px solid #52AE32;
  border-radius: 26px;
  padding: 18px 18px 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.gr-step:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.gr-step__head{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.gr-step__badge{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  background: #52AE32;
  color: #111111;
}

.gr-step__title{
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #111111;
}

.gr-step__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #111111;
  opacity: .9;
}

@media (max-width: 740px){
  .gr-steps__grid{ grid-template-columns: 1fr; }
  .gr-step{ border-radius: 22px; }
}

/* ---------------------------------
   2sloupcový blok
   --------------------------------- */
.gr-2col{
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.gr-2col__img{
  flex: 0 0 25%;
  max-width: 25%;
}

.gr-2col__text{
  flex: 1;
  min-width: 0;
}

.gr-2col__img .gr-img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 999px;
}

@media (max-width: 768px){
  .gr-2col{ flex-direction: column; gap: 20px; }
  .gr-2col__img{ max-width: 100%; }
}

/* ---------------------------------
   CTA tlačítko
   --------------------------------- */
.btn.btn-conversion{
  background-color: #52ae32;
  border-color: #52ae32;
  transition-property: all;
}

/* ---------------------------------
   FAQ (details/summary)
   --------------------------------- */
.gr-faq details{
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 0;
}

.gr-faq summary{
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  padding-right: 32px;
}

/* odstranění default markeru */
.gr-faq summary::-webkit-details-marker{ display: none; }

/* vlastní zelená šipka */
.gr-faq summary::after{
  content: "›";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 26px;
  line-height: 1;
  color: #2e7d32;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.gr-faq details[open] summary::after{ transform: rotate(90deg); }

.gr-faq details p{
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

/* =========================================================
   .gr-role-card – karta pro výběr řešení podle role.
   Inspirováno vzhledem .gr-step (zelený rámeček, zaoblení,
   hover), ale místo číslovaného kroku jde o celý řádek
   s otázkou vlevo a odkazem se šipkou vpravo.
   ========================================================= */
.gr-role-grid{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 40px;
}
.gr-role-card{
  border: 2px solid #52AE32;
  border-radius: 26px;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gr-role-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.gr-role-card__q{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #111111;
  flex: 1 1 340px;
}
.gr-role-card__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #52AE32;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.gr-role-card__link::after{
  content: "→";
  transition: transform .15s ease;
}
.gr-role-card__link:hover::after{ transform: translateX(3px); }

@media (max-width: 700px){
  .gr-role-card{ flex-direction: column; align-items: flex-start; }
}