/* Couple wedding websites, RSVP pages and the builder preview.
   Theme colours/fonts arrive as CSS variables on .ws (see THEMES). */

body.guest { margin: 0; background: #fff; -webkit-font-smoothing: antialiased; }
.ws { background: var(--bg); color: var(--text); font: 300 17px/1.7 var(--body); container-type: inline-size; }
.ws *, .ws *::before, .ws *::after { box-sizing: border-box; }
.ws h1, .ws h2, .ws h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0 0 0.4em; color: var(--text); }
.ws p { margin: 0 0 1em; }
.ws a { color: inherit; }
.ws-muted { color: var(--muted); }
.ws-center { text-align: center; }
.small { font-size: 0.85rem; }

.ws-s { padding: clamp(3.5rem, 9cqi, 6.5rem) clamp(16px, 5cqi, 48px); border-bottom: 1px solid var(--line); position: relative; }
.ws-s:last-of-type { border-bottom: 0; }
.ws-narrow { max-width: 640px; margin: 0 auto; text-align: center; }
.ws-h { text-align: center; margin-bottom: 1.75rem; }
.ws-h h2 { font-size: clamp(2.2rem, 5cqi, 3.2rem); font-weight: 300; margin: 0; }
.ws-reo { font: 400 0.75rem/1.4 var(--body); letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.6rem; }
.ws-orn { color: var(--accent); display: block; margin: 1rem auto; }
.ws-p p { white-space: pre-line; }

.ws-btn {
  display: inline-block; margin-top: 0.75rem; padding: 1rem 2.2rem; border-radius: 999px; border: 1px solid var(--text);
  background: var(--text); color: var(--bg) !important; text-decoration: none; cursor: pointer;
  font: 400 0.78rem/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; transition: opacity 0.2s;
}
.ws-btn:hover { opacity: 0.85; }
.ws-btn-ghost { background: transparent; color: var(--text) !important; }

/* Hero */
.ws-hero { text-align: center; }
.ws-hero-classic { min-height: min(78vh, 720px); display: grid; place-items: center; }
.ws-hero-classic .ws-hero-img { width: min(560px, 100%); aspect-ratio: 4 / 5; margin: 0 auto 2.5rem; background-size: cover; background-position: center; border-radius: 999px 999px 0 0; }
.ws-hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5cqi, 4rem); align-items: center; text-align: left; }
.ws-hero-split .ws-hero-img { aspect-ratio: 4 / 5; background-size: cover; background-position: center; border-radius: 4px; }
.ws-hero-split .ws-orn { margin-left: 0; }
@container (max-width: 700px) { .ws-hero-split { grid-template-columns: 1fr; text-align: center; } .ws-hero-split .ws-orn { margin-left: auto; } }
.ws-hero-full { position: relative; min-height: 88vh; display: grid; place-items: center; color: #fff; margin: calc(-1 * clamp(3.5rem, 9cqi, 6.5rem)) calc(-1 * clamp(16px, 5cqi, 48px)); }
.ws-hero-full .ws-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ws-hero-full .ws-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)); }
.ws-hero-full .ws-hero-text { position: relative; padding: 2rem 16px; }
.ws-hero-full .ws-names, .ws-hero-full .ws-eyebrow, .ws-hero-full .ws-sub, .ws-hero-full .ws-orn { color: #fff; }
.ws-eyebrow { font: 400 0.75rem/1.5 var(--body); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.ws-names { font-family: var(--script); font-size: clamp(3.2rem, 10cqi, 6.5rem); font-weight: 300; line-height: 1; margin: 0; }
.ws-sub { font: 400 0.85rem/1.6 var(--body); letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); }
.ws-noir .ws-names { font-style: italic; }

/* Countdown */
.ws-count { text-align: center; display: grid; gap: 0.25rem; }
.ws-count-num { font: 300 clamp(4rem, 12cqi, 7rem)/1 var(--display); color: var(--accent); }
.ws-count-label { font: 400 0.8rem var(--body); letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); text-align: center; display: block; }

/* Story */
.ws-story { max-width: 960px; margin: 0 auto; }
.ws-story.has-img { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 5cqi, 4rem); align-items: center; }
.ws-story.has-img .ws-h { text-align: left; }
.ws-story.has-img .ws-orn { margin-left: 0; }
.ws-story img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.ws-story:not(.has-img) { max-width: 640px; text-align: center; }
@container (max-width: 700px) { .ws-story.has-img { grid-template-columns: 1fr; } .ws-story.has-img .ws-h { text-align: center; } .ws-story.has-img .ws-orn { margin-left: auto; } }

/* Schedule */
.ws-timeline { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 2.25rem; }
.ws-timeline li { display: grid; gap: 0.2rem; }
.ws-timeline h3 { font-size: 1.9rem; margin: 0; }
.ws-timeline p { margin: 0; }
.ws-time { font: 400 0.78rem var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.ws-venue-name { font-size: 1.8rem; }

/* FAQ */
.ws-faq { text-align: left; margin: 0; }
.ws-faq > div { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.ws-faq dt { font: 400 1.35rem var(--display); margin-bottom: 0.35rem; }
.ws-faq dd { margin: 0; color: var(--muted); }

/* Gallery */
.ws-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; max-width: 1100px; margin: 0 auto; }
.ws-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }

