/* Styles specific to About Us page - image/text mixed layout */

/* Load local fonts from fonts/directory */
@font-face{
  font-family: 'shouyi_text';
  src: url('../fonts/1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'shouyi_italic';
  src: url('../fonts/3.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'shouyi_title';
  src: url('../fonts/4.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


.workshop-title {
  font-family: shouyi_title, auto;
  line-height: 32px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  list-style-type: none;
  font-size: 32px;
  font-weight: 400;
  color: rgb(0, 0, 0);
  font-kerning: none;
  text-decoration-line: none;
  text-decoration-thickness: initial;
  text-decoration-style: initial;
}
.workshop-bold{
    font-family: shouyi_text, auto;
    font-size: 17.33px;
    line-height: 30px;
    font-weight: 700;
    
}

.workshop-content{
    font-family: shouyi_text, auto;
    font-size: 17.33px;
    line-height: 30px;
    
}

.workshop-sub-title {
  font-family: shouyi_text, auto;
  font-size: 26px;
  margin-top: 20px;
}


.workshop-box {
    margin-top: 40px;
}
.workshop-item-box {
    display: flex;
    margin-top: 20px;
    margin-bottom: 80px;
}

/* Workshop page layout styles */
.workshop-page {
  padding: 28px 20px 60px;
}

.workshop-hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:28px;
}

.workshop-title {
  font-family: shouyi_title, auto;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 8px 0 4px;
  text-align:center; /* keep title centered */
}

/* Make workshop-content span the full container width so its left/right
   edges line up with the sections below. Text inside will be left-aligned. */
.workshop-content {
  font-family: shouyi_text, auto;
  width: 100%;
  max-width: none;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.8;
  text-align: left;
}

.workshop-video {
  width:100%;
  /* reduce to roughly half of previous max to make the video smaller */
  max-width:860px;
  margin: 22px auto;
}
.workshop-video video{
  display:block;
  width:100%;
  height:auto;
  /* enforce 1080:612 aspect ratio (≈56.6667% height) */
  aspect-ratio: 1080 / 612;
  max-width:100%;
  object-fit: cover;
  border-radius:10px;
  background:#000;
}

.section-block{margin-top:42px;margin-bottom:28px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-header h3{margin:0;font-size:22px}

/* OUR STRENGTHS layout */
.strengths{display:flex;flex-direction:column;gap:20px}
.strength-item{display:flex;gap:20px;align-items:flex-start}
.strength-item .text{flex:0 0 60%;}
.strength-item .image{flex:0 0 40%;}
.strength-item .image img{width:100%;height:220px;object-fit:cover;border-radius:8px}
.strength-item h4{margin:0 0 20px;font-size:18px}
.strength-item p{margin:0;color:#334155;line-height:1.9}
.strength-item.reverse{flex-direction:row-reverse}

/* Certificates section */
.certificates{
  /* background: rgb(217,217,217); */
  padding:20px;
  border-radius:8px
}
.cert-list{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:flex-start;gap:32px}
.cert-item{flex:0 1 20%;min-width:140px;text-align:center;box-sizing:border-box;margin:8px 0}
.cert-item img{width:100%;aspect-ratio:560/760;object-fit:cover;border-radius:6px;background:#fff;padding:8px}
.cert-item .caption{font-size:14px;margin-top:8px}

/* Workshop showroom */
.showroom{
  /* background: rgb(217,217,217); */
  padding:20px;border-radius:8px
}
.showroom .show-list{display:flex;gap:24px;align-items:stretch}
.show-list .show-item{flex:1;padding:8px;box-sizing:border-box}
.show-list .show-item img{width:100%;aspect-ratio:1764/990;object-fit:cover;border-radius:8px;display:block}

/* Responsive adjustments */
@media (max-width: 900px){
  .workshop-title{font-size:36px}
  .strength-item .image img{height:180px}
}
@media (max-width: 640px){
  .workshop-title{font-size:28px}
  .workshop-content{padding:0 12px}
  .strength-item{flex-direction:column}
  .strength-item .text,.strength-item .image{flex:1;width:100%}
  /* Ensure reversed strength items stack the same as others on small screens */
  .strength-item.reverse{flex-direction:column}
  .cert-item{flex:0 0 calc(50% - 16px);box-sizing:border-box;margin:8px 0}
  .show-list{flex-direction:column}
  .show-list .show-item{padding:6px}
  .show-list .show-item img{aspect-ratio:1764/990}
}