/* Work gallery — six concept mini-sites.
   Default: a simple grid (no JS / reduced motion).
   .is-3d (set by js/motion.js): sticky 3D corridor driven by native scroll. */

.gallery { --n: 6; /* number of panels */ position: relative;padding-block: var(--space-section); border-top: 1px solid var(--line); }
.gallery__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.5rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.gallery__meta .muted { font-size: 1rem; max-width: 30rem; }
.gallery__count { margin-top: 1.25rem; color: var(--ivory); }
.gallery__count span { color: var(--lime); }
.gallery__bar { margin-top: .75rem; height: 2px; background: var(--line); max-width: 30rem; overflow: hidden; }
.gallery__bar span { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(var(--gp, 0)); }

/* Direct links to all six concept sites — always reachable, whatever the 3D corridor is showing */
.gallery__index { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; max-width: 30rem; }
.gallery__index a {
  position: relative; z-index: 3; padding: .4rem .65rem; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); font: 500 .75rem/1 var(--font-mono); letter-spacing: .04em; text-decoration: none;
  transition: border-color var(--fast), color var(--fast), background-color var(--fast);
}
.gallery__index a span { margin-right: .45rem; color: var(--lime); }
.gallery__index a:hover, .gallery__index a.is-current { border-color: var(--lime); color: var(--ivory); }
.gallery__index a.is-current { background: rgb(201 247 85 / .08); }

