/* css/guest.css — the guest's invite page (private-event.html), design C (2026-10-14).
 *
 * The page wears the EVENT's own Sanzo Wada theme: js/event-themes.js themeStyle() sets
 * --ev-bg, --ev-ink, --ev-cover, --ev-accent, --ev-accent-ink, --ev-soft, --ev-line on
 * .gp, the same variables the create flow's card uses (css/create.css), so the guest
 * sees exactly what the organiser previewed on step 2. Nothing here carries a brand
 * colour of its own except the loading screen, which shows before the theme is known.
 * Every theme passes 6:1 text on background; accent buttons use large bold labels.
 */

.gp-body { margin: 0; background: #F7F4EE; color: #253122; font-family: 'DM Sans', system-ui, sans-serif; }
.gp-loading { max-width: 560px; margin: 4rem auto; padding: 0 18px; font-size: 15px; color: #4A5546; }
.gp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

.gp { min-height: 100vh; background: var(--ev-bg); color: var(--ev-ink); line-height: 1.45; }
.gp *, .gp *::before, .gp *::after { box-sizing: border-box; }
.gp [hidden] { display: none !important; }
.gp a { color: inherit; }
.gp :focus-visible { outline: 2px solid var(--ev-ink); outline-offset: 2px; }

.gp-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; max-width: 1080px; margin: 0 auto; }
.gp-logo { font: 700 21px 'DM Sans', sans-serif; letter-spacing: -0.02em; text-decoration: none; }
.gp-logo span { color: var(--ev-accent); }
.gp-top-link { font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.gp-top-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.gp-grid { max-width: 1080px; margin: 0 auto; padding: 0 18px 56px; display: grid; gap: 18px; }
.gp-cover { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ev-cover); }
.gp-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gp-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gp-alone { max-width: 560px; margin: 3rem auto; padding: 0 18px; }
.gp-plain { background: #F7F4EE; color: #253122; }

.gp-host { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.gp-title { margin: 0; font: 400 44px/1.02 'DM Serif Display', Georgia, serif; overflow-wrap: anywhere; }

.gp-row { display: flex; gap: 12px; align-items: center; background: var(--ev-soft); border-radius: 14px; padding: 10px 12px; }
.gp-row-txt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; }
.gp-row-txt b { font-size: 15px; overflow-wrap: anywhere; }
.gp-row-act { flex-shrink: 0; border: 0; background: none; padding: 10px 2px; color: inherit; font: 700 13px 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gp-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 9px; background: var(--ev-soft); display: flex; align-items: center; justify-content: center; }
/* The date tile: month band in the event's accent, the day on white. */
.gp-tile { width: 44px; flex-shrink: 0; border-radius: 9px; overflow: hidden; text-align: center; background: #FFFFFF; color: #16161A; }
.gp-tile span { display: block; font: 700 10px 'DM Sans', sans-serif; letter-spacing: .04em; padding: 2px 0; background: var(--ev-accent); color: var(--ev-accent-ink); }
.gp-tile b { display: block; font: 700 20px/1.2 'DM Sans', sans-serif; padding: 1px 0 3px; }
.gp-cal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.gp-cal a { border: 1.5px solid var(--ev-line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; text-decoration: none; }

.gp-desc { margin: 4px 0 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.gp-h { margin: 0; font-size: 16px; font-weight: 700; }
.gp-fine { margin: 0; font-size: 13px; line-height: 1.45; opacity: .88; }
.gp-who { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ev-line); padding-top: 14px; margin-top: 4px; }
.gp-who-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.gp-avs { display: flex; }
.gp-av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ev-accent); color: var(--ev-accent-ink); font: 700 12px 'DM Sans', sans-serif; border: 2px solid var(--ev-bg); }
.gp-avs .gp-av + .gp-av { margin-left: -9px; }
.gp-av-more { background: var(--ev-ink); color: var(--ev-bg); }
.gp-av-sm { width: 26px; height: 26px; font-size: 11px; border: 0; }
.gp-acc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.gp-answer, .gp-box { display: flex; flex-direction: column; gap: 10px; background: var(--ev-soft); border-radius: 20px; padding: 16px; margin-top: 6px; }
.gp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gp-lab { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.gp-in { width: 100%; border: 1.5px solid var(--ev-line); background: transparent; color: var(--ev-ink); border-radius: 12px; padding: 12px 13px; font: 500 16px 'DM Sans', sans-serif; }
.gp-in::placeholder { color: inherit; opacity: .6; }
.gp-link-in { font-size: 14px; font-weight: 600; text-overflow: ellipsis; }
.gp-yes, .gp-no, .gp-google { min-height: 52px; border-radius: 14px; font: 700 17px 'DM Sans', sans-serif; cursor: pointer; padding: 0 14px; }
.gp-yes { border: 0; background: var(--ev-accent); color: var(--ev-accent-ink); }
.gp-no, .gp-google { border: 1.5px solid var(--ev-line); background: transparent; color: var(--ev-ink); }
.gp-google { width: 100%; }
.gp-acc .gp-google { width: auto; padding: 0 18px; }
.gp-yes:disabled, .gp-no:disabled { opacity: .55; cursor: default; }
.gp-err { margin: 0; font-size: 14px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gp-err:empty { display: none; }
.gp-err.gp-ok { text-decoration: none; }
.gp-err a { margin-left: 4px; }
.gp-linkbtn { border: 0; background: none; padding: 6px 0; color: inherit; font: 600 13px 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gp-link { font-size: 14px; font-weight: 700; text-underline-offset: 3px; }

.gp-banner, .gp-flash { margin: 0; display: flex; gap: 8px; align-items: center; background: var(--ev-soft); border-radius: 12px; padding: 11px 14px; font-size: 15px; font-weight: 700; }
.gp-banner-going::before { content: ""; width: 16px; height: 9px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg) translate(2px, -2px); flex-shrink: 0; }
.gp-change { margin: 4px 0 0; }

.gp-social { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chat, .gp-ig { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--ev-line); border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 600; text-decoration: none; }
.gp-ann-list { list-style: none; margin: 0; padding: 0; }
.gp-ann { padding: 8px 0; border-top: 1px solid var(--ev-line); }
.gp-ann:first-child { border-top: 0; padding-top: 0; }
.gp-ann-body { margin: 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-ann-meta { font-size: 12px; opacity: .8; }

/* ── phone ── */
@media (max-width: 759px) {
  .gp-title { font-size: 40px; }
  .gp-two { grid-template-columns: minmax(0, 1fr); }
  .gp-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── desktop: cover left, the invite on the right (C-desktop) ── */
@media (min-width: 760px) {
  .gp-top { padding: 18px 40px; }
  .gp-grid { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 44px; padding: 10px 40px 72px; align-items: start; }
  .gp-cover { aspect-ratio: 1 / 1; border-radius: 24px; position: sticky; top: 20px; }
  .gp-title { font-size: 58px; }
  .gp-main { max-width: 560px; }
}