/* ============================================================
   JP ROBOTIC — INTERIOR CONTENT PAGES (NEW FILE)
   Add as its own Asset Injector CSS rule, sitewide (no Path/Pages
   condition — every class below is scoped by its own selector,
   and none of it exists on the homepage, so it can't collide with
   A Homepage Polish.css).
   Load after 00-tokens.css, A JPR New Working II.css, and
   A JPR Working II (add on).css.

   These are the shared building blocks used by the body HTML for
   the Solution pages, How It Works, Case Studies, Industries,
   About, Testimonials, Insights, and FAQ — see the matching
   *-body.html files. Reuses .hero-svc-block, .btn-jpr, .btn-jpr-
   ghost, .eyebrow, .jpr-cta, .h2--xl/.h2--lg, .reveal from the
   files already in place rather than redefining them.
   ============================================================ */

/* ---------------------------------------------------------------
   1. INTERIOR PAGE HERO
   Smaller than the homepage's split hero — just eyebrow + heading
   + lede + optional buttons, left-aligned, capped width.
   --------------------------------------------------------------- */
.jpr-h1-sm {
  font-family: var(--fd) !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--heading) !important;
  margin-bottom: 20px !important;
}
.jpr-lede {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
  color: var(--text);
  max-width: 62ch;
  margin-bottom: 0;
}
.jpr-page-hero .hero-cta-row { margin-top: 24px; }
.jpr-page-hero .hero-cta-row .btn-jpr,
.jpr-page-hero .hero-cta-row .btn-jpr-ghost { margin-top: 0 !important; }

/* ---------------------------------------------------------------
   2. NUMBERED 4-ITEM GRID
   Bordered row wrapper for .hero-svc-block cells (already styled
   in A Homepage Polish.css) so it can be reused off the homepage
   without repeating inline border styles in the markup.
   --------------------------------------------------------------- */
