/* ArtUp AR XR — "Photo → 3D" showcase tiles (landing section and photo-to-3d.html). Uses the --ax-* tokens. */
.p3d-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p3d-grid.p3d-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p3d-tile {
  position: relative; margin: 0; display: flex; flex-direction: column; min-width: 0;
  background: var(--ax-surface); border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-lg); overflow: hidden;
}
.p3d-stage { position: relative; height: 340px; background: var(--ax-surface-2); }
.p3d-stage img, .p3d-stage model-viewer { display: block; width: 100%; height: 100%; }
.p3d-stage img { object-fit: contain; background: #fff; }
.p3d-stage model-viewer { background: transparent; --poster-color: transparent; }
.p3d-ph {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.5rem;
  padding: 1rem; text-align: center; color: var(--ax-muted); font-size: 0.9rem; pointer-events: none;
}
.p3d-ph svg { width: 3rem; height: 3rem; opacity: 0.55; }
.p3d-tile.is-loaded .p3d-ph { display: none; }
.p3d-ph .p3d-ph-err { display: none; }
.p3d-tile.is-error .p3d-ph-wait { display: none; }
.p3d-tile.is-error .p3d-ph-err { display: inline; }
.p3d-tile figcaption {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.75rem 1rem 0.9rem; border-top: 1px solid var(--ax-border);
}
.p3d-tile figcaption span { color: var(--ax-muted); font-size: 0.86rem; }
.p3d-ar {
  position: absolute; right: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 1.5rem);
  border: 0; border-radius: var(--ax-radius-pill); padding: 0.55rem 0.95rem;
  background: var(--ax-accent); color: var(--ax-accent-contrast);
  font: 600 0.86rem/1.2 var(--ax-font); cursor: pointer; box-shadow: var(--ax-shadow);
}
.p3d-ar:hover { background: var(--ax-accent-hover); }
.p3d-item { margin-top: 2.25rem; }
.p3d-item h3 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.p3d-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.5rem 0 0; color: var(--ax-muted); font-size: 0.93rem; }
.p3d-legend strong { color: var(--ax-text); }
.ax-page .p3d-note { color: var(--ax-muted); margin: 0.25rem 0 0; max-width: 46rem; }
.ax-page .p3d-section-title { margin: 3.5rem 0 0.25rem; }
.p3d-copy { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; margin-top: 2rem; }
.p3d-copy .ax-list-check { margin: 0; }
.p3d-copy p { margin: 0 0 1rem; }
.p3d-soon { color: var(--ax-muted); font-size: 0.93rem; }
.p3d-soon .lx-status { margin-left: 0.35rem; }
.p3d-hint { margin: 0.75rem 0 0; color: var(--ax-muted); font-size: 0.88rem; }
.p3d-foot { margin: 2.5rem 0 0; color: var(--ax-muted); font-size: 0.88rem; max-width: 52rem; }

@media (max-width: 860px) {
  .p3d-grid, .p3d-grid.p3d-two, .p3d-copy { grid-template-columns: minmax(0, 1fr); }
  .p3d-stage { height: 300px; }
}