/* ==========================================================================
   RanKnight — Shared inner-page components
   (page hero, prose, feature lists, process steps, FAQ, split, contact form)
   ========================================================================== */

/* ---- Page hero (compact, dark) ---- */
.page-hero { position: relative; background: var(--ink); overflow: hidden; padding-block: var(--space-8) var(--space-7); }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 60% at 88% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { max-width: 18ch; margin-bottom: var(--space-4); }
.page-hero h1 .accent { color: var(--color-accent); }
.page-hero__lede { font-size: var(--text-md); color: var(--color-text-muted); max-width: 54ch; }
.page-hero__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Breadcrumb-ish label */
.page-hero .eyebrow { margin-bottom: var(--space-3); }

/* ---- Prose ---- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose p { color: var(--color-text); }
.prose .lede { color: var(--color-text-muted); }

/* ---- Split (text + media) ---- */
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .split--media-first .split__media { order: -1; } }
.split__media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-alt); }
.split__media img { width: 100%; height: auto; display: block; }

/* ---- Feature / checklist ---- */
.checklist { display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text); }
.checklist li svg { flex-shrink: 0; width: 1.4rem; height: 1.4rem; color: var(--color-accent); margin-top: .15rem; }
.checklist li strong { display: block; }
.checklist li span { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Process steps (icon-led, genuine ordered sequence) ---- */
.process { display: grid; gap: var(--space-5); }
@media (min-width: 780px) { .process { grid-template-columns: repeat(3, 1fr); } }
.process__step { position: relative; }
.process__icon {
  width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); margin-bottom: var(--space-3);
}
.process__icon svg { width: 1.55rem; height: 1.55rem; }
.process__step h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.process__step p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* ---- FAQ (visible by default — best for FAQPage rich results) ---- */
.faq { max-width: 780px; display: grid; gap: var(--space-3); margin: 0; }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-card); padding: var(--space-4); }
.faq__item dt {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  color: var(--color-heading); display: flex; align-items: flex-start; gap: var(--space-3);
}
.faq__item dt svg { flex-shrink: 0; width: 1.3rem; height: 1.3rem; color: var(--color-accent); margin-top: .15rem; }
.faq__item dd { margin: var(--space-2) 0 0; padding-left: calc(1.3rem + var(--space-3)); color: var(--color-text-muted); }

/* ---- Contact form ---- */
.contact-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-7); } }
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-heading); }
.field input, .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; border-radius: var(--radius-sm);
  background: var(--color-surface-alt); border: 1.5px solid var(--color-border); color: var(--color-text);
  transition: border-color var(--dur) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--steel); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--color-accent); }
.field textarea { resize: vertical; min-height: 7rem; }
.form__note { font-size: var(--text-sm); color: var(--steel); }
.form__note svg { width: 1rem; height: 1rem; vertical-align: -2px; color: var(--color-accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field__error { color: var(--color-error); font-size: var(--text-sm); min-height: 0; }
.form__success {
  display: none; background: color-mix(in srgb, var(--rank-top) 14%, var(--color-card));
  border: 1px solid color-mix(in srgb, var(--rank-top) 45%, transparent); border-radius: var(--radius);
  padding: var(--space-5); color: var(--color-text);
}
.form__success.is-visible { display: block; }
.form__success h3 { color: var(--color-heading); margin-bottom: var(--space-2); }
.form__success svg { width: 2.2rem; height: 2.2rem; color: var(--rank-top); margin-bottom: var(--space-3); }

/* Contact sidebar */
.contact-aside { display: grid; gap: var(--space-4); }
.contact-aside .card { display: grid; gap: var(--space-3); }
.contact-aside .card p { margin: 0; color: var(--color-text-muted); }
.contact-aside h3 { font-size: var(--text-md); }
.contact-aside a.phone { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-accent); }
.next-steps { display: grid; gap: var(--space-3); }
.next-steps li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-muted); font-size: var(--text-sm); }
.next-steps .n { flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--color-accent); font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); }

/* ---- Section CTA band reuse on inner pages ---- */
.cta-band { position: relative; overflow: hidden; background: var(--ink-800); border-top: 1px solid var(--ink-600); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 140% at 50% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 65%); }
.cta-band .container { position: relative; text-align: center; max-width: 780px; }
.cta-band h2 { margin-bottom: var(--space-4); }
.cta-band .lede { margin-inline: auto; margin-bottom: var(--space-5); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---- Faint knight-on-horse art behind a light section ----
   Ink-on-cream art multiply-blended so the cream vanishes and only faint
   linework shows on the right, behind the copy. */
.section--knight-horse { position: relative; overflow: hidden; }
.section--knight-horse > .container { position: relative; z-index: 1; }
.section--knight-horse::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  /* Whole figure (head visible), a touch smaller, anchored to the right. */
  top: 50%; right: 5%; transform: translateY(-50%);
  height: 104%; aspect-ratio: 1 / 1;
  background: url("../assets/images/brand/knight-horse.webp") center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.15;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 26%);
  mask: linear-gradient(90deg, transparent 0%, #000 26%);
}

/* ---- One big conquered-castle revealed through the LIGHT sections, moving with scroll.
   Same idea as the home knight but inverted: a fixed light layer carries the castle,
   the light sections go transparent to reveal it (dark sections stay opaque and cut it),
   and it drifts with scroll so it feels like one castle moving between both light bands. */
.castle-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  background: var(--paper);
}
.castle-bg::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 150%;
  background: url("../assets/images/brand/castle.webp") center / contain no-repeat;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  opacity: 0.3;
}
body.castle-page { position: relative; background: transparent; }
body.castle-page .section--light { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .castle-bg::before { animation: castle-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100%; }
  }
}
@keyframes castle-parallax {
  from { transform: translate(-50%, -32%); }
  to   { transform: translate(-50%, -72%); }
}
@media (max-width: 760px) {
  .section--knight-horse::after { width: 78%; right: -14%; opacity: 0.08; }
}

/* ---- Testimonial placeholder (honest, labelled) ---- */
.review-placeholder { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: var(--space-6) var(--space-5); text-align: center; color: var(--color-text-muted); }
.review-placeholder strong { color: var(--color-heading); display: block; margin-bottom: var(--space-2); font-family: var(--font-display); }
.review-placeholder p { margin: 0 auto; max-width: 52ch; }
.review-placeholder .btn { margin-top: var(--space-4); }

/* ---- Legal pages (terms / privacy) ---- */
.legal { line-height: 1.7; }
.legal__updated { color: var(--steel); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.legal h2 { font-size: var(--text-lg); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.legal p { color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 68ch; }
.legal ul { color: var(--color-text-muted); margin: 0 0 var(--space-4); padding-left: 1.2rem; max-width: 68ch; }
.legal li { margin-bottom: var(--space-2); }
.legal strong { color: var(--color-heading); }

.contact-email { margin-top: var(--space-2); font-size: var(--text-sm); }