.jpr-grid-4 {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.jpr-grid-4 .hero-svc-block {
  flex: 1 1 50%;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 992px) {
  .jpr-grid-4 .hero-svc-block { flex-basis: 25%; }
}

/* ---------------------------------------------------------------
   3. STEP TIMELINE
   Used for the 3-step "How it works" recap on each Solution page
   and the main 4-step "How It Works" page.
   --------------------------------------------------------------- */
.jpr-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 768px) {
  .jpr-steps { grid-template-columns: repeat(var(--jpr-step-count, 3), 1fr); }
}
.jpr-step {
  padding: 32px 28px 32px 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
  .jpr-step { border-right: 1px solid var(--border); border-bottom: none; padding-right: 24px; }
  .jpr-step:last-child { border-right: none; }
}
.jpr-step-num {
  font-family: var(--fd);
  font-size: 44px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 14px;
}
.jpr-step-eyebrow {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.jpr-step-title {
  font-family: var(--fd) !important;
  color: var(--heading) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 1.15rem !important;
  margin-bottom: 10px !important;
}
.jpr-step-desc { color: var(--text); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.jpr-step-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jpr-step-tags span {
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
}

/* ---------------------------------------------------------------
   4. ALTERNATING MEDIA ROW
   Industries "Sector 01-04" and the Case Studies list both
   alternate an image with a text block — same component, just
   different label text.
   --------------------------------------------------------------- */
.jpr-split-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  border-bottom: 1px solid var(--border);
  padding: var(--sec) 0;
}
.jpr-split-row:last-child { border-bottom: none; }
.jpr-split-media, .jpr-split-body { flex: 1 1 420px; }
.jpr-split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: var(--img-f); }
@media (min-width: 992px) {
  .jpr-split-row.reverse { flex-direction: row-reverse; }
}
.jpr-split-num {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.jpr-split-body p { color: var(--text); font-size: 15px; line-height: 1.8; margin-bottom: 18px; }

/* ---------------------------------------------------------------
   5. TEAM CARD (About)
   --------------------------------------------------------------- */
.jpr-team-card {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding: var(--sec) 0;
}
.jpr-team-card:last-of-type { border-bottom: none; }
.jpr-team-media { flex: 0 0 180px; }
.jpr-team-media img { width: 180px; height: 180px; object-fit: cover; filter: var(--img-f); border: 1px solid var(--border); }
.jpr-team-body { flex: 1 1 420px; }
.jpr-team-tag {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.jpr-team-role { color: var(--blue); font-family: var(--fd); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 14px; margin-bottom: 16px; }
.jpr-team-body p { color: var(--text); font-size: 15px; line-height: 1.8; margin-bottom: 16px; }
.jpr-team-credentials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.jpr-team-credentials span {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 12px;
}

/* ---------------------------------------------------------------
   6. QUOTE CARD (Testimonials)
   --------------------------------------------------------------- */
.jpr-quote-card { border: 1px solid var(--border); padding: 32px; height: 100%; display: flex; flex-direction: column; }
.jpr-quote-mark { font-family: Georgia, serif; font-size: 48px; line-height: 1; color: var(--blue); opacity: .5; margin-bottom: 8px; }
.jpr-quote-text { color: var(--text); font-size: 16px; line-height: 1.7; margin-bottom: 24px; flex-grow: 1; }
.jpr-quote-author { display: flex; align-items: center; gap: 14px; }
.jpr-quote-avatar {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: var(--fd); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.jpr-quote-name { font-family: var(--fd); font-weight: 700; color: var(--heading); text-transform: uppercase; font-size: 13px; }
.jpr-quote-role { color: var(--muted); font-size: 12px; }
.jpr-quote-disclaimer { color: var(--muted); font-size: 12px; font-style: italic; margin-top: 24px; }

/* ---------------------------------------------------------------
   7. ARTICLE CARD (Insights)
   --------------------------------------------------------------- */
.jpr-article-card { border: 1px solid var(--border); padding: 28px; height: 100%; transition: border-color .25s ease; }
.jpr-article-card:hover { border-color: var(--blue); }
.jpr-article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.jpr-article-cat { font-family: var(--fm); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.jpr-article-badge { font-family: var(--fm); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); padding: 3px 8px; }
.jpr-article-title { font-family: var(--fd) !important; color: var(--heading) !important; font-weight: 800 !important; text-transform: uppercase; font-size: 1.1rem !important; line-height: 1.25 !important; margin-bottom: 12px !important; }
.jpr-article-excerpt { color: var(--text); font-size: 14px; line-height: 1.6; }

.jpr-topic-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.jpr-topic-tags span {
  font-family: var(--fm); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); padding: 8px 16px;
  transition: color .2s ease, border-color .2s ease;
}
.jpr-topic-tags span:hover { color: var(--blue); border-color: var(--blue); cursor: default; }

/* ---------------------------------------------------------------
   8. FAQ ACCORDION
   Restyles Bootstrap 5's default accordion markup
   (.accordion / .accordion-item / .accordion-button /
   .accordion-body) to match the theme instead of Bootstrap's
   default white-card look.
   --------------------------------------------------------------- */
.accordion-item { background: transparent !important; border: none !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; }
.accordion-button {
  background: transparent !important;
  color: var(--heading) !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 1rem !important;
  letter-spacing: .01em;
  padding: 22px 4px !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--blue) !important; }
.accordion-button::after { filter: var(--accordion-icon-filter, none); }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); }
.accordion-body { color: var(--text) !important; font-size: 15px; line-height: 1.8; padding: 0 4px 28px !important; }

/* ---------------------------------------------------------------
   9. SIMPLE CENTERED CTA (used when the full jpr-cta watermark
   band would be too heavy — e.g. mid-page "ready to talk?" nudges)
   --------------------------------------------------------------- */
.jpr-cta-inline { text-align: center; padding: var(--sec) 0; border-top: 1px solid var(--border); }
.jpr-cta-inline .eyebrow { justify-content: center; margin-bottom: 16px !important; }