/* =========================================================================
 * setter.rycolston.com — page-local layout glue
 *
 * Long-form prose page (one of three system consumers now using this
 * pattern — third surface; promotion of long-form to a real component
 * is queued in Plan 0002).
 *
 * Patterns:
 *   - Page-hero with VSL drop-in slot (currently hidden until filmed)
 *   - Long-form prose (h2 + body + lists) — repeated across sections
 *   - Tier-card grid for the 4-tier promotion ladder
 *   - Closer block + minimal footer
 * ========================================================================= */

/* -------- HERO -------- */
.page-hero {
  padding-top: var(--s-space-2xl);
  padding-bottom: var(--s-space-2xl);
}
.page-hero__title {
  margin: 0 0 var(--s-space-sm);
}
.page-hero__title em {
  font-style: italic;
  color: var(--s-text-brand);
}
.page-hero__sub {
  font-size: var(--p-text-19);
  color: var(--s-text-muted);
  margin: 0 0 var(--s-space-xl);
}

/* VSL drop-in wrapper. The HTML comment in index.html marks where to add
 * a <div class="vsl"><video> or <iframe>...</div>. This rule sits ready
 * so the video renders at 16/9 with the rest of the system's card radius
 * the moment the markup goes in. Nothing renders until you add the .vsl
 * element to the DOM. */
.vsl {
  aspect-ratio: 16 / 9;
  border-radius: var(--s-radius-card);
  overflow: hidden;
  box-shadow: var(--s-shadow-md);
  margin: var(--s-space-lg) 0 var(--s-space-2xl);
  background: var(--s-surface-sunken);
}
.vsl video,
.vsl iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Long-form prose lives in the LongForm component now
 * (data-platforms/design-system/components/LongForm.md). The only
 * thing left page-local is the section-level vertical padding — not
 * every long-form consumer wants the same rhythm, so it's a per-page
 * override rather than baked into the component. */
.long-form { padding-top: var(--s-space-2xl); padding-bottom: var(--s-space-2xl); }

/* -------- TIER GRID (page-local — 4 cards) -------- */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-space-md);
  margin-top: var(--s-space-xl);
}
.tier-card {
  padding: var(--s-space-lg);
}
.tier-card__tag {
  background: var(--p-olive-100);
  color: var(--s-text-brand);
  margin-bottom: var(--s-space-sm);
}
.tier-card__title {
  margin: 0 0 var(--s-space-md);
}
.tier-card .long-form__list {
  margin-bottom: 0;
}
.tier-card .long-form__list li {
  font-size: var(--p-text-15);
}

/* -------- CLOSER -------- */
.closer p {
  font-size: var(--p-text-17);
  line-height: var(--p-lh-body);
  color: var(--s-text-secondary);
  margin: 0 0 var(--s-space-sm);
}
.closer__signoff {
  margin-top: var(--s-space-lg) !important;
  color: var(--s-text-primary) !important;
}
.closer__sign {
  font-family: var(--p-font-display);
  font-style: italic;
  font-size: var(--p-text-22);
  color: var(--s-text-primary) !important;
  margin: 0 !important;
}

/* -------- MINIMAL FOOTER OVERRIDE (matches sell.rycolston.com pattern) -------- */
.footer--minimal {
  padding-top: var(--s-space-lg);
  padding-bottom: var(--s-space-lg);
}
.footer--minimal p {
  font-size: var(--p-text-13);
  color: var(--s-text-muted);
  margin: 0 0 var(--s-space-xs);
}
.footer--minimal a { color: var(--s-text-muted); }
.footer--minimal a:hover { color: var(--s-text-brand); }
.footer__disclaimer {
  color: var(--s-text-soft);
}

/* -------- RESPONSIVE -------- */
@media (max-width: 720px) {
  .tier-grid { grid-template-columns: 1fr; }
}