/* ============================================
   Rooted In Christ Florals — Services page
   Extends style.css. Tokens are NOT redefined here.
   Alternating rows with scale contrast and layered depth.
   Motion stays on transform / opacity only.
   ============================================ */

/* ── Pricing note band ──────────────────────── */
.pricing-note {
  background: var(--blush);
  text-align: center;
  padding: var(--space-3) var(--space-4);
}
.pricing-note p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--charcoal);
  max-width: 720px;
  margin: 0 auto;
}

/* ── Service rows: amplify the layering ─────── */
/* style.css gives .service-row a 1fr/1fr grid and .reverse via direction.
   We add an image frame with depth and a number marker so rows read as
   editorial spreads, not an equal-weight table. */

.service-row {
  position: relative;
  gap: var(--space-section);
  padding: var(--space-section) 0;
}

/* Image side: wrap the photo in a frame so it can carry an offset
   accent and stay inside an overflow box (room for the hover scale and
   the one parallax photo, with no layout shift). */
.service-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
}
/* Oversize the photo inside the overflow:hidden frame so the parallax
   translate (js/scroll.js writes an inline transform each frame, which
   would clobber any baseline transform here) has vertical headroom and
   never exposes the frame edge. No transform at rest. */
.service-figure img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.service-row:hover .service-figure img,
.service-row:focus-within .service-figure img {
  transform: scale(1.04);
}

/* Offset accent frame inside the figure for depth (the about-page motif,
   reused here). border only — no layout shift. */
.service-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* Big quiet index number behind each heading for scale contrast. */
.service-row-content { position: relative; }
.service-index {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3rem, 2rem + 6vw, 6rem);
  font-weight: 600;
  line-height: 0.8;
  color: var(--blush);
  display: block;
  margin-bottom: var(--space-1);
  letter-spacing: -0.04em;
}

/* Lead paragraph carries a touch more size than the rest. */
.service-row-content p:first-of-type {
  font-size: var(--text-lg);
  color: var(--charcoal);
  line-height: 1.55;
}

.service-row-content h3 {
  letter-spacing: -0.02em;
}

/* ── Pull-quote scripture moment between rows ── */
.service-scripture {
  background: var(--sage);
  color: var(--charcoal);
  text-align: center;
  padding: var(--space-section) var(--space-4);
}
.service-scripture blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.4;
  color: var(--plum);
}
.service-scripture cite {
  display: block;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  color: var(--charcoal);
  opacity: 0.8;
}

/* ── How to Order steps ─────────────────────── */
.steps-section {
  background: var(--light-gray);
  padding: var(--space-section) var(--space-4);
  text-align: center;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  max-width: 940px;
  margin: var(--space-4) auto 0;
}
.step {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow);
  transition: transform var(--dur-normal) var(--ease-out-expo),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-icon { font-size: 2.4rem; margin-bottom: var(--space-1); }
.step h3 { font-size: var(--text-h3); margin-bottom: var(--space-1); }
.step p { font-size: var(--text-sm); color: var(--gray); }

/* ── Closing CTA ────────────────────────────── */
.services-cta {
  position: relative;
  background: var(--sage-dark);
  color: var(--white);
  text-align: center;
  padding: var(--space-section) var(--space-4);
  overflow: hidden;
}
.services-cta h2 { color: var(--white); margin-bottom: var(--space-2); }
.services-cta p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 480px;
  margin: 0 auto var(--space-3);
}
.services-cta .cta-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
/* Outline button on the dark CTA needs light borders to stay legible. */
.services-cta .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}
.services-cta .btn-outline:hover {
  background: var(--white);
  color: var(--plum);
  border-color: var(--white);
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 1024px) {
  .service-row { gap: var(--space-4); padding: var(--space-5) 0; }
  .service-figure { aspect-ratio: 4 / 3; }
}

/* ── Reduced motion: no hover/focus lift or zoom ── */
@media (prefers-reduced-motion: reduce) {
  .service-row:hover .service-figure img,
  .service-row:focus-within .service-figure img,
  .step:hover { transform: none !important; }
}