/* =========================================================
   YUBAO — COMPANY & FACTORY PROOF
   Optimized layout: 4-image gallery + 2×2 fact cards
========================================================= */

#yb-company-proof{
  --yb-blue:#0739AC;
  --yb-dark:#061126;
  --yb-text:#4B5A73;
  --yb-border:#D6E5F3;
  --yb-soft:#F5F9FD;

  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  padding:68px 0;
  background:#fff;

  box-sizing:border-box;
  overflow:hidden;
}

#yb-company-proof *,
#yb-company-proof *::before,
#yb-company-proof *::after{
  box-sizing:border-box;
}

#yb-company-proof .yb-company-wrap{
  width:100%;
  max-width:1580px;
  margin:0 auto;
  padding:0 48px;
}

/* =========================================================
   Main layout
========================================================= */

#yb-company-proof .yb-company-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:56px;
  align-items:center;
}

/* =========================================================
   Left: factory image gallery
========================================================= */

#yb-company-proof .yb-factory-gallery{
  width:100%;

  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:244px 176px;
  gap:9px;
}

#yb-company-proof .yb-gallery-item{
  position:relative;
  min-width:0;
  overflow:hidden;

  background:#E8F1F8;
  border-radius:7px;
}

/* Large factory image */
#yb-company-proof .yb-gallery-main{
  grid-column:1 / 5;
  grid-row:1;
}

/* Upper-right workshop image */
#yb-company-proof .yb-gallery-top-right{
  grid-column:5 / 7;
  grid-row:1;
}

/* Bottom-left machining image */
#yb-company-proof .yb-gallery-bottom-left{
  grid-column:1 / 4;
  grid-row:2;
}

/* Bottom-right inspection image */
#yb-company-proof .yb-gallery-bottom-right{
  grid-column:4 / 7;
  grid-row:2;
}

#yb-company-proof .yb-gallery-item img{
  display:block;
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transition:transform .4s ease;
}

#yb-company-proof .yb-gallery-item:hover img{
  transform:scale(1.035);
}

/* =========================================================
   Right: company content
========================================================= */

#yb-company-proof .yb-company-content{
  min-width:0;
}


/* Section label: supports scanning without changing heading hierarchy */
#yb-company-proof .yb-section-kicker{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  margin:0 0 11px;
  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:13px;
  line-height:1.2;
  letter-spacing:3.2px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--yb-blue);
}

#yb-company-proof h2{
  max-width:700px;
  margin:0 0 17px;

  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:36px;
  line-height:1.18;
  letter-spacing:-.5px;
  font-weight:700;

  color:var(--yb-dark);
}

#yb-company-proof .yb-company-desc{
  max-width:700px;
  margin:0 0 27px;

  font-family:'Poppins-Regular','Poppins',Arial,sans-serif;
  font-size:16px;
  line-height:1.66;

  color:var(--yb-text);
}

/* =========================================================
   2×2 company fact cards
========================================================= */

#yb-company-proof .yb-company-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;

  gap:13px;
  margin:0 0 24px;

  align-items:stretch;
}

#yb-company-proof .yb-company-stat{
  min-width:0;
  min-height:106px;
  height:100%;

  padding:16px 18px;

  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:15px;
  align-items:center;

  background:#fff;
  border:1px solid var(--yb-border);
  border-radius:7px;

  box-shadow:0 9px 25px rgba(18,40,70,.055);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

#yb-company-proof .yb-company-stat:hover{
  transform:translateY(-3px);
  border-color:#B8D1EA;
  box-shadow:0 16px 34px rgba(18,40,70,.10);
}

/* Icon */
#yb-company-proof .yb-stat-icon{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;
}

#yb-company-proof .yb-stat-icon img{
  display:block;
  width:48px;
  height:48px;

  object-fit:contain;
  object-position:center;
}

/* Number + label */
#yb-company-proof .yb-stat-copy{
  min-width:0;
  text-align:left;
}

#yb-company-proof .yb-company-stat strong{
  display:block;
  margin:0 0 3px;

  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:25px;
  line-height:1.12;
  letter-spacing:-.25px;
  font-weight:700;

  color:var(--yb-dark);
  white-space:nowrap;
}

#yb-company-proof .yb-company-stat span{
  display:block;

  font-family:'Poppins-Regular','Poppins',Arial,sans-serif;
  font-size:13.5px;
  line-height:1.35;

  color:var(--yb-text);
}

/* Production-area number needs slightly smaller type */
#yb-company-proof .yb-stat-area strong{
  font-size:22px;
  letter-spacing:-.55px;
}

/* =========================================================
   CTA
========================================================= */

#yb-company-proof .yb-company-link{
  width:max-content;
  min-width:300px;
  height:52px;
  padding:0 25px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  color:var(--yb-blue)!important;
  background:#fff;
  border:2px solid var(--yb-blue);
  border-radius:5px;

  text-decoration:none;

  font-family:'Poppins-Bold','Poppins',Arial,sans-serif;
  font-size:15px;
  line-height:1;
  font-weight:700;

  transition:
    color .28s ease,
    background .28s ease,
    transform .28s ease,
    box-shadow .28s ease;
}

