/* ── rotate-cards.css ────────────────────────────────────────────────────────
   Include this on any page that uses rotate-cards.js
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Scene container ─────────────────────────────────────────────────────── */
/* .cards-on   — activates 3D scene (script picks it up)                      */
/* .cards-off  — keeps content as plain HTML for Oxygen editing               */

.cards-on {
  position: relative;
  overflow: hidden;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  /* height must be set by the parent section — e.g. height: 600px or 100vh   */
}

.cards-off {
  /* plain layout — no 3D, Oxygen edits freely */
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

/* ── Canvas (WebGL) ──────────────────────────────────────────────────────── */
.rc-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
}

/* ── CSS3D renderer overlay ──────────────────────────────────────────────── */
.rc-css3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.rc-css3d * {
  pointer-events: none;
}

.rc-css3d a,
.rc-css3d button,
.rc-css3d p,
.rc-css3d h1,
.rc-css3d h2,
.rc-css3d h3,
.rc-css3d h4,
.rc-css3d h5,
.rc-css3d h6,
.rc-css3d span,
.rc-css3d li {
  pointer-events: auto;
}

.rc-css3d a,
.rc-css3d button {
  cursor: pointer;
}


/* ── Card slot — fills the CSS3D wrapper ────────────────────────────────── */
/* .card is the direct child of .cards-on that becomes a 3D card             */
.cards-on > .card,
.cards-off > .card {
  width: 100%;
  height: 100%;
  min-width: unset;
  max-width: unset;
  box-sizing: border-box;
}

/* In plain layout (.cards-off) give cards a visible look for editing        */
.cards-off > .card {
  width: auto;
  height: auto;
  min-width: 180px;
  max-width: 280px;
  flex: 1;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 32px 24px;
}

/* Card inside CSS3D wrapper fills it exactly                                 */
.cards-on .card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}