/* ==========================================================================
   DOOR 3 — THE MANDAPAM RING (events-mandapa-ring.js)
   The ceremonies stand around a round mandapam that turns with the scroll; the
   front ceremony's details rise in beneath it. The script measures where the
   front card sits and shares it as --mr-card-bottom / --mr-card-centre-y.
   Typography is the theme's own (.mj-header, .mj-info-*).
   ========================================================================== */

.mr-viewport {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mr-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}

/* A soft pool of lamp light on the mandapam floor beneath the front ceremony */
.mr-floor {
  position: absolute;
  left: 50%;
  top: calc(var(--mr-card-bottom, 70vh) - 4vh);
  width: min(70vw, 760px);
  height: 12vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(239, 191, 4, 0.16) 0%, rgba(239, 191, 4, 0.05) 40%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

.mr-details {
  position: absolute;
  left: 50%;
  top: calc(var(--mr-card-bottom, 70vh) + clamp(14px, 2.4vh, 26px));
  transform: translateX(-50%);
  width: min(88vw, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

.mr-details::before {
  content: "";
  position: absolute;
  inset: -16% -14% -24%;
  background: radial-gradient(ellipse at 50% 40%, rgba(8, 5, 3, 0.75) 0%, rgba(8, 5, 3, 0.42) 48%, rgba(8, 5, 3, 0) 74%);
  z-index: -1;
}

.mr-details > * { opacity: 0; will-change: transform, opacity; }
.mr-details .mj-info-title { font-size: clamp(28px, 3.1vw, 44px); }

.mr-dots {
  display: flex;
  gap: 10px;
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  padding: 0;
  list-style: none;
}
.mr-dots li {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border: 1px solid rgba(239, 191, 4, 0.75);
  transition: background-color 0.4s ease;
}
.mr-dots li.is-active { background: var(--text-gold); }

/* Phones held upright: the heading sits below the sound button */
@media (max-width: 600px) and (orientation: portrait) {
  .mr-root .mj-header { top: calc(max(clamp(14px, 3.4vh, 34px), env(safe-area-inset-top)) + 58px); }
  .mr-details { width: calc(100vw - 32px); }
  .mr-details .mj-info-title { font-size: clamp(25px, 7vw, 34px); }
}

@media (max-width: 600px) and (orientation: portrait) and (max-height: 700px) {
  .mr-dots { display: none !important; }
}

/* Short screens held sideways: the ring on the left, the details beside it */
.mr--side .mj-header { display: none; }
.mr--side .mr-floor { display: none; }
.mr--side .mr-details {
  left: 56%;
  top: var(--mr-card-centre-y, 50%);
  transform: translateY(-50%);
  width: min(40vw, 380px);
  align-items: flex-start;
  text-align: left;
}
.mr--side .mr-details > * { transform-origin: 0 50%; }
.mr--side .mj-info-when { justify-content: flex-start; flex-direction: column; gap: 0; }
.mr--side .mj-info-sep { display: none !important; }
.mr--side .mr-details .mj-info-title { font-size: clamp(22px, 3.6vw, 30px); }