/* =========================================
   SCHOOL MEDIA SECTION
========================================= */

.sta-school-media-section{
  width:min(100% - 32px, 1280px);
  margin-inline:auto;
  padding:clamp(18px, 3vw, 30px) 0;
}

.sta-school-media-section__grid{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:clamp(28px, 4vw, 64px);
  align-items:center;
}

.sta-school-media-section__media,
.sta-school-media-section__content{
  min-width:0;
}

.sta-school-media-section--reverse .sta-school-media-section__media{
  order:2;
}

.sta-school-media-section--reverse .sta-school-media-section__content{
  order:1;
}

.sta-school-gallery-wrap{
  position:relative;
  width:100%;
}

.sta-school-gallery-wrap--portrait{
  width:min(100%, 420px);
  margin-inline:auto;
}

.sta-school-gallery{
  width:100%;
  overflow:hidden;
}

.sta-school-gallery .swiper-wrapper{
  align-items:stretch;
}

.sta-school-gallery .swiper-slide{
  height:auto;
  display:flex;
}

.sta-school-gallery__card{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sta-school-gallery__slide{
  position:relative;
  width:100%;
  display:block;
  padding:0;
  border:1px solid var(--sta-gold);
  border-radius:18px;
  background:#fff;
  box-shadow:0 4px 15px rgba(0,0,0,.10);
  overflow:hidden;
  cursor:zoom-in;
}

.sta-school-gallery__slide::before{
  content:"";
  display:block;
  width:100%;
  padding-top:56.25%;
}

.sta-school-gallery-wrap--portrait .sta-school-gallery__slide::before{
  padding-top:177.7778%;
}

.sta-school-gallery__slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.24);
  transform-origin:center center;
  transition:transform .5s ease;
}

.sta-school-gallery-wrap--portrait .sta-school-gallery__slide img{
  left:50%;
  width:auto;
  min-width:100%;
  max-width:none;
  height:100%;
  transform:translateX(-50%) scale(1.24);
}

.sta-school-gallery__slide:hover img,
.sta-school-gallery__slide:focus-visible img{
  transform:scale(1.28);
}

.sta-school-gallery-wrap--portrait .sta-school-gallery__slide:hover img,
.sta-school-gallery-wrap--portrait .sta-school-gallery__slide:focus-visible img{
  transform:translateX(-50%) scale(1.28);
}

.sta-school-media-section--donquijote .sta-school-gallery__slide img{
  object-position:center 24%;
  transform:scale(1.34);
}

.sta-school-media-section--donquijote .sta-school-gallery__slide:hover img,
.sta-school-media-section--donquijote .sta-school-gallery__slide:focus-visible img{
  transform:scale(1.38);
}

.sta-school-media-section--donquijote .sta-school-gallery-wrap--portrait .sta-school-gallery__slide img{
  object-position:center 24%;
  transform:translateX(-50%) scale(1.34);
}

.sta-school-media-section--donquijote .sta-school-gallery-wrap--portrait .sta-school-gallery__slide:hover img,
.sta-school-media-section--donquijote .sta-school-gallery-wrap--portrait .sta-school-gallery__slide:focus-visible img{
  transform:translateX(-50%) scale(1.38);
}

.sta-school-media-section--donquijote.sta-school-media-section--section-academic .sta-school-gallery__slide img{
  inset:-6px;
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  object-position:center 18%;
  transform:scale(1.4);
}

.sta-school-media-section--donquijote.sta-school-media-section--section-academic .sta-school-gallery__slide:hover img,
.sta-school-media-section--donquijote.sta-school-media-section--section-academic .sta-school-gallery__slide:focus-visible img{
  transform:scale(1.44);
}

.sta-school-media-section--donquijote.sta-school-media-section--section-academic .sta-school-gallery-wrap--portrait .sta-school-gallery__slide img{
  top:-6px;
  bottom:-6px;
  height:calc(100% + 12px);
  object-position:center 18%;
  transform:translateX(-50%) scale(1.4);
}

.sta-school-media-section--donquijote.sta-school-media-section--section-academic .sta-school-gallery-wrap--portrait .sta-school-gallery__slide:hover img,
.sta-school-media-section--donquijote.sta-school-media-section--section-academic .sta-school-gallery-wrap--portrait .sta-school-gallery__slide:focus-visible img{
  transform:translateX(-50%) scale(1.44);
}

.sta-school-gallery__pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:16px;
  margin-top:18px;
}

