/* Shared stylesheet for the detailed product presentations
   (projects/ConsultAssist.html, projects/Ovris.html).
   Each page keeps its own inline-styled visual design (its own brand
   colors, straight from the source mockups) — this file only supplies:
   the back-to-site chrome, scroll-reveal animation, and the mobile
   responsive corrections that inline styles can't express. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { margin: 0; -webkit-font-smoothing: antialiased; }

.pp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  backdrop-filter: blur(10px);
}
.pp-topbar a.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Scroll reveal, applied via data-reveal by js/project-page.js */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms cubic-bezier(.2,.7,.2,1), transform 650ms cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 640px; }

/* Responsive grid helpers — !important is needed because the source
   mockup sections use inline grid-template-columns, which otherwise
   always wins over an external stylesheet. */
@media (max-width: 900px) {
  .pp-page { padding-left: 28px !important; padding-right: 28px !important; }
  .g2, .g3, .g4, .g5 { grid-template-columns: 1fr 1fr !important; }
  .g-hero { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .pp-page { padding-left: 18px !important; padding-right: 18px !important; padding-top: 40px !important; padding-bottom: 40px !important; }
  .g2, .g3, .g4, .g5 { grid-template-columns: 1fr !important; }
  .pp-h1 { font-size: 34px !important; }
  .pp-h2 { font-size: 26px !important; }
  .pp-split { flex-direction: column !important; }
  .pp-topbar { padding: 12px 16px; }
}