/* ========= Projects base layout ========= */
.projects-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.projects-title{
  font-family:"Playfair Display", serif;
  font-size:63px;
  font-weight:600;
  text-align:center;
  margin:24px 0 18px;
}

.projects-divider{
  height:3px;
  background:#f4a936;
  width:100%;
  margin:28px 0;
}

/* spacing between hero groups */
.group{ margin-bottom:26px; }

/* ========= Hero sliders (top 4 groups) ========= */
.slider-wrap{ position:relative; }

.overlay-title{
  position:absolute;
  left:18px; bottom:18px;
  color:#fff;
  font-family:Georgia, serif;
  font-weight:400;
  font-size:46px;
  line-height:1.1;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
  z-index:3;
}

.hero-swiper{ width:100%; }
.hero-swiper .swiper-wrapper{ height:auto; }
.hero-swiper .swiper-slide img{
  width:100%;
  height:auto;
  display:block;
}

/* nav arrows for hero slider */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next{
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}

/* ========= International grid (4 small sliders) ========= */
.intl-title{
  font-family:"Playfair Display", serif;
  font-size:60px;
  font-weight:600;
  text-align:center;
  margin:10px 0 20px;
}

.intl-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

.card{ display:flex; flex-direction:column; }
.card h3{
  text-align:center;
  font-family:Georgia,serif;
  font-weight:400;
  font-size:34px;
  margin:12px 0 2px;
}
.card .sub{
  text-align:center;
  font-family:Georgia,serif;
  font-size:25px;
  color:#666;
  margin-bottom:6px;
}

/* ===== iPhone-safe small slider layout (no aspect-ratio, fixed responsive height) ===== */
.card-swiper{
  position:relative;
  width:100%;
  height:clamp(200px, 56vw, 420px);  /* responsive height that works on iOS */
  background:#000;
  overflow:hidden;
}

.card-swiper .swiper-wrapper{ height:100%; }
.card-swiper .swiper-slide{ height:100%; }

.card-swiper .swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:translateZ(0); -webkit-transform:translateZ(0);
  will-change: transform;
}

/* keep overlay legible on mobile too */
.overlay-title{ font-size:clamp(22px, 5vw, 46px); }

/* stack grid on small screens */
@media (max-width: 900px){
  .intl-grid{ grid-template-columns:1fr; gap:18px; }
}