#yb-company-proof .yb-company-link:hover{
  color:#fff!important;
  background:var(--yb-blue);

  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(7,57,172,.18);
}

#yb-company-proof .yb-company-link span{
  color:inherit;
  font-size:22px;
  line-height:1;

  transition:transform .28s ease;
}

#yb-company-proof .yb-company-link:hover span{
  transform:translateX(6px);
}

/* =========================================================
   Medium desktop
========================================================= */

@media(max-width:1360px){

  #yb-company-proof .yb-company-wrap{
    padding:0 36px;
  }

  #yb-company-proof .yb-company-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.96fr);
    gap:38px;
  }

  #yb-company-proof .yb-factory-gallery{
    grid-template-rows:220px 160px;
  }

  #yb-company-proof .yb-company-stats{
    gap:10px;
  }

  #yb-company-proof .yb-company-stat{
    min-height:100px;
    padding:14px;
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
  }

  #yb-company-proof .yb-stat-icon{
    width:46px;
    height:46px;
  }

  #yb-company-proof .yb-stat-icon img{
    width:42px;
    height:42px;
  }

  #yb-company-proof .yb-company-stat strong{
    font-size:22px;
  }

  #yb-company-proof .yb-stat-area strong{
    font-size:19px;
  }

  #yb-company-proof .yb-company-stat span{
    font-size:12.5px;
  }
}

/* =========================================================
   Tablet
========================================================= */

@media(max-width:1100px){

  #yb-company-proof{
    padding:62px 0;
  }

  #yb-company-proof .yb-company-wrap{
    padding:0 30px;
  }

  #yb-company-proof .yb-company-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  /* Read the company information before the gallery */
  #yb-company-proof .yb-company-content{
    order:1;
  }

  #yb-company-proof .yb-company-gallery{
    order:2;
  }

  #yb-company-proof .yb-company-desc{
    max-width:850px;
  }

  #yb-company-proof .yb-company-stats{
    max-width:850px;
  }

  #yb-company-proof .yb-factory-gallery{
    grid-template-rows:290px 190px;
  }

  #yb-company-proof .yb-company-stat{
    min-height:108px;
  }

  #yb-company-proof .yb-company-stat strong{
    font-size:24px;
  }

  #yb-company-proof .yb-stat-area strong{
    font-size:22px;
  }
}

/* =========================================================
   Mobile
========================================================= */

@media(max-width:768px){

  #yb-company-proof .yb-section-kicker{
    margin-bottom:9px;
    font-size:12px;
    letter-spacing:2.5px;
  }



  #yb-company-proof{
    padding:50px 0;
  }

  #yb-company-proof .yb-company-wrap{
    padding:0 16px;
  }

  #yb-company-proof h2{
    font-size:30px;
    line-height:1.22;
  }

  #yb-company-proof .yb-company-desc{
    margin-bottom:22px;
    font-size:15px;
  }

  #yb-company-proof .yb-company-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  #yb-company-proof .yb-company-stat{
    min-height:116px;
    padding:14px 11px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:6px;
    text-align:center;
  }

  #yb-company-proof .yb-stat-icon{
    width:44px;
    height:44px;
  }

  #yb-company-proof .yb-stat-icon img{
    width:40px;
    height:40px;
  }

  #yb-company-proof .yb-stat-copy{
    text-align:center;
  }

  #yb-company-proof .yb-company-stat strong{
    margin-bottom:3px;
    font-size:21px;
  }

  #yb-company-proof .yb-stat-area strong{
    font-size:18px;
  }

  #yb-company-proof .yb-company-stat span{
    font-size:12px;
  }

  #yb-company-proof .yb-company-link{
    width:100%;
    min-width:0;
  }

  /* Mobile gallery */
  #yb-company-proof .yb-factory-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:210px 145px 165px;
    gap:7px;
  }

  #yb-company-proof .yb-gallery-main{
    grid-column:1 / 3;
    grid-row:1;
  }

  #yb-company-proof .yb-gallery-top-right{
    grid-column:1;
    grid-row:2;
  }

  #yb-company-proof .yb-gallery-bottom-left{
    grid-column:2;
    grid-row:2;
  }

  #yb-company-proof .yb-gallery-bottom-right{
    grid-column:1 / 3;
    grid-row:3;
  }
}

/* =========================================================
   Narrow mobile
========================================================= */

@media(max-width:480px){

  #yb-company-proof .yb-company-stats{
    grid-template-columns:1fr;
  }

  #yb-company-proof .yb-company-stat{
    min-height:auto;
    padding:15px 17px;

    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:14px;
    align-items:center;

    text-align:left;
  }

  #yb-company-proof .yb-stat-icon{
    width:48px;
    height:48px;
  }

  #yb-company-proof .yb-stat-icon img{
    width:44px;
    height:44px;
  }

  #yb-company-proof .yb-stat-copy{
    text-align:left;
  }

  #yb-company-proof .yb-company-stat strong,
  #yb-company-proof .yb-stat-area strong{
    font-size:22px;
  }
}