/* =========================================================
   YUBAO — INDUSTRIES & APPLICATIONS
========================================================= */

#yb-application-module{
  --yb-blue:#0739AC;
  --yb-dark:#061126;
  --yb-text:#4B5A73;
  --yb-border:#D6E5F3;
  --yb-bg:#F5F9FD;

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

  padding:76px 0 82px;
  background:var(--yb-bg);

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

#yb-application-module *,
#yb-application-module *::before,
#yb-application-module *::after{
  box-sizing:border-box;
}

#yb-application-module .yb-app-wrap{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0 48px;
}

/* =========================================================
   Section heading
========================================================= */

#yb-application-module .yb-app-heading{
  max-width:1120px;
  margin:0 auto 34px;
  text-align:center;
}

#yb-application-module .yb-section-kicker{
  display:flex;
  align-items:center;
  justify-content:center;

  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-application-module h2{
  margin:0 0 15px;

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

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

#yb-application-module .yb-app-intro{
  max-width:1040px;
  margin:0 auto;

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

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

/* =========================================================
   Application cards
========================================================= */

#yb-application-module .yb-app-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

#yb-application-module .yb-app-card{
  position:relative;
  min-width:0;
  height:430px;

  display:block;
  overflow:hidden;

  border:1px solid rgba(214,229,243,.9);
  border-radius:8px;

  background:#DDE8F2;
  box-shadow:0 14px 34px rgba(18,40,70,.08);

  text-decoration:none;

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

#yb-application-module .yb-app-card:hover{
  transform:translateY(-5px);
  border-color:#9DBDE1;
  box-shadow:0 24px 50px rgba(18,40,70,.15);
}

#yb-application-module .yb-app-card:focus-visible{
  outline:3px solid rgba(7,57,172,.28);
  outline-offset:4px;
}

/* Card image */
#yb-application-module .yb-app-image{
  position:absolute;
  inset:0;
}

#yb-application-module .yb-app-image img{
  display:block;
  width:100%;
  height:100%;

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

  transition:transform .5s ease;
}

#yb-application-module .yb-app-card:hover .yb-app-image img{
  transform:scale(1.045);
}

/* Dark gradient for readable content */
#yb-application-module .yb-app-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background:
    linear-gradient(
      to bottom,
      rgba(4,15,34,.05) 10%,
      rgba(4,15,34,.15) 43%,
      rgba(4,15,34,.86) 100%
    );

  transition:background .35s ease;
}

#yb-application-module .yb-app-card:hover::before{
  background:
linear-gradient(
      to bottom,
      rgba(7,57,172,.12) 0%,
      rgba(7,57,172,.30) 38%,
      rgba(7,57,172,.76) 72%,
      rgba(7,57,172,.98) 100%
    );
}

/* Number */
#yb-application-module .yb-app-number{
  position:absolute;
  z-index:2;
  top:18px;
  left:18px;

  min-width:38px;
  height:30px;
  padding:0 9px;

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

  background:rgba(255,255,255,.94);
  border-radius:3px;

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

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

/* Card content */
#yb-application-module .yb-app-content{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;

  min-height:210px;
  padding:26px 24px 24px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

#yb-application-module .yb-app-card h3{
  margin:0 0 10px;

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

  color:#fff;
}

#yb-application-module .yb-app-card p{
  margin:0 0 16px;

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

  color:rgba(255,255,255,.88);
}

/* Product chain */
#yb-application-module .yb-app-parts{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;

  margin-top:auto;
  padding-top:15px;

  border-top:1px solid rgba(255,255,255,.30);
}

#yb-application-module .yb-app-parts span:first-child{
  max-width:210px;

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

  color:#fff;
}

#yb-application-module .yb-app-arrow{
  flex:0 0 auto;

  font-family:Arial,sans-serif;
  font-size:24px;
  line-height:1;

  color:#fff;

  transition:transform .28s ease;
}

#yb-application-module .yb-app-card:hover .yb-app-arrow{
  transform:translateX(6px);
}

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

@media(max-width:1360px){

  #yb-application-module .yb-app-wrap{
    padding:0 36px;
  }

  #yb-application-module .yb-app-grid{
    gap:12px;
  }

  #yb-application-module .yb-app-card{
    height:405px;
  }

  #yb-application-module .yb-app-content{
    padding:23px 20px 21px;
  }

  #yb-application-module .yb-app-card h3{
    font-size:19px;
  }

  #yb-application-module .yb-app-card p{
    font-size:13px;
  }
}

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

@media(max-width:1100px){

  #yb-application-module{
    padding:66px 0 72px;
  }

  #yb-application-module .yb-app-wrap{
    padding:0 30px;
  }

  #yb-application-module .yb-app-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }

  #yb-application-module .yb-app-card{
    height:430px;
  }

  #yb-application-module .yb-app-card h3{
    font-size:21px;
  }

  #yb-application-module .yb-app-card p{
    font-size:14px;
  }
}

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

@media(max-width:768px){

  #yb-application-module{
    padding:54px 0 60px;
  }

  #yb-application-module .yb-app-wrap{
    padding:0 16px;
  }

  #yb-application-module .yb-app-heading{
    margin-bottom:27px;
    text-align:left;
  }

  #yb-application-module .yb-section-kicker{
    justify-content:flex-start;
    margin-bottom:9px;

    font-size:12px;
    letter-spacing:2.5px;
  }

  #yb-application-module h2{
    font-size:30px;
    line-height:1.22;
  }

  #yb-application-module .yb-app-intro{
    font-size:15px;
  }

  #yb-application-module .yb-app-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  #yb-application-module .yb-app-card{
    height:390px;
  }

  #yb-application-module .yb-app-content{
    min-height:190px;
    padding:23px 20px 21px;
  }

  #yb-application-module .yb-app-card h3{
    font-size:20px;
  }
}

/* Narrow mobile */
@media(max-width:480px){

  #yb-application-module .yb-app-card{
    height:365px;
  }

  #yb-application-module .yb-app-number{
    top:14px;
    left:14px;
  }

  #yb-application-module .yb-app-content{
    padding:21px 18px 19px;
  }
}