/* =============================================================================
   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.
   ============================================================================= */

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

/* ---------- site tokens (canonical) ---------- */

: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;
  /* primary: active border on thumb img (not button) */
  --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;
  /* secondary: active border on thumb button */
  --gallery-thumb-active-target: button;

  /* bridge legacy --life-gallery-* used in secondary-s-pages.css */
  --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"]
) {
  /* main defaults; page isolation may override --gallery-* / legacy --ms-g-* */
  --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-active-target: button;
}

/* ---------- 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);
  }
}

/* ---------- 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);
}


/* 2K gallery tokens */
@media (min-width: 1921px) {
  :is(body[data-site="main"], body[data-site="primary"], body[data-site="secondary"], :root) {
    --gallery-gap: 1.927vw;
    --gallery-main-h: 32.7604vw;
    --gallery-main-w: 46.458vw;
    --gallery-shell-h: 36.77vw;
    --gallery-shell-pad: 2.083vw;
    --gallery-shell-pad-x: 1.979vw;
    --gallery-shell-pad-y: 2.005vw;
    --gallery-shell-w: 67.135vw;
    --gallery-thumb-gap: 0.625vw;
    --gallery-thumb-h: 9.219vw;
    --gallery-thumb-w: 14.792vw;
  }
}