/* /churches: the hero's framed wall sign and room list, the families' invite preview. Builds on landing.css. */
.sign-stage { padding-top: 24px; }
.wall-sign {
  position: relative; z-index: 2; width: min(340px, 86vw); aspect-ratio: 8.5 / 11; background: #fff; color: var(--ink);
  padding: 30px 28px 24px; display: flex; flex-direction: column;
  box-shadow: 0 0 0 10px #2b2f36, 0 0 0 11px #1a1d22, 0 40px 70px -28px rgba(22,33,58,.55);
  transform: rotate(-1.4deg); transform-origin: 50% 0; animation: sign-hang 1.4s cubic-bezier(.3,1.4,.4,1) .2s both;
}
.wall-sign .pin { position: absolute; top: -34px; left: 50%; width: 2px; height: 26px; background: #9aa1ad; transform: translateX(-50%); }
.wall-sign .pin::before { content: ""; position: absolute; top: -7px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: #c9ced6; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
@keyframes sign-hang { 0% { transform: rotate(-7deg) translateY(-14px); opacity: 0; } 100% { transform: rotate(-1.4deg); opacity: 1; } }
.ws-top { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; }
.ws-top img { width: 20px; height: 20px; }
.ws-top b { font-weight: 400; color: var(--brand); }
.ws-kick { margin: auto 0 0; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--brand); }
.ws-h { margin: 8px 0 0; font: 800 29px/1.02 var(--display); letter-spacing: -0.04em; }
.ws-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 2px solid var(--ink); font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.ws-foot b { display: block; color: var(--ink); font-size: 12.5px; }
.ws-qr {
  flex: none; width: 54px; height: 54px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 16px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 16px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 16px 16px no-repeat,
    repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 9px 9px;
}
.rooms { position: relative; z-index: 2; list-style: none; padding: 0; margin: 34px 0 0; width: min(340px, 86vw); border-top: 1px solid var(--line); }
.rooms li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14.5px;
  opacity: 0; transform: translateY(8px); animation: room-in .6s ease both; }
.rooms li:nth-child(1) { animation-delay: 1s; } .rooms li:nth-child(2) { animation-delay: 1.15s; } .rooms li:nth-child(3) { animation-delay: 1.3s; }
@keyframes room-in { to { opacity: 1; transform: none; } }
.rooms small { font: 500 12.5px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rooms .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: room-pulse 2.4s ease-out infinite; }
.rooms li:nth-child(2) .dot { animation-delay: .8s; } .rooms li:nth-child(3) .dot { animation-delay: 1.6s; }
@keyframes room-pulse { 0% { box-shadow: 0 0 0 0 rgba(30,143,110,.45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(30,143,110,0); } }

/* What a family sees after scanning the sign */
.invite { background: #fff; border-radius: 10px; padding: 30px 30px 28px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(22,33,58,.35); max-width: 440px; justify-self: end; width: 100%; }
.inv-from { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.inv-from b { color: var(--ink); }
.inv-h { margin: 18px 0 6px; font: 750 26px/1.15 var(--display); letter-spacing: -0.035em; }
.inv-steps { list-style: none; padding: 0; margin: 14px 0 22px; }
.inv-steps li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.inv-steps li:first-child { border-top: 0; }
.inv-steps span { flex: none; width: 24px; font: 500 13px var(--mono); color: var(--brand); }
.inv-btn { pointer-events: none; }
@media (max-width: 900px) { .invite { justify-self: start; margin-top: 8px; } }
@media (max-width: 420px) { .ws-h { font-size: 25px; } .wall-sign { padding: 24px 22px 20px; } }
@media (prefers-reduced-motion: reduce) { .wall-sign { animation: none; } .rooms li { animation: none; opacity: 1; transform: none; } .rooms .dot { animation: none; } }