/* =========================================================================
 * demo/page.css — page-local layout glue for the canonical demo.
 *
 * Anything that isn't a component yet lives here:
 *   - hero grid + portrait stack composite
 *   - trust strip grid (StatBlock pattern, planned)
 *   - services grid (3-card layout)
 *   - about grid (image + body)
 *   - newsletter card (planned NewsletterCard pattern, inlined)
 *   - footer market chip band layout (Footer component handles styling)
 *   - reveal animations
 *
 * Promoting these to components is a Phase 2 follow-up; Plan 0001 explicitly
 * keeps the layout glue local for now.
 * ========================================================================= */

/* -------- HERO -------- */
.page-hero {
  padding: var(--s-space-section-y) 0 var(--s-space-3xl);
  position: relative;
  overflow: hidden;
}
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-space-3xl);
  align-items: center;
}
.page-hero__lead { animation: fadeUp 0.8s 0.1s both; }
.page-hero__title {
  margin: 0 0 var(--s-space-lg);
  color: var(--s-text-primary);
}
.page-hero__sub {
  font-size: var(--p-text-19);
  line-height: var(--p-lh-body);
  color: var(--s-text-muted);
  max-width: 520px;
  margin: 0 0 var(--s-space-xl);
  animation: fadeUp 0.8s 0.18s both;
}
.page-hero__chip { margin-bottom: var(--s-space-lg); animation: fadeUp 0.7s 0.05s both; }
.page-hero__form { animation: fadeUp 0.8s 0.26s both; max-width: 540px; }
.page-hero__meta {
  display: flex;
  gap: var(--s-space-lg);
  align-items: center;
  margin-top: var(--s-space-md);
  font-size: var(--p-text-14);
  color: var(--s-text-muted);
  animation: fadeUp 0.8s 0.34s both;
  flex-wrap: wrap;
}
.page-hero__meta-item { display: inline-flex; align-items: center; gap: var(--s-space-xs); }
.page-hero__meta-item svg { color: var(--s-text-brand); }

/* -------- PORTRAIT STACK (planned PortraitStack component, inlined) -------- */
.portrait-stack {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 480px;
  margin-left: auto;
  animation: fadeUp 1s 0.2s both;
}
.portrait-stack__image {
  position: absolute;
  inset: 0;
  border-radius: var(--s-radius-card);
  background:
    radial-gradient(circle at 30% 25%, #d8c4a8 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, var(--p-accent-coral) 0%, transparent 60%),
    linear-gradient(135deg, #c9b89a 0%, var(--p-ink-300) 100%);
  box-shadow: var(--s-shadow-lg);
  overflow: hidden;
}
.portrait-stack__image::after {
  content: "RC";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--p-font-display);
  font-size: 140px;
  font-weight: var(--p-weight-light);
  color: rgba(249, 246, 243, 0.55);
  letter-spacing: -0.04em;
}
.portrait-stack__badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--s-accent-warm);
  color: var(--s-text-primary);
  border-radius: var(--s-radius-control);
  padding: var(--s-space-sm) var(--s-space-lg);
  font-weight: var(--p-weight-semibold);
  font-size: var(--p-text-14);
  box-shadow: var(--s-shadow-md);
  transform: rotate(-4deg);
  display: flex;
  align-items: center;
  gap: var(--s-space-xs);
}
.portrait-stack__badge .star { color: var(--s-text-primary); }
.portrait-stack__quote {
  position: absolute;
  top: -16px;
  right: -28px;
  background: var(--s-surface-raised);
  border-radius: var(--s-radius-panel);
  padding: var(--s-space-md) var(--s-space-lg);
  font-family: var(--p-font-display);
  font-style: italic;
  font-size: var(--p-text-16);
  max-width: 220px;
  line-height: 1.35;
  box-shadow: var(--s-shadow-md);
  transform: rotate(3deg);
}
.portrait-stack__quote cite {
  display: block;
  font-style: normal;
  font-family: var(--p-font-body);
  font-size: var(--p-text-12);
  color: var(--s-text-muted);
  margin-top: var(--s-space-xs);
  font-weight: var(--p-weight-medium);
}
.doodle-arrow {
  position: absolute;
  left: 44%;
  top: 38%;
  width: 80px;
  color: var(--s-text-primary);
  opacity: 0.5;
  transform: rotate(8deg);
  pointer-events: none;
}

/* -------- TRUST STRIP (planned StatBlock pattern, inlined) -------- */
.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-space-xl);
}
.stat__num {
  font-family: var(--p-font-display);
  font-size: var(--p-text-44);
  font-weight: var(--p-weight-regular);
  letter-spacing: var(--p-ls-tight);
  line-height: 1;
  margin-bottom: 6px;
}
.stat__label {
  font-size: var(--p-text-13);
  color: var(--s-text-muted);
  font-weight: var(--p-weight-medium);
}