/* Quote */
.ws-quote { margin: 0 auto; max-width: 720px; text-align: center; }
.ws-quote blockquote { margin: 0; font: 300 italic clamp(1.6rem, 4cqi, 2.4rem)/1.35 var(--display); }
.ws-quote figcaption { margin-top: 1.25rem; font: 400 0.75rem var(--body); letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); }

.ws-footer { text-align: center; padding: 3.5rem 16px 4rem; color: var(--accent); }
.ws-footer .monogram { width: 84px; height: 84px; margin: 0 auto 0.75rem; }
.ws-footer p { font: 400 0.75rem var(--body); letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); }

.ws-greeting { background: var(--bg); color: var(--muted); text-align: center; font: 400 0.8rem var(--body); letter-spacing: 0.2em; text-transform: uppercase; padding: 0.9rem 16px; border-bottom: 1px solid var(--line); }

/* Builder preview */
.ws-preview { font-size: 15px; }
.ws-preview .ws-hero-classic { min-height: 520px; }
.ws-preview .ws-hero-full { min-height: 560px; }
.ws-selectable { cursor: pointer; transition: box-shadow 0.15s; }
.ws-selectable:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.ws-selectable.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }
.ws-tag { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; font: 400 0.65rem var(--body); letter-spacing: 0.15em; text-transform: uppercase; background: var(--text); color: var(--bg); padding: 0.3rem 0.6rem; border-radius: 99px; opacity: 0; transition: opacity 0.15s; }
.ws-selectable:hover .ws-tag, .ws-selectable.is-selected .ws-tag { opacity: 1; }

/* Guest card pages (password, RSVP, thanks) */
.ws-card-page { min-height: 100vh; display: grid; place-items: center; padding: 3rem 16px; }
.ws-card { width: min(620px, 100%); background: var(--surface); border: 1px solid var(--line); padding: clamp(2rem, 6cqi, 3.5rem); text-align: center; }
.ws-card-title { font-size: clamp(2.4rem, 7cqi, 3.4rem); font-weight: 300; }
.ws-form { display: grid; gap: 1.1rem; text-align: left; margin-top: 1.5rem; }
.ws-form .ws-btn { justify-self: center; }
.ws-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@container (max-width: 480px) { .ws-row { grid-template-columns: 1fr; } }
.ws-form input, .ws-form select, .ws-form textarea {
  font: 300 1rem/1.4 var(--body); color: var(--text); background: var(--bg); width: 100%;
  border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 0.9rem;
}
.ws-form input:focus, .ws-form select:focus, .ws-form textarea:focus { outline: none; border-color: var(--accent); }
.ws-field { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.ws-guest { border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem; margin: 0; display: grid; gap: 0.9rem; }
.ws-guest legend { font: 400 1.4rem var(--display); padding: 0 0.4rem; color: var(--text); }
.ws-choice { display: grid; gap: 0.4rem; }
.ws-choice-label { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.ws-choice label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 8px; }
.ws-choice label:has(input:checked) { border-color: var(--accent); background: var(--bg); }
.ws-choice input { accent-color: var(--accent); width: auto; }
.ws-error { color: #b4554b; margin: 0; }
.ws-links { color: var(--muted); font-size: 0.95rem; }

/* Live-site motion (html.ws-motion is set by wedding.js; never in the builder preview). */
.ws-motion .ws:not(.ws-preview) .ws-s:not(.ws-hero-section) > * { opacity: 0; transform: translateY(26px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.ws-motion .ws:not(.ws-preview) .ws-s.is-in > * { opacity: 1; transform: none; }
.ws-motion .ws:not(.ws-preview) .ws-timeline li { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s ease; }
.ws-motion .ws:not(.ws-preview) .is-in .ws-timeline li { opacity: 1; transform: none; }
.ws-motion .ws:not(.ws-preview) .is-in .ws-timeline li:nth-child(2) { transition-delay: 0.15s; }
.ws-motion .ws:not(.ws-preview) .is-in .ws-timeline li:nth-child(3) { transition-delay: 0.3s; }
.ws-motion .ws:not(.ws-preview) .is-in .ws-timeline li:nth-child(n + 4) { transition-delay: 0.45s; }
.ws-motion .ws:not(.ws-preview) .ws-hero .ws-eyebrow,
.ws-motion .ws:not(.ws-preview) .ws-hero .ws-names,
.ws-motion .ws:not(.ws-preview) .ws-hero .ws-sub,
.ws-motion .ws:not(.ws-preview) .ws-hero .ws-orn { opacity: 0; animation: ws-rise 1.4s cubic-bezier(.2, .8, .2, 1) forwards; }
.ws-motion .ws:not(.ws-preview) .ws-hero .ws-names { animation-delay: 0.25s; }
.ws-motion .ws:not(.ws-preview) .ws-hero .ws-orn { animation-delay: 0.55s; }
.ws-motion .ws:not(.ws-preview) .ws-hero .ws-sub { animation-delay: 0.75s; }
.ws-motion .ws:not(.ws-preview) .ws-hero-img { animation: ws-settle 14s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ws-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ws-settle { from { transform: scale(1.08); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ws * { animation: none !important; transition: none !important; } }