/* =========================================================
   BARKER PUBLISHING HOUSE — Service pages v2 ("The Case")
   Warm-artisanal editorial case template. Loads after golden.css.
   Each service rotates: hero side (svc-flip), arch vs straight
   frame, and its own ghost word — so the 7 never look cloned.
   ========================================================= */

/* ---------- Case hero ---------- */
.page-head--svc { padding-bottom: clamp(3rem, 7vw, 6rem); }
.svc-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.svc-hero > * { min-width: 0; }
.page-head--svc .page-title { margin-top: 0.5rem; }
.page-head--svc .lead { max-width: 52ch; }

/* price as a spec-sheet moment */
.svc-price-line {
  display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.svc-price-line .service-price {
  font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--ember-600); font-weight: 380;
}
.svc-price-line .service-price .unit { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); }
.svc-price-meta { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }

/* hero media: warm artisanal frame + clip reveal */
.svc-hero-media { position: relative; }
.svc-hero-media .clip-frame {
  overflow: hidden;
  border-radius: 300px 300px 10px 10px; /* arch top — artisanal signature */
  box-shadow: 0 36px 80px -32px rgba(19,27,47,0.45), 0 3px 10px rgba(19,27,47,0.12);
}
.svc-flip .svc-hero-media .clip-frame { border-radius: 10px; } /* straight variant */
.svc-hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; will-change: transform; }
.svc-hero-media::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border: 1px solid var(--ember-300); opacity: 0.55;
  border-radius: 300px 300px 12px 12px;
}
.svc-flip .svc-hero-media::after { border-radius: 12px; }

/* flipped variant: media on the left */
.svc-flip .svc-hero > :first-child { order: 2; }
.svc-flip .svc-hero > .svc-hero-media { order: 1; }

/* ---------- What you get: editorial checklist ---------- */
ul.prose { list-style: none; padding: 0; display: flex; flex-direction: column; }
ul.prose li {
  position: relative; padding: 0.9rem 0 0.9rem 2.1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text-body);
}
ul.prose li:last-child { border-bottom: 1px solid var(--line-soft); }
ul.prose li::before {
  content: ""; position: absolute; left: 0.2rem; top: 1.35rem;
  width: 14px; height: 1px; background: var(--ember-500);
}

/* ---------- Get-started band: quiet gallery moment ---------- */
.svc-order { position: relative; overflow: hidden; }
.svc-order .container { position: relative; z-index: 2; }
.svc-order-ghost {
  position: absolute; z-index: 0; right: -3%; top: 4%;
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(5rem, 13vw, 12rem); line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1px rgba(204,138,27,0.12);
  pointer-events: none; user-select: none; white-space: nowrap;
}

/* ---------- Get-started band: ambient amber cursor-glow (all 7 pages) ---------- */
.svc-order { --x: 50%; --y: 50%; }
@media (pointer: fine) {
  .svc-order::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(600px circle at var(--x) var(--y), rgba(219,162,49,0.18), transparent 70%);
    opacity: 0; transition: opacity 0.4s ease;
  }
  .svc-order:hover::before { opacity: 1; }
}

/* ---------- Signature: Ghostwriting — cursor-drift ghost word ---------- */
.svc-ghost-nudge { will-change: transform; }

/* ---------- Signature: Book Editing — redline/track-changes accent ---------- */
.svc-redline {
  margin-top: 1.6rem; padding: 1.1rem 1.3rem;
  border-left: 2px solid #A8432F; border-radius: 0 6px 6px 0;
  background: var(--paper-0);
}
.svc-redline p { font-size: 0.94rem; margin: 0.25rem 0; color: var(--text-body); }
.svc-redline del { color: #A8432F; text-decoration-color: #A8432F; }
.svc-redline ins { color: var(--ember-600); text-decoration: none; font-weight: 500; }

/* ---------- Signature: Book Cover Design — real-cover strip ---------- */
.svc-cover-strip { overflow: hidden; }
.svc-strip-track {
  display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 0.6rem; -webkit-overflow-scrolling: touch;
}
.svc-strip-track img {
  flex: 0 0 clamp(130px, 16vw, 190px); aspect-ratio: 2/3; object-fit: cover;
  border-radius: 6px; box-shadow: var(--shadow-lift); scroll-snap-align: start;
}
.svc-strip-hint { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.8rem; }

/* ---------- Signature: Book Translation — EN⇄ES marquee band ---------- */
.svc-lang-marquee {
  overflow: hidden; padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-block: 1px solid var(--line-soft);
}

/* ---------- Signature: Book Formatting — baseline-grid reveal ---------- */
.svc-grid-reveal {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-evenly;
}
.svc-grid-reveal span { height: 1px; background: rgba(255,255,255,0.55); transform-origin: left; }

/* ---------- Signature: Audiobook — waveform bars ---------- */
.svc-waveform { display: flex; align-items: flex-end; gap: 3px; height: 20px; margin-top: 1rem; }
.svc-waveform span { width: 3px; height: 100%; background: var(--ember-500); border-radius: 1px; transform-origin: bottom; animation: svc-wave 1.1s ease-in-out infinite; }
.svc-waveform span:nth-child(2) { animation-delay: 0.1s; }
.svc-waveform span:nth-child(3) { animation-delay: 0.2s; }
.svc-waveform span:nth-child(4) { animation-delay: 0.3s; }
.svc-waveform span:nth-child(5) { animation-delay: 0.15s; }
@keyframes svc-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .svc-hero { grid-template-columns: 1fr; }
  .svc-flip .svc-hero > :first-child { order: 1; }
  .svc-flip .svc-hero > .svc-hero-media { order: 2; }
  .svc-hero-media { max-width: 480px; margin-inline: auto; }
  .svc-hero-media .clip-frame { border-radius: 200px 200px 8px 8px; }
  .svc-hero-media img { aspect-ratio: 4 / 4.4; }
  .svc-strip-track img { flex-basis: clamp(110px, 30vw, 150px); }
  .svc-grid-reveal { display: none; } /* baseline-grid reads as noise on small hero crops */
}