/* -------- SERVICES (3-card grid) -------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-space-lg);
}

/* -------- ABOUT -------- */
.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--s-space-3xl);
  align-items: center;
}
.about__portrait {
  aspect-ratio: 3/4;
  border-radius: var(--s-radius-card);
  background:
    radial-gradient(circle at 40% 30%, #d8c4a8 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, var(--p-olive-500) 0%, transparent 70%),
    linear-gradient(135deg, var(--p-ink-300) 0%, var(--p-olive-700) 100%);
  box-shadow: var(--s-shadow-lg);
  position: relative;
  overflow: hidden;
}
.about__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(249, 246, 243, 0.18) 0%, transparent 40%);
}
.about__quote {
  margin: 0 0 var(--s-space-xl);
}
.about__body p {
  color: var(--s-text-muted);
  margin: 0 0 var(--s-space-md);
}
.about__sig {
  font-family: var(--p-font-display);
  font-style: italic;
  font-size: var(--p-text-22);
  margin-top: var(--s-space-md);
  color: var(--s-text-primary);
}

/* -------- NEWSLETTER (planned NewsletterCard, inlined) -------- */
.newsletter__card {
  background: var(--s-surface-inverse);
  color: var(--s-text-inverse);
  border-radius: var(--s-radius-card);
  padding: var(--s-space-3xl) 60px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-space-2xl);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--s-shadow-lg);
}
.newsletter__card::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 194, 92, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.newsletter__title {
  font-family: var(--p-font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: var(--p-weight-regular);
  line-height: var(--p-lh-snug);
  letter-spacing: var(--p-ls-tight);
  margin: 0 0 var(--s-space-md);
}
.newsletter__title em {
  font-style: italic;
  color: var(--s-accent-warm);
}
.newsletter__sub {
  color: rgba(249, 246, 243, 0.7);
  font-size: var(--p-text-16);
  margin: 0 0 var(--s-space-xs);
}
.newsletter__form { margin-top: var(--s-space-xl); max-width: 460px; }
.newsletter__trust {
  margin-top: var(--s-space-md);
  font-size: var(--p-text-13);
  color: rgba(249, 246, 243, 0.55);
  display: flex;
  gap: var(--s-space-md);
  align-items: center;
}
.newsletter__avatars { display: flex; }
.newsletter__avatars span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--s-surface-inverse);
  margin-left: -8px;
}
.newsletter__avatars span:first-child  { margin-left: 0; background: var(--p-accent-coral); }
.newsletter__avatars span:nth-child(2) { background: var(--p-accent-yellow); }
.newsletter__avatars span:nth-child(3) { background: var(--p-olive-500); }
.newsletter__avatars span:nth-child(4) { background: var(--p-accent-brick); }

.issue-stack { position: relative; }
.issue-card {
  background: rgba(249, 246, 243, 0.08);
  border: 1px solid rgba(249, 246, 243, 0.12);
  border-radius: var(--s-radius-panel);
  padding: var(--s-space-lg);
  transform: rotate(-2deg);
}
.issue-card--front {
  background: var(--s-accent-warm);
  color: var(--s-text-primary);
  border: 0;
  transform: rotate(3deg) translate(20px, -30px);
  position: relative;
  z-index: -1;
  opacity: 0.95;
}
.issue-card__eyebrow {
  font-size: var(--p-text-12);
  color: rgba(249, 246, 243, 0.5);
  margin-bottom: var(--s-space-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-ls-wide);
  text-transform: uppercase;
}
.issue-card--front .issue-card__eyebrow { color: var(--s-text-primary); }
.issue-card__title {
  font-family: var(--p-font-display);
  font-size: var(--p-text-22);
  line-height: 1.2;
  margin-bottom: var(--s-space-sm);
}
.issue-card__meta {
  font-size: var(--p-text-13);
  color: rgba(249, 246, 243, 0.55);
}

/* -------- ANIMATIONS -------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------- RESPONSIVE -------- */
@media (max-width: 900px) {
  .page-hero__grid,
  .about__grid,
  .newsletter__card { grid-template-columns: 1fr; }
  .portrait-stack { max-width: 360px; margin: var(--s-space-md) auto var(--s-space-2xl); }
  .svc-grid { grid-template-columns: 1fr; }
  .strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-space-lg); }
  .doodle-arrow { display: none; }
  .newsletter__card { padding: var(--s-space-2xl) var(--s-space-xl); }
}