/* GothicSerpentSite 3D header card (transparent, 96px tall, auto-fit torch model) */

/* allow the card to wrap to its own row when the header is narrow */
.gs-header { flex-wrap: wrap; }

.gs-card {
  flex: 1 1 0;             /* grow to fill (middle on desktop, full row when wrapped);
                              explicit 0 basis (not auto) lets it unwrap when space returns */
  min-width: 96px;         /* never narrower than 96px; wraps to a new row if needed */
  max-height: 96px;        /* cap the card height at 96px */
  height: 96px;            /* explicit height so the cap is honoured on desktop too */
  align-self: center;
  margin: 0 1rem;
  background: transparent;  /* let the gs-header show through */
  border-radius: 8px;
  overflow: hidden;
}

.gs-card .viewer {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;  /* fully transparent around the GLB */
  touch-action: none;
  cursor: grab;
}
.gs-card .viewer:active { cursor: grabbing; }

/* on small screens the header stacks (set by the glass theme); make the card full width */
@media (max-width: 640px) {
  .gs-card { width: 100%; flex: 0 0 auto; height: 96px; margin: 0.25rem 0; }
}