/*
 * Random Art Studio — 3D GALLERY module styles
 * Scoped entirely under .ras-gallery so nothing leaks into the host page.
 * Design tokens are inherited from the host (styles.css :root) with hard
 * fallbacks so the module also renders correctly on its own.
 */

.ras-gallery {
  --rg-paper-0: var(--paper-0, #fbfaf6);
  --rg-paper-1: var(--paper-1, #f7f6f1);
  --rg-paper-2: var(--paper-2, #efede5);
  --rg-paper-3: var(--paper-3, #e4e1d6);
  --rg-ink-0: var(--ink-0, #0d0d0d);
  --rg-ink-1: var(--ink-1, #3a3a36);
  --rg-ink-2: var(--ink-2, #55544a);
  --rg-ink-3: var(--ink-3, #6b695c);
  --rg-red: var(--red, #d40013);
  --rg-line: var(--line, rgba(13, 13, 13, .42));
  --rg-line-soft: var(--line-soft, rgba(13, 13, 13, .16));
  --rg-display: var(--font-display, "RAS Monolith", "Arial Narrow", "Impact", sans-serif);
  --rg-mono: var(--font-mono, "Courier New", ui-monospace, monospace);

  position: relative;
  width: 100%;
  margin-top: 24px;
  border: 1.5px solid var(--rg-ink-0);
  background: var(--rg-paper-1);
  color: var(--rg-ink-0);
  font-family: var(--rg-mono);
  letter-spacing: .04em;
  box-sizing: border-box;
  overflow: hidden;
}

.ras-gallery *,
.ras-gallery *::before,
.ras-gallery *::after { box-sizing: border-box; }

/* --- 3D mode: fixed-height stage ------------------------------------------ */
.ras-gallery--three { height: clamp(380px, 64vh, 660px); }

.ras-gallery__stage {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--rg-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rg-line-soft) 1px, transparent 1px),
    var(--rg-paper-1);
  background-size: 24px 24px, 24px 24px, auto;
}

.ras-gallery__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;         /* let the module own drag / pinch gestures */
  cursor: grab;
}
.ras-gallery__canvas:active { cursor: grabbing; }

/* --- Registration marks --------------------------------------------------- */
.ras-gallery__reg {
  position: absolute;
  z-index: 3;
  color: var(--rg-ink-3);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
.ras-gallery__reg--tl { top: 7px; left: 8px; }
.ras-gallery__reg--tr { top: 7px; right: 8px; }
.ras-gallery__reg--bl { bottom: 7px; left: 8px; }
.ras-gallery__reg--br { bottom: 7px; right: 8px; }

/* --- HUD (top-left) ------------------------------------------------------- */
.ras-gallery__hud {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: calc(100% - 32px);
  pointer-events: none;
}
.ras-gallery__hud-mark {
  background: var(--rg-ink-0);
  color: var(--rg-paper-1);
  padding: 4px 8px;
  font-family: var(--rg-display);
  font-size: 15px;
  letter-spacing: .06em;
}
.ras-gallery__hud-label {
  color: var(--rg-ink-1);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.ras-gallery__hud-dims {
  color: var(--rg-ink-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* --- Controls hint (bottom-left) ------------------------------------------ */
.ras-gallery__hint {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 4;
  border: 1.5px solid var(--rg-ink-0);
  background: var(--rg-paper-0);
  padding: 7px 11px;
  color: var(--rg-ink-1);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  pointer-events: none;
}

/* --- Info card (top-right) ------------------------------------------------ */
.ras-gallery__card {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(260px, calc(100% - 32px));
  border: 1.5px solid var(--rg-ink-0);
  background: var(--rg-paper-0);
  padding: 12px 14px;
  pointer-events: none;
}
.ras-gallery__card[hidden] { display: none; }
.ras-gallery__card-id {
  color: var(--rg-red);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.ras-gallery__card-title {
  font-family: var(--rg-display);
  font-size: 22px;
  line-height: .98;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.ras-gallery__card-medium {
  margin-top: 2px;
  color: var(--rg-ink-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ras-gallery__card-cta {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dotted var(--rg-line);
  color: var(--rg-ink-1);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* --- Accessible / keyboard list ------------------------------------------- */
/* Container overlays the stage but is transparent to the pointer; individual
   buttons are off-screen until focused, then surface as a visible chip so
   keyboard users get a real focus target (WCAG 2.4.7). */
.ras-gallery__a11y {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.ras-gallery__a11y-h,
.ras-gallery__a11y > p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ras-gallery__a11y-list { list-style: none; margin: 0; padding: 0; }
.ras-gallery__a11y-btn {
  position: absolute;
  left: -9999px;
  bottom: auto;
  pointer-events: auto;
  border: 1.5px solid var(--rg-ink-0);
  background: var(--rg-paper-0);
  color: var(--rg-ink-0);
  padding: 9px 13px;
  font-family: var(--rg-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}
.ras-gallery__a11y-btn:focus,
.ras-gallery__a11y-btn:focus-visible {
  left: 16px;
  bottom: 52px;
  max-width: calc(100% - 32px);
  outline: 2.5px solid var(--rg-red);
  outline-offset: 2px;
}

/* --- 2D fallback ---------------------------------------------------------- */
.ras-gallery--flat { padding: 20px 18px 24px; }

.ras-gallery__flat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ras-gallery__eyebrow {
  margin: 0;
  color: var(--rg-red);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.ras-gallery__plan {
  position: relative;
  width: 132px;
  height: 84px;
  flex: none;
  border: 2px solid var(--rg-ink-0);
  background:
    linear-gradient(var(--rg-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rg-line-soft) 1px, transparent 1px),
    var(--rg-paper-0);
  background-size: 12px 12px, 12px 12px, auto;
}
.ras-gallery__plan-door {
  position: absolute;
  top: -2px;
  left: 28px;
  width: 34px;
  height: 4px;
  background: var(--rg-paper-1);
  border-left: 2px solid var(--rg-ink-0);
  border-right: 2px solid var(--rg-ink-0);
}
.ras-gallery__plan-dim {
  position: absolute;
  color: var(--rg-ink-3);
  font-size: 8px;
  letter-spacing: .1em;
}
.ras-gallery__plan-dim--x { top: 5px; left: 7px; }
.ras-gallery__plan-dim--z { bottom: 5px; right: 7px; color: var(--rg-red); }

.ras-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--rg-ink-0);
  border-bottom: 0;
  border-right: 0;
}
.ras-gallery__thumb {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1.5px solid var(--rg-ink-0);
  border-bottom: 1.5px solid var(--rg-ink-0);
  background: var(--rg-paper-1);
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.ras-gallery__thumb:hover { background: var(--rg-paper-0); }
.ras-gallery__thumb:focus-visible { outline: 2.5px solid var(--rg-red); outline-offset: -3px; }

.ras-gallery__thumb-plate {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1.5px solid var(--rg-ink-0);
  background-color: var(--rg-paper-2);
  background-image: radial-gradient(rgba(13, 13, 13, .06) 1px, transparent 1px);
  background-size: 4px 4px;
}
.ras-gallery__thumb-plate--empty::after {
  content: "NO IMAGE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rg-ink-3);
  font-size: 10px;
  letter-spacing: .16em;
}
.ras-gallery__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Real art renders in full colour (system rule), matching the catalogue/shop. */
}
.ras-gallery__thumb-body { padding: 11px 12px 14px; }
.ras-gallery__thumb-id {
  display: block;
  color: var(--rg-ink-3);
  font-size: 10px;
  letter-spacing: .14em;
}
.ras-gallery__thumb-title {
  display: block;
  margin: 4px 0 3px;
  font-family: var(--rg-display);
  /* Shared card-title token (catalogue card / gallery card / gallery thumb). */
  font-size: 22px;
  line-height: .98;
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ras-gallery__thumb-medium {
  display: block;
  color: var(--rg-ink-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ras-gallery__flat-hint {
  margin: 16px 0 0;
  color: var(--rg-ink-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 820px) {
  .ras-gallery--three { height: clamp(340px, 56vh, 520px); }
  .ras-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .ras-gallery__card { max-width: min(220px, calc(100% - 32px)); }
}

@media (max-width: 560px) {
  .ras-gallery__grid { grid-template-columns: 1fr; }
  .ras-gallery__hud-label { display: none; }
  .ras-gallery__card {
    top: auto;
    bottom: 52px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
  /* 11px floor so the control hint stays legible on phones. */
  .ras-gallery__hint { font-size: 11px; padding: 6px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ras-gallery__canvas { cursor: default; }
}