/* Shared gallery styles for the Summer Camp page and robot activity. */
.gallery-preview-page .gallery-section {
  padding: 76px 0 100px;
  background: #f6f8ff;
}
.gallery-preview-page .gallery-intro { margin-bottom: 34px; }
.gallery-preview-page .gallery-intro h2 { margin-bottom: 14px; }
.gallery-preview-page .project-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.gallery-preview-page .project-tile {
  position: relative;
  --art-bg: #d8e5ff;
  --art-ink: #002fa0;
  --accent: #002fa0;
  overflow: hidden;
  background: white;
  border: 1px solid #d8e1f2;
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(11,35,92,.07);
}
.gallery-preview-page .project-tile:hover,
.gallery-preview-page .project-tile:focus-within { box-shadow: 0 14px 34px rgba(11,35,92,.17); transform: translateY(-3px); }
.gallery-preview-page .project-tile:focus-within { outline: 3px solid #002fa0; outline-offset: 3px; }
.gallery-preview-page .project-tile-link { display: block; padding: 0 20px 18px; color: var(--accent); font-size: .84rem; font-weight: 950; }
.gallery-preview-page .project-tile-link::before { content: ""; position: absolute; inset: 0; }
.gallery-preview-page .project-art {
  position: relative;
  height: 205px;
  overflow: hidden;
  background: var(--art-bg);
  color: var(--art-ink);
  isolation: isolate;
}
.gallery-preview-page .project-art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(90deg, currentColor 1px, transparent 1px), linear-gradient(currentColor 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(150deg, black, transparent 80%);
}
.gallery-preview-page .art-label,
.gallery-preview-page .art-note {
  position: absolute;
  z-index: 2;
  left: 17px;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gallery-preview-page .art-label { top: 14px; }
.gallery-preview-page .art-note { bottom: 13px; letter-spacing: .06em; }
.gallery-preview-page .project-copy {
  display: flex;
  flex-direction: column;
  min-height: 252px;
  padding: 21px 20px 18px;
}
.gallery-preview-page .project-kicker {
  display: block;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
}
.gallery-preview-page .project-copy h3 {
  margin: 9px 0 9px;
  color: #10265c;
  font-size: 1.26rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.gallery-preview-page .project-copy p {
  margin-bottom: 18px;
  color: #43506b;
  font-size: .93rem;
  line-height: 1.48;
}
.gallery-preview-page .project-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid #e4e9f4;
  color: #253760;
  font-size: .77rem;
  font-weight: 900;
}
.gallery-preview-page .project-roblox { --art-bg: #ffdfbb; --art-ink: #a34300; --accent: #b34a00; }
.gallery-preview-page .project-minecraft { --art-bg: #d5efda; --art-ink: #166132; --accent: #167a39; }
.gallery-preview-page .project-robotics { --art-bg: #dcebf9; --art-ink: #0e5186; --accent: #0a6fae; }
.gallery-preview-page .project-gdevelop { --art-bg: #e9dafa; --art-ink: #6835a6; --accent: #7134ad; }
.gallery-preview-page .project-seedlers { --art-bg: #fff0b7; --art-ink: #9b5c00; --accent: #9b5c00; }
.gallery-preview-page .project-ai { --art-bg: #d2f4f0; --art-ink: #086969; --accent: #087d79; }
.gallery-preview-page .project-math { --art-bg: #ffdde0; --art-ink: #9a2432; --accent: #bb2a3d; }

/* Each artwork is a small CSS-built project scene, so this preview needs no new image files. */
.gallery-preview-page .design-grid {
  position: absolute; inset: 42px 38px 31px;
  border: 2px solid #86a7e6; border-radius: 8px;
  background: rgba(255,255,255,.56);
  background-image: linear-gradient(90deg, #aec4ed 1px, transparent 1px), linear-gradient(#aec4ed 1px, transparent 1px);
  background-size: 18px 18px;
}
.gallery-preview-page .design-object {
  position: absolute; width: 92px; height: 82px; left: 50%; top: 50%;
  transform: translate(-50%,-47%) rotate(-12deg);
  background: #ff7d4d; clip-path: polygon(50% 0, 96% 24%, 96% 74%, 50% 100%, 4% 74%, 4% 24%);
  filter: drop-shadow(7px 9px 0 #0f4db1);
}
.gallery-preview-page .design-object i:first-child { position:absolute; inset: 2px 50% 2px 2px; background:#ffb267; clip-path:polygon(100% 0,100% 100%,0 74%,0 24%); }
.gallery-preview-page .design-object i:nth-child(2) { position:absolute; inset: 2px 2px 2px 50%; background:#f05044; clip-path:polygon(0 0,100% 24%,100% 74%,0 100%); }
.gallery-preview-page .design-object i:last-child { position:absolute; left:4%; right:4%; top:0; height:26%; background:#ffcc80; clip-path:polygon(50% 0,100% 88%,50% 100%,0 88%); }
.gallery-preview-page .game-scene { position:absolute; inset:36px 25px 28px; border-radius:10px; background:linear-gradient(#83c5ee 0 65%,#6baf72 65%); overflow:hidden; border:4px solid #184b85; }
.gallery-preview-page .game-sun { position:absolute; width:32px;height:32px;border-radius:50%;background:#ffdf6c;right:22px;top:13px; }
.gallery-preview-page .game-platform { position:absolute;height:18px;background:#754d42;border-top:7px solid #54a866;border-radius:3px; }
.gallery-preview-page .game-platform.one { width:83px;left:22px;bottom:26px; }
.gallery-preview-page .game-platform.two { width:63px;right:24px;bottom:63px; }
.gallery-preview-page .game-player { position:absolute;width:25px;height:37px;background:#ef4e4d;left:53px;bottom:44px;border-radius:5px 5px 2px 2px;box-shadow:inset 0 7px #ffe2aa; }
.gallery-preview-page .game-coin { position:absolute;right:48px;bottom:86px;color:#ffbd2f;font-size:30px;line-height:1; }
.gallery-preview-page .block-scene { position:absolute;inset:44px 28px 32px; }
.gallery-preview-page .block { position:absolute;width:54px;height:54px;background:#8b6346;border:4px solid #4a8d53;border-radius:3px;box-shadow:inset 0 8px #65b46b,5px 5px 0 rgba(21,84,38,.3); }
.gallery-preview-page .block.b1 {left:14%;bottom:0}.gallery-preview-page .block.b2 {left:34%;bottom:0}.gallery-preview-page .block.b3 {left:54%;bottom:0}.gallery-preview-page .block.b4 {left:34%;bottom:50px}.gallery-preview-page .block.b5 {left:54%;bottom:50px}.gallery-preview-page .block.b6 {left:54%;bottom:100px}
.gallery-preview-page .block-power {position:absolute;left:20%;top:12px;font-size:42px;color:#e85d42;text-shadow:3px 3px white}
.gallery-preview-page .robot-scene {position:absolute;left:50%;bottom:29px;width:134px;height:131px;transform:translateX(-50%)}
.gallery-preview-page .robot-antenna {position:absolute;left:64px;top:0;width:5px;height:20px;background:#174f8c}.gallery-preview-page .robot-antenna::before {content:"";position:absolute;top:-8px;left:-5px;width:15px;height:15px;border-radius:50%;background:#ff5b4a}
.gallery-preview-page .robot-head {position:absolute;top:20px;left:19px;width:96px;height:58px;border:6px solid #174f8c;border-radius:22px;background:white}
.gallery-preview-page .robot-head i {position:absolute;top:18px;width:11px;height:11px;border-radius:50%;background:#174f8c}.gallery-preview-page .robot-head i:first-child{left:19px}.gallery-preview-page .robot-head i:nth-child(2){right:19px}.gallery-preview-page .robot-head b{position:absolute;left:43px;top:25px;width:10px;height:6px;border-bottom:3px solid #174f8c;border-radius:50%}
.gallery-preview-page .robot-body {position:absolute;left:28px;top:84px;width:78px;height:38px;background:#2777c8;border:5px solid #174f8c;border-radius:12px}.gallery-preview-page .robot-body i{position:absolute;width:12px;height:12px;background:#ffcf3b;border-radius:50%;left:28px;top:8px}
.gallery-preview-page .robot-wheel{position:absolute;bottom:0;width:25px;height:25px;background:#174f8c;border:6px solid #80b3e5;border-radius:50%}.gallery-preview-page .robot-wheel.left{left:19px}.gallery-preview-page .robot-wheel.right{right:19px}
.gallery-preview-page .maker-window {position:absolute;inset:41px 29px 30px;background:#fff;border:5px solid #58358b;border-radius:10px;overflow:hidden}
.gallery-preview-page .maker-bar {display:block;height:22px;padding-left:10px;background:#603e99;color:#ffc658;font-size:15px;letter-spacing:4px;line-height:19px}
.gallery-preview-page .maker-character{position:absolute;left:23%;bottom:28px;font-size:70px;color:#f57077;line-height:1}.gallery-preview-page .maker-ground{position:absolute;left:10%;right:10%;bottom:23px;height:7px;background:#8c58bd;border-radius:7px}.gallery-preview-page .maker-play{position:absolute;right:22px;top:40px;color:#4f2188;font-size:34px}
.gallery-preview-page .seed-scene{position:absolute;inset:43px 22px 28px}.gallery-preview-page .seed-flower{position:absolute;top:5px;left:18%;font-size:66px;line-height:1;color:#f26b67}.gallery-preview-page .seed-block{position:absolute;width:49px;height:49px;bottom:9px;border-radius:7px;box-shadow:5px 6px rgba(102,69,15,.18)}.gallery-preview-page .seed-block.one{left:25%;background:#32b6ad;transform:rotate(-9deg)}.gallery-preview-page .seed-block.two{left:45%;bottom:27px;background:#ff8646;transform:rotate(9deg)}.gallery-preview-page .seed-block.three{left:65%;background:#4e76d2;transform:rotate(-5deg)}.gallery-preview-page .seed-spark{position:absolute;right:16%;top:4px;color:#e5a000;font-size:42px}
.gallery-preview-page .ai-scene{position:absolute;inset:44px 26px 27px;background:linear-gradient(90deg,transparent 49%,#48afa9 49% 51%,transparent 51%),linear-gradient(transparent 49%,#48afa9 49% 51%,transparent 51%);background-size:70px 70px}
.gallery-preview-page .ai-chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;display:grid;place-items:center;background:#0c7d87;border:8px solid #b8fff1;border-radius:18px;color:white;box-shadow:0 0 0 7px #0b5866}.gallery-preview-page .ai-chip b{font-size:32px;letter-spacing:.04em}.gallery-preview-page .ai-node{position:absolute;width:19px;height:19px;background:#ffbf42;border:4px solid #0c7d87;border-radius:50%}.gallery-preview-page .ai-node.n1{left:11%;top:17%}.gallery-preview-page .ai-node.n2{right:6%;top:31%}.gallery-preview-page .ai-node.n3{left:14%;bottom:10%}
.gallery-preview-page .math-scene{position:absolute;inset:54px 23px 36px;display:flex;align-items:center;justify-content:center;gap:5px}.gallery-preview-page .math-scene span{display:grid;place-items:center;width:44px;height:48px;border-radius:9px;background:white;border:3px solid #c94d59;color:#9d2532;font-size:25px;font-weight:950;transform:rotate(-6deg)}.gallery-preview-page .math-scene span:nth-child(even){background:#ffca3a;border-color:#e9a429;transform:rotate(5deg)}.gallery-preview-page .math-scene span:nth-child(3){background:#4ea8de;border-color:#0873a8;color:white;transform:rotate(7deg)}
.gallery-preview-page .gallery-next{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:36px;padding:30px;background:#0b235c;color:white;border-radius:16px}.gallery-preview-page .gallery-next h2{margin:7px 0;font-size:clamp(1.5rem,2.5vw,2rem)}.gallery-preview-page .gallery-next p{margin:0;color:#d5e1ff}.gallery-preview-page .gallery-next .project-kicker{color:#ffca3a}.gallery-preview-page .gallery-next .btn{flex-shrink:0}
@media(max-width:1180px){.gallery-preview-page .project-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-preview-page .project-copy{min-height:220px}}
@media(max-width:680px){.gallery-preview-page .gallery-section{padding:52px 0 70px}.gallery-preview-page .gallery-next{display:block}.gallery-preview-page .project-gallery{grid-template-columns:1fr}.gallery-preview-page .project-copy{min-height:0}.gallery-preview-page .gallery-next .btn{margin-top:22px}}