/* Static photo heroes, like Slijm. No parallax layers or loose foreground PNGs.
   Each divider belongs to its section seam, not to a viewport scroll offset. */
.has-lab-journey { --lab-divider-height:max(115px,14vw); }
.lab-canvas { --lab-hero-photo:url('../visuals/workshops/canvas.webp'); }
.lab-bear { --lab-hero-photo:url('../visuals/workshops/bear.webp'); }
.lab-garden { --lab-hero-photo:url('../visuals/workshops/garden.webp'); --lab-divider-rise:.35; }
.lab-football { --lab-hero-photo:url('../visuals/workshops/football.webp'); }
.lab-page.has-lab-journey .lb-hero {
  position:relative; display:block; min-height:0; margin-bottom:0;
  padding:132px 0 calc(clamp(86px,9vw,132px) + var(--lab-divider-height)*var(--lab-divider-rise,.25));
  background:linear-gradient(90deg,#050506ed 0%,#050506bb 40%,#05050638 76%,#05050618 100%),var(--lab-hero-photo) center / cover no-repeat;
}
.lab-page.has-lab-journey .lb-hero::before { content:none; }
.lab-page.has-lab-journey .lb-hero-grid {
  display:grid; grid-template-columns:minmax(0,640px); gap:0; min-height:0;
  padding-block:0; transform:none;
}
.lab-page.has-lab-journey .lb-hero-grid > div:first-child::after { content:none; }
.lab-page.has-lab-journey .lb-hero h1 { font-size:clamp(40px,5.6vw,80px); line-height:.96; }
.lab-page.has-lab-journey .lb-doodle-art { animation:none; }
.lab-page.has-lab-journey .lab-journey__intro {
  padding-top:calc(var(--lab-divider-height)*.5 + clamp(42px,5vw,74px));
}
.lab-divider {
  position:absolute; z-index:6; left:0; right:0; display:block;
  height:var(--lab-divider-height); pointer-events:none; user-select:none;
  overflow:visible;
}
.lab-divider--hero { bottom:0; transform:translateY(50%); }
.lab-divider img { position:absolute; display:block; left:50%; top:50%; width:max(100%,820px); max-width:none; height:auto; transform:translate(-50%,-50%); }
.lab-page.has-lab-journey .lb-paint-break-section { padding-bottom:clamp(72px,8vw,120px); }
.lab-page.has-lab-journey .lb-bear-next-section { padding-top:clamp(72px,8vw,120px); }

/* The color gallery is static HTML now; it no longer loads the parallax script. */
.has-lab-journey .lb-bear-styles { position:relative; overflow:hidden; background:#0b0b0c; color:#fafaf8; }
.has-lab-journey .lb-bear-styles__head { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.6fr); gap:clamp(28px,6vw,84px); align-items:end; }
.has-lab-journey .lb-bear-styles .lede { color:#fafaf8b3; }
.has-lab-journey .lb-bear-styles__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.8vw,24px); margin-top:clamp(34px,5vw,70px); }
.has-lab-journey .lb-bear-style { min-width:0; margin:0; }
.has-lab-journey .lb-bear-style:nth-child(even) { padding-top:clamp(28px,5vw,72px); }
.has-lab-journey .lb-bear-style picture { display:block; overflow:hidden; aspect-ratio:4/5; background:#171719; }
.has-lab-journey .lb-bear-style img { width:100%; height:100%; object-fit:cover; }
.has-lab-journey .lb-bear-style figcaption { display:grid; gap:5px; padding-top:15px; }
.has-lab-journey .lb-bear-style strong { font-size:16px; }
.has-lab-journey .lb-bear-style span { color:#fafaf894; font-size:12px; line-height:1.45; }
.has-lab-journey .lb-bear-styles__action { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:clamp(38px,6vw,76px); padding-top:28px; border-top:1px solid #fafaf829; }
.has-lab-journey .lb-bear-styles__action p { margin:0; max-width:600px; color:#fafaf8b3; }
@media(max-width:820px) {
  .lab-page.has-lab-journey .lb-hero { padding-top:118px; padding-bottom:calc(84px + var(--lab-divider-height)*var(--lab-divider-rise,.25)); background-position:58% center; }
  .lab-page.has-lab-journey .lb-hero h1 { font-size:clamp(38px,7vw,62px); }
  .has-lab-journey .lb-bear-styles__head { grid-template-columns:1fr; gap:20px; }
  .has-lab-journey .lb-bear-styles__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 18px; }
  .has-lab-journey .lb-bear-styles__action { align-items:flex-start; flex-direction:column; }
}
@media(max-width:620px) {
  .lab-page.has-lab-journey .lb-hero { background-image:linear-gradient(90deg,#050506df 0%,#0505069c 72%,#05050666 100%),var(--lab-hero-photo); }
}
