/* =============================================================================
   Gallery skins — structure one, skins three (via body[data-site])
   Load AFTER app.css / secondary-s-pages.css.
   PHP / CMS only emit standard gallery DOM; do NOT emit skin colors or site class.
   移动端（≤1023）一律交给 app.css / secondary-s-pages isolation，本文件不加覆盖。
   ============================================================================= */

/* Shell alias: legacy secondary used content-gallery-block */
.content-gallery-shell,
.content-gallery-block {
  box-sizing: border-box;
}

/* Title belongs outside the painted gallery box.
   New DOM: h2 + .content-gallery-shell
   Legacy CMS: h2 still nested in the shell (or worse, in the gallery grid). */
.content-title:empty {
  display: none;
}

.content-gallery-shell:has(> .content-title:not(:empty)):has(> .content-gallery),
.content-gallery-block:has(> .content-title:not(:empty)):has(> .content-gallery) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  padding: 0;
  min-height: 0;
  border-radius: 0;
}

.content-gallery-shell > .content-title,
.content-gallery-block > .content-title {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
}

.content-gallery[data-gallery] > .content-title {
  grid-column: 1 / -1;
  width: 100%;
}

/* ---------- site tokens（移动端 isolation 仍读这些；桌面尺寸在 ≥1024 的壳上覆盖） ---------- */

:is(
  body[data-site="primary"],
  body[data-page^="primary-"]
) {
  --gallery-bg: #f0f8ff;
  --gallery-shell-max-w: 1289px;
  --gallery-shell-min-h: 715px;
  --gallery-shell-pad: clamp(24px, 2.083vw, 40px);
  --gallery-shell-radius: 10px;
  --gallery-main-w: 892px;
  --gallery-main-aspect: 892 / 605;
  --gallery-thumb-col-w: 284px;
  --gallery-thumb-aspect: 284 / 177;
  --gallery-gap: clamp(18px, 1.563vw, 30px);
  --gallery-thumb-gap: clamp(16px, 1.25vw, 24px);
  --gallery-img-radius: 10px;
  --gallery-thumb-radius: 4px;
  --gallery-thumb-border-w: 5px;
  --gallery-thumb-border: #02b5dd;
  --gallery-thumb-fill: #cfe2f5;
  --gallery-thumb-active-target: img;
}

:is(
  body[data-site="secondary"],
  body[data-page="s-curriculum"],
  body[data-page="s-life-planning"],
  body[data-page="s-sd-highlights"]
) {
  --gallery-bg: rgba(236, 233, 251, 0.3);
  --gallery-shell-w: clamp(320px, 67.135vw, 1289px);
  --gallery-shell-h: clamp(360px, 36.77vw, 706px);
  --gallery-shell-pad-x: clamp(16px, 1.979vw, 38px);
  --gallery-shell-pad-y: clamp(18px, 2.005vw, 38.5px);
  --gallery-shell-radius: 10px;
  --gallery-gap: clamp(12px, 1.927vw, 37px);
  --gallery-main-w: clamp(240px, 46.458vw, 892px);
  --gallery-main-h: clamp(170px, 32.7604vw, 629px);
  --gallery-thumb-w: clamp(100px, 14.792vw, 284px);
  --gallery-thumb-h: clamp(62px, 9.219vw, 177px);
  --gallery-thumb-gap: clamp(8px, 0.625vw, 12px);
  --gallery-img-radius: 10px;
  --gallery-thumb-radius: 4px;
  --gallery-thumb-border-w: 5px;
  --gallery-thumb-border: #413e93;
  --gallery-thumb-fill: #ece9fb;
  --gallery-thumb-active-target: button;

  --life-gallery-w: var(--gallery-shell-w);
  --life-gallery-h: var(--gallery-shell-h);
  --life-gallery-pad-x: var(--gallery-shell-pad-x);
  --life-gallery-pad-y: var(--gallery-shell-pad-y);
  --life-gallery-gap: var(--gallery-gap);
  --life-gallery-main-w: var(--gallery-main-w);
  --life-gallery-main-h: var(--gallery-main-h);
  --life-gallery-thumb-w: var(--gallery-thumb-w);
  --life-gallery-thumb-h: var(--gallery-thumb-h);
  --life-gallery-thumb-gap: var(--gallery-thumb-gap);
  --life-gallery-thumb-border: var(--gallery-thumb-border);
}

