/* =========================================
   SCHOOL GALLERY GRID
========================================= */

.sta-school-gallery-grid-block{
  width:100%;
  max-width:100%;
  clear:both;
  overflow-x:hidden;
}

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

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

.sta-school-gallery-grid-block__filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 16px;
}

.sta-school-gallery-grid-block__filter{
  min-height:42px;
  padding:8px 14px;
  border:1px solid var(--sta-gold);
  border-radius:10px;
  background:#fff;
  color:#000;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.sta-school-gallery-grid-block__filter.is-active,
.sta-school-gallery-grid-block__filter:hover,
.sta-school-gallery-grid-block__filter:focus-visible{
  background:var(--sta-gold);
  color:#000;
}

.sta-school-gallery-grid-block__filter:focus-visible{
  outline:none;
  transform:translateY(-1px);
}

.sta-school-gallery-grid-block__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.sta-school-gallery-grid-block__card{
  position:relative;
  width:100%;
  padding:0;
  border:1px solid var(--sta-gold);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  cursor:zoom-in;
  aspect-ratio:16 / 9;
}

.sta-school-gallery-grid-block__card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(var(--sta-gallery-image-scale, 1.18));
  transform-origin:center center;
  transition:transform .45s ease;
}

.sta-school-gallery-grid-block__card:hover img,
.sta-school-gallery-grid-block__card:focus-visible img{
  transform:scale(var(--sta-gallery-image-hover-scale, 1.22));
}

.sta-school-gallery-grid-block--donquijote .sta-school-gallery-grid-block__card img{
  object-position:center 24%;
  transform:scale(1.27);
}

.sta-school-gallery-grid-block--donquijote .sta-school-gallery-grid-block__card:hover img,
.sta-school-gallery-grid-block--donquijote .sta-school-gallery-grid-block__card:focus-visible img{
  transform:scale(1.31);
}

.sta-school-gallery-grid-block__card:focus-visible{
  outline:3px solid rgba(195, 168, 144, .35);
  outline-offset:2px;
}

.sta-school-gallery-grid-block__more{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.sta-school-gallery-grid-block__more[hidden],
.sta-school-gallery-grid-block__button[hidden]{
  display:none !important;
}

.sta-school-gallery-grid-block__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 18px;
  border:1px solid var(--sta-gold);
  border-radius:10px;
  background:var(--sta-gold);
  color:#000;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:filter .22s ease, transform .22s ease;
}

.sta-school-gallery-grid-block__button:hover,
.sta-school-gallery-grid-block__button:focus-visible{
  filter:brightness(.95);
  transform:translateY(-1px);
}

@media (max-width:900px){
  .sta-school-gallery-grid-block__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:560px){
  .sta-school-gallery-grid-block__grid{
    grid-template-columns:1fr;
  }
}