/* ===============================
Base
=============================== */
#home-b2b-imggrid{
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
#home-b2b-imggrid *{ box-sizing:border-box; }

/* Section */
#home-b2b-imggrid .hbgi-board{
  background:#F7F5F2;
  padding:64px 22px 70px;
}
#home-b2b-imggrid .hbgi-wrap{
  max-width:1400px;
  margin:0 auto;
}

/* Head */
#home-b2b-imggrid .hbgi-head{
  text-align:center;
  margin-bottom:28px;
}
#home-b2b-imggrid .hbgi-title{
  font-size:clamp(26px,2.4vw,32px);
  font-weight:700;
  margin-bottom:10px;
}
#home-b2b-imggrid .hbgi-lead{
  font-size:16.5px;
  line-height:1.65;
  color:#495057;
  margin:0 auto;
}

/* Desktop one-line subtitle */
@media (min-width:961px){
  #home-b2b-imggrid .hbgi-lead{
    white-space:nowrap;
  }
}

/* Grid */
#home-b2b-imggrid .hbgi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

/* Card */
#home-b2b-imggrid .hbgi-item{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  height:520px;
  transition:transform .22s ease, box-shadow .22s ease;
}
#home-b2b-imggrid .hbgi-item::after{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  transition:transform .26s ease;
}

/* Hover (desktop) */
@media (hover:hover){
  #home-b2b-imggrid .hbgi-item:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 54px rgba(0,0,0,.13);
  }
  #home-b2b-imggrid .hbgi-item:hover::after{
    transform:scale(1.04);
  }
}

/* ===============================
Icons (mobile only)
=============================== */
#home-b2b-imggrid .hbgi-icon{ display:none; }

@media (max-width:560px){

  /* compress header spacing */
  #home-b2b-imggrid .hbgi-board{
    padding:40px 14px 46px;
  }
  #home-b2b-imggrid .hbgi-head{
    margin-bottom:16px;
  }

  /* 2x2 grid */
  #home-b2b-imggrid .hbgi-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  /* ⭐ key: fit in one screen */
  #home-b2b-imggrid .hbgi-item{
    height:calc(100vh / 2 - 96px);
    min-height:210px;
    max-height:300px;
  }

  /* icons */
  #home-b2b-imggrid .hbgi-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:8px;
    left:8px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    z-index:2;
  }
  #home-b2b-imggrid .hbgi-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:#1a2530;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
}

/* Tablet */
@media (max-width:1100px){
  #home-b2b-imggrid .hbgi-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  #home-b2b-imggrid .hbgi-item{
    height:520px;
  }
}