:is(
  body[data-site="main"],
  body[data-page^="about-"],
  body[data-page^="admissions-"],
  body[data-page^="excellence-"],
  body[data-page^="community-"],
  body[data-page^="latest-news"],
  body[data-page="sd-highlights"],
  body[data-page="contact-us"],
  body[data-page="home"],
  body[data-page="publications"],
  body[data-page^="achievements"]
) {
  --gallery-bg: rgba(224, 237, 249, 0.6);
  --gallery-shell-radius: 10px;
  --gallery-img-radius: 10px;
  --gallery-thumb-radius: 4px;
  --gallery-thumb-border-w: 5px;
  --gallery-thumb-border: #02b5dd;
  --gallery-thumb-fill: #cfe2f5;
  --gallery-thumb-active-target: img;
  --gallery-arrow-color: #1e3e8a;
}

/* ---------- primary: shell consumes tokens（与原文件一致，不改移动端） ---------- */

:is(body[data-site="primary"], body[data-page^="primary-"]) .content-gallery-shell,
:is(body[data-site="primary"], body[data-page^="primary-"]) .content-gallery-block {
  background: var(--gallery-bg);
  border-radius: var(--gallery-shell-radius);
}

@media (min-width: 1024px) {
  :is(body[data-site="primary"], body[data-page^="primary-"]) .content-gallery-shell,
  :is(body[data-site="primary"], body[data-page^="primary-"]) .content-gallery-block {
    width: min(100%, var(--gallery-shell-max-w));
    min-height: var(--gallery-shell-min-h);
    padding: var(--gallery-shell-pad);
  }
}