.gallery__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 2rem 1.5rem; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Panel */
.gpanel { display: grid; gap: 1rem; }
.gwin {
  container-type: inline-size;
  border: 1px solid #343731; border-radius: var(--radius-lg); overflow: hidden; background: var(--raised);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .02) inset;
}
.gwin__bar { display: flex; align-items: center; gap: 6px; padding: .6rem .8rem; border-bottom: 1px solid #2c2f2b; background: #151714; }
.gwin__bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3d38; }
.gwin__bar i:first-child { background: var(--red); }
.gwin__bar span { margin-left: auto; margin-right: auto; padding: .2rem .8rem; border-radius: 4px; background: #1f221e; color: var(--muted); font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .04em; }
.gpanel__cap { display: grid; gap: .4rem; }
.gpanel__cap .tag { justify-self: start; }
.gpanel__cap h3 { font-size: 1.375rem; margin-top: .35rem; }
.gpanel__cap p { color: var(--muted); font-size: .9375rem; max-width: 34rem; }

/* Whole panel is clickable via the caption link (stretched link pattern) */
.gpanel { position: relative; }
.gpanel__link { justify-self: start; margin-top: .25rem; color: var(--lime); font-weight: 600; text-decoration: none; }
.gpanel__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gpanel__link span { display: inline-block; transition: transform var(--fast) var(--ease); }
.gpanel:hover .gpanel__link span, .gpanel__link:focus-visible span { transform: translateX(4px); }
.gpanel:hover .gwin { border-color: #4a4d48; }
.gpanel:has(.gpanel__link:focus-visible) .gwin { outline: 3px solid var(--lime); outline-offset: 4px; }
.gpanel__link:focus-visible { outline: none; }

/* Mini-site shared scaffolding — sizes in container units so the site scales with its window */
.gsite { aspect-ratio: 16 / 10; display: flex; flex-direction: column; font-size: 2.2cqi; overflow: hidden; position: relative; }
.gsite__nav { display: flex; align-items: center; gap: 3.2cqi; padding: 2.6cqi 4cqi; font-size: 1.9cqi; }
.gsite__nav b { margin-right: auto; font: 700 2.4cqi/1 var(--font-display); letter-spacing: .02em; }
.gsite__nav span { opacity: .8; }
.gsite__nav em, .gsite__hero em { font-style: normal; font-weight: 600; padding: 1.2cqi 2.2cqi; border-radius: .8cqi; }
.gsite__hero { display: flex; flex-direction: column; align-items: flex-start; gap: 2cqi; padding: 2cqi 4cqi; }
.gsite__hero small { font: 500 1.6cqi/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.gsite__hero strong { font: 700 6.2cqi/1 var(--font-display); letter-spacing: -.03em; max-width: 13ch; }
.gsite__hero em { font-size: 1.9cqi; }

/* 01 Industrial */
.gsite--industrial { color: #f1f2ee; background: linear-gradient(90deg, rgb(10 11 9 / .92) 30%, rgb(10 11 9 / .2)), url("../images/demos/industrial/hero-sm.jpg") center / cover; }
.gsite--industrial .gsite__nav em, .gsite--industrial .gsite__hero em { background: var(--lime); color: var(--graphite); }
.gsite--industrial .gsite__hero { flex: 1; justify-content: center; }
.gsite__row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(255 255 255 / .14); background: rgb(10 11 9 / .7); }
.gsite__row span { padding: 2.2cqi 4cqi; font-size: 1.7cqi; border-right: 1px solid rgb(255 255 255 / .1); }

/* 02 Hospitality */
.gsite--hospitality { color: #fff8ee; background: linear-gradient(180deg, rgb(20 12 20 / .55), transparent 35%, rgb(20 12 20 / .55)), url("../images/demos/hospitality/hero-sm.jpg") center / cover; font-family: Georgia, "Times New Roman", serif; }
.gsite--hospitality .gsite__nav b { font: italic 400 2.8cqi/1 Georgia, serif; letter-spacing: 0; }
.gsite--hospitality .gsite__nav em { border: 1px solid rgb(255 248 238 / .6); }
.gsite--hospitality .gsite__hero { flex: 1; justify-content: flex-end; padding-bottom: 5cqi; }
.gsite--hospitality .gsite__hero strong { font: 400 7cqi/1 Georgia, serif; letter-spacing: -.01em; }
.gsite--hospitality .gsite__hero small { font-family: var(--font-body); }
.gsite--hospitality .gsite__hero em { background: #fff8ee; color: #3b2230; font-family: var(--font-body); }

/* 03 Real estate */
.gsite--realestate { color: #1d2026; background: #efece5; }
.gsite--realestate .gsite__nav { border-bottom: 1px solid #d6d1c5; }
.gsite--realestate .gsite__nav em, .gsite--realestate .gsite__hero em { background: #1d2026; color: #efece5; }
.gsite__split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.gsite__split .gsite__hero { justify-content: center; }
.gsite__img { background: url("../images/demos/realestate/hero-sm.jpg") 30% center / cover; }
.gsite__chips { display: flex; flex-wrap: wrap; gap: 1cqi; }
.gsite__chips span { padding: .8cqi 1.6cqi; border: 1px solid #b9b3a5; border-radius: .6cqi; font-size: 1.6cqi; }

/* 04 Restaurant — mirrors the real hero: feast photo, split serif "Flavours … from the fire" */
.gsite--restaurant { color: #f6efe4; background: linear-gradient(180deg, rgb(25 18 14 / .8), rgb(25 18 14 / .45) 45%, rgb(25 18 14 / .8)), url("../images/demos/restaurant/hero-sm.jpg") center / cover; }
.gsite--restaurant .gsite__nav b { margin-inline: auto; font: italic 400 2.8cqi/1 Georgia, serif; }
.gsite--restaurant .gsite__nav em { background: #e9a356; color: #231c17; border-radius: 999px; }
.gsite__rhero { flex: 1; display: grid; grid-template-rows: auto 1fr auto; padding: 1cqi 4cqi 3.5cqi; }
.gsite__rhero strong { font: 400 11cqi/.85 Georgia, "Times New Roman", serif; letter-spacing: -.03em; text-transform: uppercase; }
.gsite__rhero small { align-self: center; justify-self: center; font: 500 1.4cqi/1.5 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.gsite__rhero .gsite__rhero-end { justify-self: end; font-style: italic; text-transform: none; color: #f0b06a; }

/* 05 Healthcare — mirrors the real hero: floating pill nav, sunlit gradient, serif headline, photo strip */
.gsite--clinic { color: #17312e; padding-top: 2.4cqi; background: radial-gradient(ellipse 80% 70% at 50% 0%, #f6d27d, rgb(246 210 125 / .35) 45%, transparent 75%), #fdf8ee; }
.gsite__pill { display: flex; align-items: center; gap: 2.4cqi; margin-inline: 7cqi; padding: .9cqi .9cqi .9cqi 2.4cqi; background: rgb(255 255 255 / .85); border: 1px solid #e6dcc6; border-radius: 999px; font-size: 1.5cqi; }
.gsite__pill b { margin-right: auto; font: 400 2.1cqi/1 Georgia, serif; }
.gsite__pill b i, .gsite__chero strong i { color: #1d6a63; }
.gsite__pill em, .gsite__chero em { font-style: normal; font-weight: 600; background: #1d6a63; color: #fff; border-radius: 999px; }
.gsite__pill em { padding: .9cqi 1.8cqi; }
.gsite__chero { display: grid; justify-items: center; gap: 2.2cqi; padding: 4cqi 6cqi 3cqi; text-align: center; }
.gsite__chero strong { max-width: 18ch; font: 400 5.6cqi/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.gsite__chero em { padding: 1.2cqi 2.4cqi; font-size: 1.7cqi; }
.gsite__cphoto { flex: 1; margin-inline: 5cqi; border-radius: 2.6cqi 2.6cqi 0 0; background: url("../images/demos/clinic/hero-sm.jpg") center 30% / cover; }

/* 06 Education — mirrors the real hero: studio photo, huge condensed caps with lime word, sticker */
.gsite--education { position: relative; color: #fff; background: linear-gradient(180deg, rgb(16 17 15 / .55), rgb(16 17 15 / .3) 40%, rgb(16 17 15 / .85)), url("../images/demos/education/hero-sm.jpg") center / cover; }
.gsite--education .gsite__nav b { font: 400 2.6cqi/1 Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .02em; }
.gsite--education .gsite__nav em, .gsite__ehero em { font-style: normal; font-weight: 600; background: var(--lime); color: var(--graphite); border-radius: 0; }
.gsite__ehero { margin-top: auto; display: grid; justify-items: start; gap: 2.4cqi; padding: 0 4cqi 4cqi; }
.gsite__ehero strong { font: 400 10cqi/.86 Impact, "Arial Narrow Bold", "Arial Narrow", sans-serif; text-transform: uppercase; }
.gsite__ehero strong i { font-style: normal; color: var(--lime); }
.gsite__ehero em { padding: 1.1cqi 2cqi; font-size: 1.6cqi; }
.gsite__sticker { position: absolute; right: 5cqi; top: 11cqi; display: grid; place-items: center; width: 11cqi; aspect-ratio: 1; border-radius: 50%; background: var(--lime); color: var(--graphite); font: 400 3.4cqi/1 Impact, sans-serif; transform: rotate(-12deg); }

/* ---------- 3D corridor ---------- */
.gallery.is-3d { height: calc(var(--n) * 75vh + 100vh); padding: 0; }
.gallery.is-3d .gallery__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column;
  padding-top: clamp(4.5rem, 3rem + 4vh, 6.5rem);
  padding-bottom: 4.75rem; /* keeps captions clear of the floating enquiry button */
}
.gallery.is-3d .gallery__head { margin-bottom: 1.25rem; position: relative; z-index: 2; }
.gallery.is-3d .gallery__head .h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); margin-bottom: 0; }
/* The stage clips its own 3D content so no panel can paint over the heading above it */
.gallery.is-3d .gallery__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; perspective: 1100px; perspective-origin: 50% 45%; }
/* Panels are NOT in a shared preserve-3d scene: each gets its own perspective() in motion.js and an
   explicit z-index by depth. Shared 3D sorting let far panels bleed through near ones and stole clicks. */
.gallery.is-3d .gallery__track { position: absolute; inset: 0; display: block; padding: 0; max-width: none; pointer-events: none; }
.gallery.is-3d .gpanel {
  position: absolute; left: 50%; top: 50%;
  width: var(--pw, min(620px, 74vw)); /* --pw is fitted to the stage height by motion.js */
  will-change: transform, opacity; pointer-events: auto;
}
.gallery.is-3d .gpanel__cap { transition: opacity 300ms var(--ease); opacity: .0; }
.gallery.is-3d .gpanel.is-active .gpanel__cap { opacity: 1; }
.gallery.is-3d .gpanel.is-active .gwin { box-shadow: 0 50px 100px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(201 247 85 / .35); }

/* floor grid for depth */
.gallery.is-3d .gallery__stage::before {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 90px 90px; background-position: 0 var(--floor, 0px);
  transform: rotateX(78deg); transform-origin: bottom; opacity: .55;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}

/* Short viewports: give the 3D stage more height by trimming secondary text */
@media (max-height: 820px) {
  .gallery.is-3d .gallery__meta .muted { display: none; }
  .gallery.is-3d .gallery__count { margin-top: 0; }
  .gallery.is-3d .gallery__head { margin-bottom: .75rem; }
}
@media (max-height: 720px) {
  .gallery.is-3d .gpanel__cap p { display: none; }
  .gallery.is-3d .gallery__sticky { padding-bottom: 4.25rem; }
}

@media (max-width: 880px) {
  .gallery__head { grid-template-columns: 1fr; }
  .gallery.is-3d .gallery__head .muted { display: none; }
}