.sta-school-gallery__pagination .swiper-pagination-bullet{
  width:9px;
  height:9px;
  margin:0 !important;
  background:#c9c1b7;
  opacity:1;
}

.sta-school-gallery__pagination .swiper-pagination-bullet-active{
  background:#3d7031;
}

.sta-school-gallery-wrap.is-single .sta-school-gallery__pagination{
  display:none;
}

.sta-school-gallery-wrap--no-pagination .sta-school-gallery__pagination{
  display:none;
}

.sta-school-gallery-wrap--portrait .sta-school-gallery__slide{
  max-height:min(80vh, 840px);
}

.sta-school-media-section__content{
  text-align:center;
}

.sta-school-media-section__title{
  margin:0 0 22px;
  color:var(--sta-heading);
  font-family:var(--sta-font-serif);
  font-size:clamp(24px, 3vw, 36px);
  font-weight:500;
  line-height:1.16;
}

.sta-school-media-section__title.title-underline::after{
  width:62% !important;
  bottom:-8px !important;
}

.sta-school-media-section__text{
  width:min(100%, 72ch);
  margin-inline:auto;
  color:#333;
  font-family:var(--sta-font-body);
  font-size:clamp(16px, 1.2vw, 18px);
  line-height:1.8;
}

.sta-school-media-section__text p{
  margin:0 0 1.1em;
}

.sta-school-media-section__text p:last-child{
  margin-bottom:0;
}

.sta-school-media-section__checks{
  list-style:none;
  width:min(100%, 72ch);
  margin:20px auto 0;
  padding:0;
  display:grid;
  gap:16px;
  text-align:left;
}

.sta-school-media-section__checks li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  color:#333;
  font-family:var(--sta-font-body);
  font-size:clamp(16px, 1.2vw, 18px);
  line-height:1.8;
}

.sta-school-media-section__checks--clean li{
  gap:12px;
}

.sta-school-media-section__checks--clean img{
  width:22px;
  height:22px;
  flex-shrink:0;
  margin-top:5px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

.sta-school-media-section__checks img{
  width:22px;
  height:22px;
  flex-shrink:0;
  margin-top:5px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

.sta-school-media-section__tabs{
  width:min(100%, 72ch);
  margin:20px auto 0;
}

.sta-school-media-section__tablist{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:0 0 22px;
}

.sta-school-media-section__tab{
  appearance:none;
  border:1px solid rgba(0,0,0,.1);
  background:#fff;
  color:#333;
  cursor:pointer;
  padding:10px 14px;
  border-radius:999px;
  font-family:var(--sta-font-body);
  font-size:1rem;
  line-height:1;
  transition:all .2s ease;
}

.sta-school-media-section__tab:hover,
.sta-school-media-section__tab:focus-visible{
  background:#f2f2f2;
  color:#000;
  border-color:rgba(0,0,0,.2);
}

.sta-school-media-section__tab.is-active{
  background:#2a2a2a;
  color:#fff;
  border-color:#2a2a2a;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.sta-school-media-section__panel[hidden]{
  display:none !important;
}

.sta-school-media-section__text strong{
  color:var(--sta-heading);
  font-weight:700;
}

.sta-school-media-section__text em{
  font-style:normal;
  color:var(--sta-gold);
}

html[lang^="zh"] .sta-school-media-section__title{
  font-family:var(--sta-font-cjk-serif);
  font-weight:600;
  line-height:1.24;
}

html[lang^="zh"] .sta-school-media-section__text{
  font-family:var(--sta-font-cjk-sans);
  line-height:1.86;
}

html[lang^="zh"] .sta-school-media-section__checks li{
  font-family:var(--sta-font-cjk-sans);
  line-height:1.86;
}

@media (max-width:1024px){
  .sta-school-media-section{
    width:min(100% - 28px, 1280px);
  }

  .sta-school-media-section__grid{
    gap:28px;
  }
}

@media (max-width:767px){
  .sta-school-media-section{
    width:min(100% - 20px, 1280px);
    padding:10px 0 20px;
  }

  .sta-school-media-section__grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .sta-school-gallery__slide{
    border-radius:16px;
  }

  .sta-school-gallery-wrap--portrait{
    width:min(100%, 360px);
  }

  .sta-school-media-section__title{
    margin-bottom:18px;
    font-size:clamp(22px, 7vw, 32px);
  }

  .sta-school-media-section__text{
    font-size:16px;
    line-height:1.8;
  }
}