/* 小学课页 / CMS rich-doc 相册描述：18px，不要走 Campus 的 20–28px */
:is(body[data-site="primary"], body[data-page^="primary-"]) .content-gallery__caption,
.rich-doc .content-gallery__caption {
  color: #131313;
  font-family: var(--font-sans, "DM Sans", "PingFang HK", "Microsoft YaHei", sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 767px) {
  :is(body[data-site="primary"], body[data-page^="primary-"]) .content-gallery__caption,
  .rich-doc .content-gallery__caption {
    font-size: 16px;
    line-height: 22px;
  }
}

/* ---------- secondary: gallery root still holds pad/bg (legacy layout) ---------- */

:is(
  body[data-site="secondary"],
  body[data-page="s-curriculum"],
  body[data-page="s-life-planning"],
  body[data-page="s-sd-highlights"]
) .content-gallery {
  background: var(--gallery-bg);
  border-radius: var(--gallery-shell-radius);
}

/* ---------- desktop only：统一栏位 + 对齐（≤1023 不进这里） ----------
   大图高度 = 上箭头 + 间距 + 3 张缩略图 + 2 段间距（下箭头不计入）。
   上沿对齐切换 icon，下沿对齐第三个缩略图槽底。 */

@media (min-width: 1024px) {
  .content-gallery-shell,
  .content-gallery-block {
    --gallery-arrow-h: 32px;
    --gallery-thumb-w: clamp(160px, 14.792vw, 284px);
    --gallery-thumb-h: calc(var(--gallery-thumb-w) * 177 / 284);
    --gallery-thumb-col-w: var(--gallery-thumb-w);
    --gallery-thumb-aspect: 284 / 177;
    --gallery-thumb-gap: clamp(8px, 0.73vw, 14px);
    --gallery-main-w: clamp(280px, 46.458vw, 892px);
    --gallery-main-h: calc(
      var(--gallery-arrow-h)
      + var(--gallery-thumb-gap)
      + var(--gallery-thumb-h) * 3
      + var(--gallery-thumb-gap) * 2
    );
    --gallery-main-aspect: 892 / 605;
    --gallery-gap: clamp(16px, 1.25vw, 24px);
    --gallery-shell-max-w: 1289px;
    --gallery-shell-w: min(100%, var(--gallery-shell-max-w));
    --gallery-shell-min-h: 0;
    --gallery-shell-pad: clamp(16px, 1.25vw, 24px);
    --gallery-shell-pad-x: var(--gallery-shell-pad);
    --gallery-shell-pad-y: var(--gallery-shell-pad);
    --gallery-img-hug: 0;
    --life-gallery-h: auto;
    --life-gallery-pad-x: var(--gallery-shell-pad-x);
    --life-gallery-pad-y: var(--gallery-shell-pad-y);
    --life-gallery-gap: var(--gallery-gap);
    --life-gallery-main-w: var(--gallery-main-w);
    --life-gallery-main-h: var(--gallery-main-h);
    --life-gallery-thumb-w: var(--gallery-thumb-w);
    --life-gallery-thumb-h: var(--gallery-thumb-h);
    --life-gallery-thumb-gap: var(--gallery-thumb-gap);
  }

  /* 主站图集：静态页常不包 shell，CMS 必包 .content-gallery-shell。尺寸都走 1788 / 1238 / 394，不要因为多一层壳掉回中小学 1289。 */
  body[data-site="main"] :not(.content-gallery-shell):not(.content-gallery-block) > .content-gallery[data-gallery],
  body[data-site="main"] .content-gallery-shell,
  body[data-site="main"] .content-gallery-block {
    --gallery-arrow-h: 32px;
    --gallery-thumb-w: clamp(120px, 20.521vw, 394px);
    --gallery-thumb-h: calc(var(--gallery-thumb-w) * 246 / 394);
    --gallery-thumb-col-w: var(--gallery-thumb-w);
    --gallery-thumb-aspect: 394 / 246;
    --gallery-thumb-gap: clamp(8px, 0.625vw, 12px);
    --gallery-main-w: clamp(240px, 64.479vw, 1238px);
    --gallery-main-h: calc(
      var(--gallery-arrow-h)
      + var(--gallery-thumb-gap)
      + var(--gallery-thumb-h) * 3
      + var(--gallery-thumb-gap) * 2
    );
    --gallery-main-aspect: 1238 / 873;
    --gallery-gap: clamp(12px, 1.927vw, 37px);
    --gallery-shell-max-w: clamp(320px, 93.125vw, 1788px);
    --gallery-shell-w: min(100%, var(--gallery-shell-max-w));
    --gallery-shell-min-h: 0;
    --gallery-shell-pad: clamp(16px, 3.125vw, 60px);
    --gallery-shell-pad-x: clamp(16px, 3.125vw, 60px);
    --gallery-shell-pad-y: clamp(12px, 2.76vw, 53px);
    --gallery-img-hug: 0;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-shell,
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-block {
    background: var(--gallery-bg);
    border-radius: var(--gallery-shell-radius);
    width: min(100%, var(--gallery-shell-max-w));
    min-height: var(--gallery-shell-min-h);
    padding: var(--gallery-shell-pad);
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-shell:has(> .content-title:not(:empty)):has(> .content-gallery),
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-block:has(> .content-title:not(:empty)):has(> .content-gallery) {
    background: transparent;
    padding: 0;
    min-height: 0;
    border-radius: 0;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-shell:has(> .content-title:not(:empty)):has(> .content-gallery) > .content-gallery[data-gallery],
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-block:has(> .content-title:not(:empty)):has(> .content-gallery) > .content-gallery[data-gallery] {
    background: var(--gallery-bg);
    border-radius: var(--gallery-shell-radius);
    padding: var(--gallery-shell-pad);
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-shell:has(> .content-title:not(:empty)):has(> .content-gallery):has(.content-gallery__caption:not(:empty)) > .content-gallery[data-gallery],
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-block:has(> .content-title:not(:empty)):has(> .content-gallery):has(.content-gallery__caption:not(:empty)) > .content-gallery[data-gallery] {
    padding-bottom: calc(var(--gallery-shell-pad) + 2.75em);
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-shell:not(:has(> .content-title:not(:empty))) .content-gallery[data-gallery],
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-block:not(:has(> .content-title:not(:empty))) .content-gallery[data-gallery] {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
    background: transparent;
    border-radius: 0;
  }

  body[data-site="main"] .content-gallery[data-gallery] {
    box-sizing: border-box;
    background: var(--gallery-bg);
    border-radius: var(--gallery-shell-radius);
    width: min(100%, var(--gallery-shell-max-w));
    max-width: none;
    min-height: 0;
    height: auto;
    padding: var(--gallery-shell-pad-y, var(--gallery-shell-pad)) var(--gallery-shell-pad-x, var(--gallery-shell-pad));
  }

  body[data-site="main"] .content-gallery[data-gallery]:has(.content-gallery__caption:not(:empty)) {
    padding-bottom: calc(var(--gallery-shell-pad-y, var(--gallery-shell-pad)) + 2.75em);
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gallery-thumb-w);
    /* grid-template-rows:
      var(--gallery-arrow-h)
      calc(var(--gallery-thumb-h) * 3 + var(--gallery-thumb-gap) * 2)
      var(--gallery-arrow-h); */
    column-gap: var(--gallery-gap);
    row-gap: var(--gallery-thumb-gap);
    align-items: stretch;
    justify-content: stretch;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__controls {
    display: contents;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 0;
    gap: 0;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__arrow--prev {
    grid-column: 2;
    grid-row: 1;
    width: var(--gallery-arrow-h);
    height: var(--gallery-arrow-h);
    margin: 0;
    justify-self: center;
    align-self: center;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__thumbs {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    /* grid-template-rows: repeat(3, var(--gallery-thumb-h)); */
    align-content: start;
    align-self: start;
    gap: var(--gallery-thumb-gap);
    width: var(--gallery-thumb-w);
    /* min-height: calc(var(--gallery-thumb-h) * 3 + var(--gallery-thumb-gap) * 2); */
    min-width: 0;
    padding: 0;
    overflow: visible;
    flex: none;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__arrow--next {
    grid-column: 2;
    grid-row: 3;
    width: var(--gallery-arrow-h);
    height: var(--gallery-arrow-h);
    margin: 0;
    margin-top: 0;
    justify-self: center;
    align-self: center;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__main,
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__main:has(.content-gallery__caption) {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    /* height: 100%; */
    min-height: 0;
    max-height: none;
    margin: 0;
    aspect-ratio: auto;
    overflow: visible;
    justify-self: stretch;
    align-self: stretch;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__main > img,
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__main:has(.content-gallery__caption) > img {
    display: block;
    flex: 1 1 auto;
    align-self: stretch;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    /* 主图高度限制在「主图槽位高度」内：竖图（高 > 宽）过去会把栅格行撑高，
       figure 高度反过来被图片决定，导致主图区无限变高。
       槽位高度 = 箭头 + 间距 + 3 张缩略图 + 2 段间距（见上方 --gallery-main-h 定义）。 */
    max-height: var(--gallery-main-h, 605px) !important;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: contain !important;
    object-position: center;
    border-radius: var(--gallery-img-radius);
    background: transparent;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__caption:empty {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__caption:not(:empty) {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 8px 0 0;
    flex: none;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery-shell:not(:has(> .content-title:not(:empty))):has(.content-gallery__caption:not(:empty)),
  body[data-site="main"] .content-gallery-shell:not(:has(> .content-title:not(:empty))):has(.content-gallery__caption:not(:empty)) {
    padding-bottom: calc(var(--gallery-shell-pad) + 2.75em);
  }

  .content-gallery-shell .content-gallery[data-gallery] .content-gallery__thumb,
  .content-gallery-block .content-gallery[data-gallery] .content-gallery__thumb,
  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    max-width: var(--gallery-thumb-w);
    /* height: var(--gallery-thumb-h); */
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    background: transparent;
    flex: none;
  }

  .content-gallery-shell .content-gallery[data-gallery] .content-gallery__thumb img,
  .content-gallery-block .content-gallery[data-gallery] .content-gallery__thumb img,
  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--gallery-thumb-aspect, 284 / 177);
    object-fit: contain;
    object-position: center;
    background: var(--gallery-thumb-fill, var(--gallery-thumb-bg, #cfe2f5));
    box-sizing: border-box;
  }

  :is(body[data-site="primary"], body[data-page^="primary-"]) .content-gallery[data-gallery] .content-gallery__thumb img {
    border: var(--gallery-thumb-border-w) solid transparent;
    border-radius: var(--gallery-thumb-radius);
  }

  :is(body[data-site="primary"], body[data-page^="primary-"]) .content-gallery[data-gallery] .content-gallery__thumb.is-active img {
    border-color: var(--gallery-thumb-border);
  }

  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__arrow {
    color: var(--gallery-arrow-color, #1e3e8a);
  }

  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__thumb img {
    border: var(--gallery-thumb-border-w) solid transparent;
    border-radius: var(--gallery-thumb-radius);
  }

  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__thumb.is-active img {
    border-color: var(--gallery-thumb-border);
  }

  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] .content-gallery__thumb {
    border: var(--gallery-thumb-border-w) solid transparent;
    border-radius: var(--gallery-thumb-radius);
    background: var(--gallery-thumb-fill);
  }

  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] .content-gallery__thumb.is-active {
    border-color: var(--gallery-thumb-border);
    background: transparent;
  }
}

/* 2K 断点刻意不放大图集。
   外壳 --gallery-shell-max-w 是固定 1289px（px），若这里把 thumb / 间距改成 vw，
   浏览器缩放或超宽屏下会出现「外壳按 px 缩放、缩略图列按 vw 不缩放」的失衡，
   表现为左边大图在缩放、右边缩略图列纹丝不动。
   图集整体保持 px（≥1024 那套 clamp 的上限 284/24/32），跟随浏览器缩放等比变化。 */

/* ---------- mobile ≤1023：figure 跟 img+caption 撑开，禁止横图 aspect-ratio 把竖图/文案溢到缩略图上 ----------
   isolation 给 .content-gallery__main 写了 892/605，空 figcaption 也命中 :has(caption)，
   栏位高度锁死、图片 height:auto 溢出，盖住描述和下文。三站同一套。 */
@media (max-width: 1023px) {
  /* 中学各内页（secondary-s-pages.css）给 .content-gallery 定了固定高度 --life-gallery-h
     （clamp(360px, 36.77vw, 706px)，对应旧的「主图+缩略图并排」布局）。
     但 ≤1023 图集已改为「主图 + 控制条」上下堆叠，内容远高于该固定值，
     内容会溢出容器、压到下方文字上（如 s-curriculum 页 footer 的链接文字）。
     这里把高度交还给内容，与小学/主站口径一致。 */
  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] {
    height: auto;
    min-height: 0;
  }

  /* 中学各内页的旧图集皮肤（secondary-s-pages.css 的 .content-gallery__controls /
     __thumbs / __thumb）把它写成了竖排（flex-direction: column），优先级高于 app.css
     ≤1023 的横排规则，导致缩略图竖着堆在右侧、与小学/主站不一致。
     这里在 ≤1023 恢复成横排：控制条一行（左右箭头 + 中间横排缩略图），箭头图标转成左右。 */
  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] .content-gallery__controls {
    flex: none;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] .content-gallery__thumbs {
    flex: 1 1 auto;
    flex-direction: row;
    width: auto;
    min-width: 0;
    height: auto;
    overflow-x: auto;
  }

  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] .content-gallery__thumb {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    height: auto;
  }

  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] .content-gallery__thumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: 284 / 177;
    object-fit: cover;
    object-position: center;
  }

  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] .content-gallery__arrow--prev .bi,
  :is(
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"]
  ) .content-gallery[data-gallery] .content-gallery__arrow--next .bi {
    transform: rotate(-90deg);
  }

  /* 标题真正写在壳里时，壳被做成透明；移动端也要把底色画在图集上，不要只在 ≥1024 补偿。 */
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-shell:has(> .content-title:not(:empty)):has(> .content-gallery) > .content-gallery[data-gallery],
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery-block:has(> .content-title:not(:empty)):has(> .content-gallery) > .content-gallery[data-gallery] {
    background: var(--gallery-bg);
    border-radius: var(--gallery-shell-radius);
    padding: 20px;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__main,
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__main:has(.content-gallery__caption) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
    container-type: inline-size;
    container-name: gallery-main;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__main > img,
  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__main:has(.content-gallery__caption) > img {
    flex: none;
    align-self: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* 横图铺满栏宽；竖图高度不超过 892/605 正常栏高，contain 不裁切 */
    max-height: min(42vh, calc(100vw * 605 / 892));
    max-height: calc(100cqi * 605 / 892);
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }

  /* 主站移动端：主图槽位统一 892/605，不再按原图 hug 成一条窄带 */
  body[data-site="main"] .content-gallery[data-gallery] {
    --gallery-img-hug: 0;
  }

  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__main > img,
  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__main:has(.content-gallery__caption) > img {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 892 / 605;
    object-fit: contain;
    object-position: center;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__caption:empty {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__caption:not(:empty) {
    position: static;
    inset: auto;
    flex: none;
    width: 100%;
    margin-top: clamp(8px, 2vw, 12px);
    z-index: 1;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__controls {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    justify-content: center;
  }

  :is(
    body[data-site="primary"],
    body[data-page^="primary-"],
    body[data-site="secondary"],
    body[data-page="s-curriculum"],
    body[data-page="s-life-planning"],
    body[data-page="s-sd-highlights"],
    body[data-site="main"]
  ) .content-gallery[data-gallery] .content-gallery__thumbs {
    justify-content: center;
    min-width: 0;
  }

  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__thumb {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    height: auto;
  }

  body[data-site="main"] .content-gallery[data-gallery] .content-gallery__thumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: var(--gallery-thumb-aspect, 394 / 246);
    object-fit: cover;
    object-position: center;
  }
}