/* Written invitation below the stage (built by js/details.js from EVENT in config.js).
   Shown only once the waiting loop starts; reached by scrolling or the "Ver detalles" link. */
.invite-details {
  display: none; max-width: 520px; margin: 0 auto; background: var(--ivory);
  padding: var(--space-6) calc(var(--space-2) + var(--safe-r)) calc(var(--space-6) + var(--safe-b))
           calc(var(--space-2) + var(--safe-l));
  scroll-margin-top: 0;
}
:is([data-phase="final"], [data-phase="noend"]) .invite-details { display: block; }

.invite-details .card {
  position: relative; background: var(--paper); text-align: center;
  padding: var(--space-6) var(--space-3);
  border: 1px solid rgba(var(--gold-rgb), 0.7);
  outline: 1px solid rgba(var(--gold-rgb), 0.35); outline-offset: -9px; /* engraved double frame */
  box-shadow: 0 24px 48px -32px rgba(var(--ink-rgb), 0.45);
}
.invite-details p { margin: 0; }

.ornament { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.ornament::before, .ornament::after { content: ""; width: 3.5rem; height: 1px; background: rgba(var(--gold-rgb), 0.75); }
.ornament svg { width: 44px; height: 22px; overflow: visible; }
.card > .ornament:last-child { margin-top: var(--space-6); }

.kicker {
  margin-top: var(--space-3) !important; color: var(--rose);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  padding-left: 0.3em; /* balance the trailing tracking */
}
.couple {
  text-wrap: balance; margin: var(--space-1) 0 0; font: 400 clamp(2.75rem, 13.5vw, 3.75rem)/1.15 var(--script);
  color: var(--ink); overflow-wrap: anywhere;
}
.when {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: var(--space-2) !important;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
}
.when span { padding-left: 0.2em; white-space: nowrap; }
.when::before, .when::after { content: ""; flex: 0 1 2rem; min-width: 0; height: 1px; background: rgba(var(--gold-rgb), 0.8); }

.blocks { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.block { display: grid; justify-items: center; }
.block + .block::before { /* small gold diamond between sections */
  content: ""; width: 7px; height: 7px; margin: 0 auto var(--space-4); transform: rotate(45deg);
  border: 1px solid rgba(var(--gold-rgb), 0.9);
}
.block-title {
  margin: 0 0 var(--space-1); color: var(--rose);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; padding-left: 0.3em;
}
.place { font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.addr {
  margin-top: 0.375rem !important; font-size: var(--text-lg); line-height: 1.45; color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.time {
  margin-top: var(--space-2) !important; font-size: var(--text-lg); font-weight: 700; letter-spacing: 0.12em;
  color: var(--ink); font-variant-numeric: lining-nums;
}
.map {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2);
  padding: 0 var(--space-3) 0 calc(var(--space-3) + 0.2em); border-radius: 999px;
  border: 1px solid rgba(var(--rose-rgb), 0.55); color: var(--rose); text-decoration: none;
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.map:hover { background: var(--rose); color: var(--paper); }

@media (max-width: 359px) {
  .invite-details .card { padding: var(--space-4) var(--space-2); }
}