/* ---------- KONFIG (můžeš doladit čísla) ---------- */
:root{
  --benefit-gap-x: 84px;     /* mezery mezi bloky na desktopu */
  --benefit-gap-y: 28px;     /* svislé mezery */
  --benefit-icon: 72px;      /* velikost ikony desktop */
  --benefit-title: 16px;     /* velikost nadpisu desktop */
  --benefit-text: 14px;      /* velikost popisu desktop */
  --benefit-maxw: 1320px;    /* max šířka celé řady pro centrování */
  --benefit-mobile-nudge: 10px; /* jemné odsazení vlevo na mobilu */
}

/* ---------- WRAPPER: GRID 4 → 2, centrování, reset přepisů ---------- */
.benefitBanner.position--benefitHomepage{
  display:grid !important;
  /* Každý blok má min. šířku – nepadne pod sebe dřív než přepneme na 2 sloupce */
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  column-gap: var(--benefit-gap-x);
  row-gap: var(--benefit-gap-y);
  align-items:start;
  justify-items:center;
  justify-content:center;
  margin-inline:auto;
  max-width: var(--benefit-maxw);
  margin-top: 20px;  /* ✅ spolehlivý horní odstup celého bloku */
  padding-left: 0;
}

/* Reset vnitřku, aby šablona nevnucovala block/float/width */
.benefitBanner.position--benefitHomepage .benefitBanner__item{
  display:block !important;
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box;
  text-align:center;
}
.benefitBanner.position--benefitHomepage .benefitBanner__content{
  display:flex !important;
  justify-content:center;
}
.benefitBanner.position--benefitHomepage .benefitBanner__data{
  text-align:center;
  max-width:none; /* na desktopu dovolíme textům 1 řádek */
}

/* Ikony + typografie */
.benefitBanner.position--benefitHomepage .benefitBanner__data img{
  display:block;
  margin:0 auto 10px;
  width: var(--benefit-icon);
  height: var(--benefit-icon);
}
.benefitBanner.position--benefitHomepage .benefitBanner__data h3{
  margin:0 0 6px;
  font-weight:700;
  font-size: var(--benefit-title);
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.2;
  white-space:nowrap;     /* držet na 1 řádku jako dřív */
}
.benefitBanner.position--benefitHomepage .benefitBanner__data p{
  margin:0;
  font-size: var(--benefit-text);
  line-height:1.35;
  color:#555;
  white-space:nowrap;     /* držet na 1 řádku jako dřív */
}

/* ---------- Tablet / menší notebooky: 2 sloupce ---------- */
@media (max-width: 992px){
  .benefitBanner.position--benefitHomepage{
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    column-gap: 36px;
    max-width: 800px;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__data img{
    width:64px; height:64px;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__data h3{
    font-size:15px;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__data p{
    font-size:13.5px;
  }
}

/* ---------- Mobil: pořád 2×2, menší ikony + jemné odsazení vlevo ---------- */
@media (max-width: 520px){
  .benefitBanner.position--benefitHomepage{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px;
    row-gap: 20px;
    max-width: 100%;
    padding-left: var(--benefit-mobile-nudge); /* „left:10px“ */
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__data img{
    width:56px; height:56px; margin-bottom:8px;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__data h3{
    font-size:14px;
  }
  .benefitBanner.position--benefitHomepage .benefitBanner__data p{
    font-size:13px; line-height:1.4;
    white-space:normal; /* na malém mobilu klidně dovol přelomit */
  }
}

/* Pojistka proti max-width obrázků ze šablony */
.benefitBanner.position--benefitHomepage img{
  max-width:none !important;
  height:auto;
}


.benefitBanner {
  border-bottom: none !important;
  padding: 0 !important;
}