/* 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"], [data-phase="yesend"]) .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); }

/* Promised in Y10: only shown once the guest taps "Sí, aceptamos" (the yesend phase). */
.block[data-on-accept] { display: none; }
[data-phase="yesend"] .block[data-on-accept] { display: grid; }
.blocks { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.block { display: grid; justify-items: center; scroll-margin-top: calc(var(--safe-t) + var(--space-3)); }
.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;
}
.block-img {
  display: block; width: 100%; max-width: 26rem; height: auto; margin-top: var(--space-1);
  border-radius: 6px; box-shadow: 0 12px 26px -18px rgba(var(--ink-rgb), 0.55);
}
.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;
}
.note {
  max-width: 24ch; margin-top: 0.625rem !important; font-size: var(--text-lg); line-height: 1.4;
  color: var(--ink); text-wrap: balance;
}
.block-title + .note { margin-top: var(--space-1) !important; }
.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); }
}

/* "Más detalles" pill (details.js createMoreHint): after the auto-scroll to the dress guide, more
   sections wait below. Only ever shown on the happy end. */
.more-hint {
  position: fixed; z-index: 30; left: 50%; bottom: calc(var(--safe-b) + var(--space-2));
  transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 var(--space-2) 0 calc(var(--space-2) + var(--track)); cursor: pointer;
  white-space: nowrap; border: 1px solid rgba(var(--gold-rgb), 0.8); border-radius: 999px;
  background: rgba(255, 253, 248, 0.96); color: var(--ink); font: 700 var(--text-sm) / 1 var(--serif);
  letter-spacing: var(--track); text-transform: uppercase;
  box-shadow: 0 10px 24px -14px rgba(var(--ink-rgb), 0.6);
}
.more-hint[hidden], body:not([data-phase="yesend"]) .more-hint { display: none; }
.more-hint svg { width: 12px; height: 8px; color: var(--rose); animation: nudge 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .more-hint svg { animation: none; } }
/* The guide (first block) is hidden before "Sí, aceptamos": no divider above the first visible one. */
body:not([data-phase="yesend"]) .block[data-on-accept] + .block::before { display: none; }