/* work-live.css — #work "live showroom" (C-skeleton + A-transition rhythm).
 * Everything here is scoped under #work with an ID prefix so it always wins over
 * public/style.css's older 3D-card rules, regardless of stylesheet load order.
 * Mobile (<=720px) is untouched: the existing mobile-product-gallery owns that layout,
 * so every rule below that reshapes the grid/phone is guarded to (min-width:721px).
 */

#work .work-live-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: clamp(28px, 4.4vw, 76px); align-items: start; margin-top: 6px; }

/* ── live phone (left, sticky) ───────────────────────────────────────── */
#work .work-live-phone-col { position: sticky; top: 112px; }
#work .work-live-phone-wrap { width: min(100%, 360px); }
#work .work-live-phone {
  position: relative; width: 100%; aspect-ratio: 390 / 820; border-radius: 54px; padding: 12px;
  background: linear-gradient(145deg, #3a3326, #0f0d0a 42%, #2b261d);
  box-shadow: 0 0 0 1px #d9b46a55, 0 50px 100px #000a, 0 0 90px #d9b46a14;
}
#work .work-live-island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; border-radius: 20px; background: #000; z-index: 4; }
#work .work-live-screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #111; isolation: isolate; }
#work .work-live-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#work .work-live-screen img[hidden] { display: none; }
#work .work-live-orb-host { position: absolute; inset: 0; }
#work .work-live-orb-host[hidden] { display: none; }
#work .work-live-orb-host canvas { display: block; width: 100%; height: 100%; }
#work .work-live-slash {
  position: absolute; inset: -60%; z-index: 5; pointer-events: none;
  background: linear-gradient(135deg, transparent 45%, #d9b46a 45%, #f0d698 50%, #d9b46a 55%, transparent 55%);
  opacity: 0; transform: translate(-60%, -60%);
}
#work .work-live-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; }

#work .work-live-cap { margin-top: 22px; }
#work .work-live-cap-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
#work .work-live-cap-row h3 { font-size: 21px; font-weight: 400; letter-spacing: -.6px; color: #e3ddce; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#work .work-live-pill { flex: none; font-size: 10px; font-weight: 700; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--gold); color: var(--gold); white-space: nowrap; }
#work .work-live-pill[data-live="true"] { background: var(--gold); color: #090909; }
#work .work-live-desc { color: #b8aa8e; font-size: 12.5px; line-height: 1.75; margin-top: 10px; min-height: 3.5em; word-break: keep-all; }
#work .work-live-open { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--light-gold); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
#work .work-live-open[hidden] { display: none; }

/* ── copy column (right) ─────────────────────────────────────────────── */
#work .work-live-copy-col { min-width: 0; }
#work .work-live-copy-col .section-top,
#work .work-live-copy-col .work-heading { margin-bottom: 0; }
#work .work-live-copy-col .product-filters { margin-top: 34px; }

/* ── tile grid ────────────────────────────────────────────────────────── */
#work .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 14px; position: relative; isolation: isolate; }
#work .product-grid .product-loading { grid-column: 1 / -1; }
#work .product-grid .product-card {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; min-width: 0;
  border: 0; border-radius: 18px; padding: 0; background: #14110c; overflow: hidden; text-align: left;
  box-shadow: 0 0 0 1px #d9b46a2e; cursor: pointer;
  transition: box-shadow .3s;
}
#work .product-grid .product-card .product-image { position: absolute; inset: 0; height: auto; background: transparent; border: 0; overflow: hidden; display: block; }
#work .product-grid .product-card .product-image > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; box-shadow: none; filter: brightness(.64) saturate(.82); transition: filter .35s, transform .5s cubic-bezier(.16,1,.3,1); }
#work .product-grid .product-card:hover .product-image > img { filter: brightness(.9) saturate(1); transform: scale(1.04); }
#work .product-grid .product-card[aria-current="true"] { box-shadow: 0 0 0 2px var(--gold), 0 0 34px #d9b46a44; }
#work .product-grid .product-card[aria-current="true"] .product-image > img { filter: none; }
#work .product-grid .product-tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 10px; background: linear-gradient(transparent, #090909f0); pointer-events: none; }
#work .product-grid .product-tile-label b { display: block; font-weight: 400; font-size: 12.5px; letter-spacing: -.2px; color: #eee7d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#work .product-grid .product-tile-label small { display: block; font-size: 9.5px; color: var(--muted); margin-top: 2px; }
#work .product-grid .product-tile-progress { position: absolute; left: 0; top: 0; right: 0; height: 3px; background: transparent; pointer-events: none; }
#work .product-grid .product-tile-progress > span { display: block; height: 100%; width: 0; background: var(--gold); transform-origin: left; }
#work .product-grid .product-card[aria-current="true"] .product-tile-progress { background: #d9b46a26; }

/* admin edit chips sit over the bottom of the tile, not in normal flow (there is no room) */
#work .product-grid .product-card > .admin-card-tools { position: absolute; z-index: 3; left: 0; right: 0; bottom: 6px; margin-top: 0; justify-content: center; gap: 4px; }
#work .product-grid .product-card > .admin-card-tools .admin-chip { padding: 5px 8px; font-size: 9.5px; background: #12100cdd; }

@media (hover: hover) and (pointer: fine) {
  #work .product-grid .product-card:hover { box-shadow: 0 0 0 1px #d9b46a80; }
}

@media (max-width: 720px) {
  #work .work-live-grid { display: block; margin-top: 0; }
  #work .work-live-phone-col { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #work .work-live-slash { display: none; }
  #work .product-grid .product-card,
  #work .product-grid .product-card .product-image > img,
  #work .product-grid .product-tile-progress > span { transition: none !important; }
}