/* Digital invitation showcase — three design directions (foto editorial,
   ilustrado, cartão gravado), each a live, scaled-down peek of the real
   RSVP invitation it represents (public/assets/invite-previews/*.html —
   parametrized copies of the actual hero+card structure/classes from
   rsvp.html + rsvp-templates.css, with fake copy and a placeholder photo),
   not a hand-drawn reinterpretation. The .invite-peek frame renders the
   real page inside an <iframe> at its true design width (480px) and crops
   it right after the presence toggle, before the rest of the form/footer,
   so what's shown matches the actual invitation guests get. */

.invite-showcase {
  padding: 5rem 0;
  background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--event-accent, var(--teal)) 6%, var(--paper)) 55%, var(--paper));
}
.invite-showcase-wrap {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
}
.invite-showcase-intro {
  max-width: 640px;
  margin: 0 auto 3.25rem;
  text-align: center;
}
.invite-showcase-kicker {
  margin: 0;
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--event-accent, var(--teal));
}
.invite-showcase-intro h2 {
  margin: .75rem 0 0;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  color: var(--ink);
}
.invite-showcase-intro p {
  margin: 1rem 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.invite-showcase-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .invite-showcase-grid { grid-template-columns: repeat(3, 1fr); }
}

.invite-showcase-note {
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
}

.invite-mini { display: flex; flex-direction: column; gap: .9rem; }
.invite-mini-label { text-align: center; }
.invite-mini-label strong { display: block; font-size: .95rem; color: var(--ink); }
.invite-mini-label span { display: block; margin-top: .25rem; font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* ── The scaled/cropped live preview ──────────────────────────────────
   --peek-w/--peek-h are unitless px values (the source page's real design
   width, and how tall a slice of it to reveal) set per style below. The
   container is a container-query context so the iframe's scale tracks the
   card's own rendered width with no JS: `scale(100cqw / peek-w)` grows or
   shrinks the embedded page to exactly fill the card at every breakpoint,
   and the wrapper's own aspect-ratio (peek-w/peek-h) crops it to the
   chosen slice — cover photo/name down through the first form fields,
   always stopping short of the submit button and footer. */
.invite-peek {
  --peek-w: 480;
  --peek-h: 700;
  container-type: inline-size;
  position: relative;
  aspect-ratio: var(--peek-w) / var(--peek-h);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / .35);
  background: var(--paper);
  transition: transform .35s ease, box-shadow .35s ease;
}
.invite-mini:hover .invite-peek { transform: translateY(-4px); box-shadow: 0 30px 56px -22px rgb(0 0 0 / .4); }
@media (prefers-reduced-motion: reduce) {
  .invite-peek { transition: none; }
}
.invite-peek iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--peek-w) * 1px);
  height: calc(var(--peek-h) * 1px);
  border: 0;
  pointer-events: none;
  transform-origin: top left;
  transform: scale(calc(100cqw / (var(--peek-w) * 1px)));
}
/* Soft inner shadow at the crop edge signals "there's more below" without
   needing to color-match each template's own background. */
.invite-peek::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -2.5rem 2rem -2rem rgb(0 0 0 / .28);
  pointer-events: none;
}

.invite-peek-editorial { --peek-h: 1030; }
.invite-peek-ilustrado { --peek-h: 965; }
.invite-peek-gravado { --peek-h: 1040; }

/* ── Collaboration placeholder (home "feature row" #4) ───────────────
   Same slot/markup shape as the real screenshot rows (.v2-phone-screen),
   so swapping in planne-collaboration-{light,dark}.webp later is a
   one-line change — replace this placeholder <div> with the same <img
   data-theme-image> pattern already used by the other three rows. */
.v2-phone-placeholder {
  display: grid;
  place-items: center;
  gap: .6rem;
  width: 100%;
  height: 100%;
  background: linear-gradient(165deg, var(--v2-secondary), var(--v2-background));
  color: var(--v2-muted-foreground);
  text-align: center;
  padding: 1.5rem;
}
.v2-phone-placeholder svg { width: 2rem; height: 2rem; color: var(--v2-primary); }
.v2-phone-placeholder span { font-size: .78rem; line-height: 1.55; max-width: 16rem; }