/* ==========================================================================
   DOOR 3 — CEREMONY FRAMES (events-ceremony-frames.js)
   The couple's own ceremony photographs inside a thin carved-gold frame, one
   ceremony at a time. Wide screens: photograph beside its details. Phones:
   photograph above them. Typography is the theme's own (.mj-header, .mj-info-*).
   ========================================================================== */

.cf-root {
  --cf-gold: var(--text-gold);
  --cf-line: rgba(239, 191, 4, 0.75);
  --cf-line-soft: rgba(239, 191, 4, 0.32);
  /* the photograph's height: the frame is 3:4, like the ceremony photographs */
  --cf-h: min(62vh, 640px);
}

.cf-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(max(clamp(14px, 3.4vh, 34px), env(safe-area-inset-top)) + clamp(64px, 9vh, 92px));
  bottom: clamp(56px, 8vh, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 84px);
  padding: 0 clamp(16px, 4vw, 64px);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the frame */

.cf-frame {
  position: relative;
  flex: none;
  height: var(--cf-h);
  aspect-ratio: 3 / 4;
  margin: 0;
  will-change: transform;
}

/* The photograph sits on a dark mat inside the gold lines */
.cf-photos {
  position: absolute;
  inset: 12px;
  overflow: hidden;
  background: #0b0704;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6), 0 8px 18px rgba(0, 0, 0, 0.45);
}

.cf-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  user-select: none;
  will-change: transform, opacity;
}

/* Outer gold lines, drawn in from their centres as Door 3 arrives */
.cf-line {
  position: absolute;
  background: var(--cf-line);
  opacity: 0;
  will-change: transform, opacity;
}
.cf-line--top,
.cf-line--bottom { left: 0; right: 0; height: 1px; }
.cf-line--top { top: 0; }
.cf-line--bottom { bottom: 0; }
.cf-line--left,
.cf-line--right { top: 0; bottom: 0; width: 1px; }
.cf-line--left { left: 0; }
.cf-line--right { right: 0; }

/* A second, softer line just inside: the carved double border */
.cf-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--cf-line-soft);
  pointer-events: none;
}

/* Corner brackets */
.cf-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--cf-gold);
  opacity: 0;
}
.cf-corner--tl { top: -5px; left: -5px; border-top-width: 2px; border-left-width: 2px; }
.cf-corner--tr { top: -5px; right: -5px; border-top-width: 2px; border-right-width: 2px; }
.cf-corner--bl { bottom: -5px; left: -5px; border-bottom-width: 2px; border-left-width: 2px; }
.cf-corner--br { bottom: -5px; right: -5px; border-bottom-width: 2px; border-right-width: 2px; }

/* The gold diamond at the middle of the top and bottom lines (the ✦ of the design) */
.cf-gem {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  opacity: 0;
  box-shadow: 0 0 0 5px #0b0704, 0 0 8px rgba(239, 191, 4, 0.5);
}
.cf-gem--top { top: -4.5px; }
.cf-gem--bottom { bottom: -4.5px; }

/* ---------------------------------------------------------------- details */

.cf-details {
  position: relative;
  flex: 0 1 auto;
  width: min(40vw, 460px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Soft dark scrim so details stay readable over the warm temple light */
.cf-details::before {
  content: "";
  position: absolute;
  inset: -22% -18%;
  background: radial-gradient(ellipse at 40% 50%, rgba(8, 5, 3, 0.72) 0%, rgba(8, 5, 3, 0.4) 50%, rgba(8, 5, 3, 0) 75%);
  z-index: -1;
}

.cf-details > * { opacity: 0; will-change: transform, opacity; }
.cf-details .mj-info-rule { transform-origin: 0 50%; background: linear-gradient(90deg, var(--cf-gold), transparent); width: 88px; }
.cf-details .mj-info-when { justify-content: flex-start; }
.cf-details .mj-info-title { font-size: clamp(30px, 3.4vw, 50px); }
.cf-details .mj-info-desc { max-width: 40ch; }

/* Which ceremony of how many: small gold diamonds */
.cf-dots {
  display: flex;
  gap: 10px;
  margin: clamp(14px, 2.4vh, 24px) 0 0;
  padding: 0;
  list-style: none;
}
.cf-dots li {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border: 1px solid var(--cf-line);
  transition: background-color 0.4s ease;
}
.cf-dots li.is-active { background: var(--cf-gold); }

/* ---------------------------------------------------------------- phones and narrow screens:
   the photograph above its details, both centred */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .cf-root { --cf-h: min(46vh, calc((100vw - 48px) * 4 / 3)); }
  .cf-stage { flex-direction: column; gap: clamp(16px, 2.6vh, 28px); }
  .cf-details { width: min(100%, 560px); align-items: center; text-align: center; }
  .cf-details::before { background: radial-gradient(ellipse at 50% 45%, rgba(8, 5, 3, 0.72) 0%, rgba(8, 5, 3, 0.4) 50%, rgba(8, 5, 3, 0) 75%); }
  .cf-details .mj-info-rule { transform-origin: 50% 50%; background: linear-gradient(90deg, transparent, var(--cf-gold), transparent); width: 64px; }
  .cf-details .mj-info-when { justify-content: center; }
  .cf-details .mj-info-title { font-size: clamp(26px, 7vw, 36px); }
  .cf-details .mj-info-desc { display: none; }
  .cf-photos { inset: 9px; }
}

/* Short screens held sideways: no heading, the photograph beside its details */
@media (orientation: landscape) and (max-height: 500px) {
  .cf-root { --cf-h: 74vh; }
  .cf-root .mj-header { display: none; }
  .cf-stage { top: 6vh; bottom: 10vh; flex-direction: row; }
  .cf-details { width: min(44vw, 380px); align-items: flex-start; text-align: left; }
  .cf-details .mj-info-title { font-size: clamp(22px, 4vw, 30px); }
  .cf-details .mj-info-when { justify-content: flex-start; flex-direction: column; gap: 0; }
  .cf-details .mj-info-sep { display: none !important; }
  .cf-details .mj-info-desc { display: none; }
}

/* Phones held upright: the heading sits below the sound button at the top right
   instead of under it, and the photograph gives up a little height to make room */
@media (max-width: 600px) and (orientation: portrait) {
  .cf-root { --cf-h: min(42vh, calc((100vw - 64px) * 4 / 3)); }
  .cf-root .mj-header { top: calc(max(clamp(14px, 3.4vh, 34px), env(safe-area-inset-top)) + 58px); }
  .cf-stage { top: calc(max(clamp(14px, 3.4vh, 34px), env(safe-area-inset-top)) + 58px + 76px); }
}

/* Short phones (e.g. 360x640): a smaller photograph keeps the details clear of the
   door counter at the bottom */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 700px) {
  .cf-root { --cf-h: min(35vh, calc((100vw - 64px) * 4 / 3)); }
  .cf-stage { gap: 12px; }
  .cf-dots { margin-top: 10px; }
}