/* ===== BENEFITY – vizuál sladěný s kartami rozcestníku ===== */
:root{
  --hb-ink:#0f1226;
  --hb-muted:#5b607a;
  --hb-surface:#fbfcfe;                  /* světlejší podklad karet */
  --hb-outline:rgba(15,18,38,.06);       /* „okraj“ přes box-shadow */
  --hb-shadow-lg:0 18px 38px rgba(10,16,34,.10);
  --hb-shadow-sm:0 8px 20px rgba(10,16,34,.08);
  --hb-accent:rgba(15,18,38,.12);        /* tenká linka v titulku */
}

#home-benefits-row{ margin-top:16px; }

.home-benefits{
  background:transparent;                /* jako okolí rozcestníku */
  border:0;
  box-shadow:none;
  border-radius:22px;
  overflow:visible;
}

/* mřížka stejně „vzdušná“ jako karty níže */
.home-benefits__inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,22px);
  padding:clamp(10px,2vw,14px);
}

/* 2 sloupce až do ~400px, pak 1 */
@media (max-width:992px){ .home-benefits__inner{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .home-benefits__inner{ grid-template-columns:1fr;} }

/* samotná karta benefitu – podobně měkká jako rozcestník */
.home-benefits__item{
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:clamp(10px,1.6vw,16px);
  background:var(--hb-surface);
  border-radius:20px;
  padding:clamp(10px,2vw,14px);
  box-shadow:
    0 0 0 1px var(--hb-outline),         /* jemné „orámování“ jako u karet */
    var(--hb-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.home-benefits__item:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px var(--hb-outline),
    var(--hb-shadow-lg);
}

/* ikona: světlá „pilulka“, zaoblení jako karty rozcestníku */
.home-benefits__icon{
  inline-size:52px; block-size:52px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(180deg,#f3f5fb, #f7f9ff);
  box-shadow:inset 0 0 0 1px rgba(15,18,38,.06);
  overflow:hidden;
}
.home-benefits__icon svg,
.home-benefits__icon img{ width:22px; height:22px; display:block; object-fit:contain; }

/* titulek s jemnou „accent“ linkou jako vizuální echo linek v rozcestníku */
.home-benefits__title{
  font-weight:800;
  font-size:clamp(15px,2vw,18px);
  line-height:1.15;
  color:var(--hb-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  position:relative; padding-top:2px;
}
.home-benefits__title::before{
  content:"";
  position:absolute;
  left:0; top:-6px;
  width:34px; height:2px;
  border-radius:2px;
  background:var(--hb-accent);
}

/* popisek kratší a na malých šířkách se schová */
.home-benefits__desc{
  margin-top:3px;
  color:var(--hb-muted);
  font-size:clamp(12.5px,1.7vw,14px);
  line-height:1.3;
}
@media (max-width:460px){ .home-benefits__desc{ display:none; } }

/* kompaktnější layout na mobilech */
@media (max-width:640px){
  .home-benefits__item{ grid-template-columns:44px 1fr; padding:10px; }
  .home-benefits__icon{ inline-size:44px; block-size:44px; border-radius:12px; }
  .home-benefits__icon svg,
  .home-benefits__icon img{ width:20px; height:20px; }
}

/* jemná animace nástupu */
@media (prefers-reduced-motion:no-preference){
  .home-benefits{opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;}
  .home-benefits.is-ready{opacity:1;transform:translateY(0);}
}

.home-benefits__item{
  display:flex;                     /* místo gridu */
  align-items:center;               /* srovná text doprostřed ikony */
  gap:clamp(10px,1.6vw,16px);
  background:var(--hb-surface);
  border-radius:20px;
  padding:clamp(10px,2vw,14px);
  box-shadow:
    0 0 0 1px var(--hb-outline),
    var(--hb-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.home-benefits__item:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px var(--hb-outline),
    var(--hb-shadow-lg);
}

.home-benefits__icon{
  flex:0 0 52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(180deg,#f3f5fb,#f7f9ff);
  box-shadow:inset 0 0 0 1px rgba(15,18,38,.06);
}

@media (max-width:640px){
  .home-benefits__icon{ flex:0 0 44px; height:44px; border-radius:12px; }
  .home-benefits__icon svg,
  .home-benefits__icon img{ width:20px; height:20px; }
}


@media (max-width:640px){
  #home-benefits-row{
    display:none !important;
  }
}